7.1 background image lazy loading - how to stop it

Hi folks, in Squarespace 7.1 they've added a feature which loads the background image of a section only once you've scrolled to it. Generally, I really praise this move from Squarespace in order to make sites faster, but it is annoying when you reload a page you've already scrolled half-way down, and when you scroll up the images don't appear until the top of the screen is about 20% from the top of the image, so you're left with a blank area for the majority of the time scrolling through that section.

I used to be able to manipulate the imagesLoaded function in 7.0, but I don't know how to trigger Squarespace getting the image src in 7.1. 

Anyone know how to do this?

Thanks,

Andrew

I am running into this problem as well. It looks really bad when the image just jumps onto the screen. Can anyone from the Squarespace team help address this please? 

I think this is Animation Feature??  You can disable it in Site Styles..

Hey, I thought I'd follow up with some more findings.

I think Squarespace might have fixed this issue I described because I don't notice the blank space when scrolling back up a website after a page refresh.

On a side not, it turns out you can use the Squarespace imageLoader function in 7.1, so you can control when Squarespace fetches an image file.

This has been very useful for a client's website that has a huge gallery with lots of images.  As you scroll down, Squarespace loads the image file as you get to it. So it momentarily displays a blank space followed by a glitchy (not-smooth) image reveal.  I've overwritten this to lazy-load the images 500px before they appear on screen, meaning the image has already loaded by the time you scroll to it, and the fade-in animation is nice and smooth.

I am going to develop this as a plugin because I think it's a really useful feature. Let me know if you'd be interested, thanks.

Andrew

Andrew, I'd be interested in a plugin like this for my photography site because I have lots of images to share, but don't want to impede my page load time and also don't want it to look glitchy when the images load as you scroll. Thanks!

On 4/8/2021 at 9:25 PM, suzycollins said:

Andrew, I'd be interested in a plugin like this for my photography site because I have lots of images to share, but don't want to impede my page load time and also don't want it to look glitchy when the images load as you scroll. Thanks!

I see a developer coded this plugin. A few months ago, I used it on my friend site.

On 4/12/2021 at 5:16 AM, tuanphan said:

I see a developer coded this plugin. A few months ago, I used it on my friend site.

@tuanphanwhich plugin did you use on your friends site to lazy load image?  

@digitalfreelancer did you end up creating a plugin for lazy load?

19 hours ago, sonjacorbett said:

@tuanphanwhich plugin did you use on your friends site to lazy load image?  

 

@digitalfreelancer did you end up creating a plugin for lazy load?

I used this https://sqskits.com/plugins/lazy-loading-images-for-squarespace

Hi @tuanphan! Did this plugin https://sqskits.com/plugins/lazy-loading-images-for-squarespace work on the blog posts ?

I use Squarespace 7.1 and lazy loading works there only on pages and works well. Unfortunately it doesn't work on blog posts so I'm looking for the code for it.

11 hours ago, kaioshk said:

Hi @tuanphan! Did this plugin https://sqskits.com/plugins/lazy-loading-images-for-squarespace work on the blog posts ?

I use Squarespace 7.1 and lazy loading works there only on pages and works well. Unfortunately it doesn't work on blog posts so I'm looking for the code for it.

I'mt not sure. I haven't tried with blog posts. You try contacting plugin author

@digitalfreelancer did you manage to figure out a way to stop images Lazy Loading?

Thanks

I am trying to find out if Squarespace 7.1 uses lazy loading by default or not. Is it only for section background images as mentioned in this thread? Or on standard images as well? And I would specifically like to know how the loading works for a Gallery Reel section.

I have on top of most pages of our website a Gallery Reel that scrolls horizontally with the use of arrows (or swiping on mobile). On mobile, only the 1st mage s in the viewport and it seems like I can see a little delay in loading the next image when on a slow connection, so that would mean lazy loading is active? However, researching now with the pointers from Google Speed insights (as my Page Speed is far below what it needs to be)  and inspecting with Dev Tools, it looks like ALL the 20 or 24 images for the Gallery Reel are preloaded instantly before rendering the page, so no wonder that our page speed is dramatically slow. But just observing the image behaviour, it looks like a lazy-load mechanism. Does anyone know the details of lazy loading in Squarespace? There is indeed nothing to be found on the subject! Anyone from Squarespace who can tell me more?

