Hello,
I have recently started seeing the following issue on Google Search Console (LCP issue: longer than 4s (mobile))
On further analysis, I found that this happens when it takes a lot of time to load the page. As a part of opportunities for improvement shown by Chrome Dev Tools Lighthouse report, it shows the following opportunities
So by the looks of it, Shopify scripts and theme scss files are the ones responsible for causing the max delay. Does anyone how this can be improved.
I am using the Debut theme. Also currently, every additional css I add to theme.scss.css which will only make the problem worse. Does anybody have a better solution for adding new css rules.
Also feel free, if you think I am completely wrong and LCP issue is caused by something completely different.
This is affecting my website load time on mobile. Your help is highly appreciated.
TIA.
Hi TIA,
To improve the LCP score, you need to determine which element is LCP. It’s easy to do that because the Google Pagespeed Insights(GPI) will let you know that in the test result. After you run a test on GPI, scroll down to the “Largest Contentful Paint element”, please refer to the screenshot https://prnt.sc/t2i5gj . Sometimes the Largest Contentful Paint element is different in mobile and desktop.
After you know which element is the Largest Contentful Paint element, you need to adjust the code to display it fastest possible. You should move all external CSS, JS to the bottom of page, add the critical CSS as inline CSS in the head tag. If you are using the Google Fonts, use
<link rel="preconnect" href="...">
to connect the GOOGLE Font server first, that will helps to load the font faster, more details at https://web.dev/optimize-lcp. You can refer to the testing result of our demo store https://developers.google.com/speed/pagespeed/insights/?hl=en&url=https%3A%2F%2Fbt-vodoma-1.myshopify.com%2F&tab=mobile . This is one of demo stores of our theme.
I hope this helps.
1 Like
Hello David,
Many thanks for your response.
I did take a look at the LCP element in Google PageSpeed Insights (GPI). It is the hero image. This element happens to be LCP for both desktop and mobile. However, on the desktop, it loads in 1.5s whereas on mobile it takes 5.8s. Please find the screenshot of the LCP element.
I have compressed the hero image and also see that Shopify has automatically added different srcset for different screen sizes. So not sure why the difference in load times. Here’s my website: https://www.mangoes4u.com
I also took a look at your demo website. On your website, even you have a hero image however that isn’t the LCP element. The LCP element is actually the lorem ipsum
element. How have you managed to do that? How does one make a particular element to be LCP and not some other element.
Thanks a ton once again for your help.
Regards.
I see this an old thread but I have the same issue. Following the steps outlined I’ve been presented with a graph showing the following#. This seems to be all Shopify issues. The three images on the page have been compressed to the max.
