Home > Personal Development > How to Improve Your WordPress Site Speed

How to Improve Your WordPress Site Speed

8 Comments
Post Pic

The internet user is a fickle beast; keep them waiting for just a split second too long and off they pop back to Google to see what your competitors have to offer.

A whole bunch of websites, yours included most likely, run on WordPress: it does after all power about 25% of the web. WordPress is a great easy to use platform but one thing that it isn’t is fast, at least not without a little bit of work on your part.

Why is site speed important?

Fast sites not only stop fickle users from leaving early, but have other benefits. Google for one uses site speed as one of its search engine results ranking factors. This means fast sites have a slight edge over slower sites.

Fast sites are also better for mobile users, especially those not lucky enough to have a decent data connection. Google is also in on this action with its AMP project to help speed up mobile site load times.

Finally, it’s just a lovely user experience to be able to access a site initially and internal pages, at blazing fast speeds!

How to check your site speed

The obvious method is to load up your site in a browser and see if it’s quick or not, but that’s not very scientific!

Luckily there are several site speed test sites out there that can provide more accurate metrics as well as some advice on what might be slowing your site speed down.

ITT speed test

Oh oh, looks like we have some work to do!

A word of warning, like with most metrics it’s easy to focus on them blindly. However not everything is always controllable (external JavaScript for example), so the scores should only be used as a guideline to find what is in your control that you can improve.

A perfect score is rare indeed especially for a site powered by a CMS – it’s always a balance between functionality and speed.

That being said, there’s a lot that you can do to speed up your site!

Use a decent host

I’ve built a lot of sites in my time and I’ve had the privilege of building sites for numerous clients on a wide range of hosting platforms.

One thing that’s obvious is that the host and hosting package you choose can make a marked difference.

I’ve built two virtually identical sites (from a structural point of view) on two different hosts, one that ran incredibly slowly, in both the admin and front end and the other ran like lightning.

Rather than reinvent the wheel, check out Code in WP’s review of the fastest hosts for WordPress.

As well as a generally decent host, the package you buy affects speed too.

  • Shared hosting (among the cheapest you can buy) has hundreds of sites on the same server, all using the same resources.
  • VPS (Virtual Private Server) still shares the server with other sites but a heck of a lot less.
  • Dedicated servers are the most expensive option but the only sites on the server are yours.

The general rule of thumb is the more expensive the hosting package, the more resources you’ll get to run your site with, the faster it can be.

Use an optimized theme

Every single page load involves your theme; it is after all the front end structure of your site.

A theme full of “features” half or more of which you’ll never use, adds a lot of bloat and complexity to a theme and if executed poorly by the developer can contribute to slowing your site down.

Even if a theme is feature light, if it’s poorly coded it can affect site speed negatively.

The default themes (Twentyseventeen, Twentysixteen, etc) are all really fast as they have very little in the way of features.

There are several blogs that have run some tests on different popular themes to highlight their speed.

Obviously your mileage may vary as these were likely tested on basic installations of WordPress, but they are worth reviewing.

If your theme is not on the list one option would be to create a basic WordPress site, say on a subdomain, and install the dummy data and your theme. Run it through a page speed test site. Then swap themes to a default theme like Twentyseventeen and do the test again.

That isn’t a scientific test but it will give you an idea of how your theme compares to a basic but well-crafted theme.

Caching Plugin

Note: a lot of managed WordPress hosting has built in cache, so a plugin isn’t needed. Refer to your host to check on this.

WordPress uses PHP to run your site and while this provides developers with the ability to provide you with lovely features like e-commerce systems and the like, PHP cannot beat the speed of a pure HTML site.

That’s where caching plugins come in.

While they have various other features, the basic idea is that they convert your PHP pages into a lighter weight HTML version and serve that to a visitor. This reduces the amount of work the server has to do dramatically,

Minification

By default JavaScript and CSS are nicely formatted, human readable files. That’s great for developers but pointless for browsers.

Removing all the comments and whitespace in a file can reduce the files size by over 50% easily.

As an example, the jQuery 3.1.1 library is 261kb in human readable form and a mere 84.7kb minified!

Those savings matter when you have a variety of JS and CSS on your site which most WordPress site do!