Also interested to know more about the plugin mentioned in this thread
https://sqskits.com/plugins/lazy-loading-images-for-squarespace
I contacted them (waiting to hear back) for more specifics and especially if it would work for the Gallery Reel as the plugin is likely based only on vertical scroll to keep images from eager loading and not recognising the images of the Gallery Reel are outside of the viewport with a scroll horizontally.

I have a Gallery Reel as a first section on 25 out of the 36 pages of the website www.riverdaleruralholidays.com, and you can see it on e.g. the pages www.riverdaleruralholidays.com/for-your-dogs, 
www.riverdaleruralholidays.com/walks.
Kind regards,
Ingrid

Hi Ingrid,

In the gallery reel the image is not loaded until it appears on the screen. And I'm pretty sure that's the case for all images on the site - they don't load until they become visible on the screen by just 1 pixel as I've had this problem before for clients with lots of images.

You can see here, this is the next image in the reel on your for-your-dogs page:

There is no image src so technically that image file has not been loaded in to the browser yet. When I click the arrow so that image becomes visible:

You see the image src has loaded.

Images can be forced to load earlier with some javascript if that's what you want, but it's not simple enough to share here. Send me a DM if you'd like a quote and let me know if you just want this feature on the gallery reels or also on other galleries and images that appear as you scroll down the page.

Andrew

5 hours ago, digitalfreelancer said:

Hi Ingrid,

In the gallery reel the image is not loaded until it appears on the screen. And I'm pretty sure that's the case for all images on the site - they don't load until they become visible on the screen by just 1 pixel as I've had this problem before for clients with lots of images.

You can see here, this is the next image in the reel on your for-your-dogs page:

There is no image src so technically that image file has not been loaded in to the browser yet. When I click the arrow so that image becomes visible:

You see the image src has loaded.

Images can be forced to load earlier with some javascript if that's what you want, but it's not simple enough to share here. Send me a DM if you'd like a quote and let me know if you just want this feature on the gallery reels or also on other galleries and images that appear as you scroll down the page.

Andrew

 

 

Thank you very much, Andrew, for the clear explanation! We have problems with the loading speed (homepage now scoring for mobile at around 30 on the Google Page Speed Insights) and then the report gives links and instructions to inspect the issue. Doing that, it looked like all images were loaded at once. But your test shows Squarespace does defer the loading of pictures outside of the viewport! Big relief. I have a Gallery Reel with 20-24 pics as the first section of nearly every page because I assumed that this was a good way to show lots of pictures without loading more than one at a time on mobile. So a bit of a panic when I looked at  Dev Tools. But probably didn't use it correctly. So, thanks 🙏 for letting me know the images are set to lazy loading already by Squarespace! I don't need a script to load them earlier as I would prioritize saving on loading time and I'm not bothered if a user can just notice the loading process on a slow connection. 

In general, it is difficult to find out what we DO need to look at when we get these red alerts from Google PageSpeed Insights and what is already arranged to work properly by Squarespace, or out of our control.
Via your profile and your previous comments, I also found an announcement made by Squarespace employee Tom to all Circle members on 22 September 2022 about a lot of improvements for loading images and deferring scripts and the post said this was to be rolled out gradually (and probably done by now?). 

But nevertheless, the report that I get on Page Speed Insights for our homepage www.riverdaleruralholidays.com shows that 3rd-party script is causing huge delays, and I know the main culprit is the plugin from Elfsight that is pulling in all our reviews from Tripadvisor, Facebook, and Google Reviews. The report tells me this script is causing a significant delay. Is this also a false alarm because Squarespace already takes care of deferring that script? I placed the section for the reviews on purpose well below the fold and the script itself seems to have a deferred loading instruction (if I read this well). This is de code placed in an on-page code block:
<script src="https://apps.elfsight.com/p/platform.js" defer></script>
<div class="elfsight-app-ded99e30-0d1b-4a72-bd96-4b74038add44"></div>

