Let's look at template optimization by the example of casaeleganza.com - optimize the home page.
Why do we need optimization:
When displaying search results, Google takes into account the store's ranking and optimization scores. Stores with higher scores have a better chance of being at the top of search results.
Tools to help understand optimization directions:
At the start of optimization, Google PageSpeed Tool reported a rating of 72 for the desktop version (the minimum level is 80). The number of downloads is 162. Page size - 3.2 Mb.
The peculiarities of performing optimization to be taken into account:
- Shopify works over the HTTP 1.1 protocol - so there is a limit on the number of simultaneously uploaded files - this reduces the speed of the store display.
- Not all Google PageSpeed recommendations may be implemented due to limitations of the Shopify platform
- Before you start optimization, check the list of installed applications and delete all unnecessary ones
Optimization suggestions:
- Use browser cache.
You won't be able to manage this option - it's a Shopify limitation. - Remove JavaScript and CSS code blocking the top of the page
- Optimizing JS
To prevent the scripts from blocking the content loading it is necessary to check the calling of all the scripts and add the "defer" command. The async command should be used with an understanding of how scripts work.
- CSS optimization
- It's necessary to group different css files into one common file (HTTP 1.1 limitation) as much as possible. After optimization there are two files: one for pre-loading and one for post-loading.
- For post-loading CSS applies in the link tag preload command and a script that implements preload for incompatible browsers.
- It is ideal to prepare CSS for each type of page (Home, Collection, Product, Page, Blog). Due to this you can reduce the speed of page display.
- When displaying the main page the Critical CSS variant was used - when all the CSS commands needed to display the main page are separated into a separate file and the remaining CSS commands are loaded via load CSS. The Critical Pass CSS Generator service is used to create a shortened CSS file. To improve ranking, the contents of the CriticalCSS file is embedded in html pages.
- Optimize the loading of visible content
In my case, the slider took up most of the visible content. But because of the delayed loading mechanism, there was empty space on the screen. To solve this problem, I enabled the first image of the slider to be displayed.
- optimize images
Google PageSpeed noted that the size of some images can be reduced by 30%. Pay attention to file types (usually jpeg), size (up to 2000 pixels) and resolution (up to 100 pixels per inch). This recommendation should be approached with caution, as optimized images do not always look good. - Reduce JavaScript
- It is required to group different js files into one common file as much as possible (HTTP 1.1 limitation).
- When adding scripts, check if the source code is minimized and, if necessary, minimize it with the Minifier service. If the scripts include source code in Liquid, you should refuse to minimize (or do partial minimization).
- Minify CSS.
When you add css files, check if the source code is minimized and, if necessary, minimize them with the Minifier service. If css include source code on Liquid, then minimization should be discarded (or do partial minimization). - Enable compression.
There is no way to control this option - it is a Shopify limitation. - Minify HTML
- Minify css styles and js text with the Minifier service.
- Remove extra spaces in the html text. The problem has to do with the way the liquid language commands work. Commands which don't output text form a blank line in the html text. To avoid this, you need to add a hyphen at the beginning and end of the command.
- Optimizing JS
For example, {% comment %} would look like this {%- comment -%}.
P.S. To optimize the mobile site loading speed Google has created the AMP technology which speeds up Shopify store load time.