Оптимизация работы шаблонов Shopify

Optimizing Shopify Templates

Let's consider the optimization of the template on the example of the site casaeleganza.com - we will optimize the main page.

Why do you need optimization:

When displaying search results, Google takes into account ranking and store optimization metrics. Stores with higher scores are more likely to be in the first positions of search results.

Tools to help you understand the direction of optimization:

At the time of the start of optimization, Google PageSpeed ​​Tool reported a rating of 72 for the desktop version (the minimum level is 80). The number of uploaded files - 162. Page size - 3.2 Mb.

Features of the optimization that need to be taken into account:

  1. Shopify runs over HTTP 1.1 - so there is a limit on the number of files uploaded at the same time - this slows down the display speed of the store.
  2. Not all Google PageSpeed ​​recommendations can be met due to limitations of the Shopify platform
  3. Before starting optimization, check the list of installed applications and remove all unnecessary applications

Suggestions for optimization:

1. Use your browser cache

This parameter cannot be controlled - it is a Shopify limitation.

2. Remove JavaScript and CSS blocking the top of the page

2.1. JS Optimization

To prevent scripts from blocking content loading, you need to check the call of all scripts and add the "defer" command. The async command should be used with an understanding of how scripts work.

 JS Optimization for Shopify

2.2. Optimizing CSS

2.2.1. It is required to group different css files into one common file as much as possible (HTTP 1.1 limitation). After the optimization, there are 2 files left: one for preloading and the second for postloading the page.

2.2.2. To postload CSS, use the preload command in the link tag and script that implements preload for incompatible browsers .

 Optimize CSS for Shopify

2.2.3. Ideal CSS preparation for every type of page (home, collection, product, page, blog). This will reduce the page rendering speed.

2.2.4. When displaying the main page, the Critical CSS option was used - when all the CSS commands necessary for displaying the main page are highlighted in a separate file, and the remaining CSS commands are loaded via load CSS. The service Critical Pass CSS Generator is used to create a shorthand CSS file ... To increase the ranking, the content of the CriticalCSS file is embedded in the html of the page.

Optimize CSS for Shopify

3. Optimize loading of visible content

In my case, the slider occupied most of the visible part. But due to the lazy loading mechanism, there was an empty space on the screen. To solve this problem, I enabled the display of the first slider image.

Optimizing Shopify Store Speed

4. Optimize your images

Google PageSpeed ​​noted that the size of some images can be reduced by 30%. Look for file types (usually jpeg), file sizes (up to 2000 pixels), and resolution (up to 100 pixels per inch). This recommendation must be approached with caution, since Optimized images do not always look good.

5. Minify JavaScript

 JS minification for Shopify

5.1. It is required to group different js files into one common file as much as possible (HTTP 1.1 limitation).

5.2. When adding, check if the source text of the scripts is minified and, if necessary, minify it using the service Minifier . If the scripts include the source code for Liquid, then the minimization should be abandoned (or partially minimized).

6. Minify your CSS

When adding, check if the source text of the css files is minified and, if necessary, minify it using the service Minifier . If the css includes the source code for Liquid, then the minimization should be abandoned (or partially minimized).

7. Turn on compression

This parameter cannot be controlled - Shopify restriction

8. Minify HTML

8.1. Minify css styles and js text using Minifier . < / p>

8.2. Remove extra spaces in html text. The problem is related to the work of the commands of the liquid language. Commands that do not output text generate an empty line in the html text. To avoid this, add a hyphen at the beginning and end of the command.

For example, {% comment%} would look like {% - comment -%}.

P.S. To optimize the loading speed of the mobile version of the site, Google created AMP technology, which speeds up Shopify store loading time .