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.
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.
10 Things You Can Easily Do Today to Speed up WordPress | Social Media Today
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. Checkmark optimizes 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
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.
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 recommen