Lazy Loading for WordPress: How to Add It to Your Website

This article on lazy loading for WordPress was originally published by Torque Magazine, and is reproduced here with permission.

Adding lazy load to your WordPress website is an effective tool to speed up your WordPress website. We have written extensively (we even made a case study) about how slow page loading speed negatively effects conversions, SEO, and other markers for online success. The faster your site loads, the better.

Two of the most important factors that slow down sites are HTTP requests and page weight. Naturally, the more requests a browser has to send to the server, the longer it will take to process the site. At the same time, the larger your page is (for example, because it contains many images), the longer it will take to load.

Lazy load is a technique that addresses both of these factors. It means delaying a load of some parts of a web page until they are actually needed. It’s also the topic of this blog post. In the following, you will learn how lazy load works, its advantages and disadvantages and as well as ways to add lazy load to WordPress.

I hope you’re not too lazy to keep reading!

What is Lazy Load and What Can You Use It for?

As already mentioned, lazy load is a way of keeping the browser from initially loading parts of web pages – typically images – and replace them with placeholders. That way, the page becomes smaller and less data needs to be transferred from server to browser.

The result: a faster loading website and happier users.

But wait, don’t you need those parts of your site? If you didn’t, they wouldn’t be on there, right? Won’t it mess up the page?

Well, here’s where the lazy in lazy load comes into play. The technique doesn’t simply prohibit browser from loading assets and images but simply delays it until they are actually needed.

For example, an image doesn’t need to be on the page until a visitor scrolls down far enough to actually see it. As a consequence, the browser doesn’t really need to load it until right before that happens. That’s exactly what lazy load does.

(By the way, there are other ways to optimize images on your website to make them load quicker.)

Lazy Load Use Cases

Around the web, lazy load is most often used for images. You have probably seen it on popular sites like Buzzfeed, who use the technique to make their listicles appear more quickly inside their users’ browsers.

However, that’s not the only thing lazy load is capable of delaying. Other examples are videos, scripts, and comments. In fact, moving JavaScript files to the footer of a page is a common technique to speed up page loading times.

You might also be aware that YouTube only loads comments when you scroll down to them. That way, the platform makes sure that you get to watch your video more quickly. If it’s good enough for them, why not for you?

There’s also a special application of lazy load called infinite scroll. It’s an alternative to classic pagination where additional posts load whenever the user reaches the bottom of a page. You can see it on Pinterest or if you are a user of Pocket.

It eliminates a lot of clicks and can be great for user experience. However, infinite scroll is not without controversy and won’t be the focus of this article.

Advantages of Lazy Load

The main advantage of lazy load is already apparent: faster loading times. When you can shave off a large chunk of your page weight, it will naturally appear in the browser much faster.

A nice side effect of that is that you save your visitors considerable bandwidth. Especially those using the data connection on their mobile device will be thankful. In addition to seeing your site quicker, they also don’t have to waste their plan on images they might never even see.

Disadvantages of Using Lazy Load on Your Site

Yet, using lazy load is not all sunshine and rainbows. The technique also has some disadvantages.

First and foremost, it’s not always search engine friendly. When you delay loading assets for visitors, you do the same for search engine spiders. As a consequence, they might not index some of your content, which is, of course, is not great for SEO. Even if workarounds exist. Naturally, this is a bigger problem when using lazy load for posts and not just images (which is why many stay away from it).

A second concern is user experience. When scrolling down your site very quickly, replacing placeholder images with actual visuals can make page content jump, which can be annoying.

So, what’s the verdict on lazy load? In short: used within limits the technique can make your WordPress site load a lot faster, however, you need to keep an eye out for SEO and user experience.

The post Lazy Loading for WordPress: How to Add It to Your Website appeared first on SitePoint.