10 Things You Can Easily Do Today to Speed up WordPress
I am hopefully going to help you to solve your WordPress site speed issues. Now, a lot of you are like me. You’re a marketer. You’re not a developer. And I keep hearing people like, “I know my site’s slow, but what am I going to do? I am not a developer.” I got you. I tested bajillions of plugins and options all designed supposedly to speed up your site. Many of them did not work. I have come up with 10 steps, mostly all free plugins, that you can install. I have tried and tested them on a demo site for us to play around with so you can see the results live, and all the settings that I am going to walk you through.
I am going to give you exactly what to do to speed up your site and it’s going to work. Now, that does come with a caveat. I am not a developer. I am a marketer. Backup your stuff, right? Back your site up before you go and start — even though it’s just mostly installing plugins and things like that. Back it up. Be safe and that way there’s no issues if something you install causes a bug. You don’t have to freak out about it. Or even better, if you can do it on a staging environment, please test there. I am here on the throwaway kind of demo site that I set up just for showing how to do these optimizations.
I will delete this for security purposes, but don’t worry. You will get everything you need in this video. This is just a stock install of the latest version of WordPress and then I installed this responsive theme called News Mag. It’s free and I just thought it would be a good one to test. For the purposes of this video, though, we are going to look at just an internal page, a blog post, on this demo.
PageSpeed Insights
Let’s go over to PageSpeed Insights. I have already pulled up the scores for this internal page and you can see it kind of needs some work. It is 68 out of 100 and 77 out of 100. Don’t fixate too much on the score, whether good or bad. It’s better to just look down here about what you can do to fix these other things.
Step 1 — Install an Image Optimizer
This brings us to our first step, which is to install an image optimizer. I recommend ShortPixel, which is a freemium tool. I have tested a whole bunch, looked at their ability to compress, and this one does a really great job. You get about 100 free credits a month and if you want to, you can do one-time purchases for a few thousand images — it’s really, really cheap — and then go back to the freemium model. It’s all up to you.
Settings for ShortPixel
Here are the settings that I use and I think that most people will do the best with. I am over in the general tab of the ShortPixel settings. I would recommend most people go with lossy compression. If you’re super anal, you could go with glossy, but honestly, try lossy out. You probably will not be able to visibly tell that the image has been compressed, but you’re going to get a lot of savings.
The next thing I would say is go ahead and include the thumbnails. You notice that I don’t have it included and that’s because I didn’t want to run out of credits for this, but normally you would want all the images optimized. Back them up.
CMYK to RGB conversion and remove the tag data. Check mark all of those and then move over to advanced and check mark WebP versions.
WebP is a format from Google. It works currently on Chrome and on Android. I am hoping the others will adopt it. It’s a really small image size and you will want to click that so that if someone comes to your site, say, in Chrome, they’re going to get an extra speed boost because these images are going to be shown as WebP images.
Go ahead and generate the markup and optimize for retina and automatically optimize PDFs. Check mark optimize media on upload. Obviously, feel free to play around with these. I think this is a general starting point that will fit most people’s needs.
Step 2 — Install a Wordpress Cache
Step two is to simply install a WordPress cache plugin. There are a ton of options out there, but I recommend WP Fastest Cache. The reason why is — it’s dead simple to use and it is very effective.
Settings for WP Fastest Cache
Here are the settings, the general settings that I think will work for most of you. Go over to the settings tab once you’ve installed it, enable the cache system, enable pre-load, and go ahead and set it up where it can clear the cache on new posts and updated posts. Skip down to gzip, enable that, and really importantly, enable browser caching. That’s going to see a really nice boost in speed. Now, I would just save this, and you’re good to go.
If you want, turn on the — to minify the HTML CSS and combine the CSS and JavaScript. That’s a totally recommended thing. However, I am about to show you a tool that I use for those steps because it gives us a little bit more control.
Step 3 — Install Autoptimize
Step three is to install Autoptimize. It’s all smooshed together as one word that shares the O, but it’s Autoptimize. It is a fantastic tool and it gives you that control that I mentioned.
Settings for Autoptimize
Once you install it, go ahead and go into the settings and try mimicking this setup. You’re going to want to checkmark for it to optimize your HTML. If you have a lot of comments in your HTML, you can enable that as well. For JavaScript, you’re going to optimize that. And what it’s really doing, it’s minimizing the impact of your HTML, taking out spaces, things like that in your JavaScript, and it’s going to be combining them into — let’s say you have like seven JavaScript files. It might combine them into one. Check mark optimize JavaScript code and aggregate inline JavaScript as well. Then go down to your CSS, optimize the CSS, doing the same type of things, combing your CSS as well.
I would recommend you to try (if you have a small site) inlining all of your CSS. It will make your site really, really fast. The problem is if you have a larger site or get a lot of traffic, it could be a little bit too much to do, slow down performance in the end. But for most small sites, it could work really, really well. However, sometimes when you do this, you will go to Google PageSpeed, and it’ll tell you, “Hey, you’re having issues with above-the-fold content when you have this on.” You are going to have to try it out. Sometimes it’s an amazing little boost to just inline the CSS, depending on the site.
For a lot of people, what you are going to want to do instead of inlining — like I said, give it a try, but instead of inlining, you want to inline and defer. And you can see here I have some CSS code. Now, I promised that we weren’t going to do any coding. You don’t have to worry about it. You don’t have to know a lick about CSS to do this. What you are going to do is you’re going to basically inline above-the-fold critical path CSS, and then you’re going to kind of load the rest of the CSS after the page loads. There is a tool to do that, and we’ll get to that in just a second. I just want to show you these last two options. In miscellaneous, I have both of these checked.
Step 4 — Prioritize Critical Path CSS and Defer the Rest
Let’s move to step four which is related to Autoptimize, and this is going to explain how I got this code here for the critical path CSS. There is a generator, where you can get your critical path CSS. I have put in the blog post and here you’ve got to enter your full CSS.
Steps for Creating Critical Path CSS
Now again, if you don’t know any code, don’t freak out. All you have to do is go to the page, right click, select Inspect the element and what you are looking for is a file called .css. If you are using Autoptimize, it’s going to be autoptimize/css. You can literally just command F and hit search, and you’ll see it. The path may be a little different on your setup, so just search for it.
Then you go to it — just paste that in.I don’t have to know what any of this means. Command A, command C, and then go back to your Critical Path Generator. Paste that in, and that’s all the CSS that we have. Just mash this button here and it will generate the critical path CSS you need to load above the fold. You can see right here — we had all these characters in a big file — that it’s reduced drastically down. You just command A, command C. Copy this out. Go back to Autoptimize and you can paste this in, and you can see I have already done that.
What does this do? It is just taking that critical stuff in your CSS and inlining that, and then delaying the rest. You don’t have to understand how it works — just know that it works, and go ahead and hit save changes. Empty cache. And remember always to, whenever you’re making changes, empty both of these caches.
Step 5 — Install Async JavaScript
Step five is going to piggyback off of what we have done with setting up Autoptimize. What you are going to do is install Async JavaScript plugin. It is going to give us a lot more control, and help us with those kind of nasty render-blocking scripts that are left over.
Settings for Async JavaScript
There is a wizard, and you can get a GTmetrix code for free. It will do some testing and show you, “Hey, if you defer the script, this will happen. If you set it to Async, this is going to happen.” Or you can exclude it, and I recommend you do that. We are not going to do that here, though. we are going to jump ahead, but you can do that, and it gives you a lot of different data to go on.
Jump over to the status tab — make sure that you follow this. We have already done this, if you are following along in the video, but essentially what it is telling you is to make sure in Autoptimize that these options are checked. If you follow along, you are good to go.
Then you are going to empty your cache, and save changes, and come back over to settings. If you go into settings, this is where it’s talking about piggybacking on Autoptimize, and it is wanting to checkmark that. I have set it to defer. Sometimes you are going to have to set that to Async as well. Every setup is different. Let’s walk you through these steps.
You want to enable it, of course. Then, to be honest, it’s going to depend on your setup. You are going to have to test. I always try to defer things, if possible. Set it to defer, and if that breaks things, set it to Async. Same thing with jQuery. A lot of times this is the most difficult one to get rid of, and sometimes you just cannot. Start off with exclude, and then work your way over, defer, Async, if you have to.
There will usually be some script exclusions in here. You may or may not be able to remove them. I was able to remove them and not exclude anything and nothing broke. Nothing changed. It looks a little complicated at first, but there is just really a couple little settings and you just need to decide what is the best mix deferring or excluding for your site. Then you just want to make sure that if you have Autoptimize installed, that you have checked this and set it to defer or Async as well so they play nicely with each other.
Step 6 — Install a3 Lazy Load
Step six is going to be to install a3 Lazy Load. I tried a bunch of different plugins and this is the one that worked best for me. A3 Lazy Load has a bunch of different settings, but they are all pretty easy and, to be honest, just activate them all. I have everything on, but it does give you a lot of control, like if you are having an issue with Gravatar images and things like that. Turn everything on and you are good to go. If you find any issues, you can turn something off. I love it that it is simple and that straight out of the gate, it works really well.
I will try to see if I can — what you are going to look for is the spinner. It is going to load — everything below the fold will load with spinners as well. You could see that little spin around there as it was loading. It happened a little too fast to see here. Let’s go to the home page, though. You see the spinners? Yep, right there.
There is a little lag in the server itself. I am on just a cheap little host here for this demo. I am not on my main server, so it is slower. That literally lazy loaded those images. It is kind of almost like if you are on Pinterest and you are doing the infinite scroll and then it loads. It is mimicking that type of feature and it really actually will help your pagespeed a ton. It eliminates a lot of requests that aren’t necessarily needed.
Step 7 — Install CAOS, Complete Analytics Optimization Suite
Step seven is to install CAOS, Complete Analytics Optimization Suite. Love that name. This is for all of you using Google Analytics, which is everyone. What you will find, annoyingly, is that when you run PageSpeed, it complains to you about Google Analytics a lot. It’s like, “Hey, it’s render-blocking. It is not doing — “ It is pretty annoying but you can do this and what you’re basically doing is hosting it locally and it works great. It’s pretty fantastic.
Settings for CAOS
I am over in the settings for CAOS and it’s quite simple. Just plop in your ID, and I highly recommend you take advantage of the cool feature that allows you to put this in your footer.
I have not tested out the adjusted balance rate and things like that. It looks really cool. I will have to play around with it. But for now, it’s simple as put this in, save changes, and Google PageSpeed will start to give you a lot better score.
Step 8 — Install Lazy Load for Comments (Optional)
Step eight is a little bit optional and that is going to be to install Lazy Load for Comments. If you are using comments, it can be effective at increasing the page speed. All you do, you install it.
Settings for Lazy Load
There are no settings for this plugin. You just install it and down here you say, “Load comments,” and that would load the comments. They flow out. You have probably seen that on newspaper sites and things like that before. It definitely did improve more than I thought it would. Give it a try and see how it works for you.
Step 9 — Setup CDN
Now, step nine is not nearly as optional, in my opinion. What you’re going to want to do is set up a CDN. I would recommend going to WP Fastest Cache, clicking on CDN, and there’s a few different options. If you’re just an everyday blogger and this isn’t a huge thing for you, I would recommend just using the free option, CDN by Photon.
Settings for Fastest Cache
You will need to install Jetpack — It is free. Then go in and turn everything off, except for image optimization. There is some options in Jetpack you can play around with. They might be cool for you, like their social sharing, or the comments and things like that. You can attempt to turn them on later and see how your scores do, but for now I am just focused on the one area, the image optimization. What people do not realize is that WordPress will host your photos for you, even if you have your custom site.
If you select the CDN by Photon, it’s not a typical CDN where all your stuff is hosted in the cloud. It is just your photos, but your photos are one of your heaviest things on the site, so it is worth installing it. Click the photo optimization and then come over here to WP Fastest Cache. Click on CDN and just follow through the steps. You can literally select random. Pick any of the URLs — You cannot go wrong. Hit next. These are the file types. You’re probably going to want all of them, and you can specify specific sources. You probably will not need to. Now all of your images are being hosted by WordPress in the cloud and you will see a really nice boost in speed.
If you are taking this a little bit step further, I highly recommend MaxCDN. There’s a coupon on their site — It is around $6 to $10 bucks a month and it’s really good. Very similar, simple process to set up.
If you wanted to take it a step further, and you were working in a larger company, I highly recommend Fastly. It is not cheap, but it is really, really good.
I would be remiss if I did not mention that Cloudflare has a free plan. Now, you would think I would probably lead with that, but I personally think it kind of sucks. It is free, so who am I to complain? It is not just images — it is everything. I have had some mixed results and read some mixed results from it. You could give it a try, give their free plan a try and see if it works for you, but for most people, I think hosting the photos or doing MaxCDN is going to be pretty much perfect for you.
Step 10 — Install Wordpress Optimize, WP-Optimize
Step 10 is going to be our final step and that is to install WordPress Optimize, WP-Optimize. This is basically like a house cleaning tool that cleans your database and defragments this and that. It cleans everything up. Removes the trash comments and all kinds of things like that. Let’s go through this live together.
Settings for WP-Optimize
You will see when you install it, you have WP-Optimize and you just click that. What I would recommend is either doing another backup right now — they recommend it as well — and just select everything, unless you just see something and you are like, “No, I don’t want to remove pingbacks.” Up to you.
Select everything you can and run it all. It’s very, very fast. In this case, you will see it is zero spam comments have been removed and things like that. I actually had run it a little bit earlier, but on my main site there were things like 1,000 post revisions that were being stored and I did not know that, so this just cleans out all that crap that is in there that you may not be aware of.
Second thing is to go over to settings, and I love this, enable the scheduler. I have set it up to go monthly. You can go weekly if you want to, and you can tell it what to do, and you save the settings, and you’re done. Now you don’t even really have to worry about this because it just does it for you. It’s beautiful and it’s going to keep your WordPress house cleaned up.
Retesting PageSpeed
We have done our 10 steps. Let’s go see what the results are looking like over at Google PageSpeed. I just ran PageSpeed Insights and I am really happy with what we have been able to accomplish with just a few steps, installing these plugins and optimizing them. If you remember back, we had a score in the 60s on mobile and 70s on desktop. Now we are up to a 91.
Notice there are very few things left that Google is telling us to fix for mobile, and that is really what we are optimizing for and then there is desktop — we got a 95 out of 100, and you can just feel it on the site when you’re clicking around, how much snappier and faster it is. Google’s picking that up as well.
Let’s go over to GTmetrix — We have mentioned that a few times, another great place to test. I just ran a test over there and it was really, really good. we are down to one second to load, great scores, 98 for Yslow and 89.
I don’t care as much about Yslow but I can tell you right now what it is. They want us to do a full CDN. Right, they are big on that. If we had a full CDN, like MaxCDN, we’d probably have just about 100 with Yslow as well. We kind of have that partial CDN with the Jetpack optimization of the photos.
Still really, really cool and you can see how well this is working. Lastly, let’s go look at Think with Google. I ran a quick test. Now, this is two seconds but this is over 3G and they’re saying this is excellent. You are going to have a low visitor loss due to this and you can get a free report. We covered that in our last video, but check this out, too. It compares us to the business and industrial industry — that is what it thinks the site is about — compared to the rest of the industry, and it looks pretty darn good.
Conclusion
Down the comments, let me know what your starting scores are and try some of these things out. Remember to backup first. Try some of these things out. Not every single one of them will work for your exact setup but a lot of them will. And then let me know what the improvement is or if you have any questions. I love to see somebody saying, “Look, I started out with a 50 or a 60 and
now I have a 95.” That would be fantastic and would make my day.
