How can I compress page code for better store speed?

Solved

How can I compress page code for better store speed?

NomanSohai
Visitor
3 0 2

How I can  Compression Page Code to optimize my store speed?

Accepted Solutions (2)

eStoreSpeed
Explorer
43 6 13

This is an accepted solution.

Hi,

I think you're asking how to minify your code. One way to do that, is to individually copy you're CSS files code to css minifier and click minify.

Then paste the minified code back into your css file. Also keep a backup of your un minified code preferably on your theme, incase something goes wrong.

You can do the same for JS files with ​ javascript minifier.

Hope that helps!

Best,

eStoreSpeedOptimization

Subscribe to Shopify speed improvement newsletter (we never spam)
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution

View solution in original post

JoesIdeas
Shopify Partner
2418 224 645

This is an accepted solution.

@NomanSohai couple additional tips:

1) Backup your live theme first and make the code edits on the new theme.

2) Backup up each file that you are editing first, so your team and future developers have access to the unminified code so that the files / logic are editable. I like to rename the file for a backup, for example if you have a file called custom.css, create a file called old-custom.css, or custom.bak.css and put the original code there so it's available later.

3) If you don't want to spend time on those processes, or if you're not familiar in the code we (Speed Boostr, the Shopify optimization team) have an app called File Optimizer that handles this for you. A bonus is that it will also minify Liquid files - there's not a public tool to do that so if you have Liquid files you can either user our app, or to do it manually search for all the liquid tags, then minify the JS in between those blocks.

4) If you still see minification warnings after compressing your files, check to see if the source of the files is coming from an app. If it is, contact the app developer to request them to minify their files.

Good luck on the optimizations. 👍

• Creator of Order Automator [auto tag, fulfill, connect FBA, order jobs]
• Co-Creator of Product Automator [suite of features for products / collections]
• Shopify developer for 10+ years, store owner for 7 years
• Blog: Shopify Tips, Guides, and Automation Tools

View solution in original post

Replies 2 (2)

eStoreSpeed
Explorer
43 6 13

This is an accepted solution.

Hi,

I think you're asking how to minify your code. One way to do that, is to individually copy you're CSS files code to css minifier and click minify.

Then paste the minified code back into your css file. Also keep a backup of your un minified code preferably on your theme, incase something goes wrong.

You can do the same for JS files with ​ javascript minifier.

Hope that helps!

Best,

eStoreSpeedOptimization

Subscribe to Shopify speed improvement newsletter (we never spam)
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution

JoesIdeas
Shopify Partner
2418 224 645

This is an accepted solution.

@NomanSohai couple additional tips:

1) Backup your live theme first and make the code edits on the new theme.

2) Backup up each file that you are editing first, so your team and future developers have access to the unminified code so that the files / logic are editable. I like to rename the file for a backup, for example if you have a file called custom.css, create a file called old-custom.css, or custom.bak.css and put the original code there so it's available later.

3) If you don't want to spend time on those processes, or if you're not familiar in the code we (Speed Boostr, the Shopify optimization team) have an app called File Optimizer that handles this for you. A bonus is that it will also minify Liquid files - there's not a public tool to do that so if you have Liquid files you can either user our app, or to do it manually search for all the liquid tags, then minify the JS in between those blocks.

4) If you still see minification warnings after compressing your files, check to see if the source of the files is coming from an app. If it is, contact the app developer to request them to minify their files.

Good luck on the optimizations. 👍

• Creator of Order Automator [auto tag, fulfill, connect FBA, order jobs]
• Co-Creator of Product Automator [suite of features for products / collections]
• Shopify developer for 10+ years, store owner for 7 years
• Blog: Shopify Tips, Guides, and Automation Tools