How do I get the store to load quickly?

By Azamat K., 1 March 2021

Introduction

In this article, we concluded that we should first pay attention to the user's comfort, and then to the download speed. The comfort for the user can be a clear interface, meaningful content, safe surfing, and of course the download speed. But we are not talking about the time when the page is fully loaded. It is about the feeling of fast loading. Fast loading can be achieved by improving certain indicators. We'll talk about them later.

 

Measuring tools

Unlike other site speed measurement tools, Pagespeed Insights (PSI) does not show fully loaded time. Instead, PSI focuses on other important metrics that directly affect the user experience for your visitors. Therefore, it is important to understand which indicator responds to what and what factors influence these indicators.

Consider the case. You have contacted the optimization agency. But after optimization, the improvement in full load time is negligible or has remained unchanged. Since you want to save all the resources(apps and analytics) so that there are no changes. In such cases, you should pay attention to speed up the rendering of content plus a quick response. It is very important that the content is loaded quickly and is already ready for interaction. This can be achieved if the rendering process is not blocked by anything. These can be JS scripts, CSS styles, and fonts. Taking this into account, you will clearly understand what you want.

So to understand that your rendering and interaction is slow, you need to pay attention to these PSI indicators when you make a measurement:

If the Speed Index is red, then you need to sound the alarm. Pay more attention to Time to Interactive. All of these metrics that are highlighted have a strong effect on rendering and response.

 

Improved rendering and response

There is no guarantee that fully loaded time will improve. The focus is on improving the user's perception of the site, speeding up such indicators as rendering and response time. And yes, without technical skills, you will not be able to achieve the desired results.

First, measure PSI. If indicators such as Speed Index(SI), Time to Interactive(TTI), and Total Blocking Time(TXT) are red, then your store is hardly comfortable. Perhaps there is a limit on what values to start from to determine the convenience for users. But for us, it is bad when the TTI is more than 10 seconds. TBT-more than 1 second and SI-more than 8 seconds. These indicators should be at least within the yellow zone.

 

 

 

Now you have a general idea of these indicators. Does it remain to find out how to improve these indicators?

Before proceeding, you should also pay attention to factors such as server response time and caching. Shopify usually doesn't have any problems with this, but apps may have problems. Since dads can store their files in their servers.

Let's say you already know all these indicators and they are not rosy, as in most cases. Below we will show a very bad scenario, about what state you should not bring it to. The page speed score is very low, with an average of 10.

The first thing you should pay attention to is JavaScript (JS) and CSS. These resources always block rendering. And the abundance of JS always negatively affects performance. JavaScript has the biggest impact on rendering and response. Therefore, the priority will always be JS files. 

The essence of speeding up rendering and response is to postpone non-critical resources or to hang JS loading on events, such as scrolling, clicking, or mouse movement. Also, load them asynchronously. By doing all this, you can achieve significant improvements. 

However, to do this, you need to have the necessary technical skills. That is, you will need a competent person who will make an adequate analysis with further conscientious work.

How to speed up rendering?

Attributes for asynchronous loading:

<script async src="speedup.js"></script>
<script defer src="speedup.js"></script>

The example above shows how rendering is blocked when parsing HTML. That is, rendering always stops when downloading and executing JS. It's the same with CSS. With the async defer attributes, you can load scripts asynchronously. But with async, rendering is still blocked, so it's better to use defer.

In the case of CSS, you will need to identify the most critical ones and postpone everything else. But there are disadvantages to this approach, as it is difficult to display critical styles for each page. And necessarily, somewhere something will break. Therefore, to reduce the risk, we recommend using this method only on 3 pages: Home, Collections & Product. 

If the size of the critical styles is < 100KB, then connect it inline, inside <style>. Otherwise, it is better to create a new critical. CSS file and attach it. Everything else that is not critical can be connected in this way:

<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>

By taking all these steps, you can significantly speed up rendering, thereby improving the Pagespeed score.

 

How to speed up the response?

If you noticed, then in the picture above when parsing HTML, there is one point, this is the time of the script execution. When using the defer attribute, the script does not interfere with rendering, but after rendering, the script is immediately executed. This may affect the page response. That is, the time when the page should be fully interactive is delayed until the scripts are executed. 

In this case, it is very important to determine which JS files should be immediately connected, and which ones should be postponed even longer. Here we are talking about app files. 

First of all, you need to connect app files only to the pages where they should be used. This way, you can reduce the page size and the number of requests. 

Next, you need to determine and postpone the connection of app files, if they are not immediately needed. In most cases, app files can be attached later, as soon as the page loads all the necessary elements. Theme files will always be needed, but there are times when they can also be postponed. In addition to the delay, you can add events when to attach files. Let's say, by default, you connect JS files after 4 seconds after the page is fully loaded, and then add events such as scrolling, mouse movement, and so on. 

By delaying JS in this way, you can speed up the response. Besides, it will contribute to the improvement of TBT (Total Blocking Time). Which will significantly improve the Pagespeed score.

 

Result

By doing all this, you will not only improve the Pagespeed score but also achieve fast loading. Of course, we wrote briefly, there are still many nuances, describing them this article would be very large. Therefore, this part is already taken over by the developer. He must tell and show what and how. And then you make your own decision.

You should always remember that you can achieve comfort for your users by speeding up your store. They need to get the necessary information quickly. But the time of full loading is not important. The indicators that we have described in this article play an important role.

You may also have other problems, unique cases.

Any questions? You can always contact us via this email hello@speedimize.io

Let's talk about your project


Contact Us