Not all caching plugins provide this option, but if yours doesn’t there are plugins out there that can achieve this.

Concatenate

While minification shrinks files down, concatenation (awful word I know!) joins the files together. –

The idea is to reduce what’s called HTTP requests. A large number of HTTP requests slow a site down, so if you have 10 CSS and JS files, that’s 10 HTTP requests.

Concatenation takes those 10 files and turns them into 1 single file, thus only one HTTP request!

Caching plugins often have a concatenation option but if yours doesn’t this plugin can help.

Load order

JavaScript and CSS files are generally loaded in one of two places: the header at the top of the site and the footer at the bottom.

The ideal placement is that CSS goes in the header, and JS in the footer. The reasoning is CSS is needed early to style the site and JavaScript can block other things from loading (like the all-important content!) before it loads itself, as such loading them last can help with perceived page load time.

The problem is that themes and plugins don’t always follow that rule! The Scripts to Footer plugin can help resolve this for you.

CDN

The world is a big place and even though the internet is fast and getting faster, it still take time for data to get from one place to another.

Content Delivery Networks (CDN’s) effectively help you cheat this by duplicating your content to different servers around the world. This means that instead of someone in Japan having to wait on data arriving from a European site, they get the data from one of the CDN’s servers in Japan or Australia: much closer!

Even on a more local level, if your main server is in New York and your visitor is in Los Angeles, having a CDN can still reduce site load speed as most CDN companies have a network that spans the continental US.

A CDN usually isn’t cost effective for smaller sites but as your traffic, and hopefully earnings, grow a CDN can take your site speed to the next level.

Pimp Your .htaccess

The .htaccess file is kept on your server in the root folder of your website and it’s an incredibly useful little file.

This file is basically a configuration file for your server and if used correctly it can do some powerful things to help speed up your site.

NOTE: if you’re not confident editing your .htaccess, get a developer to do it for you. Even if you are, make sure you have FTP or cPanel access to your site so you can delete the .htaccess file if you make a mistake that stops the site working.

GZIP

Did you know that most browsers accept HTML, CSS and JS files zipped? This means that you can compress a file even further than just minification reducing the amount of data needing to be sent to the browser.

For browsers that don’t accept GZIP files, the server will send normal ones.

You can enable GZIP by adding the following code to your .htaccess:


# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml

# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent

Code courtesy of GTMetrix

If you need further assistance setting this up, Kinsta has a great visual guide that walks you through the process of enabling gzip compression.

Browser Caching

As well as caching files on your server, modern browsers allow you to cache images etc. directly on the visitor’s computer. This means that repeat visitors can get super-fast loading times as some of the files are local to them already!

Enabling browser caching is again as easy as adding some code to your .htaccess.

## EXPIRES CACHING ##

ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"

## EXPIRES CACHING ##

Code courtesy of GTMetrix

Optimize images

Images are likely the largest files on your site, and possibly the most numerous ones too! An un-optimized image can be huge and take forever to download bringing your site to a crawl.

I’ve seen people using images downloaded from a stock photography site with no optimization, meaning the images are several megabytes each!

I’ve written a detailed article on image optimization, and you should take the time to read through it and implement optimization on all your existing and future images.

Remove unnecessary or poor performing plugins

Plugins are a double edged sword: they provide amazing, maybe necessary, functionality to your site, but they also add a lot of weight in terms of extra code.

That’s fine if the plugin is useful and used, but it’s often the case that an inexperienced site owner will install a bunch of plugins and never use them. These should be deactivated and removed.

Even deactivated plugins can add “weight” as their settings might still be in the database and uninstalling the plugin should remove those settings (see the Clean Your Database section below to find out why that’s not always the case).

Even useful plugins can drag your site speed down if they are poorly implemented. You can take a look at this yourself by using the P3 Profiler plugin. This plugin by GoDaddy provides metrics on the plugins you use and can help you see which ones are slowing your site.

It’s advisable to run 4 or more scans at different times/days as external influences (server resources, what the plugins are doing at that time, etc.) can affect the scores, so one scan alone won’t help you pinpoint any problem plugins.

Plugins that are consistently slow across multiple scans can then be reviewed to see if there are any suitable, faster, alternatives available.

