pixel
User Probe Logo
FAQPricingSign InGet Started

Increase WordPress site speed - The ultimate step by step guide

As you read through this guide we recommend you make an action list, limit to three steps; Then revisit when you obtained them.

Why Website Page Speed Matters

If you have landed on this guide, you presumably already know the benefits of optimised page load speed; and are ready to take action, below I have the key benefits, however, if you want more detail information see our guide on why page speed matters.

Over time if neglected a WordPress site can grind to a halt, Your website users are impatient, the longer your site takes to load the more likely they are to bounce back to the search results. Recently Google and other search engines have started to use your website speed as a ranking metric.

Here are some eye-opening facts from the lighthouse audits panel;

  • As the number of elements on a page increases from 400 to 6,000, the probability of conversion drops 95%
  • The BBC has seen a loss of 10% of their users for every extra second of page load
  • Rebuilding Pinterest pages for performance increased conversion rates by 15%.
  • Walmart saw a 1% increase in revenue for every 100ms improvement in page load.
  • By reducing the response size of JSON needed for displaying comments, Instagram saw increased impressions.

Auditing

Before you start to make changes you should gather data; quantitative data enables you to show how your page load time changes over time scientifically. Enabling you to address the low hanging fruit first, and prevent you from misusing time on improvements irrelevant to your site. You should consider using a dependable service such as User Probe, that is independent of your internet connection.

Key metrics (lower is better) to look out for are;

  • FCP - This is the `First Contentful Paint`, this is the duration after navigation that the users first see content on your website. You should be aiming for a score of under 2 seconds.
  • Speed Index - A composite metric that will give you a more accurate idea of how the site is populated, A score of under 3 seconds is considered good.
  • Server Response Time - How quickly your hosting starts sending the page data, A value of under 200ms is desired.

Hosting Performance

Hosting is terminology we use for the servers that deliver your webpage; It's important to note that not all web hosting is equal. Imagen the speed difference of an original iPad, vs a current generation, similar concepts apply for your website server.

There are four categories of hosting; these are from inferior to best;

  • Shared Hosting: Generally the cheapest entry-level option. Your site uses the same resources as other sites. Hence WordPress can slow down if other websites are experiencing high demand, this is known as the bad neighbour effect.
  • VPS: While still using the same physical hardware, Virtual Private Servers (VPS) often guarantee you a minimum resource allocation, to alleviate the bad neighbour effect, they also often have shared burstable resources.
  • Dedicated: This is when you have 100% of the hardware to yourself, no sharing required.
  • Cloud: Elastic cloud options often provide the best scalability and performance; moreover you are only charged for the resources that you use, In GAE Standard this can be as little as zero if nobody is currently on your site.

It's not just the hosting that plays an effect on your site speed. Where your servers located can play a significant role in the speed of your site. Data takes time to travel, so for example, if most of your users came from the UK, it would make more sense to have servers in the UK as opposed to the long journey your site must travel from servers in the USA. In this guide, we have included options such as a CDN and preemptive loading that can help mitigate server location.

Finally, the hardware that is used to run your site can have a significant effect, The storage technology SSD vs HDD, how much memory you have available, and the CPU speed all play a factor. If you use a cloud solution, you should be able to autoscale the resources based on the current demand; else your host should be able to display the current load on your dashboard.

We recommend investing in reliable hosting as our number one tip for improving your website speed. Focus on dedicated resources and server location over fancy features that you seldom use. See BlueHost for some of the best options for managed WordPress hosting, and Google Cloud for the best Cloud Hosting

How to optimize WordPress database for performance?

Wordpress is a dynamic CMS; Composition of the web page happens on request, to speed up the process first we need to get a basic understanding of what's going on. First off is the queries to the SQL WordPress database. It then generates HTML (understandable by the client device) from the PHP templates.

