On today’s episode, we are going to talk about how to speed up our site by using lazy loading images. Right here on Your Website Engineer podcast, episode number 436.

Hello, and welcome to another episode of Your Website Engineer podcast. My name is Dustin Hartzler and I’m excited to be here with you today. I’m in my new office space. And new is in quotes because I have moved out of the year-long lease that I had at the third-party office space. Now all of my stuff is at home and I’ve got my I-MAX set up in the corner of my basement as I’m getting ready to start to finish that. And so, the audio quality might sound just a little bit different this week. But this is how it’s gonna be for the next couple weeks until I can build up my new office studio.

So, that’s a little bit of a personal update. But as we go on to the news, I’ve got two things to share and then a plugin to talk about today. The first piece of news is something that I’m really excited to share and this has been in the works for a very long time. And this is something called Happy Tools. And it is something by Automatic and it is a new suite of products for the future of work.

And if you’ve been following Automatic at any point in the last couple years, Automatic is all about distributed work making it easier for people to work without having an office space and what-not. And so, one of the cool parts is the piece of software that we use for scheduling our time. So, as a Happiness Engineer, each week we have to go in and we say, “Oh, we’re gonna work on Live Chat during this time, and these are gonna be the hours that we do tickets, and just kinda breakdown our time.

Again, we get to pick all of these things. We get to pick our times, and we can have a very flexible schedule, but we still need to be accountable for the times that we say we’re gonna be available so that we can offer that 24/7 support.

And so, we’ve been using this thing called the Happy Scheduler. The Happy Tools is kinda the brand name for all of these tools. But it is a tool that’s been used for the last year that has been developed in-house. It is called Happy Schedule and it is a new take on workforce management. And so, it’s designed to handle complexities when there’s an actual business goal to have 24/7 support, and when it works around real-world schedules when we’re never really forced to work, and it treats the employees, us, like humans instead of resources.

And so, it’s a cool tool, and there’s a link in the show notes, and you can find it on the blog at WordPress.com. And it is just a brand-new offering. So now, not only do we offer paid services for Jetpack and WooCommerce, and WordPress.com now we’re starting to branch out into tools that can help other distributor companies work like we do, which is really exciting.

So, Happy Schedule is really cool, and we use it every week, and go in and block off our availability, and say, “This is when I wanna work and this is when I don’t wanna work,” and what not. So, that’s kinda what I wanted to share today when it comes to the first piece of news.

So, it’s obviously not a tool for everybody, but if you have some sort of company, and you need to be able to schedule people, and none of the tools that were out there worked. So, we ended up building our own in-house thing. And we’re pleased to offer it and you can go ahead and check it out. I believe Happy Tools.com is the URL. Yep, Happy Tools.com is the URL and you can find out more there.

The other news that I wanna share is WordPress 5.2 Beta 2 is now available. And, again, it is software that is under development still so don’t recommend installing it on your production site but basically, it’s got some more emoji that’s built in. So, “Yay, more emoji!” And there are some other developer-level things that have been built into the background. It also requires that you have a minimum PHP version of 5.6.2. But since we talked about PHP last week, we probably all are running the most, latest, and greatest version of PHP. So, that is WordPress 5.2 Beta 2. It looks like we’re slated to release on April 30th. So, we’ve got about another two or three weeks till we’re ready with 5.2.

All right, moving on into the, “Is there a plugin for that?” This is one that I kinda stumbled upon and it looks really cool. I’ve subscribed to it and I’m getting ready to set it up on Your Website Engineer.com but it’s called a Popup Zen. A popup for people who hate popups.

And so, one of those things, every website has this. Not every website. A lot of websites have obnoxious popups because they have a good opt-in rate. But they really make people frustrated sometimes. Sometimes you’ll Google or you’ll stumble upon a store and before you can even really read the details of the product, you have to put in your email address to see the rest of the page even though you don’t really know what’s there. I don’t like popups. But, again, I have popups on my site because they work.

But Popup Zen is something that’s really cool. And it pulls up a little window in the bottom righthand corner. It just kinda slides up and you can customize it up to a hundred different designs. And then there are different complex rules inside the plugin for how to display it. So, if somebody’s been on your site for more than, and you say, three minutes, then it pops up. You know, whatever, there’s tons of different things that you can do.

It integrates with your email provider whether you have MailChimp, ConvertKit, MailPoet, Drip, ActiveCampaign, or you can just send to your email address. It works really cool and I’m gonna get this all set up on Your Website Engineer.com so I can experiment with it and play with it as well. And so, that’s a free plugin of the week. It’s by Scott Bolinger. It’s on the WordPress repository and there’s a link, as always, in the show notes for episode number 436.