Remove anything pointless

Hearts cascading across the screen on Valentine and snow at Christmas are very atmospheric but pointless! Widgets and plugins like this only add to slowing your site down, and to some visitors seem unprofessional.

It’s advisable to remove any plugin that has no value to your business or visitors from the site.

Optimize your content

Your content makes your site yours! It defines what you do and who you are as a person or business.

It can also contribute to site speed in various ways.

Use excerpts

A lot of home pages use a “blog roll” style of listing all your posts. Category archives also do this by default as well.

If your posts are displayed in full it can actually slow a site down as the page will be loading multiple posts, including all the respective images, videos, and code.

Instead use excerpts. Excerpts are small descriptions of the post, either the first few hundred characters or a hand crafted description. None of the content code, images etc are loaded this way.

Most decent themes have a setting that can control this. WordPress Settings > Reading settings also has an option to change the posts display to a summary.

Excerpt setting in WordPress

Reduce the post count shown

By default WordPress shows 10 posts per page. This option can be changed in the Reading settings, and perhaps the theme. By showing less posts per page you’re making less queries and loading less data. This is perhaps a good option if you prefer to load the full post content on your post feeds.

Reduce the number of shortcodes

Shortcodes are an easy way for add plugin functionality to a post, such as a contact form.

However, every time a shortcode is shown to a user, the shortcode is converted into actual code that does things. This additional code adds further weight to the page load.

Normally this isn’t a major issue, but if you load a post with lots of different shortcodes then you will have a speed issue.

Paginate comments

Comments are a great way to engage with your site visitors and normally aren’t a problem. If your site is popular (congrats!) you might end up with an awful lot of comments per post.

Loading hundreds of comments is a sure way to slow the loading of the page, so it makes sense to load those comments into different “pages” by adding pagination to comments.

Luckily, WordPress makes this super easy to do as it’s a setting, Just head to Settings > Discussion and look at the settings around the Break comments into pages option.

WordPress Comment pagination setting

Split long content into multiple sections

I was wondering whether to do this with this post as it’s getting quite long!

Have you ever seen those sites that make you click a “next” button or a “1, 2, 3” button in order to carry on reading the article? That’s exactly what this is about.

Instead of one long article you can easily break it into however many sections that you want.

Again, WordPress makes this super easy, just add the “nextpage” tag to wherever you want the break to be. You can add it as many times as you’d like.

<!--nextpage-->

Reduce your image count (or be lazy)

Even if you optimize your images they can still take up a lot of bandwidth, so one option is to simply reduce the number of images you use in each piece of content.

That isn’t ideal though as images bring life, interest and usefulness to a site that would otherwise look dull and boring as just text.

As such if you can’t or simply don’t want to reduce the number of images, you can implement lazy loading instead.

Lazy loading is a technique of not loading an image in the browser until the reader scrolls to the image.

This is obviously an advanced technique but thankfully clever plugin authors are here to the rescue.

There are several plugins that will lazy load your images and even one for videos!

Reduce HTTP requests

An HTTP request is basically the server getting a file or data from the server. An external HTTP request is the same but from a different server.

As it’s connecting to another site there is delay as it connects and obtains the data. Reducing these requests can help speed up a site.

Examples of external HTTP requests include:

  • Google analytics
  • Google fonts
  • Gravatar

Obviously some external requests are needed: analytics is a point in question.

However things like Gravatar can be reduced or removed. In fact Gravatar is a pain as it loads every commentator’s gravatar image in a separate HTTP request. That means the number of HTTP requests can mount up very quickly, especially if you’re not paginating comments.

Gravatar HTTP Requests

Each one of these is an individual Gravatar request. Luckily the post in question used comment pagination!

There are a couple of options to handle this. The first is a bit drastic: disable comment avatars in the WordPress Discussion settings.

If that’s not ideal, then you can use a plugin like WP User Avatar to add a local avatar. The settings allow you to turn off gravatars and just use the local avatar, thus reducing the HTTP requests in a single strike.

Query monitor is an excellent plugin to find out what queries and HTTP requests are being made so you can figure out if they are useful or good to be removed.

Upgrade to PHP 7

