Fix the Largest Contentful Paint (LCP) Image Lazy Loading Issue - Shopify Speed Optimization

This video shows how to remove lazy loading for images above the fold in a Shopify store.
Fiverr gig: www.fiverr.com/s/6oRdeB
Donations: www.paypal.com/donate/?hosted...
Follow me on Twitter: / @johne104
UA-cam Channel: / @bluesphere7930
Email: [e-mail]
Timecodes
0:00 - Intro
0:44 - Why Optimize Load Speed
1:38 - Initial Lighthouse Test
2:32 - LCP Lazy Loading Issue
3:33 - Finding the Culprit
8:42 - Fixing the Issue
10:01 - Outro

[@ezzedineabdelhady]

You should make more tutorials. You're just perfect in terms of practical solution and calm explanation. I don't know anything about codes but you made it look super straight forward. Thanks.

[@bluesphere7930]

Thank you, I appreciate the kind words.

[@alantascione754]

Thank you! It worked perfectly!

[@lorraineb2109]

Thank you. It worked a treat! Brilliant video!

[@bluesphere7930]

Good to hear!

[@ShopifyExpert-h2c]

Thanks, good stuff shared.

[@bluesphere7930]

Glad it helped.

[@LinceExpress.Oficial]

It helped me a lot, thanks!

[@bluesphere7930]

Glad to hear that.

[@farukweb]

best tutorial for speed.

[@bluesphere7930]

Glad you found it helpful.

[@shopioso]

Hi! Great video, I was using VScode to search inside the theme but the theme file search Chrome extension is a great addition. Thank you for that!
In terms of lazy loading, great solution. If you want to go even further, you can create liquid settings to preferentially load images.
If you have a carousel for example you can say if forloop.index is 1 then do not lazy load. In this case, you are always removing the lazy from the first image. Or you can have a setting created to manually check if an image is lazy or not. If the checkbox is checked the image is not lazily loaded, if the checkbox is not checked it's lazy loaded.
It depends on the merchant, many Shopify store owners are scared of editing code so a dashboard checkbox can come in handy for them.

[@bluesphere7930]

Great tips!
A lot of times you see carousels with the LCP being lazily loaded when it shouldn’t be.
I watched some of your videos on the subject - love the content!
Cheers,

[@shopioso]

You're not doing too bad yourself. Cheers! @@bluesphere7930

[@kasje]

this is awesome - thanks very much

[@bluesphere7930]

Good to hear. Glad you found it helpful.

[@kasje]

@@bluesphere7930 if you are thinking of doing more related to page speed, I’d love to learn more about reducing un-used JavaScript.
Seems like Shopify is injecting the script for the privacy banner and chat quite early and is increasing FCP but I don’t know how to edit the code to change that

[@JoaumPDR]

hey, i tried to do this on the product page but its not working, i dont know if its a theme specific problem but when i delete "lazy" the img disapears

[@Sunraycart]

my extention not working

[@MehediHasan-zu3gi]

Great. Thanks. I liked your video.
Can you make videos on how to `Image element does not have explicit width and height` problem?

[@bluesphere7930]

Hi, I'll try and do one on the subject. I have a couple/few in the pipe line for this series, but I'll see if I can squeeze one of those in. Not sure when, though.
Meantime, just make sure you add an explicit value (5px, 30px, 5rem, etc...) for both the width and height attributes, as much as possible. Otherwise, the browser doesn't initially know how much space to allocate for the element until some html has loaded, and by then some Cumulative Lay Shift (CLS) may/will have occurred which hurts that particular core vital.

[@MehediHasan-zu3gi]

@@bluesphere7930 That's great. Looking forward to see more of your informational videos.
As for images, my theme is using srcset and dynamic height and widths for responsive image. In this case, I think I shouldn't use any fixed height and width. Let me show you how the image is rendering from the code. And I'm much appreciating your effort.

[@MrJulian1154]

Hello John, sadly I couldn't get it to work despite your great tutorial. I guess I identified the right picture and found it in the code of my shopify liquid.
Sadly my shopify code looks totally different. So the code I have to work with is the following:

{%- elsif block.settings.video != blank -%}
{%- assign video_extension = block.settings.video | split: '.' | last -%}

{%- else -%}
{{ 'lifestyle-1' | placeholder_svg_tag: 'media placeholder-svg lazyload' }}
{%- endif -%}
I am pretty sure I have to change the first 'lazyload' because when I do so and change it to eagerload (also tried just eager) my shop banner just disappears. Out of curiosity I tried to change the other 'lazyload' which didn't change a thing.
So I have no idea what to do. Is the theme maybe complicated and I have to change something else? Help would be appreciated a lot.

[@bluesphere7930]

Hi, what's the url for your site, I'll take a quick look?

[@PedroMendes-xl8hf]

@@bluesphere7930 Hello John, i'm having the same problem, when i turn the "lazyload" to eager my banner just disappears, what can i do? the code is below, i appreciate if you can help me
{%- case media.media_type -%}
{%- when 'image' -%}
{%- capture supported_sizes -%}{%- render 'image-size', sizes: '400,500,600,700,800,900,1000,1100,1200', image: media -%}{%- endcapture -%}
{%- assign image_url = media | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}