Lazy Images above the Fold

[Andreas Steffan]

Hallo everybody,

aiming to score nice, I introduced lazy loading images. I use an inline svg placeholder and set the src attribute to the real image later using JavaScript.

However, it seems there is no way to get around the "above the fold" penalty if you do this. The code 

if (window.location.search.indexOf("noswapsrc") == -1) {
    img.src = src;
}

at line 7047 in the JavaScript file spoils it for me.

The issue can be seen here.

Just disabling this one line gets rid of the penalty.

Just found that for some reason, this issue does not show up here. This image is responsive. Does that sublte difference make the difference in scoring?

What is the "recommended" way around this penalty?

thanks

Andreas

[Craig Leat]

Images are not render blocking (i.e. they are lazy loaded by default) and so your approach appears too complicated. Is it not simpler to set the size of the image container with css and let the browser start fetching the image as soon as possible? With the container dimensions set there is no layout/reflow when the image arrives.

Ps. There are numerous blogs showing how to size the image container using padding, if you know the aspect ratio.

[Andreas Steffan]

Awesome solution!

Thanks a lot, Craig!