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

[@faisalahmed7-k6e]

I am using KZbin from last 13 to 15 years but never watched so informative video like that. Hats off to you sir.

[@bluesphere7930]

Thank you. Glad you found it helpful.

[@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.

[@lorraineb2109]

Thank you. It worked a treat! Brilliant video!

[@bluesphere7930]

Good to hear!

[@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

[@JapanFoodGrocer]

nice video and very helpful, can't wait to try these tips and tricks on my website, you got a subscribe from me keep up the good work

[@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

[@RaiTechGaming]

thank you, it helped, you should make more content and keep it short to the point. Regards Rai

[@alantascione754]

Thank you! It worked perfectly!

[@tkfgameryt5353]

How did you open the search bar 6:32

[@dfx.suites]

If you use a Mac computer, use Command + F to open the search box. If you use a Windows computer, use CTRL + F to open the search box.

[@Sunraycart]

my extention not working

[@farukweb]

best tutorial for speed.

[@bluesphere7930]

Glad you found it helpful.

[@ShopifyExpert-h2c]

Thanks, good stuff shared.

[@bluesphere7930]

Glad it helped.

[@LinceExpress.Oficial]

It helped me a lot, thanks!

[@bluesphere7930]

Glad to hear that.

[@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.

[@carlocrighton]

Great tutorial, hat tip.

[@bluesphere7930]

Glad you found it helpful.

[@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

[@revivedrain]

Nicolas Cage?

[@ahmedhassansheikh9436]

Wow

[@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.' -%}