WordPress Speed Optimization: The Non-Programmers Guide To Increasing Site Speed

On-page SEO isn’t merely  optimizing your keyword density, or adding in a meta description, or even using rich media like images and videos. Your niche site’s speed is a crucial ranking factor too, that is why WordPress speed optimization is a key part in your site's success.

Any search engine wants its users to have the best experience possible. A fast site improves overall usability which leads to better user satisfaction. That means search engines, especially Google, use site speed as a ranking factor (read our disclaimer though).

The takeaway of this article however, is that faster sites mean increased usability and quality and these are things that Google love. Also, the steps outlined below are just a small fraction of site speed optimization – there are other methods out there and feel free to add them as you see fit by commenting below.

[toc]

What We’ll Learn

  • Is WordPress speed optimization really necessary?
  • Using a Content Delivery Network
  • 5 important plugins to speed up your site.
  • Check Circle
    Discover the Save for Web feature in Photoshop

Is WordPress Speed Optimization Really Necessary?

The answer to that is YES – you need to increase your site speed not only for the search engines but for your visitors as well.

How many times did you navigate away from a website just because it takes forever to load? I know I did many times.

waiting for site to load

Now before you apply all the steps I will list below, check your site’s health first using GTMetrix. Just enter your site URL, click enter and it will show you something like this:

The more important issues are at the top of the list and those should be your priority. Sometimes increasing site speed is just a matter of decreasing your total page size.

If you already have a grade of A, then congratulations! For those still interested to improve their site I have the following tips for you…

Do This First Before Site Optimization!

I wasn’t actually paying attention to my site speed until someone told me she’s planning to optimize her site’s speed.

Since I wasn’t particularly busy that day, I decided to jump the gun and optimize my site. Before I did anything, I checked one of niche site’s status on GTMetrix as a benchmark and got these results:

before site speed optimization

Some background on the page I'm using on this article:

  • Page is a lenghty buying guide.
  • Contains more than 10,000 words
  • Element heavy - lots of images and thrive elements like comparison tables and buttons.

Basically, I have a failing grade in PageSpeed – a staggering 47%!

What's weird here is that my site loads for 10.2s but I have a fairly small page size at only 1.93MB (the average is 2.97MB according to GTMetrix)

Looking closely, it looks like the number of requests is what's increasing the load time, plus the following issues:

speed issues

It looks bad, but nothing a few tweaks won't solve 😉

You don't need to get A’s for all the recommendations. Some will always have a lower grade and this is due to how the theme is coded, or sometimes GTMetrix brainfarts and gives your site a lower grade for no reason. What matters is that your site loads fast! 

WordPress Optimization Tips

Here are some easy-to-follow tips to increase your website speed.

1. Use Save for Web Feature in Photoshop

Non-optimized images are usually the main culprits behind slow-loading sites. I literally shaved around 1.5mb in my page’s file size just because I compressed images and also used the Save For Web feature of Photoshop.

use photoshop's save for web feature

...I <3 Momo ok?

What the feature does is and save the image in a lower file size than your typical Save As without compromising the quality. To save images optimized for web, use Ctrl+Shift+Alt+S. 

A new window will pop up. Just make sure that you ticked the Optimized option on the upper right side and hit Save. Done!

2. Resize Images

WordPress has the awesome ability of resizing images using CSS so you can basically upload a single image and WordPress can resize it for you whenever you need it. Unfortunately, this feature has a downside too.

Using CSS to resize images adds additional requests resulting in longer loading times. While there's a plugin that reduces image file sizes, it's still best practice to resize your images to whatever size is required.

Resize images on Photoshop even if it means uploading the same image in 2 different sizes.

TIP: Use the appropriate photo size. For example, if you need a 1000 pixel by 1000 pixel image, use that size. Don't upload a 5000 pixel picture!

I’m not really sure if this is the best way to go around it – it is a very repetitive and laborious task. If any of you found an easy-to-use plugin or a workaround that can efficiently resize images, do let me know!

3. Use Cloudflare Or Any Content Delivery Network (CDN)

Cloudflare is a Content Delivery Network which distributes your website to different servers around the world. To make more sense out of it here’s an excerpt from their website:

Once your website is a part of the CloudFlare community, its web traffic is routed through our intelligent global network. We automatically optimize the delivery of your web pages so your visitors get the fastest page load times and best performance. We also block threats and limit abusive bots and crawlers from wasting your bandwidth and server resources. The result: CloudFlare-powered websites see a significant improvement in performance and a decrease in spam and other attacks.

Here’s an image of how CloudFlare works:

how cloudflare works

Image credit: Cloudflare.com

Moreover, anyone with a website (not only WP users) can use Cloudflare and setting it up takes nothing more than 5 minutes. It’s hassle free and comes with a lot of benefits!

Honestly, CloudFlare feels a bit clunky for me especially when you edit your website often. This is mainly caused by caching and you need to turn off this feature every time you make changes on your website. Otherwise, you will not be able to check if the changes were made.

Alternative: Use Cloudways CDN

cloudways - wordpress managed cloud hosting

I've just recently used Cloudways and I'm loving the heck out of it!

Cloudways is a bit more complex than your usual shared hosting, but a lot less simpler than unmanaged servers - basically it's somewhere in between.

You won't get stuff like a cPanel and other "amenities", so to speak, so it might take some time getting to used to. However, the server is more focused on delivering websites to visitors as fast as possible.

It's a whole lot of cheaper too. My current plan is only $10/month and it easily handles around 3 websites. 


What I like about Cloudways is that they have a free trial that allows you to see if their managed cloud hosting servers are for you. Click the button below to get started with your free trial. If you bump into any problems, feel free to contact me 🙂

3. Delete Plugins You're Not Using 

Give your plugins page a visit and deactivate and delete plugins you're not actually using. They're just taking up space.

4. Install and Configure WordPress Plugins

Attention: Before you install any of these plugins, make sure you have a full backup of your site before you make and save any changes to your site.

Ironically, installing and using MORE plugins (the proper ones, of course) will result to a faster site. Some speed optimization plugins I recommend are:

WP Super Cache

A staple in my WordPress plugin must-haves, WP Super Cache reuses data from previous requests to speed up proceeding requests. In other words, it makes fewer requests to load your site and this results to a faster loading times. 

Other WP users prefer W3 Total Cache – honestly, it’s superior than Super Cache. I prefer the later though because it feels less clunky and it doesn’t have an annoying popup ad every time I go to the plugin’s dashboard.

Update August 2018: I'm currently using Cloudways' own caching plugin, Breeze. I don't think it's as robust as W3 Total Cache or even WP Super Cache, but it works out of the box and I can use it to easily integrate Cloudways CDN with my site.

Autoptimize

What this plugin does is “concatenate” (don’t ask me what that means) CSS and Javascript code, then compress it. In simple words, the plugin eliminates extra, unneeded stuff like white spaces while still making the code readable.

It’s pretty simple to configure. All you need to do is check some boxes as shown below and you’re good to go.

WARNING: before you install and activate this plugin - this does not work for ALL websites. Sometimes Autoptimize is incompatible with a theme or a plugin you are using and may cause problems.

I strongly recommend backing up your site before using this plugin.

Compress JPEG and PNG Images

The plugin’s name is pretty simple – what it does is compress JPEG and PNG images without losing their quality. To use this plugin simply go to Tools and select Compress All Images.

Take note about the compression limit however, because you only have 500 free credits per month to spend.

Remove Query Strings From Static Sources

One of the most frequent issues I've seen on GTMetrix reports is the "remove query strings from static sources". This can actually be solved easily with a WordPress plugin.

Another straightforward-named plugin, the Remove Query Strings From Static Sources will, well…remove query strings from static sources. You only have to install the plugin and it will automagically do its thing.

WARNING: I’ve read some comments that using this plugin actually does more bad than good, but I’m not so sure what it really means. I recommend further reading and CAUTION when you use this plugin – use it at your own risk!

I’ll update this page when I learn something new, but so far it’s been good to me.

CloudFlare for WordPress

This simple plugin just makes sure that CloudFlare is in sync and running optimally with your WordPress site. Only install this if you use CloudFlare. It’s simple to configure too.

Just go to Plugins, find the plugin, and click Settings. You will be taken to page that requires you to enter your domain name, your email address, and Cloudflare API key. The CloudFlare API key can be found on your CloudFlare account under Settings.

WP Optimize

When you edit and re-edit a page or post, WordPress usually stores past revisions somewhere in your site's backend. 

If you're like me, that edits and re-edits an article a bajillion times, your post revision history is going to be huge and this will slow down your site.

