Skip to main content

Lazy Loading Image Issue!

Rawson Dorn

Hey Support

So a couple of issues with one of my client sites I have in Brizy cloud: https://www.ipprohub.com/
 
1) The background images that I have in 8 accordions, towards the bottom of the page, are been loaded every time I open the the home page, these should be lazy loaded and should not load until you reach that section of the page, or at least not until the accordion is opened to show the background image!
Here is the section of Accordions > https://www.ipprohub.com/#framework
 
 

How can we fix this?

Thanks, Rawson

0

Comments

11 comments

Date Votes
  • Alex

    Hi,

    I'm afraid we can't solve this instantly. That would mean that we need to change the way the elements are loaded into the accordion element. I will create an internal issue and add this to our to-do list.

    0
  • Rawson Dorn

    Hi Alex

    This is happening to any element where you add a background image, not just Accordions!

    Your image optimisation tool that is used on Brizy cloud framework(which I believe is ShortPixel), is able to handle lazy loading background images easily, with a little change to the JS code.

    Please can you speak to your devs to confirm, thanks

    0
  • Alex

    Hi,

    I sent a notification to the devs. At the moment lazy load only applies to image element.

    0
  • Rawson Dorn

    Thanks Alex

    Will they be changing this behaviour in the future, to include background images as well, as this can make a big difference to loading speeds, especially if you are using multiple sections/blocks on a page, each with background images set!

    Thanks, Rawson

    0
  • Alex

    Yeah sure. It's a matter of time.
    It doesn't seem too easy as you said in the previous comment if it wasn't included with lazyload on images. )))

    0
  • Rawson Dorn
    • Edited

    Hi, any update on this ticket?

    Also how can improve on this score, as it looks like a lot of it is out of my control? - https://gtmetrix.com/reports/www.ipprohub.com/TCQSrndy/

    Thanks, Rawson

    0
  • Alex

    Hi,

    Unfortunately, after a discussion with the devs  it was decided that lazyload for the background will not be implemented. At least for now.

    Regarding the score: from what I see the low score comes from the DOM size and unfortunately this is not something you can influence. Only if you reduce the number of sections on the page :) 

    0
  • Rawson Dorn

    OK that's not great for speeding up the website.. background lazy loading is pretty standard these days & without it limits the design choices & creativity!

    Regarding the score and speed,

    - How do I mark the touch and wheel event listeners as `passive` to improve your page's scroll performance?

    - why is the site response time so high of around 500ms, I have been monitoring it? - https://share.solnectics.com/7KuE0ZNj

    - Also when i check it show that the site is in the USA, I'm based in the UK and would have thought that it would use a CDN based closer to me. How do I set a preference to say use the UK/europe CDN?

    Thanks, Rawson

    0
  • Alex

    Hi,

    - How do I mark the touch and wheel event listeners as `passive` to improve your page's scroll performance?

    Do you want to slow down the scroll? We have no option in this regard but to do something with CSS to influence these things.

    - why is the site response time so high of around 500ms, I have been monitoring it? -https://share.solnectics.com/7KuE0ZNj

    500ms is actually a good time.
    -

    - Also when i check it show that the site is in the USA, I'm based in the UK and would have thought that it would use a CDN based closer to me. How do I set a preference to say use the UK/europe CDN?

    This happens automatically and the data center is selected closest to where the visitor is accessing it. Here you can see all our server locations: https://support.brizy.io/hc/en-us/articles/360041844872-What-is-the-difference-between-Basic-CDN-and-Global-CDN- 

    Also, I think you most likely saw the place where the site is accessed(USA) not the place where the site is loaded. At least that's how gtmetrix works. It displays information about where the site display request is sent from.

     

    0
  • Konn Homes

    Hello, Any update on this issue? 
    Is the lazy loading option still not available for background images?

    0
  • KC George

    Hi Konn,

    Only images added using the image element are lazy loaded in Brizy; background images are not.

    0

Please sign in to leave a comment.

Didn't find what you were looking for?

Ask a Question