If you’ve ever viewed a website from a mobile device (who hasn’t?) then you’d know the frustration of a site that just doesn’t load fast enough. Google’s recent Mobile Speed Playbook confirmed this frustration, noting that a delay of as little as one second in the loading speed of a site on a mobile device can negatively affect conversions by as much as 20%.
It’s understandable, then, that WordPress webmasters are constantly on the lookout for ways to improve the loading speed of their sites. Using a premium WordPress theme and limiting the number of free WordPress plug-ins and tools you enable on your site can certainly help, but the two primary factors that affect the load speed of a website are the page weight and the number of HTTP requests. Short of compressing images as much as possible, these factors can be difficult to control – until now.
A new(ish) technique that many WordPress Webmasters are using to speed up their website is lazy load. Read on to find out more about how lazy load works, how to activate it on your mobile WordPress themes, and the important advantages and disadvantages you need to know.
How Does Lazy Load Work?
It’s never going to be text that slows up the loading speed of a website. Images, videos, and other types of media can be an enormous drain and can cause a noticeable difference to your site’s loading speed – particularly if your site is media-heavy.
In the normal course of events, when a website loads, it loads all images and other media at first instance. If a website has includes 30 images, the page won’t be considered to be fully loaded until all 30 images have been retrieved and displayed – even if the majority of the images are below the fold. In fact, all images are fully loaded even if the user moves away from the site and doesn’t ever see all of the images.
With this in mind, lazy load works by loading the text of a website first, and then only loading images and other media as they are needed. In other words, images load at the same time as the user scrolls down through the site. In the meantime, placeholders hold the place of the image until it is needed.
Major Sites Already Using Lazy Load
If you’re thinking that lazy load techniques sound a little familiar, you’d be right. You may remember that YouTube comments only appear when you scroll down to that section of the site beneath the video. This has, of course, been done on purpose to allow the video to load as quickly as possible.
Another major site already using lazy load is BuzzFeed, who famously only loads images as they are needed. Given how media-heavy their pages are, lazy load seems an excellent choice.
Factors to Consider Before Choosing Lazy Load on Your WordPress Site
Advantage – Faster Page Loads and Reduced User Bandwidth
There is really only one advantage of lazy load, and it’s exactly the reason why so many websites are starting to embrace this new technique. We mentioned above research from Google that found that even a one-second delay in a website’s loading speed on a mobile device can drastically (and negatively) affect conversions. Lazy load solves this problem by loading all of the text on the site in a fraction of the time it would otherwise have taken to load all elements of the page, and then only adding in the images as they are needed.
Disadvantage – SEO
An important factor to keep in mind when considering using lazy load on your website is that it can have a negative impact on your site’s SEO. By not displaying content until a user has scrolled up to that point, lazy load techniques also mean that that same content isn’t available to be indexed by Google’s spiders. How much of an impact this will have on your site and whether it’s worth concerning yourself with will depend on the proportion of media to text on your page, and how much of your site’s SEO critical content is contained within its media.
Disadvantage – UX
We mentioned above that BuzzFeed already uses lazy load techniques on their image-heavy pages. While this dramatically increases the load speed of the site, have you ever noticed that BuzzFeed images tend to jump or shake as they loading? This is because placeholder images utilized in the lazy load technique may not be the exact same size as the actual image content. A size differential of only a few pixels can cause an annoying shake or jump when the placeholder is replaced by the actual image – and this can be annoying for users, even if they don’t consciously realize why at the time.
Lazy Load WordPress Plugins
If you’re considering adding lazy load to your website, the good news is that it’s as easy to implement as loading and running one of the following free WordPress plug-ins and tools.
With more than 100,000 active installations and its latest update only two weeks ago, a3 Lazy Load has another advantage over its competitors: it is considerably more customizable than other similar plug-ins in the WordPress marketplace.
This plug-in has over 90,000 active installations, however, it hasn’t been updated in more than two years, which can sometimes be a warning sign. Maybe the plug-in was created perfectly the first time around and hasn’t needed any updates, or maybe the creators are no longer around to offer ongoing support. In any event, BJ Lazy Load has a ton of excellent reviews on the WordPress marketplace.
This particular lazy load plug-in has proven to be popular with users, potentially because members of the Automattic team have contributed to its development. Installation couldn’t be simpler, and while no configuration is needed, it also lacks the ability to customize its effects on your site.
*
Should you use lazy load on your WordPress site? Ultimately this will be a personal decision and will depend on whether you’re willing to maximize your site’s loading speed at the expense of a potential SEO and UX hit. If you’d like to discuss whether lazy load could be a good choice for your premium WordPress theme, feel free to contact us today. The team at Fuel Themes are always happy to discuss anything WordPress related at any time!