Level of expertise
I am attempting this with little to no knowledge on how to implement Lazy loading in an efficient way by adding scripts and/or functions to my site. My initial thought was to use a super small script I found called [be]Lazy.js. My technical knowledge meant that I resorted to using a WordPress plugin instead.
The top plugin by rating on Word Press is a3 Lazy Load. It took me 5 minutes to install, change some settings and test. The image below should now load as you scroll down the page!
The laziest loading pugs
Before adding the script
The following screenshots are from Google Page Speed Insights before adding the Lazy loading plugin to the site. As you can see there’s some work to be done.
The second opportunity recommendation in the list is to “Defer offscreen images”, basically try lazy loading.
After adding Lazy loading plugin
There was only a small increase in the overall speed and the plugin script is now showing as a render-blocking resource, a web developer could probably fix this by implementing lazy loading in a far superior and efficient way.
But the aim of this task was to tackle the opportunities concerning the images and whether adding Lazy loading would help my site pass those audits. The answer is, it does! (I choose not to lazy load my gravatar) All audits concerning images, for this page, passed!
Conclusion, add lazy loading to your site. It could save you some valuable seconds.