How can I turn off lazy loading above the fold?

Solved

How can I turn off lazy loading above the fold?

Balazs98
Tourist
14 0 6

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!

Accepted Solution (1)

oreoorbitz
Shopify Partner
261 31 132

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.

Available for pagespeed consulting
https://www.upwork.com/freelancers/~01a19b6cd90193f4f6?viewMode=1&s=1017484851352698949

View solution in original post

Replies 5 (5)

AvadaCommerce
Shopify Partner
3879 839 985

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 

 

banned

oreoorbitz
Shopify Partner
261 31 132

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.

Available for pagespeed consulting
https://www.upwork.com/freelancers/~01a19b6cd90193f4f6?viewMode=1&s=1017484851352698949

MS_WEB_DESIGNER
Shopify Partner
695 52 135

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 

banned

hammadCodes
Shopify Partner
31 7 4

@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

Want to modify or custom changes to the Shopify store? Then hire us.
Email: [email protected] , Skype: hammad00033 , Webiste: https://hammadCodes.com/
If helpful then please like and accept the solution to help others as well.
Shopify Expert | Founder & CEO --- eComVita

PageFly-Victor
Shopify Partner
7865 1786 3108

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: 

PageFly_0-1649987550430.png

 

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!