Lazy Loading defers the loading of content until it comes into the viewpoint of a screen. This can be set to defer the loading (primarily of) images, but more recently iframes (think embedded Google Maps or You Tube videos), videos, audio & written content. This has 2 benefits:
- It reduces page load speed by only rendering above the fold content. Page speed is directly correlated to lower bounce rates and higher organic Google ranking.
- If the viewer finds what they need in above the fold content, like a phone number or address and click out it saves bandwidth on your server. If you use premium hosting like a VPS or Dedicated server you will have a bandwidth limit so this is of particular interest.
To test the page load score with the 4 top Lazy Load WordPress plugins and use a benchmark with no plugins activated.
Googles PageSpeed Insights. Its worth noting the web server, business and customers are in New Zealand. As far as I am aware the Google insights server is based in the US so I usually add 5-6 points to the result for an LLL (local server, local business, local customer).
The Guinea Pig
With no plugins activated (aside from the ones essential for operation) I ran the insights tool to get a score of
Mobile: 65 / 100 | Desktop 75 /100
A3 Lazy Load
This plugin actually reduced page load speed
Mobile 65 | Desktop 74
Lazy Load XT
Same again, this reduced the PageSpeed insights score. I played around with the config and it didn’t make any changes to the score.
Mobile 65 | Desktop 74
Finally some progress, I tested this 5-6 times over the course of 2 hours and achieved the exact result every time. I then tested the site on Firefox, Crome & Safari & IOS Safari with no issues.
Mobile 67 | Desktop 78
BJ Lazy Load
I got a bit excited here however after some testing the plugin seems to have issues with fly-in animation, and some PNG’s however the score was better.
Mobile 67 | Desktop 79
The issue was the image would appear as a white box and load to the correct image in about 0.75 of a second.
It just killed the fly in animation effect so I looked into the config settings and found a way to add a CSS class to skip certain images. Once I did this it loaded correctly, however after running the insights test again I got the result:
Mobile 65 | Desktop 75 (back to square one).
I played around with a number of settings including using two lazy loading plugins at once (fail). I looked into the size of the images which have been compressed well and only take up less than 400kb however there are 4 iframes (3 Youtube Videos, 1 Google Map) so I turned off all lazy loading apart from content and iframes and got the score:
Mobile 68 | Desktop 78
I then compared this to the actual user experience of BJ vs Lazy Load as they had similar scores and found BJ loaded much faster on my browser (I use a page speed API). One of the pages on this site has really nothing but 12 iframe youtube videos so I checked the browser page speed:
- B J Laxy Load = 0.56 seconds
- Lazy Load = 4.09 seconds
BJ & Lazy Load are the clear favourites. For this site with many iframes BJ came out on top. For a site that is more image concentrated (and not compressed) I think Lazy Load would achieve a better page speed score as BJ with full config enabled seemed to bulk up the theme and thus slow down the page speed.