How can I force a .liquid file to load instantly in Sense theme?

[ferero18]

Is there a piece of code, that could load a liquid file immediately? (I'm using Sense) If you don't have anything in mind, I have an example from another Shopify user, that a few people stated worked well for them: 

He has this piece of code from slideshow.liquid:

data-section-slideshow (was already present in the default code)

data-immediate-load (this one was added underneath)

It was used in the slideshow.liquid in the Impulse Theme to basically force the slideshow to load as first on the website, or at least one of the first.

I'm using Sense Theme - but I cannot find anything even similar to data-section-slideshow - nor do I know how to use a similar function on the slideshow.liquid in the Sense Theme. Any help/ideas on what could be the Sense version for this piece of code? I can reverse any code change, so don't worry if you're not sure, I'm more than happy to test anything, so if you have a few solutions in mind, let me know - I'll test all of them 🙂

I'm liking all comments with possible solutions - even if they won't work! I'm down to try anything!

[ZenoPageBuilder]

Hello @ferero18 👋

Can you send the example code from the other store?

[ferero18]

There's no example, unfortunately. The only thing he said is that he added the data-immediate-load in the 2nd line of slideshow.liquid in the Impulse theme. Here's the whole post for reference:

https://www.reddit.com/r/shopify/comments/rw2goj/i_added_one_line_of_liquid_code_to_disable_lazy/

[ZenoPageBuilder]

Thank you. I checked and as I understand his problem is different from yours.

His theme uses the lazy loading technique to load the hero banner image. For your info, it will load a low-quality image first, as users scroll to the banner, it will load the original image. I guess, may be the banner is at the top of the page, or the lazy loading mechanism of the theme is not so good, that feature makes the page loading speed even worse. So as he said, he add data-immediate-load to disable lazy loading for the banner.

Your issue is, you want to load the slideshow as the first element on the page. Far as I know, there is no way to force element rendering order on the page, unfortunately.

[ferero18]

Oh, my bad I must have misinterpreted it - but I do want to achieve exactly what the author of that Reddit post has done. Do you know how to do exactly the same thing - but to Sense theme?

Because I've tried removing all "loading="lazy" from slideshow.liquid and image-banner.liquid - but it has no effect on the LCP, literally zero change before and after removing that. So to not misinterpret things even more - I just want to achieve the same thing like the guy from Reddit - but for the Sense theme

[ZenoPageBuilder]

The Sense theme uses loading="lazy" which is the native lazy loading mechanism supported by many modern browsers, you should not remove it as it works well in most situations. The theme of the guy from Reddit uses a custom lazy loading mechanism, works not good so he disabled it. That being said, you should do nothing more, the Sense theme is already near-perfectly optimized. 

Back to your original question, there is no way to prioritize a section to be loaded first.

[ferero18]

lazy loading works well for offscreen images. The slideshow section is always the above-the-screen, so disabling lazy loading for it is good. Try googling "disable lazy loading above the fold" - you'll find articles from sites like web.dev or wordpress.org - confirming my words. 

The Sense theme is far from perfect. I've spent weeks to bring my site speed from 28 to 80 by various changes in code - but I'm still failing some of the Google's Core Web Vitals - which are one of the main ranking factors for organic shopping, and organic search.  Specifically the LCP.

I've already done everything in terms of basics i.e minifing JS/CSS and delaying all JS/CSS - all apps, GTM, facebook pixel. 

Also the function that the guy from Reddit has used "data-immediate-load" points rather to loading the slideshow.liquid asap, rather then disabling lazy loading. I'm not saying loading it as first - but moving it higher in the priority of what should load first

[ZenoPageBuilder]

Hi @ferero18 

I think the Redditor added data-immediate-load to disable lazy loading, you can read his message again.

And you are right, lazyloading is only good for below-the-fold images, but if browsers see above-the-fold images, it will automatically ignore loading="lazy" and load the image immediately.

[ferero18]

Hmmm, but if the browser ignores lazy loading above the fold, then why didn't it ignore it in his case? No matter whether it's custom lazy loading or default - if what you're saying is true, the browser should ignore it, no?

[ZenoPageBuilder]

@ferero18 That is custom lazy loading. Browser does not care about custom lazy loading, so it would not ignore it above the fold.

[MohaVent]

Hey there, 

I have the exact same problem as the reddit guy, I know I have to add data-immediate-load to disable lazy loading, but I'm not sure how.

Could you to tell me how one would go and add that line of code? Do I literally just paste it in the theme.css.liquid section? 

thanks!

[fredteedshirts]

I recently faced a lazy loading issue with the hero image in the Dawn theme and wanted to share the solution that worked for me. I identified the problem using GTMetrix's audit report, and by modifying the Slideshow.Liquid code, I was able to resolve it.

Here's the part of the code I edited in the 'block.settings.image' section:

{{

block.settings.image

  | image_url: width: 3840

  | image_tag: height: height, sizes: sizes, widths: widths, data-immediate-load: true

}}

Please note that this code might change over time, so always check the latest theme documentation.

After making this change, the error was removed from my GTMetrix report, and it significantly improved my website speed as of Nov. 28, 2023.