Okay, today, let’s talk about Lazy Loading Images. It’s a mouthful when you try to say it, but we’ll talk a little bit about what it is, and then a couple different plugins that you can use to generate this on your own. Because you could write some code to make it work but there’s always plugins to do that, so we’ll talk about the plugins for sure.

Okay, one of the Google Page Insights performance suggestions is to defer offscreen images to WordPress with lazy loading. So, what this means is it lowers the initial load time and the page load without sacrificing content. Lazy loading improves your visitor’s experience by serving only what the visitors need and when they need it. It’s a way more efficient way than the load-all-the-images-just-in-case approach that results in a slow loading image traffic jam. So, in this podcast episode, we’ll talk about how lazy loading can improve the page performance and how it works. And then we’ll talk about those plugins like I said.

So, lazy loading is a technique for improving the initial page speed and page load by deferring the loading and noncritical assets that are below-the-fold in order to load the page more quickly. It basically means that it is waiting till those areas of the website are scrolled to before the images load. It doesn’t just have to be images, it can be assets, as well. So, maybe it’s some sort of JavaScript that needs to be set up. Or sometimes you see those JavaScript things when you scroll maybe they’re spinning graphs or something. All of that stuff doesn’t load until you are looking at it on the page.

By using Lazy Loading Images on WordPress, it improves your site performance, your SEO, and your visitor’s experience. That webpage is much lighter, and it loads much quicker. It doesn’t do anything with the image files itself. They’re still there. It’s not compressing the images in any way. But it just makes it go so much faster. If you run a test, and maybe you’re using the Google PageSpeed Insights, maybe you’re running in 89/88% of perfection, I guess, that’s the score that it spits out when you run your website through that tool. And if you just turn on the lazy loading, it’s gonna bump it up 2, 3, 4 points just by doing that.

And that could be the difference between a good site or a fast site by Google’s standards as well. So, that’s basically what it is. Lazy loading uses less data so if you’re on a slow mobile connection, people will thank you at home. And especially if you’re out in the middle of nowhere and you have very slow Internet, there’s no reason to load every page. If your homepage is the last 10 podcast episodes you released, but you can only see the first one, there’s no reason to load the nine featured images for the ones that come below it. And so, that’s what’s really nice.

So, how does it work? Basically, there’s special code inside of the src or the image source that tells the website that, “Don’t load these images until they’re into the viewport.”

Okay, that sounds great. That’s a no-brainer decision. Let’s make our website load faster, let’s make it easier for people to download when they’re on mobile, and let’s have a higher page-speed rank when it comes to looking at your website on different speed tools and what not.

So, okay, how do we do this? Well, there’s a couple different ways you can prevent them from loading the normal way. So, you could do this by replacing. You can go through your entire site, and you can replace the image URL src, and you can change it to a different attribute like data-src, and that’s to be stored there temporarily.

Then once you do that and if you want to do this the manual way, of course, we’ll talk about the plugins in just a second. And then you can write some JavaScript that uses the scroll resize and orientation change. These JavaScript event handlers are the ideal way to determine if an element has reached their viewport because this method is compatible with all browsers. And so, that’s another thing you can do. You can do that and then you can move the image URL to the src attribute.

So, you could do it a few different ways. And this is all complicated, and it takes a little bit of code, and it takes you finding and replacing, and changing everything on your website when it’s not really that difficult. We don’t have to do that. We can look at a few different plugins that will do this automatically.

The first one that I want to talk about is in Jetpack actually and they call it Lazy Images. They basically say that Lazy Images makes page load faster by only loading visible images, waiting to load images that are offscreen as you scroll down. And so, to do this basically, you just go into Jetpack, and then to settings, and then into performance. You scroll to the performance and speed section, and then you click the toggle to activate lazy loading for images.

And then it does exactly what it needs to do. It actually puts a temporary placeholder. There’s a transparent placeholder image that replaces all of your images on your site. And then, as your page scrolls, your JavaScript loads, it looks for all the images in the current view and replaces those transparent images with the actual images. And then as you scroll through the page then it does the exact same thing. So, that is how Lazy Images works within Jetpack.

I like Jetpack features because if you already have Jetpack, it doesn’t take any additional plugins. It’s just flipping a switch inside the plugin. So, if you don’t have Jetpack though we do have a few other options. There are options to install and there are free ones and there’s paid ones as well.

