Lazyload strangeness on Google Page Speed Insights

While working in Blocs 3.5.7 today, I decided to switch Lazyload on and see if I could improve my Page Speed Insights score. I achieved that, and I can verify in the HTML page code Lazyload is enabled too, yet I see this:

Here’s the webpage.

It’s odd because I have other 2x images on that page Google isn’t complaining about. And when viewing the HTML code, I see the same lazyload code in place for all my images, including the 10 Google is complaining about.

I confirmed this strangeness remains even in different browsers, even after rebooting.

Can anyone explain why Page Speed Insights is saying those 10 images are not being Lazyloaded?

Thank you!

1 Like

So far, 33 views but not a single reply. :frowning:

Surely, some of you Google Page Speed Insights users out there must have some… well… insights, so I’m pulling out the big guns in hopes of garnering your kind replies today…

PRETTY PLEASE”?

:bowing_man:

I never use Blocs lazy-loading.
It’s hard to give you insights because you’re html is minified + it’s not possible to recover the code in a formatter either …
You probably have java scripts which are loaded after the lazy loading algo. Try to move these scripts before the lazyloding.
However, regarding the size of your pics, those are small enough, you don’t need lazyloading

Also, i don’t know why but your fonts take ages to load : 3s.
As such, you should serve those fonts from your local server instead. Just a guess
Also, disable hoover on mobile phones. (Your performance is good on desktop but poor for small devices)

@Jerome

Thank you for much for making time to offer me the courtesy of a reply!

What code were you trying to examine to find Lazyload on my example web page? Here’s a screenshot of the page HTML taken in the Console in Safari while I search for the keyword “lazy” and easily find it inline with each graphic in question:

All JS is placed in the page Footer, which means it comes just before </body>.


Next, those fonts you see flagged in Page Speed Insights are already locally hosted on my web server, and that is mentioned in Page Speed Insights as shown in the following screenshot:


Lastly, you said to “disable hoover,” but can you please explain in more detail what that means?

@JDW this is one of the reasons I move to serving my images with sirv.com whilst this solution isn’t for everyone, I’ve benefited greatly on my sites. Plus they are based down the road from me so I get a VAT receipt :+1:

It allows me to upload one full sized uncompressed image, I then let sirv take care of lazy loading, webp, retina sizes, image sizing etc. There’s loads of customisation options too.

Once the images are cached on your local cdn they are pretty speedy <10ms for of my images.

Sorry if a bit off topic, but:

what are the advantages/ disadvantages (or possible problems) of using Lazy Load?

Why don’t you use Lazy Load? @Jerome

and @JDW
Why do you do?

And since you mentioned, you used in in Blocs 3:

is there any difference between Lazy Load in Blocs v3 vs. v4?

Thanks :slight_smile:

I have never heard that one uses such a service like the one you mentioned.
regarding image size: one can do that with some little tools easily.
But your service obviously does also take care of DIFFERENT image sizes, which leads me to the question:
would I have to feed Blocs with different image sizes?
e.g. a big header image for desktop and a smaller one for mobile view?

In Adobe Muse that was all done automatically, so on mobile, then ONLY a small image would even LOAD.
I came to learn, that Blocs does not do that unfortunately (or am I wrong?).

However, since @JWD explained to us that hidden elements on are surprisingly not really „hidden“ in the source code, I wonder:
would the big image meant for the desktop BE LOADED even when visiting the site on a mobile device???

Because IF then in fact TWO image would be loaded (= one small visible image meant for mobile AND an invisible big image meant for desktop) that would make it even WORSE then regarding loading speed and usability to even put in 2 images in Blocs.

Do you understand what I mean?
@JWD What do you think?

For 2 very good reasons:

  1. I feel the pages load faster.
  2. Google PageSpeed Insights says my pages load faster and give me a higher score as a result.

I have heard others say things like “Chrome already implements it,” or that sort of thing. But I use Safari, and I couldn’t care less if most people use Chrome. Second, the whole world using Chrome doesn’t affect Google PageSpeed Insights one iota. I think it’s still worth enabling even now in December 2020.

1 Like

