Improve Pagespeed Performance in Mobile - LCP / CLS / Time to Interactive | Call for expert user

Question

From about 2 months ago, I got back to work on my fully custom ecommerce regarding the optimization of the front-end on pagespeed, in view that googlebot now carries out measurements of parameters such as CLS and LCP for which they have the criticality and part of determining if that particular page goes under index in the google crawler.

I did all the optimizations that I managed like:

• extraction of critical css online
• all non-critical CSS merged and parsed inline
• mod_pagespeed
• image and JS under CDN
• nginx optimization
• moved non-core JS below close to body closure where possible
• deferring non critical JS
• preloading, prefetch and many other things that I don't remember now done during the long nights spent studying the template

So now, i reach a great result compared of the previous 2 months.

The only thing I can't explain is that I have high Time To interactive, CLS and LCP in mobile mode, When the desktop version is just fine.

I am puzzling myself, trying to find the key to the solution.

This is an example of a product page: https://developers.google.com/speed/pagespeed/insights/?hl=it&url=https%3A%2F%2Fshop.biollamotors.it%2Fcatalogo%2FSS-Y6SO4-HET-TERMINALI-AKRAPOVIC-YAMAHA-FZ-6-S2-FZ-6-FAZER-S2-2004-2009-TITANIO--2405620

and here is the homepage which has acceptable values compared to the product page, but still the time to interactive is much higher than the desktop: https://developers.google.com/speed/pagespeed/insights/?hl=it&url=https%3A%2F%2Fshop.biollamotors.it%2F

Thanks in advance to all expert mode users who will be of help to me.

Answer 1

Why are my mobile scores lower than desktop?

The mobile test uses network throttling and CPU throttling to simulate a mid range device on 4G so you will always get lower scores for mobile.

You may find this related answer I gave useful on the difference between how the page loads as you see it and how Lighthouse applies throttling (along with how to make lighthouse use applied throttling so you can see the slowdown in real time), however I have included the key information in this answer and how it applies to your circumstances.

Simulated Network Throttling

When you run an audit it applies 150ms latency to each request and also limits download speed to 1.6 Megabits (200 kilobytes) per second and upload to 750 megabits (94 kilobytes) per second.

This is very likely to affect your Largest Contentful Paint (LCP) as resources take a lot longer to download.

This throttling is done via an algorithm rather than applied (it is simulated) so you don't see the slower load times.

CPU throttling

Lighthouse applies a 4x slowdown to your CPU to simulate a mid-tier mobile phone performance.

If your JavaScript payload is heavy this could block the main thread and delay rendering. Or if you dynamically insert elements using JavaScript it can delay LCP for the same reason.

This affects your Time To Interactive most out of the items you listed.

This throttling is also done via an algorithm rather than applied (it is simulated) so you don't see the slower processing times.

What do you need to do to improve your scores?

Focus on your JavaScript.

You have 5 blocking scripts for a start, just add defer to them as you have done the others (or better yet async if you know how to handle async JS loading).

Secondly the payload is over 400kb of JS (uncompressed) - if you notice your scripts take 2.3 seconds to evaluate.

Strip out anything you don't need and also run a trace in the "performance" tab in Developer tools and learn how to find long running tasks and performance bottlenecks.

Look at reducing the number of network requests, because of the higher latency of a 4G network this can add several seconds to you load time if you have a lot of requests.

Combine as much CSS and JS as you can (and you only need to inline your critical CSS not the entire page CSS, find all items used "above the fold" and inline them only, at the moment you seem to be sending the whole site CSS inline which is going to add a lot of page weight).

Finally your high Cumulative Layout Shift (CLS) is (in part) because you are using JS to hide items (for example the modal with ID comp-modal appears to be hidden with JS) on page load, but they have already rendered by the time that JS runs, easily fixed by hiding them within your inline CSS rather than JavaScript.

Other than that you just need to follow the guidance that the Lighthouse report gives you (you may not have paid much attention to the "Diagnostics" section yet, start looking there at anything that has a red triangle or orange square next to it, each item provides useful information on things that may need optimisation.).

That should be enough to get you started.