But the first one we’ll talk about is called a3 Lazy Load and it is a plugin for loading the Lazy Images. It actually can help you load iframes, videos, and other elements on your site as well. It has a lot of settings that you can customize how your assets are loaded. It’s tested to be 100% compatible with popular plugins like WooCommerce, Advanced Custom Fields, and a variety of CDNs. Because the tricky part is if your images are loaded from a content delivery network, you gotta be able to not load those even though those are actually helping your page speed as well. Because you’re loading assets from other places and more things can download at one time when people are viewing your website.
So, if you have a CDN or if you’re using Advanced Custom Fields, WooCommerce, a bunch of other plugins, I think that the a3 lazy load is going to be a popular plugin or a popular choice.

We do have a few other ones, BJ Lazy Load. This allows you to lazy load the selected images. It also allows you to do thumbnails, Gravatar images, and iframes, and it replaces the content with a placeholder. There are some simple settings so you can customize how the plugin works and it caters to size-optimized images, so that’s nice. And it automatically serves hiDPI images for Apple’s retina display, which is nice. So, it’s got a little bit extra features in there. You can do the retina images as well. So, it can handle those. So, that’s BJ Lazy Load.

There is a plugin just called Lazy Load in the WordPress repository. It couldn’t get any easier. You just install it and activate, and there’s nothing else to do. It’s very much like the Jetpack one, it just works. And so, that’s one if you want to just have a plugin that’s a stand-alone plugin that’s not part of Jetpack, and no settings whatsoever, Lazy Load is going to be your pick.

The next one on my list is called Crazy Lazy and it’s another ultimate lean, clean lazy loading plugin that just works. There’s no configuration required. Again, that one can be just turned on. So, either Lazy Load or Crazy Lazy can be the ones that you can install.

And then there’s one called Lazy Load for Videos. And so not all lazy loading plugins work for videos which is really a shame because videos can add more bulk to your website than anything. Even if you’re not playing the video, it pulls down and buffers a lot of the information so when you’re ready to hit that play button it automatically starts playing. So, Lazy Load for Videos can help lazy load videos hosted on Vimeo or YouTube. It adds a special placeholder image and only loads the full video once the visitor clicks on it. And so, if you got a lot of videos on your website, then I recommend checking out Lazy Load for Videos.

All of these links will be in the show notes for episode number 436. So, you can get them very, very quickly.

And so, what I wanted to share, the purpose of this episode is very much like last week when we talked about getting your PHP version updated. And just changing a PHP version can dramatically improve the site speed of your website. It’s kinda the same thing with lazy loading images. You install one of these plugins and turn it on, and it’s automatically going to help the speed. So, if your website went from loading in maybe six seconds for a page, and you turned on PHP 7.2, and then it might’ve went down to maybe three or three and a half seconds. And now if you do lazy loading images it might knock another whole second off that load time.

So, in just two weeks and two different small little tasks we can get our website loading much quicker, and more responsive, and just make it better for our customers, and the folks that are coming to view our website.

So, those are the two action items over the last couple of weeks. Update your PHP versions. I know that on Pressable where all of my sites are hosted it actually all of my sites got updated in the past week. I didn’t get to test all of them, but they all updated. So, it made it easy. I was able to check that box off my to-do list. And so, all of my sites are now running a 7.2, which is really nice. And now I’ve got to go in and start turning on the Lazy Load for all the sites that I manage as well.

And so, I’m gonna continue to bring you these types of tips over the next month as we move our way through April. If there’s anything else that you’d really like to learn, please let me know. I’ll be happy to cover the topic on an upcoming show. And, also, remember the months of May, June, and July are my three sabbatical months from Automatic. I’ll be taking some time off work and I’m gonna try to batch up some episodes and kind of really relax this summer. Actually, I’m building a deck and building a basement office. And so, those are my two projects over the summer while I’m off.

But, as I was saying, if you have some sort of a premium plugin, or maybe a hosting provider, or maybe some sort of paid solution that you’re wondering is it really worth the cost, let me know. And I’m interested in doing a bunch of tests, and then writing reviews, or doing a review episode on some of these premium plugins that we haven’t talked about in probably ever. There are some that I found and I’m like, “Huh. This would be a cool one to try, and this one’s a cool one to try.” So, I’ve been getting licenses for these things. I will start to do the review process and what not.

But if you’re interested in some sort of hosting plan, or if you’re interested in some sort of premium plugin, whether it be backup or some sort of caching plugin, or whatever it may be, send me an email at dustin@yourwebsiteengineer.com. Or you can use the contact form on Your Website.com, or you can send me a message on Twitter. And my name there is @dustinhartzler. I mean, I’d be happy to do some reviews of those things over the next coming months.

That’s what I wanted to share with you today. I should probably plug if this podcast has been helpful to you in any way, I’d appreciate a review on iTunes. It’s a great way to keep the visibility up and let other people know that there’s great WordPress content coming to you each week from the studios of Your Website Engineer.com. And until next week, and take care, and we’ll talk again soon. Bye-bye.