Why is my Google ranking dropping due to slow LCP despite high GTMetrix score?

[ferero18]

My Google Ranking has dropped overall after getting a "need improvement' URLs in the Core Web Vitals on google search console. The main issue is LCP taking longer than 2.5s to load - but also the overall speed score is about 34 on pagespeed.web.dev. 

A weird thing is that my speed score on GTMetrix is like 95 and LCP is like 600ms, so idk why I have such a poor ranking according to Google. Everything is loading just fine on my phone and laptop in incognito.

Here are a few things I've done by now:

- Compressed my images that are already no more than 80KB each (and up to 7 images)

- Removed any leftover code from deleted apps

- Deleted unnecessary apps (I only use 6 or 7 as of now)

The page speed ranking increased from 29 to 34, but that's about it. LCP decreased by 1-2s, now being at 5.2s.

When I checked the page speed insights, the thing that is taking the most time is the Shopify script/JavaScript

All the apps are delaying the load by maybe 20-140ms, which is not a lot, but script evaluation and all other Shopify stuff like loading layout etc take the most time, maybe 1-2s each. Here's what takes the most:

- Script Evaluation 4,2s

- JavaScript Execution Time 4.1s (Which 3.1s is attributed to Shopify's default theme code)

- Unused JavaScript 1.9s

- Style & Layout 1.3s

- Other 1.3s

Since the issue is mainly the Shopify default code itself, and I don't know how to code at all, I don't know what else I could do in this case. Any tips/ideas?

[kazi]

Hello @ferero18  

                                       Google page speed, GTmetrix etc uses different devices, browser, tools thats why they have different metrics. You can find details here https://gtmetrix.com/blog/why-is-my-gtmetrix-performance-score-different-from-pagespeed-insights-web...

Since our websites are in google.com we need to follow google page speed. You can minimize each issues following google resources or hire any shopify developer.

[flareAI]

Hello @ferero18,

This is flareAI: your Fully Automated Free Sales Machine. I hope you're having a good day. We are helping Shopify Merchants grow their store presence in Google and other major sales channels and generate sales of $5 million in sales from Google Search, on autopilot.

If my suggestions is helpful to you, please let me know by giving a like or marking it as a solution.

I checked in Google Chrome. Even in Chrome, the store is loading slowly.

Also, I checked the "Network" tab in the developer tool window for the Home page and saw images are taking more time to load.

By following below steps, you can significantly speed up your Shopify store:

1. Image compression is important and a necessity for faster loading web pages. Make sure your images are of good quality and do not add too many images on a single page.
2. Reduce the HTTP requests. For example: Combine & inline your CSS scripts
3. Minimize broken links and redirects - Avoid unnecessary Redirects and fix broken links
4. Always choose a theme that is responsive, fast, and takes minimal time to load the page
If you choose a theme with numerous sliders, fancy animations, advanced navigation systems, etc., will affect your page speed. If your theme is loading slow, consider disabling the theme features you don't need.
5. Don't add too many images on a page
Adding too many images on a page can be frustrating. It can significantly slow the load time of your website. Also, it can overwhelm visitors, which will ultimately result in a poor user experience, a high bounce rate, and a high probability of lower rankings in relative search results.
6. Remove all unwanted Shopify Apps which you are not using
You should disable app features you don't use, or you can remove the app if you don't need it. If you are removing an app make sure to remove code that was added as part of the app install process.
7. Replace GIFs with static images
8. You can run the Shopify Theme Inspector for Chrome to identify the lines of code that are slowing down pages in your online store.
9. Removing unused app code is a best practice that avoids running code for unused features, and makes your theme code easier to read.
10. Themes contain CSS, JS, HTML which can increase and affect your store speed. So disable theme features you don't use.
11. Loading extra data your customers aren't using can impact your store speed without adding value.
12. Use a System font which is a font that is already installed on most computers. For example: Segoe UI, Times New Roman. If you use a font that does not yet exist on your customer's computer, then the font has to be downloaded before your text can be displayed. This impacts the time that your store takes to load.
13. Use minified CSS and JS files

If your website takes longer than 3 seconds to load, 40% of your traffic will be lost. Speed will affect the Google indexing. When your customers search on Google, your product can be found only if your page is indexed. flareAI helps to get your new products found on Google. Get sales from Google and 20+ world's largest free sales channels, Single click start!

If you found the answer helpful consider supporting the Shopify Community by giving it a Like + Accept the solution.

Gina
flareAI

[Cedcommerce]

Hi @ferero18,

Can you share your store URL so that we can do a comprehensive study on the issues, and let you know the steps on how the web vitals and speed scores of your website can be improved? 

For your information, Core Web Vitals along with website speed scores play a significant role in improving the website’s overall ranking on google. 

On GtMetrix & Page speed insights, you witnessed such contrasting scores because GtMetrix measures the performance of the website on the desktop.

Whereas the lighthouse or page speed insights primarily measure performance on mobile devices whose scores are generally lesser compared to desktop scores.       

Web vitals majorly comprises four parameters such as LCP, FCP, CLS & TBT along with other parameters. And so LCP plays a crucial role in measuring web vitals. 

To improve your LCP score, you need to ensure that the most important scripts and CSS files, which are responsible for the layout of the website load first, then other resource files can load afterward.

In order to work on the CSS files you should preload them and then use them on your website code. And to work on the JS files, you can use async and defer attributes.

Hope it helps. Let us know if you need any other help.

Thanks & Regards
CedCommerce

[ferero18]

1. Would you elaborate on how can I preload my css files? If you could give me an example of any Shopify theme when you're preloading any css file, it would be great, as a straight example would be the best way to understand it

2. Regarding defer and async the JS - could you give me an example as well? I've googled it too, but didn't quite understand 

<script src="{{ 'predictive-search.js' | asset_url }}" defer="defer"></script>

I've found this piece of code in my theme.liquid - is that how it should look like? With just replacing the 'predictive-search.js" - with the JS file I want to defer? 

3. Where do I actually defer/async or preload the CSS? Meaning in what code file do I write it? Do I write the code to defering JS and preloading CSS in the "theme.liquid" ?

And thank you for your answer - you've cleared my head regarding this issue and I have a clear and overall understanding of what should be done, highly appreciate it.

[ferero18]

Actually, I've managed to figure out how to preload the CSS, but after 4 hours of research - I still have problems with deferring the JS.

On the pagespeed.web.dev I have a few JavaScript links, or "text JavaScript" and I'm using this code to defer that text JS:

<script type="text/javascript" src="link/blablabla" defer ></script>

Right before </body> in the theme.liquid. Unfortunately the links inside that defer script are still present in the page speed insights and nothing has improved, so I guess I've had to do something wrong. Any tips on how to correct that code?