Compared to PHP 5.6 (a current popular version with most hosts) PHP 7 performs twice as fast with 30% less memory.

As WordPress uses PHP for its code, this is a huge speed increase! Not every host supports PHP 7 though, and even the ones that do might require you to be on a VPS or dedicated server to use it.

Note: Not every plugin or theme will be happy with a move to PHP 7 so test this out on a development/staging version of your site before you do it on your production site!

Clean Your DB

Your database is the heart of your site: it holds your settings, your posts and much more.

Over time a database can get filled with all sorts of data that isn’t needed anymore: orphaned settings from plugins, revisions and more.

Removing this unnecessary fluff can help speed up database queries by removing data that gets lumped in with other data (post revisions for example).

The speed increases are possibly negligible but it’s also good practice to keep the database optimized.

Once more plugins come to the rescue and you can use either WP Optimize or WP Sweep, both will tidy that database for you with a few clicks of your mouse.

Reduce or remove post revisions

Talking of post revisions, rather than just cleaning them from your database, why not reduce the number being created in the first place?

By default WordPress will store every revision you make of a post. This means that if you like to fiddle and change your posts either for content changes or spelling errors or OCD, then you might end up with a lot of revisions taking up space in your database.

To change this you need to add a couple of lines to your wp-config.php so you’ll need FTP or cPanel access.

I recommend backing the file up first as a precaution.

Add a line before the line that says:

/* That's all, stop editing! Happy blogging. */

Then add the following

define('WP_POST_REVISIONS', 3);

If you want to stop revisions altogether use:

define('WP_POST_REVISIONS', false);

The Bottom Line

WordPress might not be the fastest website platform out of the box but with a little time, effort and the helpful tips above anyone can have a lightning fast site!

8 Comments

  1. Here’s a tip in caching. I’ve tried Supercache and WP Fastest Cache.

    I’ve tried CloudFlare for CDN but had trouble using FTP so I’m not sure if going to use CDN anytime soon.

    Nonetheless, the caching plugins, image optimization etc. help in speeding up and cleaning my blogs.

    Reply
  2. Hey Steve,
    what a informative read, I think It was more than worth it to soak it all in.
    I always try to choose fast, responsive WP themes for my sites, but I had no idea about things like Minification or Concatenation.
    I’ll definitely make good use of your advice as I go hunting for that split seconds.
    Thanks & Keep up the good work,
    JT

    Reply
    1. Steve Razinski says:

      There are definitely diminishing returns here. Your site should load fairly quickly, but don’t kill yourself trying to shave off fractions of a second.

  3. Man, you’re right about plugins being a double-edged sword. There are so many that people are convinced are necessary when sometimes it just makes your site cool.
    I’ve learnt to work with the capabilities my website has and save plugin power for things like AMP as it is one plugin that I definitely needed.
    For some reason, when it came to uploading images, WordPress always denied me with an HTTP error which I found confusing until I started scaling down my images to a much smaller pixel ratio and now they upload easily. Now I see that it may have been a saving grace because it did optimise them better.

    Reply
    1. Steve Razinski says:

      P3 Profiler has always been helpful for me. I run it after setting up a new site to see what plugins are pulling the most power and increasing load times. From there, you can decide if the plugin is actually worth using or if it can be replaced with something more versatile.

  4. Wow, I love the value you give in this post. There are quite a few that I already knew about, but more that I didn’t have the fainted idea existed.

    Are you sure you didn’t just make up words, concatentate, really? What a word. haha.

    I will defo be bookmarking this post for future reference.

    Reply
  5. This is all so complicated! You broke it down into fairly simple information, so thank you. I made the mistake of not optimizing my images on the first site I made and now the site is huge! I find that a lot of personal blogs will have large, non-optimized images and they take forever to load. I have had issues with google fonts eating up my page speed. I hate how many plugins are on my site, but it seems like you need them for so many things. I use WP Edit to delete my post revisions, but the FTP method seems like it would be better.

    Reply
    1. Steve Razinski says:

      There are plugin options like EWWW Image Optimizer that will go through your media folder and automatically optimize any image you have uploaded in the past. It’s extremely easy and can shave off quite a bit on file sizes.

Leave a Reply