Another script is the call-button (also a widget from Elfsight plugins) that sits side-by-side with the chat-button. The call button could probably be created without an outside provider if it is possible to change a standard Squarespace button into a floating button with custom CSS which would (I guess) impact less on loading speed than an extra plugin from a 3rd party. Is that a valid thought?

According to the Google Page Speed Insights report, I also seem to have multiple libraries that maybe should be combined, but not sure how to check this or do this. So we are indeed looking for help from a developer specialised in Squarespace to help me out on these hurdles. 

Kind regards,
Ingrid 

3 hours ago, ingrid.villamagdalen said:

According to the Google Page Speed Insights report, I also seem to have multiple libraries that maybe should be combined, but not sure how to check this or do this. So we are indeed looking for help from a developer specialised in Squarespace to help me out on these hurdles.

Other than code you have installed into the site there is nothing that we can do to improve SS's performance. SS is a closed system, you can not get into the backend to adjust their stack. SS is the only one that can improve their internals.

I concur with Creedon.  Providing your images are well-optimised and your 3rd party scripts are deferred, you've done everything you can.

On 3/24/2023 at 11:59 AM, digitalfreelancer said:

I concur with Creedon.  Providing your images are well-optimised and your 3rd party scripts are deferred, you've done everything you can.

Thanks for that. But does the 3rd party script of the Elfsight plugin that I have on the homepage look like a properly deferred script? It's a script in a stand-alone code block on the home page that (as far as I understand) does not rely on any scripts in the code injection.

<script src="https://apps.elfsight.com/p/platform.js" defer></script>
<div class="elfsight-app-ded99e30-0d1b-4a72-bd96-4b74038add44"></div>

Yes it does defer. You can see that the script is detected in the HTML, then queued before the request for the 3rd party script is fired.

11 hours ago, digitalfreelancer said:

Yes it does defer. You can see that the script is detected in the HTML, then queued before the request for the 3rd party script is fired.

Thank you very much for checking! And for all the help in the last few days! 
Kind regards,
Ingrid

Hello @ingrid.villamagdalen!

We are so sorry that it took us so long to reply.

We'd like to tell you that We’ve implemented a new lazy loading feature, which will help you significantly improve Google Page Speed Score.

You just need to add the “data-elfsight-app-lazy ” attribute to the <div> element of your installation code.

For example, here’s how your installation code will look:
 

<script src="https://apps.elfsight.com/p/platform.js" defer></script>
<div class="elfsight-app-ded99e30-0d1b-4a72-bd96-4b74038add44" data-elfsight-app-lazy></div>

You can find more details in this article: https://community.elfsight.com/t/you-now-can-improve-your-pagespeed/2562

If you are still having issues with your page speed, please send us a direct link to your webpage. We'll be happy to check things for you!

 

Regards,
Elfsight Team

Explore all Elfsight widgets — Widget Catalog
Communicate and learn — Elfsight Community Forum

On 3/29/2023 at 7:31 PM, Elfsight said:

Hello @ingrid.villamagdalen!

We are so sorry that it took us so long to reply.

We'd like to tell you that We’ve implemented a new lazy loading feature, which will help you significantly improve Google Page Speed Score.

You just need to add the “data-elfsight-app-lazy ” attribute to the <div> element of your installation code.

For example, here’s how your installation code will look:
 

<script src="https://apps.elfsight.com/p/platform.js" defer></script>
<div class="elfsight-app-ded99e30-0d1b-4a72-bd96-4b74038add44" data-elfsight-app-lazy></div>

You can find more details in this article: https://community.elfsight.com/t/you-now-can-improve-your-pagespeed/2562

If you are still having issues with your page speed, please send us a direct link to your webpage. We'll be happy to check things for you!

 

Regards,
Elfsight Team

Explore all Elfsight widgets — Widget Catalog
Communicate and learn — Elfsight Community Forum

