Main navigation

Lazy Loading Images in Wordpress

The speed of your website is very important. Even a minor difference in page speed (either a second or two faster OR slower) dramatically changes whether a user will stay on your website.

As web developers we need to build a website with page speed in mind from the start; not try and make changes after the website has been completed to decrease the load time. There are plenty of things you can do to speed up your website. One thing that we'll dive into today is called lazy loading. If your website has a lot of images, the user will be downloading them all before they even see them. This can increase the page speed significantly depending on how many images are on the page. Lazy loading delays the loading of images until the user scrolls to them, which can help make your website load faster.

I'm going to walk you through how to enable lazy loading images in your Wordpress theme with a few simple functions!

The jQuery Scripts

The lazy loading script we'll be using today is the Lazy Load Plugin for jQuery by Mike Tuupola. Download the minified version and copy it into your theme (mine will be in the assets/js folder of my theme).

Next, either create a new file to add the following snippet, or include it in your main Javascript file. For this post I'll create a new script called lazyload.js:

Modifying All Image Tags

We don't need to add the required attributes to each image manually. With a fairly simple function, we can modify any image tags within the post and page content so they are all lazy loaded. The first thing we're going to do is create a helper function that modifies all <img> tags within a string by:

Adding the class lazy to the tag

Removing the src attribute

Adding a new attribute data-original and setting it's value to the original image source

Lazy Loading Images Within Post and Page Content

Now that we have our helper function, we need to utilize it! We are going to add a filter on the_content to modify any images inserted via the WYSIWYG editor. Add the following function into your functions.php file:

Now, any images you include in the WYSIWYG editor will be automatically lazy loaded!

What About Post Thumbnails?

Our previous function doesn't cover images uploaded as the featured image. Fortunately there's a filter for that as well! We'll add another filter on post_thumbnail_html. This function is basically the same as the function above, except we are going to pass the $html variable to ourthemename_post_thumbnail_html function. Add this function to your functions.php file as well:

Conclusion

Lazy loading is just one technique that will help your website load as quickly as possible. There are still many other things to consider, such as having a reliable host, compressing your images and minifying your scripts, and much more. Make sure lazy loading isn't the only technique you are using!

Feel free to comment and share any tips or techniques you use to keep your website loading quickly!

UPDATE: Images Loaded via AJAX

I recently came across a situation where images were being loaded via AJAX, and they weren't loading correctly. If you're using AJAX to load images and find yourself in the same situation, add the following to your JS file:

The content of this field is kept private and will not be shown publicly.

Homepage

Subject

Comment

What clients say

testimonials

Thank you Brianna for your timely and excellent attention to our website needs. We all really appreciate how you have helped us make our site more user friendly and which offers our customers an easier way to see and purchase music on the site. We are beyond appreciative of your talent!

Beverly, Audio Fidelity

Without hesitation, Brianna is the best developer I have ever worked with. I could not possibly recommend her highly enough.

Marc Ensign

Want to contact me?

Whether you’re a designer that doesn’t like to code, or a business owner that needs help getting their website up and running, I’m sure my awesome skills will come in handy.