How can I improve Core Web Vitals on Google without using general advice?

[ferero18]

I'm looking not for very general advice i.e "reduce unused javascript" - but rather for an actual way to solve my problems - unless the issue is more complicated of course. I already know the general things to do - because pagespeed.web.dev tells you all about it - but I don't actually know how to do it.

There were a few simple tweaks I've done that improved my page speed a lot, i.e preloading base.css gave me a boost of +8-10 points in google page speed - only 1 line of code, very simple to sort out by a non-technical person. And a lot of site speed issues can be solved by one-liners like that - or repeating a one-liner with different JS/CSS scripts - I believe.

And it looks to me that a good mobile site speed of 80+ can be achieved by just simply sorting out the critical and non-critical JS/CSS - so that they could be requested by the system in the correct order. I just don't know the proper function to do so, as defer/async doesn't work - which I'll explain in question No.3

1. LCP (Already tried compressing images, all are below 100KB)

How can I get LCP as first/one of the first things requested by the system (or simply being fully loaded and visible as one of the first)? I'm asking for an actual piece of code that could do that or some none-general advice - I'm using Sense theme.

I've spent days if not weeks searching through the web about this issue - and I haven't found a code that could prioritize the LCP. Wouldn't it be as simple as using some kind of similar attributes as async for all images? Or using some kind of override option assigned to images - just to load them asap while ignoring everything else until they're loaded?

2. How can I reduce unused javascript?

I've already tried using defer and async - they don't work for this particular metric that you see below

3. How to reduce the impact of third-party code?

The same situation - defer or async does not work. Here's the line of code I'm using to use this function:

<script src="link,com/bla/blalala8483.js" type="text/javascript" defer></script>

Not only does it not work - but it also makes my site speed much, much worse - and the TBT almost doubles (no matter if it's async or defer). There are no errors on the console log when I inspect my website, so I assume the code is written properly, but the function itself is harming not helping. The weird thing is after using defer/async on few scripts - the blocking time of all other scripts that I haven't touched also increases. The overall Site Speed is drops by a solid 10-15 points after applying defer/async, basically. I've tested the scripts by putting them first before </head> and then before </body> - the same harmful impact in both cases.

I've used the defer function on these JS links from Google Page Speed Insights:

4. What do you think about the boomerang.min.js?

It is definitely one of the scripts that impacts my site speed the most according to webpagestest.org - but after doing some research on this forum, apparently this JS is for tracking shopify analytics and either can't be removed - or shouldn't be removed?

5. Google Tag Manager
My GTM is set to async on default. Is it okay to remove the async option? I'm afraid that removing the async for Gtag.js may harm my analytics on google - but since it's affecting site speed so much, I want to do something about it

6. Facebook Pixel
Same issue - I'm afraid that it will impact tracking/analytics negatively if I'll delay the script. If anyone could please explain whether it's okay - or not okay to delay facebook/google script - and how to do it? (Again - defer/async doesn't work for whatever reason)

I would highly appreciate any kind of help/tips/ideas

[EcomRAZ]

Hi @ferero18 ,

 I would love to assist you with speed optimization with manual inspection of code in the backend and then optimizing it. The website optimization process is followed as:

Implemented lazyloading on JS, CSS & Images
Optimized Images
Reduced shopify server response time
Compress shopify scss liquid code
JavaScript minified
CSS minified
Prioritized visible content
Served scaled Images
Optimized shopify apps Codes
Removed unused shopify codes running in the background

Would love to see the website link for inspection. 

Cheers 🙂

Zeeshan

[ferero18]

Hi, the website is 

sugoiplush-com, you can click on any product as my issues are regarding a product page rather than other pages

[EcomRAZ]

Hi @ferero18 ,

 The website is not opening here. It's giving an error. Can you please make sure the website link is right?

[ferero18]

I have a few countries blocked to enter my website

Using VPN/Proxy is also blocked

I've sent you a private message, let me know what your IP is so I can add you to my whitelist - or let me know what your country is so I can temporarily remove the block. Or if you're using VPN, then simply turn off the VPN and it will be fine.

[Cedcommerce]

Hi @ferero18,

We have checked your message that you want to improve core web vitals scores for your store. And it's good that you are trying to improve the speed by yourself by optimizing the codes.   

The major issues are: 

• Remove unused JavaScript - they play a huge role in increasing the LCP score. In order to reduce the Unused JS issues you have to optimize the Javascript files coming from the apps and also you can implement conditional rendering of scripts such as the scripts which are used only on the product page should be called only on the product page not globally, though it is very hard to implement as Shopify themes contain files such as theme.js or global.js which are called globally. Also, you can remove the issue by using async and defer attributes, but you have to make sure that while using these attributes there should not be any internal script as this may impact your functionality. 
• Optimize the third-party scripts such as Facebook and google tag manager to reduce the total blocking time(TBT). - For this, you have to hire a developer as this needs extensive coding knowledge to solve these issues. Defer offscreen images - the images on your stores needs to be lazyloaded.
• Reduce Javascript execution time - you need to work on the Js files optimization so that the overall time to execute JS gets reduced. You can follow the approach mentioned in STEP 1. 
• LCP: once you have worked on all of the above points then your LCP score would be automatically get improved significantly. Also to improve the store speed further, I suggest you should hire someone who could do it for you. 

You can work on all the points listed above using the methods suggested. Also, you can look at the below points to ensure that your store maintains a good score:  

Image compression is important for the faster loading of web pages. Make sure your images are of good quality.

• Avoid too many images on a single page. 
• Prioritize fonts from the Shopify admin panel.
• Replace GIFs with static images.
• Remove third-party JS scripts and Shopify App which you are no longer in use.
• Disable unused app features.
• Clear app data while removing an unused app.
• Avoid multiple page redirects.
• Use video formats for animated content.
• Preload the LCP image.
• Avoid large layout shifts.
• Set width and height on image elements to reduce layout shifts and improve CLS.
• Avoid large GIFs for animated content, consider using MPEG4/WebM videos for animations and PNG/WebP for static images.

Hope it helps, let us know if you need any help from us. 

All the best, 

CedCommerce