How nice to get the reply from the @Elfsight Team here on the forum! I was just thinking I'd need to contact Elfsight for a deferred script, but then Circle member @Digitalfreelancer checked it for me and told me the Elfsight widget was already correctly set for deferred loading, straight out of the Elfsight box (just the standard of the widget code downloaded from the Elfsight website).

But if you now recommend adding that last bit of lazy loading code before the closing <div>, then I will add that too. I assume this is generic and will work on all Elfsight widgets? I use 3 or 4 different Elfsight plug-ins.
I use the pop-up widget (although at the moment no pop-ups are active on my site), the click-to-call widget on 2 different pages, and a simple floating button widget (made into a 'call-us' feature). 

I have experimented on my copy site to recreate the call button without using a plugin, and created a native Squarespace CTA button and fixed its position with custom CSS. That worked indeed, but not perfectly on all pages. On some pages, I seem to have a Z-index problem where the button disappears behind specific sections. Looks like the last section of the page, or a later added section has priority in the Z-index, and then it helps to place the button in the section with the highest rank in Z-index. It doesn't work to just give the button the highest Z-index, and it needs creating a button on every page. So I would rather keep the Elfsight plugin as the active button if I can be sure it's not impacting my page speed. 

It's the button sitting next to our chat button (Chatra) on all 37 pages of the website. With kudos to Elfsight for how easy it was to customise the looks and the positioning of the Elfsight button in their standard settings so I could create a look-alike of the chat button that had little or no customisation options. The last thing to look at is that Google keeps nagging me that one picture has no alt attributes. It's the little phone icon on the button. It should have an empty attribute  alt=" ". So I should still ask Elfsight how to add that 😊.

Otherwise, I have optimised everything I could think of, adjusted my picture sizes to be just right for mobile (85% of our users), and even settled for a little less quality on desktop, but I still can't get more than a score of 30-32 on Google Page Speed insights for our homepage (on mobile). It's www.riverdaleruralholidays.com.

Kind regards,
Ingrid

Hi @ingrid.villamagdalen👋

You are absolutely right, our lazy loading code is generic and can be applied to different widgets.

We've checked your webpage and  our widget affects loading speed of your page but not so much. So, it's not the reason for the low performance. You can see it in the screenshot.

As for the missing alt tag, we've forwarded your request to our devs and, hopefully, they'll come up with a solution really soon.

Please do not worry, we'll keep you updated😉

14 hours ago, Elfsight said:

Hi @ingrid.villamagdalen👋

You are absolutely right, our lazy loading code is generic and can be applied to different widgets.

 

Thank you, Elfsight, for confirming the lazy loading instruction can be added to other widgets. 😊 The widget ID in the example was my all-in-on-reviews widget, and I also added it to the button app.

Hi @ingrid.villamagdalen!

Great news for you! We've added missing alt attribute to the widget.

Could you please check it and let us know how it works for you?

Regards,
Elfsight Team

Explore all Elfsight widgets — Widget Catalog
Communicate and learn — Elfsight Community Forum

On 4/7/2023 at 7:06 PM, Elfsight said:

Hi @ingrid.villamagdalen!

Great news for you! We've added missing alt attribute to the widget.

Could you please check it and let us know how it works for you?

Regards,
Elfsight Team

Explore all Elfsight widgets — Widget Catalog
Communicate and learn — Elfsight Community Forum

 

Thank you! No more comments about a missing alt attribute in the test by Google Insights! They are now indicating it's one of the images where I could save further, together with the 3 opening images, but that's very theoretical as these are really at their lowest limit for further size reduction. For desktop, they are actually already too small.

But Google Page Speed Insights now gives me 100/100 for SEO. Don't think I changed anything else on that front, so apparently, the missing alt-attribute was counted heavily, as it was SEO -score 95 and now scores 100 😊.

Looks like speed is the only thing that is still poor, but if I run our competitors through the test, then most of them score even worse 😊. Is it even possible to get that approval, or is it normal to see 'Failed' for Core Web Vitals?