In order to defer images, I implemented the solution Patrick Sexton provides on his website but without luck so far!
It does not eliminate the "Prioritize visible content" warning in PageSpeed Insights
My HTML is:
<img class="slideshow-item active"
src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="images/....jpg"
width="1982" height="954" alt="1" title="1" />
My JS is:
function init() {
var imgDefer = document.getElementsByTagName('img');
for (var i=0; i<imgDefer.length; i++) {
if(imgDefer[i].getAttribute('data-src')) {
imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));
} } }
window.onload = init;
The technique specified in your Patrick Sexton article is not same as the Lazy Loading of images! in lazy loading, we should monitor scroll position and load only images which come into view. But, as mentioned in that article, the method used here by you, only defer the loading of (specified) images to immediately after the initial page load.
In other words, all images will be loaded without user interaction, but it only try to load main content (like as html, css, js and important images that you didn't applied their source by data-src) and after them, start loading the rest of images.
If you know what you choose to implement, the PageSpeed Insights warning is not important for your case. each method has its own advantages and usages. as it is written in referenced article, a main disadvantage of lazy loading could be:
The most common reason people may chose not to defer images via lazy loading is likely the new popular trend of having one-page templates.
in one-page applications, the main navigation is not taking you to other pages, it just taking you to different parts of the same page. Your page loads, the user sees your main navigation, and if they click, they are taken to part of your page that does not have the images loaded yet (which is not so good).
the provided technique omit such problem.