How to resolve uncompressed JavaScript and CSS issues on product pages?

Technical Q&A
1

Hi,

My SEO tool (Semrush) is reporting 595 issues with uncompressed JavaScript and CSS. The affected pages all seem to be product pages.

Shopify support tells me that JavaScript and CSS compression is handled by the theme. My store is using a Shopify theme (Debut), but Shopify support tells me this issue is beyond the scope of their support and I should consider hiring a Shopify expert.

The dashboard is currently reporting a slow speed of 34. Google PageSpeed Insights is reporting a speed of 56 for the store’s mobile version, and it also reports some unused JavaScript and CSS and unminified JS.

What do you folks think? What would be the best way to resolve this issue? Is it time to hire a Shopify expert?

Thanks.

AK

2

If the files are uncompressed in your theme, you should be able to solve this in-house without an expert.

Here’s how:

  1. Run a product page through the Shopify Analyzer to see what files are triggering warnings.

  2. For any “3rd party” files, these are related to apps. For these, send a screenshot of the file name or just send a url to your page, to the app developer and request that they minify their file(s).

  3. For any “local” files, these are in your theme Assets folder and can be minified.

To minify files:

a) Easy way is use File Optimizer app, this allows you to minify css / js / liquid files, back them up, and do it all without editing files.

b) Free way is use a minifier tool (just google “css minify tool” and “js minify tool”, for example https://cssminifier.com and https://jscompress.com/).

If going with option B, here’s how you do it:

  1. Duplicate your theme first just in case you make a mistake.

  2. Create a new file to keep the original code for backup, or example theme.css.bak

  3. Copy the code from your original file (like theme.css), then paste in the backup file (theme.css.bak) and save that.

  4. Paste that code in the minifier tool and minify the code.

  5. Copy the minified code and paste it in your original file (theme.css)

  6. Preview the theme and make sure everything looks good. If yes, then publish.

Shopify is template based, so if you fix minify warnings on 1 product page, it will likely apply to all your product pages.

2 Likes
3

Thanks, @JoesIdeas

1 Like
4

Hi JoesIdeas! Could you please help me. I actually did what you say here in this post I compressed the css and js but the mistake that I did I didn’t backup the theme or create the duplicate file for the code im stuck now many parts of my site is broken like drop down menu footer menu and FaQ section I contact Kalles theme support no answer Shopify support they couldn’t do anything I really need a serious help please if you could

5

Sure, here are a couple theme developers I recommend:

Either of them should be able to investigate the issues and fix them for you.