Lazy Load for WordPress

You’re likely aware of how important page loading speed is. Suffice it to say that every second counts when you’re competing for the top spot in search results. You might be wondering, however, what you can do to improve your site’s performance.

Fortunately, there are a couple of options when it comes to improving how your pages load. Through a process called ‘lazy loading’, for example, you can speed things up by controlling when the more burdensome elements of your page (such as images) appear. 

In this article, we’ll take a look at what exactly lazy loading is and how it works. We’ll also walk through how to implement this technique, both manually and with a plugin. Let’s get started!

Lazy Load Pros and Cons

Lazy loading is a way to reduce the number of calls a visitor’s browser has to make to your website’s server. Essentially, the loading of your website can get bogged down when lots of calls to your server are made at once. If all of your images are attempting to load at the same time, for example, this can cause issues. 

When you use the lazy loading approach, you can create placeholders for images, and then have them only load fully when they are needed. As a visitor scrolls down a page, for example, images might load as and when they need to appear.

This approach has several pros and cons, which you’ll want to consider before implementing it on your website. The benefits include:

• Site visitors won’t need to use as much bandwidth to view your pages.
• You can boost your search rankings.
• You’ll be able to provide a better mobile experience.

As for the downsides, some type of lazy loading can cause search engine indexing issues. In addition, for people who scroll through content fast, lazy loaded images can create a poorer experience. However, it can be a technique worth considering if your site is slow to load.

Adding Lazy Load to Your WordPress Site

If you’re concerned about performance, the first step is to find out how fast or slow your site’s pages are. One way you can assess your site’s speed is with our own Speed Test tool:

This tool will let you know how your site is performing. Plus, it will offer tips for making improvements, so you’ll know exactly where to focus your efforts.

If one of the steps you decide to take is adding lazy loading to your WordPress website, you have a few options. You can take the manual approach, or use a plugin.

Adding Lazy Load With a Plugin

Fortunately, there are many lazy loading plugins available. We recommend this approach for most users, especially if you’re not familiar with or comfortable editing your site’s code.

Lazy Load by WP Rocket is an excellent solution. This plugin is straightforward, but can significantly reduce the weight of your pages (thus speeding them up). In the following two steps, we’ll show you how to use it.

Step 1: Download the Plugin

To get started, you’ll need to download and activate the Lazy Load by WP Rocket plugin: 

It’s a free plugin, so you can pick it up right from the WordPress Plugin Directory. Once you’ve done that, you’ll just have a few quick settings to configure. 

Step 2: Configure the Plugin’s Settings

Next, you can navigate to Settings > Lazy Load in your WordPress dashboard to configure the plugin’s options:

Here, you’ll choose what aspects of your site’s pages that you want lazy loading to handle: 

Simply check the boxes for the items you’d like to include. You can have the plugin handle images, iframes, and videos. Lazy Load by WP Rocket can also replace YouTube videos with thumbnails until your site’s users have that piece of content in view. 

Adding Lazy Load Without a Plugin

If you want to take a ‘no plugin’ route, you’ll need to invest some time into becoming proficient with the PHP programming language. There are some excellent references available for lazy load coding, which can get you started. In addition, we’ll give a brief overview of what you’ll need to do in the following steps.

Step 1: Add Scripts to Your Theme

First, it’s important to determine if the scripting you use will apply globally, or if you’ll need to insert it into just the theme you’re using. In most cases, you’ll want to work with your site’s current theme. Just remember that if you change your theme, you’ll likely need to re-apply the coding. 

In addition, if you are running several scripts on your website, you might want to make sure that your lazy load script falls after other key scripts. For example, if you have a jQuery library, you will want to use the wp_enqueu_script and set the jQuery script as a dependency. This means your jQuery library will load first, and then the lazy load script will run. 

Step 2: Create an Image Class

Another step in the process you that might want to consider is creating a specific class for the images you want the lazy load script to target. This means you will be able to leave some images out of the lazy load process if you prefer.

You might create a class called ‘lazy’, for example, and then add that class to your images within the post editor: 

You’ll find this option under the Advanced menu when you add an image to your post or page. Then, you’ll need to make sure the correct class information is then added to your Cascading Style Sheet (CSS) file. 

Step 3: Add a JavaScript Command to Your Footer

Now that you’ve created a class for the images you want to implement lazy loading with, you’ll need to add some JavaScript to your site’s footer. This will ensure that your lazy loading script will be able to recognize images.

In your File Transfer Protocol (FTP) application or website file manager, you can navigate to wp-content > themes and select your site’s active theme. In that folder, you’ll find the footer.php file:

Then, you can hook the lazy loading action into the wp_footer function.

Step 4: Configure Your Images

When you take the manual approach, you’ll have some extra work to do in terms of organizing and configuring your images to coordinate with the lazy loading script. You’ll need to set all of your images to a default placeholder, but set the actual image paths to the image you want to be loaded ‘lazily’.

To achieve this, you can use a data-original attribute on your image tag. This enables you to display a placeholder, but load the image you want viewers to see once that part of the page comes into view. 

Create With Agility on WP Engine

Adding elements such as a lazy loading feature can help take your website to the next level. Not only can it improve your search rankings, but it can also give your site’s users a better experience.

Here at WP Engine, we know what a difference the right developer resources can make to your website. Additionally, we offer helpful solutions to help you improve your site’s speed, along with plans for all your website needs!