These extra steps over a static site all add time, that slows down your website, So it's essential to ensure that the database is fast. Over time the database becomes full of unused data that is prime for culling. The main culprits of this abandoned data are;

  • Uninstalled Plugins: Can leave vast amounts of ghost data to be manually cleaned up, even if the plugin was briefly in use.
  • Post Revisions: Wordpress stores each change to a post as a revision if you have many content people making changes this can quickly add up to vast amounts of unused data.
  • Unwanted comments: If you have an active community with lots of spam these can generate vast amounts of data that can be prime for being removed.

The key to keeping your site fast is to ensure regular schedule of database maintenance. There are a few WordPress plugins that can help you with this;

Wp-optimize: Automatically cleans up your WordPress database so, it is running at top efficiency.

WP Sweep: A more advanced plugin that can be used to clean up Revisions, Auto drafts, Deleted /Unapproved/Spammed comments, Orphaned post/user/comment metadata and more.

Finally, ensure that your database is hosted in the same location as your app server, having separate locations adds unneeded trip time to your requests.

Updating Wordpress

Its essential to keep your WordPress instance and environment up to date, latest versions of PHP 7.x provide some significant speed improvements over the previous 5.x version. If you use a managed service, they should be able to take care of this for you, but it's worth double-checking to ensure that they have done this. When you log in to your PHP hosting you should see the version number, ensure it starts with 7.

Some hosts are not compatible with the latest versions of PHP versions, in this case, you should switch to a host that is; both for security and Performance gains. Updating also get you access to new features and the latest plugins.

You should also ensure that your WP version is kept up to date, they often contain essential speed and security bug fixes. If you have managed site hosting, they should be able to handle this for you.

Wordpress Theme

The WordPress theme you choose plays a significant role in the look and feel of your site, moreover over the theme can have a tremendous impact on the speed of the site. When choosing your themes and plugins, you should take this into account. Speed up your WordPress install by choosing a lightweight theme and adding custom functionality via plugins. Sometimes it's difficult to tell if a theme is swift, for this you can use website speed testing tools on the demo they provided. Another good way to tell is asking the author for the Lighthouse score; if omitted, you can test for yourself using our User Probe Audits;

We tested the most popular themes (from their demo site); this shows how the speed metrics varies greatly, The fastest WordPress Themes;

WordPress ThemeFCPFMPSpeed IndexFirst CPU IdleTime to Interactive
Divi2.84.38.11316.8
Newspaper0.914.28.215.8
Uncode3.17.38.517.422.4
X2.94.99.76.48
TheGem2.34.617.48.337.4
The Core1.61.613.215.921.3
Massive Dynamic3.66.615.113.314.9
Foodie Pro45.611.114.328.8

Luckily WordPress has a wealth of theme options, so you should not have a problem finding one that you like and is lightweight. If you are creating your theme, we recommend using our User Probe monitoring service; this provides regression tests of the speed of your theme as it's developed and features introduced.

Stop third party Hotlinking

Hotlinking is when you include externally hosted images, this has a performance overhead in the form of an extra DNS request must be made to locate the server, the connection opened, SSL handshake between the client and the server.

It's much more speed efficient to host the image on your website and then if it is needed to add a link to the source. Furthermore, you may want to monitor your images being hot-linked too other sites as this may take away resources from your pages.

Stop hotlinking you can add the following to your .htaccess file;

RewriteEngine on 
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www\.)example.com/.*$ [NC]
RewriteRule \.(gif|jpg|jpeg|bmp|zip|rar|mp3|flv|swf|xml|php|png|css|pdf)$ – [F]

Replace example.com with your domain. Now if people want to use your images, they need to host them.

HTTP/2

HTTP/2 is a world wide web protocol, and It has many advantages over traditional HTTP; however, we have focused on the speed improvements. HTTP/2 allows you to serve many assets simultaneously, Decreasing the overall download time for assets dramatically.

HTTP/2 push allows the server to push assets to the client preemptively, So when the client requests them, they already have a head start. When configured at the server level you have the finest grain control; You can use a WordPress plug-in such as Server Push

