Add Lazy Loading to Your WordPress Install

Usually, on opening a webpage, the contents of the page are downloaded and then rendered, all at once. This lets the page be cached by the browser but there is no way of knowing if a user is going to look at all the content that was downloaded.

Let’s say that your website holds a gallery of photos. The entire gallery is downloaded but the user only looks at a few and then leaves the site. The result of that is a total waste of bandwidth and memory.

One way to make things easier – and faster – is to only load content when a user gets to a particular part of a webpage and not bulk-load it all at the beginning.

We call this lazy loading and it means that pages get created using placeholder content which only gets changed to real content when required by the user.

How Lazy Loading Works

When you add a resource, such as a video or an image, to a webpage, a placeholder is referenced. As the webpage is browsed by a user, the browser will cache the proper resource and only show it when the user gets to the part of the screen where it should be visible.

For example, if a webpage is loaded and then the user shuts it down straight away, the only part of the page loaded is the top bit.

One downfall, if not used correctly, is the impact this has for a website on SEO rankings. Because the placeholder is the default content, the search engines tend to ignore what the real resource is and, if you were to lazy load all the contents of a webpage, the entire page could be bypassed by the search engine – the result of this is lower ranking because the real content cannot be indexed.

A way to get around this is to add in links to the content that is being lazy loaded. Essentially, this will make a webpage from the content that the engine crawlers can access and, when the website is indexed, those links get followed and the engine can index the proper content.

In essence, you are creating a website of lazy loaded content and structuring it as a real website while still allowing the user to load the content as and when required.

The Benefits

• Lazy loading provides the perfect balance between optimal delivery of content and a streamlined experience for the user
• It allows users to see the content quicker because, when the website is first loaded, only a portion of it loads
• Businesses experience much better levels of customer retention because the content is fed on a continual basis to the user, drastically cutting down the chance that they will leave the site
• Businesses also enjoy lower costs for resources because the content is delivered as and when needed and not all at the same time.

Web users don’t want to have to flick across several pages to see everything and they don’t want to waste time waiting for the browser to load everything.

A streamlined experience is what they need and the dynamic loading of content provided it has been properly implemented, gives even more content to the user without them even realizing.

Adding lazy loading not only gives your users a better experience, it also speeds up loading times, cuts down on bandwidth and on interruptions.

Around half of users tend to visit just one page on a website and by using lazy loading, that one visit can truly be counted.

BJ Lazy Load

BJ Lazy Load is a fantastic free plugin that uses placeholder content for:

• All your thumbnails
• All your images
• All your gravatar images
• All your content iframes

As the placeholder gets nearer to being shown in the browser window, it will be replaced with the real content, as and when the page is scrolled.

The same will also work with text widgets and, because iframes are supported, that will also cover any content embedded from Vimeo, YouTube or any other video-sharing website.

Optionally, if you are using images that have been output in customized templates or you want to use Lazy Load for other iframes and images in your chosen theme, the following very simple filter can be used:

$img_html = ‘‘;
$img_html = apply_filters( ‘bj_lazy_load_html’, $img_html );
echo $img_html;
?>

Using BJ Lazy Load can significantly free up your bandwidth and make your website load a lot faster than it would without it. And it is totally free to use, is constantly being updated and is very easy to configure.

Placeholder images can easily be changed and, if you have images on your website that have specific classes assigned to them, lazy loading can be skipped for those images.