Optimizing Shopify store for Google Insight rating

Lets optimize casaeleganza.com homepage.

Why to optimize?

Google takes in account site’s rating when displays search results. More rating, higher store position would be in search results.

Optimization tools

Regarding casaeleganza – Google PageSpeed Tool scores desktop version 72 (minimum rating – 80). Total loaded files are 162. Homepage size is – 3,2 MB.

Optimization points:

  1. Shopify uses HTTP 1.1 – that’s why there is limit for concurrent files load and descrese site speed.
  2. Some of Google PageSpeed recomendations couldn’t be done because of Shopify platform limits.
  3. Before optimize, check installed apps and delete not used ones.

Google PageSpeed issues:

1. Leverage browser caching

Not available for Shopify.

2. Delete blocking JavaScript и CSS

2.1. JS optimization

To avoid js blocks add “defer” command to all script tags. Async command possible to use regarding script behavour.

2.2. CSS optimization

2.2.1. Group more CSS files in less files (HTTP 1.1 limitation). After optimization left 2 files: one for preload and second for postload.

2.2.2. For CSS preload use preload command for link tag and preload script for incompatible browsers.

2.2.3. Ideal CSS is prepared for every page type (homepage, collection, product, page, post). Such optimization leads to faster browser speed.
2.2.4. For homepage I used Critical CSS – such CSS need to display only homepage and inserted direct to homepage HTML. All other CSS commands loaded after full page load. To create critical CSS use Critical Pass CSS Generator.

3. Prioritize visible content

In casaeleganza’s case top slider occupied visible part of homepage. And it uses lazyload, so when homepage started slider was filled by blank space. Google recommends not to use lazyloading above the fold (visible part of page). So I turned off lazyload for first slide.

4. Optimize images

Google PageSpeed report contained recommendation to compress images by 30%. Take in account image file type (usually jpeg) and it’s size (below 2000 px) and dimension (below 100 px for inch). Use this recondation carefully as not optimized images look great.

5. Minify JavaScript

5.1. Try to group few js file in 1 bigger file (HTTP 1.1 limitation).

5.2. Check if js is minimized and if not use Minifier. If js contains Liquid code, it’s not possible to minimize (or partial minimize).

6. Minify CSS

To minimize CSS use Minifier. If CSS files includes Liquid code, it’s not possible to minimize (or partial minimize).

7. Enable compression

Not available for Shopify.

8. Minify HTML

8.1. Minimize inline js and css by Minifier.

8.2. Trim all empty rows in html. Usually such empty rows left after Liquid commands. So use hyphen in start and at the end of Liquid command.

For example, {% comment %} would be {%- comment -%}.

 

P.S. Best Practices for Speeding Up Your Web Site and using Google AMP technology for optimizing mobile browsers page load. There are some apps to AMPs Shopify store: RocketAMP, FireAMP, AMP by Shop Sheriff.

 

Posted on September 11, 2018 in Uncategorized

Share the Story

About the Author

Leave a reply

Your email address will not be published. Required fields are marked *

Back to Top