Indeed. Tragically, Norm’s poll has a great feature to cure that horrible problem in this poll, yet the vast majority of people are casting votes for payment processing, for reasons I simply cannot fathom. The good news is that people who have already mis-voted :slight_smile: can easily change their vote before it becomes final.

If you mean the 2x or 3x super large file size version of graphics, yes, the high resolution screens on mobile devices trigger those. In fact, Google PageSpeed Insights nailed my own site in the past because it detected I had also created 3x images in the past, so today I only create 1x and 2x images. Many Blocs users only create a single 2x image and put that in the 1x slot, but I do not agree with that approach here in Japan where most people still use older Windoze PCs that have low rez screens that would be better served by the lighter weight 1x images. PLUS, you can better optimize your 1x images in terms of sharpness, whereas a 2x image display on a 1x screen won’t have the same perfect sharpness as a properly sharpened 1x image would. I think it’s still worth making both 1x and 2x images.

1 Like

Oh, I didn’t get that at first. One would have to click „Show vote“ to be able to vote for another topic… :wink:

1 Like

It’s great it works for you, but that is way to expensive for our business in Japan, hard hit be a sour Coronavirus economy. Visitors are happy enough to browse our existing websites and we are content with that. I see absolutely no need for us to spend that kind of money per month on marginally or even substantially faster CDN solutions. If anything HTTP/3 would be welcomed over HTTP/2, assuming we could get that feature for free. Right now our web host, Superior Host, only offers it via VPS (Virtual Private Server).

Thank you for telling people what they need to do! :slight_smile: We have over a thousand people in this forum, so if more members vote and vote wisely, we can easily overtake the other features currently trending.

Naturally, I am hoping that Norm will spot our intense passion in the forum and perhaps slip “the better feature” into Blocs 4.2 or 4.3 white at the same time giving majority voters their preferred feature too. Fingers crossed!

Think about it. If you put content on your page in Blocs and disable visibility across ALL BREAKPOINTS, why in THE world would you want that content written to your HTML file when you export? It makes no, sense right? Right. Hence that feature is very important, in my opinion. PLEASE VOTE!

image

1 Like

Safari now has lazy loading as an experimental feature, I’ve not tried it yet though.

The keyword being “experimental” and not yet mainstream, hence the need to enable Lazyloading in Blocs. But like I said, even if Safari supports it, when you run your sites through Google PageSpeed Insights, you will get a score based on what they see, not what Safari or Chrome sees, despite the fact Chrome is Google’s baby. And currently, my sites get better scores and feel faster too with Blocs’ Lazyload enabled. I think it’s worth it for now. What about 3 years hence? Who knows. :slight_smile:

I believe they have a free version; not looked into the limitations though. It costs us around £100 per year, split over 5 websites. But like I said, it’s not a solution for everyone.

1 Like

I spotted that, but it’s too limited on storage for really big sites, or even medium sites with not only a lot of 2x images but also other media like PDFs.

image

Gosh, I wasn’t even thinking about the 1x / 2x aspect of images… :see_no_evil:

that makes it even worse… :frowning:

What I meant was:

example:

a would have a huuuuge image for desktop only, say an image of a dog :dog: :desktop_computer:

on mobile I would NOT want the dog image to be shown, but instead a tiny image of a cat :cat: :iphone:

The dog-image would be hidden to viewers on mobile.

question:

When someone on mobile views the site, will the big dog :dog: image also be LOADED, although the image as such is not even visible to the visitor?

**IF yes:

THAT would be my number one feature wish to stop that useless loading !!!**

I’m not sure, this problem is technically the very same like the mentioned „Prevent layout elements being exported“ which is right now a feature wish that can be voted for?

@Norm @Eldar to the rescue :pleading_face: :fire_engine:
Can you shed some light on this please?

Do you see what I mean here?

@JDW do you know the answer and IF the answer is yes: please do explain that (as you can do it better than I can :wink: ) to make that a feature wish. :pleading_face:

I supply sirv with two orientations, 16:9 and 1:1 and implement them with an embed code from sirv into blocs. I then let sirv work out the sizes, 1x, 2x 3x etc. It save me time doing all that image editing.

From what I can see, sirv only loads what is required for that breakpoint.

Not a solution for everyone, but it works for me :slight_smile: