10 Things You Can Easily Do Today to Speed up WordPress
Articles Blog

10 Things You Can Easily Do Today to Speed up WordPress

August 26, 2019

What is up, YouTubers? A.J. Ghergich here, founder of Ghergich and Company. In today’s 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’m not a developer.” I got you. So 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 plugins,
all free, that you can install. I’ve tried them. I’ve tested them. I’ve setup a demo site for us to play around
with so you can see the results live, see all the settings that I’m 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 am not a developer. I am a marketer. Backup your stuff, right? So 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. This brings us to our first step, which is
to install an image optimizer. I recommend ShortPixel. It 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. Here are the settings that I use and I think
that most people will do the best with. And I’m over in the general tab of the ShortPixel
settings. And 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 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. So checkmark 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 so you’ll
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. Also, go ahead and generate the markup and
optimize for retina and automatically optimize PDFs. And go ahead and check mark optimize media
on upload right here. Obviously, feel free to play around with these. But I think this is a general starting point
that will fit most people’s needs. Let’s take a look at step two. 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. Here are the settings, the general settings
that I think will work for most of you. Just 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. You could, 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’m about to show you a tool that
I use for those steps because it gives us a little bit more control. So let’s go ahead and move to step three. 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. 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. So just 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. However, what I would recommend you to try
if you have a small site is try actually 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’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.” So 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. But 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. 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. So 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. So there is a tool to do that, and we’ll get
to that in just a second. Okay? I just want to show you these last two options. In miscellaneous, I have both of these checked. So let’s move to step four which is related
to this tool here, and this is going to explain how I got this code here for the critical
path CSS. There is a generator – and I’ll have this
linked again – where you can go in and enter your critical path– or get your critical
path CSS. So you just put in your page. I’ve put in the blog post. And here you’ve got to enter your full CSS. Now again, if you don’t know any code, don’t
freak out. All you’ve got to do is go to the page. Right click. Inspect the element. And what you’re looking for is a file called
.css. And 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. It’s right there. And the path may be a little different on
your setup, so just search for it. It’ll be there. Then you go to it. So just paste that in. Here I am. 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. And 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. And like I said, what does this do? And 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 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 another free plugin. It’s going to give us a lot more control,
and it’s going to help us with those kind of nasty render-blocking scripts that are
left over, and clean up a lot of those. So let’s go take a look at the settings. I have it installed. There is a wizard, and you can get a GTmetrix
code for free. And 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’re 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. We’re going to jump over, though, to status. And this is pretty much what you’re going
to want to make sure, right here, that you follow this. We’ve already done this, if you’re kind of
following along in the video, but essentially what it’s telling you is make sure in Autoptimize
that these options are checked. If you follow along, you’re pretty much good
to go. And then you’re going to empty your cache,
and save changes, and come back over to settings. So if you go into settings, this is where
it’s talking about piggybacking on Autoptimize, and it’s wanting to checkmark that. I have set it to defer. Sometimes you’re going to have to set that
to Async as well. Every setup’s different. So let’s walk you through these steps. You want to enable it, of course. And then, to be honest, it’s going to depend
on your setup. You’re going to have to test. So I always try to defer things, if possible. So 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 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. So really, with this one, it looks a little
complicated at first, but there’s just really a couple little settings and you just need
to decide what’s the best mix deferring or excluding for your site. And 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 it plays nicely with each other. 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. Again, with a lot of these, there are other
options. So if you just type in lazy load WordPress
plugin, you’re going to find some other options. I tested a bunch and I really liked this one
a lot. So let’s go check it out. a3 Lazy Load has a bunch of different settings
but they’re all pretty easy and, to be honest, just activate them all. So everything, you notice 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. Just a ton of control over lazy loading. Pretty much just leave everything at default. Turn everything on and you’re good to go. If you find any issues, you can turn something
off. But 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. So it’s going to load– everything below the
fold will load with spinners as well. So 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. So there’s a little lag in the server itself. I’m on just a cheap little host here for this
demo. I’m not on my main server, so it’s slower. But that literally lazy loaded those images. So 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 page speed a ton. It eliminates a lot of requests that aren’t
necessarily needed. 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. So what you’ll 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’s 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. 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 eight is a little bit optional and that
is going to be to install Lazy Load for Comments. If you’re using comments, it can be– actually,
I was surprised how effective it was at increasing the page speed. You can go take a look at it. All you do, you install it. There’s no setting. There’s nothing to do. 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. But it definitely did improve more than I
thought it would. So give it a try and see how it works for
you. Now, step nine is not nearly as optional,
in my opinion. What you’re going to want to do is set up
a CDN. And 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, that kind
of thing, and this isn’t a huge thing for you, I would recommend just using the free
option, CDN by Photon. You will need to install Jetpack. Okay. So install Jetpack. It’s free. Then go in and turn everything off. Just turn everything off except for image
optimization. There’s 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 thing, the image optimization. And what people don’t realize is that actually
WordPress will host your photos for you, even if you have your custom site and all that
kind of stuff. So 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. And so install it. Click the photo optimization and then come
over here to WP Fastest Cache. Click on CDN and just follow through the steps. This is just the– where they’re going to
be hosted doesn’t matter. 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. And that’s it. Done. Now all of your images are being hosted by
WordPress in the cloud and you will see a really nice boost in speed. However, if you’re taking this a little bit
step further, I highly recommend MaxCDN. There’s a coupon on their site, Google for
it or whatever. It’s around 6 to 10 bucks a month and it’s
really, really good. Very, very similar, simple process to set
up. And 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, really,
really good. I would be remiss if I didn’t mention that
Cloudflare has a free plan. Now, you’d think I would probably lead with
that, but I personally think it kind of sucks. But I mean, it is free, so who am I to complain? So it’s not just images. It’s everything. But I’ve had some mixed results and read some
mixed results from it. So 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. That leads us to step 10. 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. Cleans your database. Defragments this and that. It cleans everything up. Removes the trash comments and all kinds of
things like that. So let’s go through this live together, actually. You’ll see when you install it, you have WP-Optimize
and you just click that. And 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’re 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. And 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’ve 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. So we’ve 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’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. And notice there’s very few things left that
Google is telling us to fix for mobile, and that’s really what we’re optimizing mainly
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 it is, and faster it is,
and 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. Right, so 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’s about – compared to the rest of the industry,
and it looks pretty darn good. 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. But 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 make my day.

