Speeding Up Your WordPress Site, From Slow Sloth To Speed Cheetah, Part Two
We look further into all the things you can do to make your WordPress sloth of a website into a true speed machine. We also look at some of the most essential services like CDNs to caching plugins. Then we look at a really paramount subject of image optimization.
I feel this is one of the most critical areas that most none user who are not professional WordPress designers or developers need to understand. This is the subject of image compression. With more people every month coming to your website using mobile devices than desktop computers and combining this with the large pixel size photos that come from people’s iPhone and other smartphones that people use all the time to upload to their photo’s to their WordPress media library.
Then when they use them in their WordPress pages, and posts they resizing these images using the internal WordPress image cropping tools. What they probably don’t know is that the size of these pictures i.e. the weight of this files does not change. So users get slightly mislead because the non-technical user thinks that every is OK however what this leads to is images that are still very large being loaded onto their key post or pages which leads to them being painfully slow to load when using a mobile device.
Finally, we look at online resources that can give you more detailed information connected to this whole important area.
JD: Hi there, folks. This is WP -Tonic, episode #106, and I’ve got my beloved co-host. Introduce yourself, John.
JD: Sounds great. He went that route, folks. So this is actually Part Two of how to make your WordPress website into a speed machine.
We had a great panel discussion on Saturday. If you go to the show notes for show 105, in the show notes there’s a great discussion. But we ran out of time, folks. So we thought we’d give it another butcher’s (look around) and look at the elements that we didn’t get time to really go into enough depth.
So John, I think we’ll look at CDNs first. We did discuss them in show 105. But can you give the audience a brief outline what a CDN is?
JL: Sure thing. What a CDN is — that is an acronym for Content Delivery Network. A CDN allows browsers to download more components of a web page more quickly.
JD: That’s great. We covered this extensively, folks, in show 105. So go have a look at the show notes or have a good old listen to the episode. It’s great stuff.
I’m going to take caching plugins. Like I say, we went through all the leading ones.
One of the things I will just point out, folks, is I’ve seen people have multiple caches, you know. Their hosting provider has got a [built-in] cache — and they’ve got cache plugin. Also, CDNs can do some caching. You could end up with a lot of caching.
So you’ve got to keep that in mind. Would you agree with that, John?
JL: I would. [Could you] give the folks at home just kind of a brief outline, if you can, of what
JD: Well, fundamentally, in temporary memory — in the browser memory the site puts a version of it [into a folder for the browser to remember]. So if something doesn’t change all that regularly, it watches and then, it checks things over a period of time and you can adjust that. Some of these plugins or services have normal settings. But normally, you can go and flush it or set it. But they check the website to see if there are any changes. If it doesn’t do that check to see, it brings up a stored version.
So it means the browser is not having to upload everything from the ground up. You probably notice, folks, if you do front flush out your browser — the cache — your passwords, all the cache in your browser — and you load a page up — it normally takes a fair while.
Am I explaining that reasonably, John?
JL: Yeah that sounds perfectly right. It’s kind of like storing a snapshot of your site resources — and if things haven’t changed, it [the browser] just says, “Okay, that hasn’t changed and we’ll just pull from right here [the cache folder].”
JD: Yeah, let’s quickly go through number 3. We could discuss that extensively.
I think one of the other things we discussed, folks, is we went into hosting and themes and we’re not going to discuss this now.
JD: But optimized imaging — I think this is the biggie when it comes to speed, and a lot of people that are not professional web designers or developers — or some that say they are — you can get into a real pickle on this, can’t you? With the sizes of images that you lined up.
Can you give a quick explanation why this is important, John?
JL: So in the average web page, every bite of information — every piece of data that you have to download — takes time. And the resources in your web page that take the longest to download — or I should say, make up the biggest component of most web pages — are images.
The people who are coming to your site, their browsers don’t have to take as long to download.
JD: Let’s see if John agrees, I think the biggest problem is smart phones like Android and iPhone. When you upload your upload from your iPhone and from your smartphone, and you don’t understand that much about resolution, folks — those pictures are enormous. They are like two to three thousand pixels lengthwise and in height. Then they go into your Media Library [in WordPress when you upload them directly].
Then with WordPress you can crop them. [Using the built-in tools]. So it looks okay, but you are actually uploading the original [high-resolution] photo. Is that correct? That’s correct, isn’t it?
JL: Yeah, that does happen a lot of the time. There’s many cases where you’ll build the website, and then the client will be, “Okay, I’m going to add photos to it. Why is this web page taking so long to upload?” “This page is really slow.”
A lot of times, it will turn out they’re taking a photo with their phone [and uploading to their website]. These photos are basically the same size as if you took them with a professional camera, uncropped. Uncropped, un-resized, un-optimized and just loading them directly into their site.
I don’t know if you’ve ever sent photos through email — your email with your phone — but most of those [photos] are approaching like two megabytes — just each photo.
So yes, that can make a huge difference in your page speed right away.
JD: Now one of our great panel came up with a nice plugin [suggestion] that’s called Imsanity.
It will be in the show notes for this episode as well, folks. and Imsanity automatically resizes huge image uploads. It sounds pretty sweet. Have you actually used it yourself, John?
JL: I have not used it, but I have seen this plug-in before. The plug-in image, you can’t miss it. It is a free plug-in on the WordPress plugin repo.
So definitely something to check out if it resizes those large files. That’s definitely something to check out.
JD: Another one that came from the panel — Optimizilla. O-P-T-I-M-I-Z-I-L-L-A. It’s an online service image optimizer. Your smart combination.
You can upload 20 images and it compresses them, and does all sorts of things. It looks like it’s a free service, actually. It could be quite useful.
Looks good, but I’ve never tried it myself. I think I’ll give that a butcher’s (look) as well.
JL: Optimizilla — that’s definitely something to check out. And compressing — for those people in the audience that don’t know what that means — say you’ve got a photo, and you’ve got 100% of the information there.
What [image] compressing does, is it takes out just little bits of information here and there, that aren’t going to affect the overall quality of the image. You can remove 10%, 20%, 30% of the information from the photo, and it’s going to be indiscernible to the naked eye. But it’s saving ten, twenty, thirty percent of the weight of that image — of the file size.
JD: It’s funny how things come back and go in website design and development, isn’t it, John?
Because when I first started, you know, you used to have to go in Photoshop for hours optimizing your images. And then broadband hit and then you thought those days are gone. And now with the mobile back, they [image compression] comes back, don’t they, John?
JL: Yeah, that’s true. We are living in a mobile-first society, where more — way more than half of the total internet usage is on your phone. I mean, actually that was almost two and a half years ago — where that tipping point began — where mobile outpaced desktop use. Now everybody has the phone in their hand, from the minute they wake up until the minute they go to bed. So you have to optimize for mobile.
JD: Right. So let’s go on to another one. There are websites, folks, that give you insights about what is turning your beloved website into a sloth.
The main one that comes to mind is the beloved Google and its PageSpeed Insights. But to make that [Page Speed Insights] happy, it’s virtually impossible.
Got any insights about Google Page Speed and how you should treat what they’re saying, John?
JL: OK, so with Google PageSpeed Insights, it’s basically a guideline of what you should be doing. Most of the information there that you’re going to find is good. It’s going to give you general advice like compress your images, and make sure you’re not render blocking — putting blocking resources in the <head> of your document.
It’s going to tell you stuff like, here’s some tips to make it faster. Now, that being said, Google really pays attention to how long the page actually takes to render. And specifically, one of the most important things is the time to first byte.
Part of that has to do with your server configuration. Part of that has to do with the way that your theme might be set up. But essentially, I would say about eighty-five percent of what Google PageSpeed Insights is telling you is correct.
I will say this, too: Getting a hundred percent on there is impossible if you use Google Analytics. Or if you use any sort of third party analytics. So to let everybody know that — I’m stating one more time — there is no way to get 100% in Google PageSpeed Insights if you use Google Analytics or pretty much any third party tool, like embedded analytics code.
Because those things change [regularly] and they don’t have [long caching, or caching on your site.] They’re not cached on your server. They are cached on Google’s servers.
Now, do not do this on your live website [without testing], folks. Not a great idea. Normally because it might not work out that well — the effects [of code minification].
JL: Is that what you’re saying, Jonathan? Test it somewhere [safe] first?
JD: Yeah, because sometimes you can’t reverse it as well as you could. Which on a live site — especially if you can do an effective backup regime — isn’t going to be a great ending for you, folks. So it depends if you have got backups. If you’ve done a site backup. You’ve got to [have] a test site that you’re trying to use one of these plugins to compress all your CSS. Now what I mean by “compress” is all the white space [is removed from the code.] Depending if the person that coded it [the website] up is nice and tidy.
It depends on how the theme was developed. Sometimes they provide a nice, tidy theme where the developers they provide a non-compressed file — just so you can see that. And then they provide a compressed version [of the files] — that type of thing.
That’s about right, isn’t it, John?
So if you minify [your code], that’s not really human-readable. It’s just a big smush of characters. But it still works. You’re just taking out all the white space and saving a few more bytes.
JD: But be careful of these third-party plugins. Some of them you’ve just got to try out, folks. It depends.
What would you say — excluding membership and e-commerce [websites] — if this was just a promotional website — how far realistically in your experience can you get it [on Google PageSpeed Insights]. Can you get into the mid-nineties or low-nineties for the Page Speed on Google?
JL: I would say 90 is a reasonable goal.
I mean, definitely, you want to get it above 85, if possible. 90 is very reasonable. 90 to low-nineties is very reasonable.
JD: The other tool is — I don’t know if you’ve got one that you like — but the one I use a little bit is Pingdom. I find their information quite useful. Are they anyone that you use?
JL: Yes, I have used Pingdom in the past. For the listeners at home [this service] is basically is you can see how long it takes to download a site from a certain location. Basically, it tells you how many seconds — how many milliseconds — it takes to download your page. So you can get a real sense of how fast is my page actually downloading.
JD: The only thing with it is some of the languages a bit techie, isn’t it?
But if you do a good search, there’s plenty of write-ups and info about what it means.
Isn’t it? So I think we’re going to go for our break, folks.
We’ll be back with more advice on how to turn that sloth of a WordPress website into a speed sheeter. We’ll be back in a minute, folks. We’re coming back Like I say, it’s all about how you turn that sloth into a cheetah.
Do you like that metaphor, John?
JL: Yeah, I think it’s pretty cool.
JD: I try to be entertaining, John.
JL: I want to mention — we were talking — oh I’m sorry, I didn’t mean to interrupt here, but I want to mention there’s two more tools that I want to mention when we’re measuring PageSpeed really quick.
One is the WP Engine Page Speed Test. So, WP Engine has a speed test tool, and they’re basically collecting your information, they will try and contact you later, but they will give you actual snapshot of your site — as it’s [real-time] downloading — as it downloads. Then they’ll give you some suggestions [on how to improve].
The really cool thing is, like Pingdom, it’ll give you how many seconds it takes download. But there’s two things that will measure. It will measure the above the fold [page loading] — how long that takes to download — which is what’s on the top of the screen, and then the full page.
One other thing that you can do too, if you’re a developer, is go into Chrome Developer Tools — I think you go into the Network tab (or something like that), you go in there and you can see — there’s a certain setting where you go in, and you can reload the page, and you can see what the time to first byte is. That again — that’s what SEO Roundtable and a couple of other places like Moz have written about. This time to first byte seems to be the one speed metric [Google pays close attention to]. It really has an influence on page rank.
JD: Great stuff. Let’s go on to useful tools. One that I’ve found, which would be in the show notes, is by Tomasz [a WordPress developer from Poland]. Gonzales is the plugin.
But a lot of the time, for various understandable reasons, developers are calling external libraries …and it’s just a ton of scripts being called. They tend to be called on every page, even if the page doesn’t use that script.
So what this plug-in allows you to do, folks, is you can switch off individual scripts. It comes with a nice interface and you can test it, and you can see if that script is being loaded. Or it tells you if it isn’t being used on that particular page. Then you can say, “don’t call it.” That’s not bad, is it John?
JL: That’s pretty good. so say if I had slider on the home page and —
JD: You wouldn’t do that anyway, John, would you?
JD: Yeah, not bad is it?
JL: It sounds pretty awesome.
JD: I haven’t used it, but the person that recommended it seemed to know what he was talking about, so I decided to use it — it’s worth a go, isn’t it?
But not on your live site [before testing first], folks.
JL: No, don’t cowboy code. Have a staging server and all that.
JD: So let’s have a look at disabling embeds.
So basically, the last couple versions of WordPress — they come with embeds and seemingly like can take up a bit of room. So this one [plugin] is called Disable-Embeds. https://wordpress.org/plugins/disable-embeds/
Have you heard of that one, John?
JL: I have not heard of that. I do know that WordPress has the OEmbed as a feature now where you can drop in a URL or embed a different page. An embed is say — here’s this other site and I want to embed it in this page. Here is a little — what they call like the card.
JD: Yeah it’s a total pain — I don’t want to sound like an old Grunchon here, I just wish they had something on the tick-box for each page, so you could untick it [automatic embeds] because half the time, stuff starts appearing, and I can’t get rid of it. And I want to format it myself. Do you understand what I’m talking about, John?
JL: I do you know what you’re talking about. Where you’re dropping in stuff and — almost like Facebook does [with embeds]. Where you drop any URL, and it’ll pull in that card — like a mini card of that page.
That’s basically what the oEmbed feature on WordPress is doing now. Your Twitter [account] does the same thing.
JD: But WordPress Core team, this isn’t Facebook. So give us our options, will you?
JL: “But we have to compete with Facebook, too!”[both laugh]
JD: Oh, god. On to the next one.
Disabling emoticons: these are the horrendous — what do you call them? The smiley face?
JL: Yeah, we used to call them smileys back in the day, and now we call them Emoticons.
JD: Well that gets loaded, folks. Even if you don’t know — you probably don’t even know what the hell we’re talking about. But they’re there and it’s loading [when the page loads]. I don’t know how much time you’re going to save, but it all helps, doesn’t it, John? So there is a plug-in — it will be in the show notes, folks, called Disable WordPress Emoticons it’s called.
JL: So I’ll say this — so with the emojis, that’s basically like a font that [the website] it’s loading, all the time. So if somebody wants to type a : )
and make like a little smiley face, it loads it as a font. So this [plugin] basically says, “Don’t load that font and we can save one more font file.”
JD: Can I tell you this story, John?
JL: Yeah, go ahead.
JD: I had a client about a year ago, that’s how they use to communicate with me — by text (I used to have to send a smiling emoticon..)(A crying man…) [laughing] (That’s how we used to —) I’m not kidding you, folks.
JL: I think the texting talk is getting — it’s gotten really creative like with the flipping tables and the shrug. People are really creative. But I’m going to say this really quick, if I can interject I that reminds me of something else, too.
JD: John, you don’t mean — I have to explain, John’s very polite to me. What he means is you’re talking dribble, Jonathan. Can we get back —
JL: No, no, no —
JD: [laughs] hahaha.
JL: But what you’re saying reminds me of something else. When you say you don’t want to load the emoji font, I that’s another thing too. You know, staying away from themes where you load up — a different font for every — every headline, and the body text. When you’re setting up a theme, if you’re a developer, do try to be cognizant of your Google Fonts and how many you’re using in your design.
Don’t load up the entire — like, five [different] fonts and every variation of that in your design.
JD: Yeah, what about these Swiss Army kit [themes] from certain marketplaces. I’ve got a feeling they’re —are they loaded?
Because they come with a load [of different fonts]. Are they loading all those fonts automatically, do you think?
JL: Well, if people select them, [it will]. They give people the option to load different fonts.
Let’s say if you want Open Sans Extra Bold on the headlines and then let’s say Montserrat on the body text — but then on this other headline, you want to load Cabin —
JD: Okay, you have to — don’t go any further. It was making me feel ill, actually.
JD: There you go, folks. Get one of those themes that have about 60 different freaking fonts loading at once.
JL: “Why is my site bogged down?” Yeah!
JD: [laughs] Sorry, folks. English sarcasm.
Then we’ve got something very linked to what you’re saying about that. It’s called Local Host Analytics. And I’ve got a feeling it enables you to run on your local [environment] — if you’ve got a version on your local machine. I did read it, folks, it’s been a long day.
But it is it’s called https://cs.wordpress.org/plugins/host-analyticsjs-local/ .
So I think it gives you either a local version [of Google Analytics] or does something where the problem John was talking about where you can never get close to a 100 [score] with Google Page Speed — especially if you’ve got Google Analytics — which is quite funny really isn’t it?
It’s one of their own products makes it practically impossible to get a 100. This helps in some way with it. I should have read it a bit more carefully. It came from one of the better of our panel on Saturday.
Do you know anything about this, John am I just waffling?
JL: You’re not waffling. You’re actually introducing me to something that I didn’t know about.
And it seems that that would be a good time to test — when you’re still developing this site on your local machine or your laptop or desktop computer. And see that here’s some areas that can be improved.
That would be like a good time to find that out — not after you’ve launched it.
JD: I’m going to go through some resources now, folks that if you do a Google search for “speeding up WordPress” or “my WordPress site is like slow treacle” .
JL: or like molasses in January?
JD: Yeah exactly. There’s — I’m going to butcher his name — Gregory Ciotti.
If you do a search he always comes almost out #1 in search ( http://www.sparringmind.com/ ).
For “speed up WordPress” he always comes up. I’ve read the article already a few times and it’s not bad. It’s mostly about how to deal with Google’s Page Speed Ranking.
Another one that comes up a little bit — he’s got a lot of plugins that he says “do this, do that, do the other” — which is fine.
I wouldn’t do it [test new plugins] on your live site, all right? What do you reckon, John?
JL: Always test on a developmental site before you port those changes to a live site.
Don’t experiment on your live website. Yes definitely.
JD: But then we’ve got our regulars for Smashing Magazine. I’ve read all this stuff numerous times, folks. I’ve got an article from Smashing Magazine — it’s from 2014 but I think it’s been updated, How to Speed up your WordPress website. ( https://www.smashingmagazine.com/2014/06/how-to-speed-up-your-wordpress-website/ )
That’s not bad, and then another really popular one from all the people that specialize in all those multi-site plugins. John, have you —
JL: WPML? no, that’s the multi-language plugin. I know who you’re talking about. [Note: It was WPMU Dev. The article is https://premium.wpmudev.org/blog/speeding-up-wordpress/ ]
JD: When you do a search for “speeding up WordPress”, there’s four websites that always turn up.
They’ve always got very extensive how-to-do’s. And this one is The Ultimate Mega Guide to Speeding Up Your WordPress by Daniel Pataki — Polish, folks. It’s D-A-N-I-E-L —
Are you happy, John, that I have to try and pronounce these names, aren’t you?
JL: I’m pretty ecstatic about it, actually.
JD: I could tell, because I make a dog’s breath of this, don’t I? I get a few notes from you
beloved listeners about my pronunciations. I’m very happy that it makes you laugh so much, folks. But it’s a mega-write-up and it’s not bad, folks. So I’ve given you three kinds of [articles].
Another one is from Brian Jackson.
I think it’s woorkup.com ( https://woorkup.com/speed-up-wordpress/ ) Brian Jackson is his name. He’s been on a couple of other WordPress podcasts, and he spoken about [page speed] on W-O-O-R-K-U-P.com. He’s got some good posts on that website, with some good advice about how to turn that sloth into a cheetah.
So John, I think we’ve quickly gone through what we didn’t manage on Saturday. Got any kind of ending comments?
JL: Sure thing. One other thing I want to mention is, if you’re coding up the site you can use a technique that was talked about by Harry Roberts of CSSWizardry fame — and that is theDNS prefetch. Where you save a few milliseconds by having the browser look up — pre-looking up the domain of certain resources.
Use this sparingly. Don’t go hog wild on it. Just look that up: “dns prefetch Harry Roberts” and you’ll get a better idea of what that is. [ Link to article: http://csswizardry.com/2013/01/front-end-performance-for-web-designers-and-front-end-developers/ ]
JD: Do you use that when you’re getting close to that 92 and 93 [on Google PageSpeed] that you’re aiming for and you just can’t do it?
JL: Yeah, that won’t really show up in your Google PageSpeed Insights at all. Depending on how much use it, it will save you 10 milliseconds, 20 milliseconds, 30 milliseconds — here and there. Because what it does is, instead of having to look up the domain name when the browser goes to download the resources, it will just already look it up before it goes to try and render the page.
And what this is good for is — say if you’ve got resources from Google, like APIs, if you’re using Google Fonts, or say you’re using Facebook or something — it will go and look up that domain name.
For your own domain name it doesn’t need to look it up. It’s just for external domains.
The DNS, that’s something that comes with these checkers. I don’t think Google PageSpeed looks into this, but some of the other checkers out there do. One of the other [page speed] effect factors is your DNS and how it’s treated. It’s a bit techie, folks. The transcription will probably have some links in it, but what John is talking about is very important factor. I forgot about that. Because how your DNS is treated can [affect page speed]. Especially if there’s something wrong, it can really slow it down, can’t it, John?
JL: That’s true, and depending on what — say if you have a site and you are linking to Google Analytics or something like that — and say it [the code] was in the <head> of your HTML document. And so let’s say Google Analytics [the server] was completely down.[The browser] that would be looking for that file to render the page. So depending on what you link out to — to assemble your page, it can affect how long it takes for your page to render. So, it’s just one of those things you want to just shave like a few extra bytes here and there. I would say tackle all the other things first, then start looking at little things like that.
JD: Yes, that’s great news. Well, folks, thanks for listening. Do remember folks, go to iTunes. Subscribe to the show, and please give us a review in iTunes. All you have to do is either click the five stars or there’s another button nearby.
You can write up a little review and that would be gracious. And why not join us on Saturdays between 10am and 12 noon Pacific Standard Time on Blab.im.
We have a great panel every Saturday of WordPress experts. We love people joining us on Blab and leaving their comments and questions.
If you need any help in the second hour, if Blab doesn’t blow up, we normally try and help people out. I won’t be there this Saturday. I’m going down to Orange County, folks. So John’s going to be on his own.
JL: Flying solo.
JD: Right, see you next episode, folks. Bye. Say bye, John.