Let's consider template optimization using the example of the website casaeleganza.com — optimizing the homepage.
Why optimization is needed:
When displaying search results, Google takes into account the store's rating and optimization metrics. Stores with higher scores have a better chance of appearing in the top positions of search results.
Tools that help understand optimization directions:
At the start of optimization, Google PageSpeed Tool reported a score of 72 for the desktop version (minimum level — 80). Number of loaded files — 162. Page size — 3.2 MB.
Optimization features to consider:
- Shopify operates over HTTP 1.1 protocol — so there is a limit on the number of files loaded simultaneously — this reduces the store's display speed.
- Not all Google PageSpeed recommendations can be implemented due to Shopify platform limitations.
- Before starting optimization, check the list of installed apps and remove all unnecessary apps.
Optimization suggestions:
1. Use browser cache
This parameter cannot be controlled — Shopify limitation.
2. Remove JavaScript and CSS code that blocks rendering of the top part of the page
2.1. JS optimization
To prevent scripts from blocking content loading, check all script calls and add the "defer" attribute. The async attribute should be used with understanding of script behavior.
2.2. CSS optimization
2.2.1. It is necessary to group various CSS files into one common file as much as possible (HTTP 1.1 limitation). After optimization, there were 2 files left: one for preloading and one for post-loading the page.
2.2.2. For post-loading CSS, the preload command is used in the link tag along with a script that implements preload for incompatible browsers.
2.2.3. The ideal option is to prepare CSS for each page type (homepage, collection, product, page, blog). This helps reduce page rendering time.
2.2.4. For the homepage, a Critical CSS approach was used — where all CSS commands necessary for rendering the homepage are extracted into a separate file, and the remaining CSS commands are loaded via load CSS. The Critical Pass CSS Generator service Critical Pass CSS Generator is used to create the reduced CSS file. To improve the score, the content of the CriticalCSS file is embedded into the page's HTML.
3. Optimize visible content loading
In my case, the slider occupied a large visible area. But due to lazy loading, there was empty space on the screen. To solve this, I enabled display of the first slider image.
4. Optimize images
Google PageSpeed noted that the size of some images can be reduced by 30%. Pay attention to file types (usually jpeg), their dimensions (up to 2000 pixels), and resolution (up to 100 pixels per inch). This recommendation should be approached carefully, as optimized images do not always look good.
5. Minify JavaScript
5.1. It is necessary to group various js files into one common file as much as possible (HTTP 1.1 limitation).
5.2. When adding, check if the original script text is minified and, if necessary, minify it using the Minifier service. If scripts include Liquid source code, minification should be avoided (or partial minification performed).
6. Minify CSS
When adding, check if the original css file text is minified and, if necessary, minify it using the Minifier service. If css includes Liquid source code, minification should be avoided (or partial minification performed).
7. Enable compression
This parameter cannot be controlled — Shopify limitation.
8. Minify HTML
8.1. Minify css styles and js text using the Minifier service.
8.2. Remove extra spaces in html text. The problem is related to how Liquid language commands work. Commands that do not output text create empty lines in the html text. To avoid this, add a hyphen at the beginning and end of the command.
For example, {% comment %} should look like {%- comment -%}.
P.S. To optimize mobile site loading speed, Google created the AMP technology, which speeds up Shopify store loading time.
