Transcription
Hello, everybody. I’m here today to share a quick WordPress tip that will help anybody running a WordPress site.
It’s becoming increasingly important on the web to have really fast performing websites because the response time is one of those signals that Google uses to determine whether your site appears above other sites. Not to mention that having a quick site is just a really good experience for users.
Now there’s many ways to improve performance, but why I’m here today is to promote the use of alternate image formats. So for example, you might be familiar with JPGs and PNGs, but I’m here to talk about WebP. WebP is a Google-developed format, I’m going to show the website right here, and it’s not really new, but I want to help you adopt this format.
So as it says here, compared to PNGs, WebP images are 26% smaller, and compared to JPGs, WebP images are 25-34% smaller – that size reduction is going to make a difference in how fast your page loads. So how can you take advantage of this? How do you start using WebP images? Well on that front I have really good news – there’s a WordPress plugin for it, and not just any WordPress plugin. Check this out… so if we go into the Dashboard, and then go into Plugins, and then click Add a New Plugin. Here you can search for any WordPress plugins in the repository, so I would recommend searching for “Performance Lab”, and then you press ENTER.
Now, here’s what’s really interesting about this one, Performance Lab, it includes, you know, “a collection of standalone performance modules” – I can tell you that within there, there is a WebP module, we’ll take a look, but here’s what I find really great: when you right-click WordPress Performance Team, where are you led? This is actually from WordPress… they actually have a team that focuses on performance. So you’re not like downloading a plugin made by some random person out there… well, I mean technically you’re downloading a plugin made by some random person, but it’s a random person that probably works on the WordPress Core team, so there’s a good rep there, in my opinion, they’re related to the actual WordPress development effort.
Let’s go back to the Add Plugins screen, and click Install Now. OK, so the plugin’s installed, I’m just going to activate it. And there it is, it’s activated! Now we’re going to go check out the settings… here there’s a few different settings, but the one I’m really interested in is this, WebP uploads, enable WebP uploads. “Create WebP versions for new JPEG image uploads if supported by the server.” Whoa. So you know what this means? This means you can just upload images to WordPress like you always used to, and it will convert it to WebP. And that’s great for performance, because as we just saw, we’re talking 25-35% roughly, per image uploaded. Okay?
So I’ll show you how that’s done, but it really is as simple as it sounds. So if we go to the library here, and I go and drag my little example JPG that’s conveniently on the desktop here and dump it here, it uploads the file, okay? But if I actually look at the size of my example JPG, you’ll notice it’s 2.3mb, right? So let’s see what WordPress does, I’m going to click on this… okay, it’s down to 234kb, as a scaled WebP image. Okay, that’s cool.
Now let’s take a look on the server. So if I go to my server, you’ll notice I’m in the uploads folder, right? So I’m going to go to the current folder, and I’ll expand here. So here you’ll notice that yes, I uploaded the JPG, but all the different versions of this graphic that WordPress would generally generate are in WebP format. Now that’s a great advantage for you – so the idea is that you continue using WordPress like you always used it, the only difference is, upload JPGs. And as long as you upload JPGs, they’re going to convert in WebP, you’ll get a performance gain from that, it’s just seamless.
So now you might ask yourself, okay, that sounds great, Matt, but do all browsers support this? Well, if you check out this tab that I have open here – so there’s this website I really like and it’s called CanIUse.com – in this case I looked up can I use WebP image formats, and as you can see here, all the browsers here seem to support it – so if you look down here, at the very bottom, the latest versions of browsers support it, other than Internet Explorer 11, but there’s no reason to support that these days, it’s too old. So this is pretty much a technology that’s available everywhere, now. So it’s time to jump on the bandwagon.
And if you have any doubts about this, let’s go back to the demo site that we have, right? So the actual WordPress website we’re testing with. This is the default theme that comes with WordPress as of this date, okay? This is December 2023. And if I scroll down then right-click this image and click Inspect, let’s look at this – oh look, it’s in WebP format, why? Because the WordPress developers know, that’s where it’s at – this is the format to move forward with right now. Now in the future, there might be a new format, but these days, WebP’s the way to go.
So guys, that’s just a quick tip to speed up your websites, and all you have to do is download a plugin from the actual WordPress Performance Team. It’s the type of thing that if it becomes popular enough, it might actually get pulled into the WordPress Core, and I like that.
Try it out guys and let me know if you need any help.