The checkbox worked well for simply adding an Image with Text block. But if the offending above-the-fold LCP is my first Collection pane, where in the theme can I edit that?
depends on your theme and version and what you're calling the collection pane. if it's a hero or something on the collection you'll want to check out that template to figure out what section is being used and then modify the code in a similar fashion. I need to update this though because a more dynamic way to approach this is there's a section.index check that you can run now as well to dynamically determine the order of the section
Hi Taylor, I am using Dawn 12.0.0 and am trying to replicae the process in your video. However when I go into my 'image-with-text.liquid' there is no reference to 'lazy'. Can you assit me at all please?
This is a good callout, as in the newest version of Dawn (12.0.0 as of today) this is an unnecessary change because it's utilizing the new Liquid property for section.index. It will natively not lazyload and this fix is no longer required. I need to do an updated video on sections not leveraging this instead. This sort of a fix is only necessary for earlier versions of Dawn (before 12.0.0).
@@TRPage_dev Thanks for getting back to me. Do you think you feature in the video update, how to add lazy loading below the fold (if that is possible). Thanks again & great video!!
@@concept1000 native HTML lazyloading already is one of the best ways to go, but using the liquid tags also allow for loading attributes to indicate lazy vs eager. Great suggestions, I need to get back into doing these videos - just need to find the time!
Nice video. I'd like to ask: what would you do if the problem is with the featured category? How can you apply the same solution to items loaded on the main page? I've tried to fix that but haven't found a solution yet."
This is just the simplest implementation I could showcase here - if you want to do this in a different section or category, you'd just need to find in the code where the image is loading and leverage this same sort of conditional split to serve content one way or another.
A lot of this is going to depend on your theme and version. There are some themes now as well where there's an updated method for this based on a newly available Liquid property for section index (which would be the new way forward). It's possible your theme already has this implemented.
@@TRPage_dev im using a theme called warehouse, have you heard of? And about that updated method do you have any recommendations on where i can lean or search about? Any help would be great, my LCP (the image of the product) is super high and 50-70% of its loading time is delayed because of lazyloading
If you're getting this error, it's very likely you've accidentally inserted an extra comma or forgot to close a parentheses when updating your schema - essentially "breaking" it. You may want to try and use a Shopify schema tag builder to compare, here's one a friend has recommended in the past: encircletechnologies.com/shopify-schema-builder-tool/
![เปิดใจ “ต้นหอม ศกุนตลา” หลังโดนพาดพิงธุรกิจที่เคยทำ และผลกระทบทำถูกปลดฟ้าผ่า! | แฉ 24 ต.ค.67 [2/3]](http://i.ytimg.com/vi/vCi5OIqlxaE/mqdefault.jpg)
![How to Make Your MOBILE Shopify Store Look Better [QUICK TIPS]](/img/n.gif)
This is gold! Page performance went from 40 to 58 immediately after applying this fix.
This really helped out, increased my mobile site speed
Bro, you are a beast thank you so much for this tutorial, God bless you
Most helpful video. It turned out my site was lazy loading too. Got rid of the fade in too!
Absolutely brilliant - thank you very much.
Glad you found it useful!
The checkbox worked well for simply adding an Image with Text block.
But if the offending above-the-fold LCP is my first Collection pane, where in the theme can I edit that?
depends on your theme and version and what you're calling the collection pane. if it's a hero or something on the collection you'll want to check out that template to figure out what section is being used and then modify the code in a similar fashion.
I need to update this though because a more dynamic way to approach this is there's a section.index check that you can run now as well to dynamically determine the order of the section
Good one!
Why do I get "Invalid schema: setting with id="disable_lazy" default must be a boolean"?
Hi Taylor, I am using Dawn 12.0.0 and am trying to replicae the process in your video. However when I go into my 'image-with-text.liquid' there is no reference to 'lazy'. Can you assit me at all please?
This is a good callout, as in the newest version of Dawn (12.0.0 as of today) this is an unnecessary change because it's utilizing the new Liquid property for section.index. It will natively not lazyload and this fix is no longer required. I need to do an updated video on sections not leveraging this instead. This sort of a fix is only necessary for earlier versions of Dawn (before 12.0.0).
@@TRPage_dev Thanks for getting back to me. Do you think you feature in the video update, how to add lazy loading below the fold (if that is possible). Thanks again & great video!!
@@concept1000 native HTML lazyloading already is one of the best ways to go, but using the liquid tags also allow for loading attributes to indicate lazy vs eager. Great suggestions, I need to get back into doing these videos - just need to find the time!
Nice video. I'd like to ask: what would you do if the problem is with the featured category? How can you apply the same solution to items loaded on the main page? I've tried to fix that but haven't found a solution yet."
This is just the simplest implementation I could showcase here - if you want to do this in a different section or category, you'd just need to find in the code where the image is loading and leverage this same sort of conditional split to serve content one way or another.
Hi , i have some problem with lazy load image if you can help me to fix this please
hey man, im trying to remove lazyload from my product page and when i delete the loading=lazy the image disapears. Do you have any clue what i can do?
A lot of this is going to depend on your theme and version. There are some themes now as well where there's an updated method for this based on a newly available Liquid property for section index (which would be the new way forward). It's possible your theme already has this implemented.
@@TRPage_dev im using a theme called warehouse, have you heard of? And about that updated method do you have any recommendations on where i can lean or search about? Any help would be great, my LCP (the image of the product) is super high and 50-70% of its loading time is delayed because of lazyloading
How will it work on the slideshow image? It is not working on the slideshow
'schema' tag must not be nested inside other tags this is the error I keep getting.
If you're getting this error, it's very likely you've accidentally inserted an extra comma or forgot to close a parentheses when updating your schema - essentially "breaking" it. You may want to try and use a Shopify schema tag builder to compare, here's one a friend has recommended in the past: encircletechnologies.com/shopify-schema-builder-tool/