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?
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:
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
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
Reduced shopify server response time
Compress shopify scss liquid code
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.
Hi @ferero18 ,
The website is not opening here. It's giving an error. Can you please make sure the website link is right?
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.
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:
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.
Hope it helps, let us know if you need any help from us.
All the best,
On our Shopify Expert Marketplace, you can find many trusted third party developers and fr...By Arno Nov 27, 2023
You've downloaded the Search & Discovery app from the Shopify App store, and as you're ...By Skye Nov 8, 2023