Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
Hey!
I am getting some terrible "Largest Contentful Paint" scores from Google Lighthouse due to my image's lazy loading above the fold. How can I turn this off? I am using Dawn theme combined with Pagefly.
Thanks in advance!
Solved! Go to the solution
This is an accepted solution.
If you're using pagefly for the LCP image, then you'd have to create a custom block, and code it so the LCP image is not lazyloading
Now, there isn't an easy way to detect if content is above the fold, code wise, you have to use something like Pupeteer, and that's not something that ships with shopify, it's quite complicated to setup. So you can't "Turn it off" like setting,unless you have/create a tool to automatically handle something like that.
What you will probably have to do is identify EACH specific LCP element, then inside the code that renders that LCP image, add a setting to enable or disable lazyload, then, enable or disable that setting from higher up in the scope, depending on where the specific LCP element is located.
To illustrate, if I had a block on the homepage, which can be placed anywhere, and multiple times, I wouldn't want to just disable Lazyloading, I would disable it only for the version that goes at the top. So I would have a setting like "Disable Lazyload" and set the default to false, then for the block at the top, enable that setting to disable lazyload.
Also ignore @AvadaCommerce , they are just spamming, there app doesn't seem to have the feature you are asking about.
Hi @Balazs98 ,
Thank you for reaching out here.
The usage of third-party apps seems to be a great way to deal with this. After doing some searching, I found some apps that fit your requirement. Make sure you check them out.
SEO:Image Optimizer Page Speed
This is an accepted solution.
If you're using pagefly for the LCP image, then you'd have to create a custom block, and code it so the LCP image is not lazyloading
Now, there isn't an easy way to detect if content is above the fold, code wise, you have to use something like Pupeteer, and that's not something that ships with shopify, it's quite complicated to setup. So you can't "Turn it off" like setting,unless you have/create a tool to automatically handle something like that.
What you will probably have to do is identify EACH specific LCP element, then inside the code that renders that LCP image, add a setting to enable or disable lazyload, then, enable or disable that setting from higher up in the scope, depending on where the specific LCP element is located.
To illustrate, if I had a block on the homepage, which can be placed anywhere, and multiple times, I wouldn't want to just disable Lazyloading, I would disable it only for the version that goes at the top. So I would have a setting like "Disable Lazyload" and set the default to false, then for the block at the top, enable that setting to disable lazyload.
Also ignore @AvadaCommerce , they are just spamming, there app doesn't seem to have the feature you are asking about.
Hi @Balazs98
Welcome to the Shopify Community!
I am Alex From MS Web Designer (Top Rated Shopify Certified Experts and eCommerce Consultant from Singapore ) I helped 1000+ Shopify Store owners to Optimize their website loading speed for both mobile and desktop and increase their conversion rate.
I will love to help you with some experts feedback here
- Kindly Provide your Store Url,
- Also Mention Which Shopify theme you are using
- How many Apps you are using?
Note: If your store is protected with ‘store Font password’ please Send it here or DM me.
If you have any concerns feel free to ask me!
Regards,
Alex
@Balazs98
We offer 90+ for desktop and 60+ for mobile speed with 3s load time. Please let me know if you want to optimize your website
Hi @Balazs98 ,
This is PageFly - Free Landing Page Builder. Thank you for your belief and for choosing PageFly to build your website.
Largest Contentful Paint (LCP) score is the longest loading time for elements. Thus, eventhough the lazyload feature makes your LCP higher, the total loading speed of your whole page might be quicker. You can turn off lazyload on PageFly and compare its' speed. Here is the way:
If it doesn't work, please give us more information about your store, the URL of the page, we can help to check it and give a code for test it. It's much better if you can contact our support team via Live chat to chat with us directly. We are there 24/7 to help, we will try to check and fix it for you.
Thank you and have a nice rest of the day!
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024