Installing WP Optimize will delete these revisions and clean up your databases without touching any code. Quick and easy!

wp optimize settings

I mostly keep the settings out-of-the-box as I don't want to play to much with the more risky settings. Just tick the boxes I did and click the "Run all selected optimizations" button.

Images and other media are the main culprits of a slow loading page, but you can't really do away with them can you? A big wall of text will only bore your readers.

And the worse thing is, browsers by default load an entire page in one fell swoop. While this allows the browser to "save" or cache the page, it also downloads the part that visitors might not actually read. This means memory and bandwidth wastage.

So what's a good solution? Just download the part of the page when the user accesses or scrolls down to it to save resources. That's what Lazy Loading is.

5. October 2018 Update: Use a fast server!

Your web host is also a huge factor when it comes to loading speed.

It doesn't matter if your website is optimized to the tee - if your hosting sucks, you're site will still load forever. 

I entered a JV for this site and my new partner offered to transfer it to one of his ultra-fast LiteSpeed servers!

What I Did And Results

Of course, no self-respecting test should come without results. Here are my GTMetrix results as well the assumed direct effect of site speed in my rankings.

GTMetrix Results

After implementing those above, here is the result of my GTMetrix scan:

before site speed optimization

Before WordPress speed optimization.

after speed optimization

After speed optimization.

Yes, the loading time IS still high, but this is 10,000 word article with a shit ton of elements, I don't think it will load for less than a second.

That means if you have a smaller page - say, 5,000 words of content - I'm pretty sure you're loading speed will be around 1-2 seconds.

However, when you compare it to our benchmark of 10.2 seconds, that means I shaved 3.5 seconds off of the loading time. And that's huge!

The Total Page Size also decreased by 1,255KB (from 1.93MB to 937KB) which is pretty positive for me as well. Overall we did have some improvements:

  • Improved PageSpeed score from 47% to 52% (+5%)
  • Reduced Fully Loaded Time from 10.2s to 6.7s (-3.5s)
  • Lightning Bolt
    Reduced Total Page Size from 1.93MB to 675KB (-1,255KB)
  • Reduced number of requests from 379 to 286 (-93 requests)

Unfortunately, 6.7 seconds is still slow. The most ideal loading time, at least for me, is 1 second and under, but given the massive size of this page I'd be happy with around 3-4 seconds

Looking closer, we see the following unsolved issues:

remaining issues after optimizing the page

There's a Keep-Alive issue that can only be solved via htaccess (basically code-level stuff), and a minimize request size issue that might have something to do with affiliate links.

Increase In Rankings???

I don't have enough of test websites to check if improving site speed will indeed increase rankings, but Google has been open about proclaiming that loading speed is a small ranking factor.

Takeaways

This is a good starting point for those who want to improve their site speed without touching code. 

This tutorial is ideal for not so massive pages - I tried this with a page that's about 3,000 words long and had success reducing loading speed to around 1.7 seconds.

  1. WordPress Plugins make it easy to improve your overall site performance.
  2. Optimize and compress your images because they are usually the bulk of a page size. Doing so can shrink your total page size up to half.
  3. Google uses page speed as a ranking factor. Optimizing your site will improve site usability and overall quality and will most likely result in improvements in ranking.

What's Next?

If you have a big page like mine, you might want to check out our next speed optimization tutorial. This time, we're going to have to touch code! Pretty exciting don't you think?

Don’t forget to share this article with your friends and if you have any question or comments just go ahead and comment below!

Leave a Comment:

3 comments
Dillon says

Cheers for this. An actual practical guide with some great plugins instead of the same stuff rehashed over and over. As soon as you mentioned autoptimize I knew you at least had some sense ?? I also didn’t know TinyPNG had a plugin so that was great to see. I ended up following this guide to a T and got my page load time from 1.7s to 0.7 with a first byte of 0.188s, so overall huge improvement.

Reply
    Yesh says

    Hey Dillon,

    Thanks for commenting and liking the article. Didn’t expect someone reading my blog this early in the development phase.
    This article was borne out of my actual search of a way to increase my site speed so this is definitely NOT rehashed content. ?? Hope to see you around. Cheers.

    Reply
      Dillon says

      I know of you through groups ?? Social presence no matter how small, matters, and that proves it. Keep up the great work bud.

      Reply
Add Your Reply