Changing all images to be lazy loaded is not a good idea for SEO reasons (and perhaps not a good idea for regular usage of the site either). If it were, browsers would just do it automatically. Using hints on your images is only useful if you are doing it strategically, which means only lazy loading images that are offscreen on the initial page load. Otherwise you are not actually giving useful hints to the browser on how to load your page in the correct manner, and thus you are just better off letting the browser use whatever internal logic it has to decide how and when to load the assets.
Basically you can think about the optimal, minimal set of resources to render your page being:
- HTML
- Required CSS
- Above the fold images
Then at that point, download all of the other things to make the page work in the way you want (javascript, etc). Anything else is delaying the initial page-load. Because your images are lazy loaded, your page load looks like the following:
- HTML
- Required CSS
- Some above the fold images (profile.jpg, etc)
- Massive, >300kb blobs of javascript (runtime-main.js, main.js)
- Above the fold images in the post
This is not good. It doesn't make sense for your page to download 300kb of javascript before downloading the 18kb image that is above the fold. Now you can partially solve this problem by making the javascript asynchronous, but that still is just another band-aid on the problem, as then the javascript and above the fold images would download concurrently, which is still not optimal.
What you want to do is have above the fold post images be loaded eagerly (the default), and then lazy load ones that are lower on the page. If you aren't going to do that, you probably are better off just not having the images being lazy loaded at all, especially if your page includes 300kb of javascript which is likely going to be much larger than the combined size of all the images on the page.
Basically you can think about the optimal, minimal set of resources to render your page being:
- HTML
- Required CSS
- Above the fold images
Then at that point, download all of the other things to make the page work in the way you want (javascript, etc). Anything else is delaying the initial page-load. Because your images are lazy loaded, your page load looks like the following:
- HTML
- Required CSS
- Some above the fold images (profile.jpg, etc)
- Massive, >300kb blobs of javascript (runtime-main.js, main.js)
- Above the fold images in the post
This is not good. It doesn't make sense for your page to download 300kb of javascript before downloading the 18kb image that is above the fold. Now you can partially solve this problem by making the javascript asynchronous, but that still is just another band-aid on the problem, as then the javascript and above the fold images would download concurrently, which is still not optimal.
What you want to do is have above the fold post images be loaded eagerly (the default), and then lazy load ones that are lower on the page. If you aren't going to do that, you probably are better off just not having the images being lazy loaded at all, especially if your page includes 300kb of javascript which is likely going to be much larger than the combined size of all the images on the page.