How LCP can affect speed site performance

Project date: 8 December 2020

One Up Skates

Before we started

The client's shop was pretty quick. Compared to all the other shops we have worked with, this one was the fastest. The GTmetrix results showed that, on average, the site was loaded in 5 seconds. Despite this, Pagespeed's score was low. With 5 tests, the lowest score is 18 and the highest is 28. The client turned to us exclusively with a request to improve the Pagespeed Insights (PI) score and we helped with this.

Problem

Largest Contentful Paint (LCP) is one of the Core Web Vitals metrics provided by Google.

Largest Contentful Paint (LCP): measures loading performance. To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading.

Correcting this indicator guarantees an improvement in the score. And we made an emphasis on this.

 

 

Solution

LCP depends on many factors and some of them are extremely difficult to influence. Below are the factors that Google mention:

  • Slow server response times
  • Render-blocking JavaScript and CSS
  • Resource load times
  • Client-side rendering
 

Almost always, it is the images that PI points to. In the client's case, the slideshow image took a long time to load. And the long loading was influenced by 2 factors. This is the execution of js scripts and the size of the image itself.

Having previously optimized js files, and minimized this, postponing the downloads, removing unnecessary ones from the files, and putting checks on them, it turned out to achieve minor improvements.

Shopify provides several options for images at once and often the LCP indicator will depend on the correct selection of images depending on the screen size of mobile devices. Specified the size of the images and they loaded correctly. But PI still showed poor LCP results. This was also the problem.

We started to explore options for fixing it. We experimented a lot and found out one little nuance. The image in the slideshow is given a style property of height 100%. When we remove this property, the LCP is noticeably improved up to 3 seconds. We came to the conclusion that we need to remove this property, thereby hiding the image and adding the property only when it is loaded by specifying a timer. We also had to check on mobile devices, since the problem is only on a mobile. Then we set a timer for 3 seconds. Fires only after the page have loaded. That is, in this way we, firstly, wait for the picture to be fully loaded, and secondly, as soon as it is loaded, we immediately add the 100% height property so that the picture is displayed. Thus, we have improved the LCP to 2.2 seconds. And that improved the PI score. 

At the moment the score is 57.

 

 

29

Increase PageSpeed Score

244KB

Decrease number of requests

15

Decrease request count

Review from customer: Growave Labs were super helpful and responsive to my request for help, not to mention amazingly friendly and efficient. The store saw a visible improvement in performance after their help, and they also left me with tips on how I can further improve my store.

Let's talk about your project


Contact Us