[00:00:00] Nathan Wrigley: Welcome to the WP Builds podcast, bringing you the latest news from the WordPress community. Welcome your hosts, David Waumsley, and Nathan Wrigley.
Hello there and welcome to this episode. Number 260 of the WP Builds podcast and absolute pleasure to have you here. This episode is entitled image compression for faster websites with EU. It was published on Thursday, the 6th of January, 2021. My name's Nathan Wrigley. And I will be joined a little bit later by Shane Bishop as he is the founder of the plugin on under discussion today.
But before that a few bits of housekeeping, the first thing is simply a message from me. If you had a bit of a break over the holiday period, as I did, I hope that you are well rested and ready for 2022. As I said, Cannot believe that we're in 2022, it seems like only a couple of weeks ago that we would be getting the new millennium, believe it or not, but time and tide waits for no man.
And so 2022 is what we've got. And I hope that you have a productive and profitable 2020. If you've been listening to this podcast for any length of time, you know that I've got some typical things that I say at the beginning of the podcast, for example, I'm going to introduce you to our subscriber page, WP Builds.com forward slash subscribe.
If you find yourself enjoying this. Even a teeny tiny bit, then head over to that. That's WP builders.com forward slash subscribe. And over there is every possible place that you can keep in touch with us. So that could be YouTube. It could be slack. It could be our Facebook group, which is a very nice place to hang out.
I might add, or it might be just signing up for our email newsletter, which we produced. Each time we create some new content. This is our Thursday podcast. So we'll notify you about that. But also we do the, this week in WordPress show, every Monday, you can find [email protected] forward slash live, and we'd love for you to come along and make some comments.
You never know if you're lucky, we might put them on the screen and share them with our notable WordPress guests. What else have I got to say? WP Builds.com. Deals black Friday. It seems like a long time ago now, but it happened and it was over, but our WP Builds deals page. It's there 365 days of the year with massive discounts on WordPress products, themes, plugins, and all of that jazz.
So go and check that. And lastly, if you would like to advertise on WP Builds and get your product or service in front of a WordPress specific audience, WP Builds dot com forward slash advertise, fill out the form and let's see if we can connect. Okay today, it's all about image optimization. I'm talking to Shane Bishop, who is the founder of the EWWW plugin.
It's spelled E w w. You may have heard of it before, but he's on the podcast today to tell us how it all works. You probably know that Google like fast websites. Fastest ways to speed up your WordPress websites is to compress those huge images. Now being a pro, you probably knew that already, but you never know your clients may not know about it.
And this plugin enables them and you to compress your images with great speed and great ease. They don't just do images, though. They're also able to do things like PDFs. They've got an API. And you never know in the future, they might be able to compress other things as well. So we talk about the plugin, how it works, why it was built, what's in the roadmap and the pricing and so on.
And I really hope that you enjoy the podcast. Hello there and welcome to the WP Bill's podcast. Once again, we've got an interview today and on the line all the way from Montana in the United States. I have Shane Bishop. Hello, Shane. Hello? Hello. Hello, indeed. Now it just occurs to me. We had a, probably about a 10 minute chat before this began and there was one enormously important thing that I forgot to ask you.
And that is how on earth do I pronounce the name of your product?
[00:04:22] Shane Bishop: There's two different ways. You can either do it either www or you image
[00:04:27] Nathan Wrigley: optimized. Okay. So E www is going to be far too complicated for me to say over and over again. So I'm just going to go for you. Y you, Y E www, what's the significance of that?
[00:04:40] Shane Bishop: It's, it's horribly originally, because. Started out my company doing web consulting as exactly www. And I thought I'll just abbreviate that because that's what the other image optimizer had done at the time. There was the CW image optimizer, which was abbreviated for carbon works. And so I thought I'll just do that.
And then I was like, wait a second. Eww, w you like you, your images are huge and gross and bloated. And I thought
[00:05:10] Nathan Wrigley: let's go with that. Okay. Okay. Okay. So you, in the sense of, eh, I don't like that. I've got it. Okay. So that's what the, that's what your product does. I will announce the URL. So if anything confuses you during the course of this podcast, just hit pause, go to E w w.io, E www.io and check it out.
But it is basically. Bills itself as speeding up your website with them is image optimization. And I know that many people listening to this won't need clarification about this, but we'll do it anyway because there'll be many people who are new to WordPress that are listening. And don't really know that this is important.
You've got a website, you've got a bunch of images. You're saying they need to be optimized. Why?
[00:05:57] Shane Bishop: The biggest thing that slows down websites is the images. And it's so easy to get the images wrong, to put them in there too big, whether it's the file size and saying, Hey, I really want these to be top quality.
So I say to them at the top quality on Photoshop you don't need that for a website because no one cares about that kind of quality. But then there's also the dimensions and that's the one that's trickier and honestly, harder to address as well from a plugin standpoint. If you put an image that's two times too wide and two times too tall, you've just got an image that's four times too big and file sizes as well.
And so that sort of thing really can eat up bandwidth and destroy the speed of your website in a hurry. And so making sure both the compression you know, the quality. Balance is right. And not going overboard with that and making sure the dimensions are right. And then you got mobile devices and then it's well, I sized this for desktop and oh crap.
Now I gotta do for mobile too. And that gets to be messy. And WordPress helps with some of that with the sizing and stuff. But our stuff goes in and takes a step further and really helps you nail that down. So you're not wasting pixels.
[00:07:22] Nathan Wrigley: Everything else. Yeah. Okay. So yeah. Let's dig into the sort of technicalities of it.
If I install it, you a lot plugin in WordPress, how do I interact with it? How so everybody be familiar that you can, you can upload images inside of our posts, or you can go to the media library and you can upload things there. But where does you make itself apparent? What buttons do I need to click?
Or is this all kind of autopilot? Once I've gone through some sort of wizard and set up some basic settings, how does it work? What do I interact with?
[00:07:54] Shane Bishop: Sure. So if you go over to the settings section you'll find that you image optimizer in there. Once you've installed, activated all that jazz and you'll get a wizard, which will walk you through what we recommend for the best settings.
And it will also give you the. To not just do the free compression and the free features but to sign up for the premium compression and our easy IO CDN, which will give you a lot more compression and make it a lot simpler for you. So. Just with the free version, you can do quite a bit.
You can get web P conversion which is new file, new ish file format for, from Google. You'll get lazy load. You'll get a lot less compression, which preserves the quality 100%. And then, I'm trying to think. So that's the big stuff. Oh. And then of course you can. I'll do a bit of auto-scaling.
So if, like I mentioned, WordPress will do some of that responsive type stuff with what's called a source, set a layout of the image. And so that will allow the browser to go, oh, Hey, my screen size is this. I need that image out of a list of say four or five different images. And so when you use our lazy loader, you can turn on this auto-scaling bit that will tell the browser not.
And not just go in with the WordPress default, but to say, Hey, this space is exactly this size, use the image that fits in there. And then the browser will get the perfect sized image or the best sized image for that exact space. And so that works pretty slick.
[00:09:44] Nathan Wrigley: Okay. So you run through some kind of wizard, you go to the you settings and configure it, how you like I'll come back to that in a minute, because although I haven't used your plugin before I have many times gone.
The settings of your rivals of yours, if you like and been really thoroughly confused because of the acronyms and all of the jargon that's going on. And I ended up thinking, okay I'll probably just go with the defaults and let's hope for the best there, but how, where is this work actually being done?
So let's say I get a gigantic photo that has no business being on the. It's got pictures of, it looks like you're into cats by the website. They've got big picture of a cat on your homepage. So we'll upload a massive image of a cat, which is ginormous. What actually happens. Where is the work being done?
Is it my CPU cycles being used for that? Or are you sucking it up into the cloud and doing the work on your end and then pushing it back? How does it all.
[00:10:41] Shane Bishop: That depends on your web hosts. So by default, for most web hosts, it's going to, when you're in free mode, it's going to do all that work locally on your server.
And so it is using up, CPU cycles, most shared hosts can, handle a little bit of that and not be too worried about it. Otherwise they'd be blocking our plugin and, they'd hate our guts, but most of them. Space to spare. They build wiggle room into their servers so that they can handle that.
You know, if you got too many images, say you got 50,000 images, your web host might not be too keen on you compressing all of those, in one day or two days or whatever your server. So that's one of the reasons that sometimes we'll nudge people and say, Hey, maybe we should, sign up for our premium stuff so that you can offload that.
But then there are some web hosts, like WP engine kin, sta flywheel. Bunch of others that are more managed hosts and they will disable a function that's called exec. And basically what it does is it lets PHP execute command line stuff. And that's how we do the free compression normally. But if that's disabled, like it is on a lot of these premium web hosts then.
We actually let you do it for free on our servers, in that lossless mode, in that really quick, here's the bare minimum to get your images whipped into shape. Yeah, that's the difference there with the two different web hosts. Okay. And then of course, if you sign up for premium, then everything is done our on our servers, we don't do any of the work on the local server.
[00:12:32] Nathan Wrigley: So do you shed your, so let's say for example, that I'm on a site and there are, as you say, 50,000 images and I'm paying for your. Premium service. Do you just suck them up over a period of, I don't know. Do you kind share that, so you do 10 an hour or 2050, a hundred an hour, or what have you, so that it's not crippling things for the rest of the day or H how does that work?
And also if your compressing them on your end, does it then throw them back to the media library so that they're visible to us after you finished doing whatever it is that you do. When
[00:13:07] Shane Bishop: you go to the batch or bulk optimizer, you'll see an option that lets you throttle those. And you can go anywhere from, one second up to 30 seconds a minute, or however you want to do that.
And then, yeah, if you did it 30 seconds, it'd be doing what 120 of them in an hour. Which is. Pretty easy on the server. Most of the time five seconds, five, 10 seconds is pretty good. If you're worried about server load and you do have a lot of images. But again, if you're using using the free API mode on one of those hosts that doesn't allow the local version to run, then you really don't have to worry about it all.
You can hit our servers as fast as you want, and we won't care. And then yeah, it brings that optimized version. So w and this is so in the free mode and with the compressed API that you would see if you sign up for premium, those. Download the images back to your server and we never store them.
You know, unless you enable the backups mode, but that's another story. But yeah, so it'll put them right back in the media library. It overwrites the original so that you don't have to update any URLs or do anything weird. It just does it for you. If you use the CDN, one of the cool things with.
As you can get a taste for what our compression looks like without ever messing with your local images. It doesn't touch a single thing. It copies your images to our servers and delivers them from there, compresses them from there and everything. Can we be really nice, then you can play around with quality settings if you want to or anything else and yeah.
Get a good feel for what's in.
[00:14:55] Nathan Wrigley: Yeah, that's great. It, it seems to me that this conversation is really timely because everybody's been talking about the core web vitals and all of that kind of stuff. Th this is, one of the primary benefits now of doing this kind of thing is just simply the SEO benefit.
Do you have anything, any insight for those of us who are not SEO experts as to how much this can help?
[00:15:18] Shane Bishop: I heard to say, how much for any given website. But, there's a classic study and I don't remember the exact numbers, but or maybe not a study per se, but a classic story from Amazon back probably 10 years ago now, where they found that shaving like a hundred milliseconds off their page, load times, boosted revenue in the millions.
It was ridiculous. On their scale, that makes sense. Cause they're bringing in. Probably, millions and millions a day and yeah, a hundred milliseconds is a big deal to them. For, you know, a small shop might be hundreds. Could be thousands for some. So it really depends on, the scale of your business and how bad your website sucks already.
Some people will, they come to us and oh, I didn't see any improvements. Well, your site's already really awesome. Good job. What do you want us to say?
[00:16:19] Nathan Wrigley: There's not a lot. We can help you with your really good already.
[00:16:21] Shane Bishop: Yeah. I mean, we've run into those sometimes, but yeah the most part, and that's one of the things I look at is people like, oh, we're going to pay five bucks or 10 bucks, whatever it might be, depending on the plugin, is it really worth it?
It's really, if you can't afford 10 bucks, you're not making any money on your website. Yeah. Yeah. So that that's the take, so yes, you should see. C a boost. You should see improvements there by making your site faster. Especially if you go from 10, some people go from 10 seconds down to one and it's yeah, your customers are gonna like you,
[00:17:02] Nathan Wrigley: the impressive isn't it?
Yeah. If the images really are taking that long and you didn't bother WordPress itself, I can't remember what version, but it began to. To make inroads into this in a small way, didn't it? I think it was probably version of what was it when 5.8 came out or something like that, they began to strip out the maximum that you could have in a default install of WordPress.
But I'm guessing that you're going above and beyond anything that is default in WordPress. Otherwise you wouldn't have a.
[00:17:33] Shane Bishop: Yeah. Yeah. I think that was 5.4. Good grief. 5.4, 5.8 was the latest. So yeah, I think it was 5.4 was when they said, here's the max pixel dimensions. And of course, if you think, better and want something, that's bigger than that, you can upload it.
But there's really not much reason to go bigger than 25 60. Unless you're. Photography shop float originals, but even then the originals are still there. So you can link to them if you really need to, but.
[00:18:09] Nathan Wrigley: If you get into a position where you wish to revert, I don't know what reason that might be, but you fail that for some reason at a particular image, the compression has actually in some way denigrated it.
And it's a little bit on the rough side. Content with it. Do you keep the original line around somewhere so that they can just restore that or maybe have another pass at compressing it, whatever the case may be. Can you get back the first image that you originally uploaded?
[00:18:38] Shane Bishop: In the free version?
We don't have that mostly because you shouldn't ever be able to see the quality difference because it's literally lossless compression and can't change the quality. But then you get into the premium stuff and there are images. That, give the compression engines fits, especially ones with a, a hard edges.
You put text overlays on top of a name age, and you get those really sharp lines. And some of the compression algorithms really struggle with those. And yeah, there's, we have a backups option that I believe is enabled by default for any API customers. And then yeah, you can go into the media library, swap yourself over to list mode and restore that image.
Or even, you can go in and turn down the compression. To say to lossless and then go. And recompress that, that image in lossless I guess I should clarify, we call it pixel perfect. Because that's literally what it is. Every pixel is preserved. There's no changes in that mode.
[00:19:46] Nathan Wrigley: Okay. They the media library itself in WordPress is a thing, which kind of feel it.
Old in the, I don't know what the expression is. Anyway, it's a bit tired. It feels like it needs a bit of an update and a whole bunch of plugins that I've got do add their own stuff into the media library. They, that columns or they add different things. If you're looking at it as a list mode, what are you putting in there to make it visible?
That things have happened, that the w you know, to make it obvious that the one you're using is the compressed one and so on and so forth.
[00:20:18] Shane Bishop: So it wouldn't. If you're enlist mode, you'll be able to see how many image sizes have been generated, which sometimes catches people off guard. They don't realize that in the background we're pressed, doesn't just have one image when you upload it, it's going to create a thumbnail.
It's going to create medium version, a large version. And depending on the size of your image, it might also create a 1500 pixel version, a 2000 pixel version. So there's a whole bunch of different variants that it uses for different screen sizes that are there. But you'll see how many of those there are.
And then we have a little, expander button that you can click to see exactly how much savings there was on each one of those, the full size, the medium, the thumbnail, large, et cetera. And then from there, And also re optimize an image if you've changed the settings. Usually if you change the settings, we'll have a little orange exclamation point there to let you know that, oh, Hey, you changed something since the last time this was compressed might want to recompress it.
And then as well as some lesser used courses, the re an option to restore from backups and then a conversion options. For example, if you've got an image that's stored in ping and you go, oh, I should've done that in JPEG. You can just one click convert it to JPEG, right? From that list mode, which is pretty handy.
You can go the other direction. Not as often helpful. Yeah, I did have that one time when I was working at the local community college, our logo for whatever reason, had a bunch of cruft in it from Photoshop, shocker. And so it actually had been saved in JPEG, but it was a logo. It should have been in ping.
And so it did that. Yeah, it makes sense to convert that one. So there are some times where that'll be helpful and then gifts. If you have ones that aren't animated a lot of times it's, those will be smaller as paying. And so we have that one click option, or you can go into our ludicrous mode and just do them all that way.
If, for example, with gifts, that's usually a no brainer that, if they're smaller, go ahead and convert them. And the plugin will be smart enough not to convert them. If they're not smaller. I have
[00:22:34] Nathan Wrigley: to ask, is it called ludicrous mode? It is ludicrous mode. Have you seen Spaceballs?
[00:22:42] Shane Bishop: Oh yes.
I actually, I read a review the other day and they're from a different country and so they've never seen Spaceballs and they're like, really, you can't just call it advanced mode. I'm like, I know, but you have to see the movie and then you understand why it's called ludicrous
[00:23:00] Nathan Wrigley: mode. We're not going to explain, but yeah, you a.
Yeah. If you go watch the film with who's the guy, who's the little guy who is dark helmet. What's his name? anyway, let's not go off onto that sort of Australia. Mentioned, swapping from ping to JPEG and what have you. And then a little while ago you mentioned web P. Now I see this cropping up more and more.
My understanding of. We're basically there in terms of compatibility, but I could be wrong about that. Have a memory that safari was holding out or some major browser, maybe it was opera or something, but w what, what are the benefits of web P? What, what is it doing? That's pushing the boundaries and why is it a useful thing to start using?
[00:23:42] Shane Bishop: Yeah, that's a great question. So traditionally, we've had all these different formats, like we've been talking about JPEGs pings gifs, or jifs depending on how you like to say that that do different things and, gifts or frame animation. They also do transparency, but they're limited in colors.
Then you got pings can do transparency. And then. You've got JPEGs for photographs. And so you got all these different formats and I won't go too much more into that, but then Google came up with web P and I don't think they originally came up with it. I think they bought the technology. But anyway, It actually has multiple codecs built into it into this rapper, basically that will do the lossy compression, like JPEG it'll do.
Lossless like ping and it'll also do transparency and animation. And so you've got this one format that basically covers all use cases and it's generally smaller than all of the others most images. Pings. 100%. And not all JPEGs either. It's probably closer to 95, 90 9% somewhere in that range.
Were there they're smaller and we see savings, sometimes up to 40, 50, 60% with web P on images that we've already compressed with our premium compression. So it's pretty impressive stuff.
[00:25:15] Nathan Wrigley: Obviously. There's great benefits there. And you would advise people to use the software that they're using.
Take the images, typically off a camera or something is going to be, I dunno, JPEG or something like that. And then come here. Into web P in that case, are there any pitfalls in terms of browsers that are still holding out against web P?
[00:25:35] Shane Bishop: And so that's the other side of the coin is sure we can con convert it.
And it's great and awesome, but who do we give these images to? And like you mentioned, there were hold outs. Safari was holding out for forever and a day. I don't know why, but they were but they finally added support. As far as I know, all the major browsers do now support web P, but you still get got about four or 5% of web users that are running older versions of those browsers, especially with safari.
But some of the others, especially like internet Explorer, old versions of edge don't have web piece support. So it's, they estimate there's around four to 5% of those folks. And so for those, all of the delivery methods we use in our plugin, Account for that, so that we use conditional delivery so that the folks that can use wet peak get wet P version, everyone else gets, the, the well compressed version from system.
[00:26:36] Nathan Wrigley: So given that let's say that somebody is a customer of yours and they're on the they're on the premium tier, is your recommendation. Blanket recommendation, would it be okay. Go for web P and set it up to full back to the, whatever it might be. So where P first and then anything else?
Second.
[00:26:56] Shane Bishop: Yeah, definitely. And that's what our easy IO CDN does you just turn it on and automatically it's doing that for you. You don't even have to do anything. It just takes care of delivering web P for all your images. If it's the smaller format,
[00:27:10] Nathan Wrigley: when it does, it makes, when the CDN is making decisions about which image it needs to provide many sort of how much latency is that there?
How many round trips does it need to do to come to an agreement that this is the size that we want to do. Okay. Here it is off we go send it over. Is that all happening really fast or is there a little bit of a lag going on there? How does it work?
[00:27:36] Shane Bishop: It's pretty fast. But there is, of course that, that first time we compress an image, it's going to.
Three 400 milliseconds. Sometimes a little more if it's a really big image, but generally, in that range, our average response time right now, I was just going to check is. 150 millisecond. Okay. So I mean, it's pretty quick, but you will notice a little bit of a slowdown besides the extra with using any CDN.
Cause it's got to go from the CDN edge server by the visitor, then go to your origin. This case has got to go to our server, which goes to the origin. Your server grabs the. Does it compression in the 150 milliseconds or so, and Fords it on. So you end up with all of that going on anywhere from half a second to a second, depending on how fast your origin servers as well.
And then once it's cash, then it speeds up from there and it keeps speeding up as it gets distributed to all the servers around the world.
[00:28:43] Nathan Wrigley: Well, that's th that's the nature of the technology, right? There's nothing much you can do about that. I was going to ask you about the history that you guys have had, because like I said, at the beginning it wasn't, it wasn't a product that I was particularly familiar with.
I've heard of your, some of your commercial rivals, but until very recently, I hadn't heard about you, but you've been doing this for a really long time. And I think if somebody has been doing something for a very long time and concentrating on that, there's a lot of credibility in that.
Tell us about that. How long have you been doing it? When did you begin? Have you been through any sort of major iterations or updates or whatever? Yeah, so
[00:29:22] Shane Bishop: this June marked nine years that since I had launched the plugin and it was itself a fork of, as I mentioned, early on CW image optimizer which was.
Also a fork of the original WP smush, which looked nothing like what you would see today. If you installed WP smush, it was run by a guy doing it solo. And it worked with the old Yahoo Smushit API, which is where it got its name. In fact, I think it was originally just called WP smush it and. The plugin itself was okay.
But it was very limited. You could only do images, I think, up to a Meg. And you could only do like 50 or so a month. I don't remember what the exact limits were on the Yahoo API. But now I know it's like 50 a month if they let you do or something like that. And so that's where things started some nine years ago.
And then, couple of years after the. The guy that was doing smush sold it to WP and they really took it off from there. They tried to acquire us. I said, no, I was in, I was enjoying helping people and, you know, kinda set in my own future at that point. And yeah. Nine years and that's shockingly, which I realized just this year longer, even than WP rocket's been around.
Yep. Yeah,
[00:31:01] Nathan Wrigley: crazy. Yeah. It is a really long time. And one of the things that myself and a colleague that I make up podcasts with David Walmsley, he's all about. And I'm all about now off the back of him. Doing the due diligence. When I come across a plugin, I really do start to look now into how long have you been doing it?
How focused are you on it? Have you been doing this exclusively for a long time? What's the support like, and all of those kinds of things really start to factor in but longevity is a big thing. And obviously if you have been doing it for nine years, that's yeah. Incredible. You mentioned That, you on the Yahoo side, you could do sort of 50 images.
What about the limits that you've got do you obviously that's bound to the pricing, so let's get into that. What are the sort of tiers that you've gotten? How much do you get? What does it work like? Is it a monthly fee or is it a per image fee? Just describe how the pricing works.
[00:31:58] Shane Bishop: So in the free version, there's zero file size limits and zero.
A number of image limits that you can do. Even if you're using our free API, we just unlock it. You're doing lossless basic compression. You can do as many images as you want. And we're okay with that. On our paid plans, they come with three different things that come with that compress API that lets you compress your local images, which is really good for saving storage.
Or if that's all you want to use, that's going to make your pages faster and you use that premium compression on your JPEGs and pings. And then of course lossless compression still with the gifts and PDF compression even. All of the paid plans include that unlimited on unlimited sites, whether it's seven bucks a month or 25 bucks a month, then where we start to get into the limits is on the CDN.
And with our new Swiss performance plugin, that's kinda like WP rocket but different. You have the standard plan? That's seven bucks a month. One site you have $15 plan for 10 sites and then $25 a month gets you unlimited sites. And so then the only other limit is on bandwidth and most people never run into that.
We have, you maybe a dozen out of 10,000 sites that have hit their bandwidth limits. Yeah. Yeah. I can say on the software, they're pretty generous compared to what some other providers have. Yeah.
[00:33:35] Nathan Wrigley: The 15, the growth plan as you call it, which is $15. You've got a limit of 400 gigabytes, which is quite a lot.
And
[00:33:45] Shane Bishop: see the inbound people like w how much is that? It's a tough, it's a
[00:33:49] Nathan Wrigley: lot. Really?
[00:33:51] Shane Bishop: Yeah. You look at any of the other companies that are doing the CDN image optimizer thing, and they're not even close to that smushes, like 10.
[00:33:59] Nathan Wrigley: And you got 400 on the 15. And if you go to the 25, you've got double that you've got 800 so close to a terabyte, which is a large amount.
The you mentioned a minute ago about Swiss, which I'd like to come back to in just a second. But I was curious cause I was doing a load of video editing recently and I was like, A Vimeo. And one of the things that I do is run it through a thing called handbrake, which is an app. I think it's open source and available on just about every platform and it takes a video and it makes it really small.
So same sort of idea. Do you do any, you mentioned PDFs. Do you do outside of PDFs and images? Do you get into anything like video or audio or anything
[00:34:39] Shane Bishop: else? We don't do any recompression on the audio and video and of course, most of that's just. Yeah, that's horribly time-consuming if you've used handbrake, which I have yet it takes several minutes while you don't want your visitors waiting several minutes for a video.
That might, no, I hate to even go into that. Cause I don't think we'll ever get into video. You know, most of the platforms take care of, the compression on their side. Yeah. But yeah, it's. But one extra area that we do get into just because we have the CDN. And now of course, Swiss performance plugin is the JavaScript and CSS minification and compression.
And so we, we do that extra on the side with both of
[00:35:30] Nathan Wrigley: those. So it feels like you, so now getting into the territory of, yeah, you do images and PDFs and all those kinds of things, but the. Performance side, alongside the S the JavaScript and CSS optimization. It makes it feel like you'll get a much wider solution than you used to be.
So w what is Swiss performance? You likened it to WP rocket. Anybody that's been listening to this podcast probably knows. What that is, but for those that don't just tell us about Swiss, which by the way is S w I S one S at the end to performance.
[00:36:05] Shane Bishop: Yes. One asked because it's a joke. Of course.
Again, it doesn't stand for
[00:36:13] Nathan Wrigley: anything. Literally it's not an acronym for anything
[00:36:19] Shane Bishop: you can make up, whatever you want. If you cope with something really awesome, you might be all. Maybe I'll use your idea, send you 10 bucks or something for free plan, the life who knows. But it started with something me and my cousin did in college where we meet.
Red shirts with white litter than the lettering that just said Swiss SWIS and just get people, ask what it stood for. It was a lot of fun it's so what I was getting ready to name this, I was like, oh, it'd be so funny. Just to have an ode to my cousin who is also in technology. Yeah,
[00:36:53] Nathan Wrigley: but also if people don't know that Swiss the country is is double S at the end, Switzerland, for reasons quite unknown has a real reputation for like high quality stuff.
Doesn't it? The clothes. That's how I think you've accidentally stumbled there across, across a really genius acronym, which maybe wasn't intended. Hey, what is it? What is it?
[00:37:16] Shane Bishop: So it, it does all the stuff. That's not images. So it focuses a lot on the JavaScript and the CSS. But it also, has a Google font optimizer.
It also has page caching, just like WP, rocket. It has a. Another web P function there. So if you're not using our easy O CDN or any of this stuff in UIO, you can use this web P variant option for the page cache, which will have two versions of the page, one with what P one without same kind of deal, depending on browser support, it'll deliver, whichever version of the page the browser can handle.
And then, we do, of course, async CSS. We're working on a better critical CSS integration. That's the above the fold CSS that it's not render, blocking and can. Render the page as quickly as possible. It does have minify options if you're not using Eza already, it's the same minify engine.
So use one or the other. And then of course it will defer or load JavaScript, Acer synchronously as well. It'll add some extra stuff. It'll automatically enable Jesus compression on your site. If it's not already enabled it'll enable those longterm browser headers that you'll hear talked about sometimes.
So that browsers will cashier your JavaScript, your CSS, your fonts, all of that, for a month, three months, whatever it is. Instead of, sometimes it's a day and then they come back the next day and they got to load it again. That's silly. You probably didn't change your files. And if you did, you'd change the version anyway.
But yeah. So it, it helps out with that some under the hood type of stuff, and then my favorite feature, which is something, a WP rocket doesn't have what, it's more like what you would see from. Asset cleanup pro it's a function that lets you disable JavaScript and CSS on a conditional basis.
So you can disable it on a given page. You can disable them. Site-wide you can say, Hey, I only want it on these three pages. You can do it however you want. It's super flexible. And really lets you dig into that and clean up some clutter with. Kind leads me to some of the newer features of WP rocket that we don't have, which is their delay, JavaScript execution, and eliminate unused CSS.
The way they do it is they try to do automatically, which isn't always perfect because there's. CSS that isn't visible when the page first loads, if it's, you some hidden JavaScript widget or whatever you have to exclude those usually from the WP rocket features so that it doesn't blow up your page.
And similarly on. The JavaScript side, there's some real hurdles that you gotta watch out for to make sure that you're not delaying some of that JavaScript too long. A perfect examples example is a slider. We saw this on a customer site last week, where they were using that feature. And you load their page and there's no slider.
And then as soon as you move the mouse, oh, there's a slider because it's got that delayed JavaScript, which is jarring and not a great experience and really feeds into the CLS or the cumulative layout shift that Google's really hammering on with their core web vitals. So that's something you really got to watch out for is make sure that it's not impacting JavaScript.
That should be loaded. Write it right at the start without being delayed. So we're going to have our own unique take on that down the road here. But this lets the. Slim feature as I call it in Swiss performance, really lets you fine tune that. And some of those others will just hide the fact that you have a ton of crap on your site that shouldn't be there.
And so that's part of the reason that I hesitate to even get into some of that too much, because it's just it's just hiding the crap. It's still going to load. It's just going to load without affecting the speed tests. So it's cheating. Yep. It works. It works. If it's done right. This is the way to say it.
Yeah, I do it right. It's awesome. Otherwise it just ends up hiding a lot of
[00:41:59] Nathan Wrigley: problems. Yeah. I do know what you mean. The the Swiss performance, I can see that it's marked under the standard plan. And then it's carried on into the growth and the infinite. And what have you, is it because it feels like it could be a standalone product, obviously, if you're on the pay to you that comes along for the ride, is it available as a standalone thing or is it just bound to the image optimizer the you image or.
[00:42:23] Shane Bishop: It's offered both ways. Okay. And we did originally started out as a standalone plugin when we introduced it about a year ago. And when we were revamping our pricing plans towards the end of the year, one of the things I really felt strongly about was I wanted to do. A package that just included everything.
We could give them to make their site faster and they could use whatever they want without it being like, oh, I paid 10 bucks and I'm only getting $5 worth now. Crap. No you're paying seven bucks and you're getting like $30 worth. And so you don't really have to worry if you only use one or one out of the three is how we've tried to price it.
So that's one of the things that. Really like about our new plants, but again, you can still purchase. The compressor, API and eco all individually. If, if you just want to pick and choose go the, all the cart method, and those are at links are at the bottom of our plans and pricing page.
[00:43:26] Nathan Wrigley: I can see that you've got. The compression API listed in the product section in the footer of your website, but you've also got the exact DN API. And what have you, I don't know if you want to get into that. It's definitely above my pay grade, but is there anything that's worth mentioning about your API APIs?
That might be of interest to somebody out there, some budding developer?
[00:43:48] Shane Bishop: Sure. Without getting too much in the nitty gritty, we do have, the API is for both easy ale, also known as exact day. That's the system that underlies it. And then the compression API, we have all that documented on the website.
So if you are a developer, say you're not using WordPress, and you want to build something for, Shopify or, or some other platform by all means have at it. There's a lot of, while we're price controls, the majority market share, there's still a lot of other platforms out there and a lot of potential for using our tools on other systems.
And you can really fine tune things via the documentation for those API APIs.
[00:44:35] Nathan Wrigley: Okay. So if you go to u.io forward slash APR, you can find out more about those. Shane we've run up against the time limit. There was actually quite a lot more that I worked to us, particularly along the lines of, how, how does an image even get optimized?
I don't know. Could we just stray into that for one minute or a couple of minutes? Tops? Because when I see an image on the screen and there it is, obviously behind all of that is a bunch of code. And I was saying to you that every so often I accidentally delete the dot JPEG or whatever. It may be on the back of an image.
And when I click on it, it accidentally opens up a text editor and I see what the image is actually containing all of the raw bits and pieces. And that just leads me to think how. Oh, do you even compress an image? How are the decisions made about, okay. This bit, we really can nail this bit. There's a large quarter of the image over there, which has got basically nothing in it.
So we'll do something over there, but this more complicated bit, we probably need to leave that alone because there's lots of fine edges and so on and so forth. How does it even work on a very high level?
[00:45:43] Shane Bishop: Yeah. Keeping them at a pretty high level. It's the analogy I like to use. And I've written about this before is the analogy of packing your suitcase and standard image compression.
Like you'll find in WordPress or Photoshop is like. Going into your ear and milling, you're going on vacation. You go grab your suitcase, you grab a drawer and just dump it in there. And off you go that's not very efficient. You might've taken a bunch of stuff you don't really need, and you might've lost some stuff that you did need, you might forgot your sandals for the beach, who knows.
So. The, the compression algorithms that we're using, I didn't build them. We're using a couple of different ones. One's an open-source project called Caesium. And the other is the compression technology from tiny or tiny ping. And they do what you described. They live. At images on a block by block basis, not necessarily pixels, but blocks being like 16 or 32 by 32 chunks of the image.
And they go, is there areas in this that are really similar, that we could make them even more similar and save more bites? And so that's the general idea. And so you will find those areas or even whole images that are super detailed all over the place. And it's really hard to compress those, but if the.
Nielsen smooth areas and sky open sky. That stuff is really easy to compress. It's that's kind at a
[00:47:25] Nathan Wrigley: high level. It beggars belief to me that kind of stuff is even possible, but amazing that it is. It's incredible. Yeah. Really incredible. So yeah, I think probably we've gone through the little smorgasbord of what it is that I wanted to ask.
Although you specifically asked me to mention the chat that you'd had about delivering JPEG to older browsers, do you feel that you've covered that.
[00:47:50] Shane Bishop: For the most part one, just one word of caution I would throw out there. And this is why that kind of came up is in relation to WordPress 5.8, which allows you to upload web PM just from the start.
The problem with that is there is no fallback. If you use that ability and just upload a web P from the beginning, there's not going to be any fallback. Everyone gets a web P whether they can view it or not. And so that's why, work or close to where I'm okay with that. But there's still, like I said, four to 5% of people that aren't going to be able to see web P images.
And so it's good to have that conditional sort of approach and it's free and our plugins. So why not?
[00:48:32] Nathan Wrigley: That is good to know. I hadn't realized that. So yeah, carry on. The day will arrive when web P is suitable for everybody, but we're not quite there yet. Shane, just before we knock it on the head, do you want to announce any sort of, I dunno, email address, Twitter handle, best place to find you that kind of thing
[00:48:50] Shane Bishop: pro the best way to get in touch usually is our support, email [email protected].
We're also on Twitter at eww IO and Facebook at the same. But we generally, super responsive on email, both Adam and I are chicken that all the time,
[00:49:09] Nathan Wrigley: okay. Right. There we go. Yeah. Thank you, Shane, for talking to us today about you E www.io and all of the benefits that it can bring speeding up your WordPress website.
Thanks very much, indeed. You bet. It's been my pleasure. I hope that you enjoyed that podcast episode with Shane Bishop from U E www, go and check out the product. Do you never know? It might be something you might be able to make great use of certainly going to speed up your websites. And as we know, Google loves all of that.
Okay. On Monday, we will be back with a, this week in WordPress episode, I'll be joined by one of my co-hosts and also by some other notable WordPress guests. We'll be talking about the latest WordPress news from the previous week. You can find [email protected] forward slash live. Alternatively, go to our subscribed page, fill out the form, and I'll notify you when those episodes have come out.
If you can't make it at 2:00 PM UK time. Okay, have a good week. I hope that we'll see you soon. Bye bye. For now cheesy music fading in.
