This is Ben from WP Answered, and in this beginner WordPress tutorial, I’ll answer the following questions. What is lazy loading? How does lazy loading work? And which plugin is best for adding lazy loading to WordPress? I’m sure you’re excited to get started, so let’s dive right in. The best way to explain lazy loading is to show you a real example. Here’s a look at the blog on the Compete Themes website. Highlighted on the screen now are the three visible images. This is just a screenshot of the site, so I’m going to zoom out now so you can see the full page and you’ll see that there are a lot more images lower on the page. Besides the logo, there are 16 blog posts each with their own image. When someone visits my site, all 16 of these images would load right away, but that’s a real waste of resources because the majority of visitors don’t scroll all the way down the page. Most of them will click on a menu item, use the search bar, or click on one of the posts near the top of the page. This means that for most of my visitors, they’re waiting for images to load that they’ll never even see and all that bandwidth is eating up my valuable server resources. With lazy loading, your site won’t load images until they actually appear on a visitor’s screen. To show you how lazy loading works, I’ll draw a box on the screen now and this represents the visitor’s viewport. That is to say, everything within this box is on the visitor’s screen. With lazy loading enabled, all of the images that appear on screen load right away, but none of the images off-screen will load. As the visitor scrolls down the page and the images come into view, that’s when they’re loaded. By deferring offscreen images with lazy loading, your site will load a lot faster, and this is especially true for long pages on your site that have a lot of images. So now that you know what lazy loading is and how it can speed up WordPress, you’re probably wondering how to implement it on your site. Well, you’ll be happy to hear that lazy loading with WordPress is extremely easy. There are two plugins in particular that I think are best. The first plugin for lazy loading I recommend is OptiMole. The OptiMole plugin automatically adds lazy loading when you activate it. You can turn lazy loading off with this option in the settings, but it’s on by default, so I know it might sound crazy, but all you have to do is activate this plugin and you’re done. I have a complete step-by-step walkthrough for OptiMole if you’d like to see more of that plugin and try it out on your site. The second plugin I recommend is called WP Rocket. This is the plugin I use for lazy loading and a variety of other performance optimizations on competethemes.com. With WP rocket, all you need to do is visit the Media optimization menu, click this toggle button here and you’re done. I’ve got a full settings walkthrough for WP Rocket as well, so make sure to give that a watch if you’d like to check it out. The reason I’m recommending two different plugins is because as much as I love WP Rocket, it is a premium, and I know some people won’t like that. If your website is making money, then definitely go for WP Rocket, but if your site is new or you’ve decided not to monetize, then go with the free OptiMole plugin instead. That’s everything you need to know about lazy loading with WordPress, and if you enjoyed this video, make sure to subscribe because I have a lot more video tutorials on the way. If you still have questions, please post in the comments section below, and as always, thanks so much for watching.

Lazy Loading for WordPress in Under 5 Minutes (Beginner Tutorial)

One thought on “Lazy Loading for WordPress in Under 5 Minutes (Beginner Tutorial)

  • December 3, 2019 at 11:48 pm
    Permalink

    Having problems? Leave a comment below so I can help out and make this a more complete resource for future viewers.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *