(Note: This post is a transcript of the above video)
I’m 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’ve 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’m 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’m not a developer. I’m a marketer. Back up 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’m here on the throwaway kind of demo site that I set up just for showing how to do these optimizations. I’ll delete this for security purposes, but don’t worry. You’ll 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’re going to look at just an internal page, a blog post, on this demo.
PageSpeed Insights
Let’s go over to PageSpeed Insights. I’ve already pulled up the scores for this internal page, and you can see it kind of needs some work. It’s 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’ve 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’m 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 won’t 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’ll 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’m hoping the others will adopt it – it’s a really small image size and you’ll want to click that so that if someone comes to your site – say, in Chrome – that 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’s 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.
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’s 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’ll 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 and slow down performance in the end. But for most small sites, it could work really, really well. However, sometimes when you do this, you’ll 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’re 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’re 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. As 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’re 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’s 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’s a generator, where you can get your critical path CSS – I’ve 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 Element’ and what you’re looking for is a file called .css. If you’re 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’ll 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’ve already done that.
What does this do? It’s 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’ve done with setting up Autoptimize. What you’re going to do is install Async JavaScript plugin. It’s 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’s a wizard, and you can get a GTmetrix code for free. It’ll 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’re 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’ve already done this, if you’re following along in the video, but essentially what it’s telling you is to make sure in Autoptimize that these options are checked. If you follow along, you’re good to go.
Then you’re going to empty your cache and save changes, then come back over to settings. If you go into settings, this is where it’s talking about piggybacking on Autoptimize, and it’s wanting to checkmark that. I’ve set it to defer. Sometimes you’re 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’re 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 can’t. Start off with exclude, and then work your way over, defer, Async, if you have to.
There’ll usually be some script exclusions in here, and 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’s 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’ve 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’re 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’re having an issue with Gravatar images and things like that. Turn everything on and you’re good to go – if you find any issues, you can turn something off. I love it that it’s simple and that straight out of the gate, it works really well.
I’ll try to see if I can – what you’re going to look for is the spinner. It’s 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’s a little lag on the server itself – I’m on just a cheap little host here for this demo. That literally lazy loaded those images. It’s kind of almost like if you’re on Pinterest and you’re doing the infinite scroll and then it loads. It’s 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’s 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’m 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 haven’t tested out the adjusted balance rate and things like that. It looks really cool. I’ll 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’s going to be to install Lazy Load for Comments. If you’re 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’ve probably seen that on newspaper sites and things like that before, and 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 are 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’ll need to install Jetpack (it’s free), then go in and turn everything off, except for image optimization. There are 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’m just focused on the one area, the image optimization. What people do’t 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’s 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 can’t 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 won’t need to. Now all of your images are being hosted by WordPress in the cloud and you’ll see a really nice boost in speed.
If you’re taking this a little bit step further, I highly recommend MaxCDN. There’s a coupon on their site – it’s 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’s not cheap, but it’s really, really good.
I would be remiss if I didn’t mention that Cloudflare has a free plan. Now, you would think I’d probably lead with that, but I personally think it kind of sucks. It’s free, so who am I to complain? And it’s not just images, it’s everything. I’ve 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’ll 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’ll see it’s 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 didn’t know that, so this just cleans out all that crap that’s 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’ve set it up to go monthly, but you can go weekly if you want, 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’ve done our 10 steps, so let’s go see what the results are looking like over at Google PageSpeed. I just ran PageSpeed Insights and I’m really happy with what we’ve 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’re up to a 91.
Notice there are very few things left that Google is telling us to fix for mobile, and that’s really what we’re optimizing for. And then there’s 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’ve mentioned that a few times, another great place to test. I just ran a test over there and it was really, really good. we’re 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 – they’re 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’re 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’s 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. Not every single one of these tips will work for your exact setup, but a lot of them will.
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.