Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
Hi all,
I am receiving a very low speed score on my site https://stockyouth.com . on google pagespeed insights it says I have to defer offscreen images, and eliminate renderblocking resources. Ive looked at other discussions but haven't found an answer. Could someone please take a look and point me in the right direction?
Thank you
-Jasper
Aibek is here from Speedimize.io agency.
There are audits that you can turn a blind eye to. Eliminate render-blocking resources is one such audit. But we do not mean that you can not fix this audit at all. The fact is that usually trying to fix this audit can worsen the UX. If you decide to fix it, you will need to extract the critical styles, and put everything else aside so as not to interfere with the rendering. There are tools that allow you to identify these critical styles. For example, extensions to Chrome or a site where you specify the store url. We advise you to stop at the extension, as it gives more accurate results. We use this - https://chrome.google.com/webstore/detail/css-used/cdopjfddjlonogibjahpnmjpoangjfff
JS files that are connected at the beginning of theme. liqiud should be loaded asynchronously. Reconnect at the end of the file also does not hurt. But this can cause errors. Therefore, as carefully as possible. If you have decided, it is better to fix everything in the browser console.
About defer offscreen images. Turns out you're using a slider. And in the slider, not all images are visible, but nevertheless all images are loaded. Usually, sliders should be able not to load images that are not visible. So study this, if not, then replace the slider or the best option, just use one image as a banner. In addition, http://joxi.ru/Vm6vOpgu4nDQnm the picture weighs a lot for a mobile phone. It is necessary to load a suitable image for the size of the device. And this can be done with the help of the lazysizes plugins.
This can all be done if you have the necessary technical skills. Otherwise, you will have to hire a person from the outside. And yet your store's Pagespeed score is awesome for Shopify.
It looks like the image Google Page Speed Insights is referring to when it mentions deferring offscreen images is the image on your email sign-up form that pops up. You'll want to see if it's possible to apply lazy loading to this image.
To help improve/resolve render-blocking resources, you'll want to add the defer attribute to your script tags. That looks something like:
<script src="filename.js" defer></script>
I also ran your site through our free tool, the Shopify Analyzer (view report here) and it looks like you could improve on:
Also, you're actually scoring quite well on Google Page Speed Insights compared to many other stores we work on. Please keep in mind that Google Page Speed Insights isn't the best tool to analyze Shopify websites. We provide more details about why in our article: Google PSI For Shopify.
If you'd like any optimization help please feel free to reach out to our team at speedboostr.com/contact. I hope this info was helpful!
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025