HTTP/2 is backwards compatible on servers, so you do not have to worry about breaking support for older devices. Meanwhile, newer devices can still get the benefit. To check the current support of HTTP so you can look at this comparison table from Can I use

Can I Use HTTP/2

File Minification

When it comes to website speed the file size Matters, the larger the size, the more the client has to download and the slower your website. Not all data in a file is necessary; Minification refers to removing this unneeded data transforming the file into its smallest form. Minification is a one-way process so you should keep your source file, Should you need to make changes you can then re-minify.

Examples of the data that gets removed are whitespace, comments and some metadata. Data like this is all information that the browser does not need. Luckily on WordPress, it is straightforward to minify, one such tool that can do this for you is the W3 Total Cache - If you are a developer you cn see Grunt, Gulp and webpack modules. From Webpack 4, Webpack automatically minifies JavaScript when the environment set production.

File Compression

File compression, unlike minification, can be two-way when the compression is lossless. One such example of this is gzipped compression. You have probably come across zip files before; This is an example of gzip compression.

A common question is when to gzip; You should reset resources that you're not already compressed, E.g. CSS files, JavaScript files and JSON files, However, you should only gzip when the file size is above of a certain threshold (We suggest around 1500 bytes), due to some overhead in processing time.

There are other types of compression algorithms available too, Such as Brotli - Require more processing they often result in smaller file size. The browser sends an accept-encoding header with the request this informs the server of the best type encoding the client supports.

Most managed hosting enable file compression however you can check out this guide for how to enable file compression/

Image Compression

You do not need to gzip images, and they have built-in image compression. You use you an image optimiser for lossy compression; Lossy compression significantly reduces the image size.

Another essential step is to ensure images are the correct dimensions, Images too large wastes bandwidth and slow down your WordPress website. Equally images too small render blurry. Images below the fold should be lazy loaded to ensure they do not hog bandwidth.

Use a free tool like TinyPng to compress images before you upload them to your WordPress hosting. You can automate the process with a WordPress plug-in such as WP Smushit - This compresses any images you upload to your site however you must have a powerful server to ensure this does not take away resources away from the rest of your site.

Avoid Video Hosting

On the topic of Media hosting, Video hosting is an entirely different ballpark. It can get costly very quickly and use up many server resources Degrading the performance of the rest of your site.

You should consider using a third party service such as YouTube or Vimeo, and then embedding the video on your page. With auto embeds, this can happen automatically and only require you to copy the link for the video into your content.

Hosting your videos on third party sites gives the added benefit of increased discoverability from these websites and the community that they bring.

CDN

We talked about how the location of your servers can play a significant role in the speed of your website, one such a method to alleviate this is to use a content delivery network. Also, can be used to distribute your static files globally decreasing the distance they have to travel to your users, and take the load off your origin server.

Cloudflare provides an excellent example of this And lists some of the other benefits a CDN can bring besides from performance such as protection from DDoS attacks, Deep Analytics and bandwidth cost savings.

Caching

We mentioned how WordPress dynamically create the static files from upon request. This slows website down it makes sense to keep a copy of the output this is known as caching. It can reduce your server response times, what more it takes just a few steps, The main disadvantage is the lack of freshness, however, to ensure freshness we can invalidate the cache everytime our content changes.

Three major plugins can help achieve this;

If you do not want to use a plug-in you are more technically minded you can achieve similar results using the .htaccess file https://gtmetrix.com/leverage-browser-caching.html - Plugins like WP Rocket Will offer more than just static caching, such as invalidation, preemptive caching, and minification.

Conclusion

If you have followed the steps you should now have a faster site; You can verify this by running more audits and comparing the difference - you should consider running some page speed regression such as User Probe.

Site speed is something that everyone needs to be responsible for, and It's a group effort, not just a technical job. Having a highly visible dashboard that monitors vital metrics help accountability and assist making WordPress website speed front and centre in your business.

Improve your WordPress Website Speed now