Only registered users can comment.

  1. Great video AJ, what plugins did not make the list, and what's your thoughts on WP Smush? How many plugins are too many plugins because I get carried away sometimes with all the recommended plugins?

  2. Thank you for this video! It was a great help to getting my site to load faster! I cannot tell you how many hours and videos I have watched with not much luck but this was VERY helpful. THANK YOU!

  3. Thanks AJ for this tutorial. I have followed your instructions and here's my result:

    Site: https://kitchenns.com/bread-makers/
    From Score of Mobile: 65/100 and Desktop: 79/100

    1. Installed: ShortPixel Image Optimizer and WP Fastest Cache
    Mobile: 72/100 and Desktop: 86/100

    2. Installed: Autoptimize plugin with Inline and Defer CSS modified
    Mobile: 83/100 and Desktop: 93/100

    3. Installed – Async JavaScript (most settings are set to Defer)
    Mobile: 96/100 and Desktop: 97/100

    (Possible Optimization left: Leverage browser caching and Optimize Images)

    4. Installed – A3 Lazy Load
    Mobile: 83/100 and Desktop: 94/100

    Possible Optimization left changed to:
    Eliminate render-blocking JavaScript and CSS in above-the-fold content
    Prioritize visible content
    Leverage browser caching

    5. Action – Deleted A3 Lazy Load
    Score back to Mobile: 96/100 and Desktop: 97/100

    6. Installed – CAOS (analytics)
    Same score: Mobile: 96/100 and Desktop: 97/100

    7. Installed – WP Optimize
    Checked options are: Optimize database tables, clean all post revisions, removed expired transient options
    Same score: Mobile: 96/100 and Desktop: 97/100

    The Scores shown are without the "Reduce server response time" showing up.
    I did not install lazy load comment and CDN
    Possible Optimization left: Leverage browser caching and Optimize Images
    I saved screenshots of the pagespeed score for proof

    Improvement plan: If I buy the ShortPixel Image Optimizer Plugin, the score might go up as Optimize Images will be fixed.

  4. Got to know about your channel from one of Brian's tweets and I must say I'm really fall into it. Keep up the good work man 👍👍👏👏

  5. So far only did step one (Short Pixel). Checked before & after of 7 top pages on my site and average increase was 22%. A couple notable increases were raising my desktop speed from 47 to 70, 40 to 60, and 39 to 73. Here's a screenshot of the before & after for my top 7 pages: https://www.screencast.com/t/pcevRGjjqB

    Interestingly, it has appeared to have no effect on Google Analytics site speed overview times. I ran Short Pixel yesterday, and today (Wed) avg page load time is up 55% from last Wednesday. https://www.screencast.com/t/7ovTRHjp5DNM

  6. Wow, nice share ! My http://bkst.vn 52/100 to 84/100 . But, some css auto gen like : wp-content/cache/autoptimize/css/autoptimize_92e08cbd425c405250f074ea9b611259.css make "Optimize CSS Delivery" , how to fix it ?

  7. Hi A.j, thank you for video. My experience has been the more plugins I upload the slower the site gets. Just wondered whether Site Ground Hosting eliminates this issue and can you get away with CDN and number of pluins installed?

  8. Great video. Any specific reason why you recommend WP Fastest Cache over W3 Total Cache. Is it the simplicity that's the driving factor. I've also use Autoptimize on some sites, and have to agree on the optimization of the Above The Fold Content. Great tool!

  9. Hi AJ great tutorial!

    Just one thing regarding Autoptimize, I have very limited options other than in your tutorial where you have many to choose from even within the FREE version. I'm not sure if they have recently updated this plugin but I literally have only 4 options – HTML Options / JavaScript Options / CCS Options / CDN Options, whereas you have some advanced ones to choose from. Due to this, would you advise I stay away from using ASYNC? As I see you mentioned ASYNC Piggybacks onto of Autoptimize so I didn't want to install in case I needed to have the exact same settings you set….. What do you recommend I do? Hope that makes sense lol!

  10. Great video! For the audience, if you want to try the benefits of CDN – I recommend CDN77.com – You can test all their features for 14 days for free and there's no credit card needed.

  11. Thanks so much
    WP Fastest Cache premium version with image optimizer and Free CDN only
    happy with my load time now from 6s to 1.5s

  12. Thanks for this, really well done. Some definite improvements are seen with PageSpeed Insights, etc.
    Much better than my previous settings.

    Curious though regarding the difference in tests on my staging site vs my live site.
    The staging site is a clone of the main site, both on the same server.
    Everything is identical and all the settings are the same.

    When testing my staging site via the GT Metrix API I get:

    Page Speed Scores of 100% / 99%
    Fully Loaded Time under 1 second
    Total Page Size of 2KB
    2 Requests
    All green bars

    When testing my live site via the GT Metrix API I get:

    Page Speed Scores of 63% / 56%
    Fully Loaded Time of 4.97 seconds
    Total Page Size of 3.83MB
    87 Requests.
    Some yellow and red bars

    Wondering why there is such a difference.

Leave a Reply

Your email address will not be published. Required fields are marked *