Make WordPress fast in 7 easy steps
Make WordPress fast in 7 easy steps. 7 simple measures you can take to ensure your WordPress performs well and passes core web vitals. This will improve both user engagement and search engine rankings for your website. Actionable cost effective steps you can carry out when using cheap web hosting WordPress. Netnerd’s Unlimited Hosting package also conforms to the advice given in the hosting server section of this article.
Why you might want to speed up a WordPress site
Nobody likes a slow website. It’s a known fact that website visitors spend less time on websites that are slow to load, and they’re more likely to spend time, and purchase products on a website that loads quickly. A website thats slow to load can negatively affect revenue, and increase visitor bounce rates.
A website that loads quickly and provides an improved user expernience is a lot more likely to both rank well (making it easier to find online) and lead to increased online sales.
Google use your website’s performance as a ranking factor, so how quickly (or slowly) your website loads can effect your search engine optimsiation.
Why WordPress speed optimisation is frequently asked about frequently
WordPress is a very commonly used content management system (CMS), which is free to use, powering around 44% of websites found on the internet today.
With a dashboard based interface and a rich plugin and theme ecosystem, it’s quite easy to get a functional, great looking website up and running without the need to wrote any code.
WordPress is written in PHP, and stores all it’s variable information (including the website address) in a database. This PHP and database is used to both manage a website’s content, and also to generate page output when pages are requested by visitors.
WordPress needs an underlying stack to run, which usually consists of a Linux operating system, a web server (usually Apache or Litespeed) and a database server (usually MySQL or MariaDB).
There can be some variation in the stack being used to run a WordPress website which can affect performance. There’s also a very large variation when it comes to what can be used within a WordPress installation in terms of plugins and themes.
Some of the possible variations can neagtively affect the performance of a WordPress site, and other variations can improve the performance of a WordPress site.
In many cases it’s not obvious how to gain a performance benefit, and website owners can find themselves looking in to this side of things due to seeing a problem wiht their website’s performance. There can be a great deal to look in to based on the variation outlined above.
This guide aims to provide some general advice that can be applied to improve WordPress website performance, that can be easily actioned without a lenghty investigation. Some advice regarding what to look for in your web hosting services to aid performance, and some pitfalls to avoid when using WordPress are covered.
Host using Litespeed, object caching, opcache and data compression.
The hosting server can make a considerable amount of difference to the performance of your website. Making sure that the Litespeed web server, object caching, and opcache are all available to you before you purchase hosting is an advisable course of action. If you’re working on an existing website, rather than making a new one, and your hosting doesn’t provide these facilities there is the option of moving hosting providers.
You can gain an understanding of the differenct that using the Litespeed web server, object caching and opcache by reading our blog post about WordPress and Core Web VItals.
Hosting that provides the Litespeed web server, object caching, and opcache doesn’t always cost a lot. We provide this with all our hosting packages (even the cheapest web hosting we provide at £10 per year). We’d normally recommend the Unlimited web hosting package for WordPress to provide a decent amount of RAM and CPU. We currently offer Unlimited web hosting at £1 plus VAT per month for the first 6 months, and £4.99 plus VAT thereafter.
What each of these services do:
Litespeed web server
The Litespeed web server is a drop-in replacement for apache, it functions in a similar way and performs the same function (to serve websites).
How the Litespeed web server improves performance
There are three benefits to using the Litespeed web server.
The first is that the Litespeed web server take less time to spawn PHP processes compared to Apache. As WordPress is a PHP based application, PHP processes opening in a reduced amount of time is beneficial. This reduces the total time to first byte, first contentful paint, and largest contentful paint. As these are all measured as part of your website’s core web vitals, using hosting that provides the Litespeed web server alone improves the likelihood of you website passing core web vitals. Passing core web vitals in turn gives an improved user experience, and also improves page ranking in search results. This is covered in much greater depth in this blog post about WordPress and core web vitals.
The second benefit of using Litespeed web server based hosting, is that there’s an accompanying caching plugin that can be used in WordPress installations. This plugin is called Litespeed Cache. It’s made by the same people that make the the Litespeed web server, and is used to gain a greater level of integration between the WordPress installation and the underlying web server. This also improves performance.
The third benefit is that HTTP/3 can be used with Litespeed. HTTP/3 works over UDP, rather than TCP/IP. TCP/IP is what’s called a guaranteed protocol, and involves the acknowledgement of packet receipts. This acknowledgement has a data transfer overhead, increasing the total amount of data transferred. Although UDP isn’t a guaranteed protocol, most networks are reliable to the degree where this doesn’t matter, and the lack of acknowledgements reduces total data transfer.
Encryption handshakes generally happen faster with HTTP/3 compared to earlier versions of HTTP (like HTTP/1.1 or HTTP/2) due to its use of QUIC, a transport protocol that is designed for speed and efficiency. QUIC integrates transport layer security (TLS) 1.3 directly into the transport layer. This eliminates the need for a separate handshake process for encryption, as is the case with TCP+TLS in HTTP/1.1 and HTTP/2. This encryption handshake takes place when pages of your site are requested if you’re using HTTPS and have the padlock in the web browser’s address bar.
Due to the reduced time it takes for Litespeed to spawn PHP processes, you’ll see an improvement in your web performance just through using Litespeed alone. The main benefit when using Litespeed is a reduced time to first byte (TTFB). As TTFB time afffects downstream metrics, including largest contentfaul paint (LCP) and first contentful paint (FCP) which are included when checking a website’s Core Web VItals you can see your website performance improve, and gain a cCore Web Vitals pass, simply by using Litespeed hosting. You’ll also see an improvement when your website perofrmance is measured by Lighthouse based tools such as Page Speed Insights and GTMetrix. You can find out more about these types of tools in our blog post about website analysis tools.
Time to first Byte for a global audience
Time to first byte can be negatively affected by the geographical distance between the web hosting service and the website visitor. This is simply due to the additional time it takes for data packets to travle a further distance.
If your wbesite targets a global audience, it’s advisable to use a content delivery network to improve time to first byte for all users all over the world.
A common choice of content delivery networks are Cloudflare and QUIC.cloud. These content delivery network providers have points of presence (POPs) in multiple countries that can serve your website’s content. The request for one of your web pages made by a visitor is automatically routed to the nearest POP, which reduces time to first byte, due to a reduced geographical distance between where the wbesite request was made and served.
A content delivery network is usually used in addition to your web hosting service, so there can b additional costs depending on the CDN provider you use, and the type of CDN service they provide you with.
How to check if your web hosting service provides Litespeed
You can check headers using a web browser to see the type of server being used to serve a website. The network tab in Google Chrome can be used to check this. There are also tool such as DNS Checker’s Web Server OS test that will tell you the type of hosting server being used.
Object caching
You may have seen a message that reads “you should use a persistent object cache” in the site health section of your WordPress. This is WordPress themselves recommending that you make use of object caching to improve your websites performance.
Although there are some caching plugins such as W3 Total Cache that can make use of your hosting account’s file system for object caching, this isn’t the greatest of ideas.
Object caching consists of caching parts of your website. These parts are often small and high in number. As most shared hosting has a limit on the amount. of files that can be stored, using the hosting account’s file system for object caching will, over time, consume the amount of files you can store in your hosting, and your site is likely to error when this limit is reached.
Often in hosting there are dedicated, underlying, object caching services that can be used to store the cached parts of your website. These are Redis and Memcached. These are both “in memory” datastores, so the cached objects are stored in RAM rather than in your hosting’s file system. Using RAM like this doesn’t contribute to the number of files stored in your hosting account.
How object caching improves performance
You’ll need to use a plugin to make use of object caching. Many caching plugins provide this facility (this is covered in the use a caching plugin section below). Often Redis or Memcached will run on the same server as your hosting. If they do, the settings you need to configure object caching are:
- For Redis:
Server address: localhost
Port: 6379 - For Memcached:
Server address: localhost
Port: 11211
When a page of your site is requested. Parts of the page output are stored in the object cache. These parts can then be referred to when subsequent page loads take place. The parts being requested from the object cache mean that the parts don’t have to be generated. Requesting from an object cache takes less time than a fresh generation of parts of page content, so page load time is reduced when using object caching.
How to check if your web hosting service provides object caching
You can use a phpinfo to check to see if object caching is enabled. If you create a PHP file with this in it:
<?php phpinfo(); ?>
And then browse to this file, you’ll see a summary of the web hosting server’s PHP. Check this page for Redis and Memcached. If either are listed, object caching is available to improve web performance.
Opcache
Opcache is built in to the PHP configuration of your hosting. In some types of hosting you can add this yourself, on other types of hosting, it has to be made available to you by your hosting provider.
You can check to see if Opcache is available by creating a file in the document root of your hosting (usually the public_html or the httpdocs directory) called info.php and putting this in the info.php file:
If you then browse to https://website-address.com/info.php and can see an opcache section, opcache is available to your website:
It’s not the best of ideas to leave the info.php file in place permanently as this broadcasts your hosting’s PHP configuration to the internet, so can have security implications. Delete the info.php files once you’ve checked to avoid this.
How opcache improves performance
Opcache stores precompiled PHP byte code in RAM, allowing PHP scripts to execute faster by skipping the compilation process. By default, PHP uses an interpreter that compiles scripts into byte code ‘on the fly’ each time they are requested. This on-the-fly compilation introduces a performance/time overhead. With Opcache, the byte code is cached in memory after the first request, eliminating the need for repeated compilation when subsequent requests take place. As a result, using Opcache reduces the execution time of PHP scripts, leading to faster page loads for your WordPress site.
How to check if your web hosting service provides opcache
You can use a phpinfo to check to see if opcache is available. If you create a PHP file with this in it:
<?php phpinfo(); ?>
And then browse to this file, you’ll see a summary of the web hosting server’s PHP. Check this page for opcache. If opcache is listed it’s available to improve web performance.
Data compression
Data compression is the process of making digital information smaller in size without losing any valuable content. In the context of websites, the hosting server and websites can be configured to provide compressed data to the browser. With this in place, the total amount of data transferred over the network is reduced when a web page is requested and served, which speeds up page load times.
How data compression improves perfrormance
As data compression reduces the total amount of data sent over a network when a web page is requested and served, it takes less time for this data to be transferred, when compared to uncompressed data. There are usually one of two types of compression available in a web hosting service, GZip and Brotli. Brotli compression provides a better compression ratio compared to GZip, so using a web hosting service that offers Brotli compression can result in an improvemnt in web performance.
How to check if you are using compression
Gift of speed’s compression test can b e used to check if you’re using commpression to improve website perormance.
Don’t use a page builder plugin
Page builder plugins make creating pages slightly easier. They came about due to the built in editor in WordPress being a bit hard to use. Since then the built in editor in WordPress has come on a long way, so it’s now a lot easier to use than it used to be.
Many page builder plugins will add a lot of elements to your website’s page output. Quite often this will be a large amou’s pages. This decreases their size, means that web web browsers don’t have to do as much work when decrease in performance. This isn’t so much WordPress being slow, this is more along the lines of it taking web browsers longer when rendering web pages as they have to wait fo resources to load (render blocking CSS) or evaluate, parse and run lerge amounts of JavaScript.
Not all page builder plugins will do this, but if you find that you’ve used one that does and would like to move away from using this page builder, you’d have to remake all pages on your website using the built in editor in WordPress.
Using the built in WordPress editor (Gutenberg) to create page content avoids additional code being added to your website’s pages. This decreases their size, means that web browsers don’t have to do as much work when rendering pages, and improves page load times.
How not using a page builder plugin improves performance
As I’ve mentioned above many page builder plugins will add a lot of elements to your website’s page output.
This means that:
- The browser has more HTML to render, so it has to work harder, and the rendering process takes longer.
- The total size of the page is increased so it takes longer to download.
- The ratio of text to HTML is reduced, which can negatively affect HTML.
Not using a page builder plugin can help avoid these issues. Use the built in Gutenberg editor wherever possible, and your page output will be reduced, as will page load times.
Use a lightweight theme
Not all themes are created equal. Some can be really fast and lightweight, and others can be enormous and cumbersome.
There are some themes known to be resource heavy such as Avada and Divi.
There are more lightweight themes such as Generate press, Astra, Oxygen, Blocksy and Kadence that are a lot more light weight and less resource intensive.
There are over 7,600 free WordPress themes available, so it’s advisable to research themes and possibly test them, before making use of them.
If you switch from one theme to another, you’ll have to undertake customisation on the new theme that you’ve switched to, so that it appears in the manner you’d like it to.
Use a caching plugin and configure object caching
Caching plugins are usually used to improve a website’s performance and reduce page load times. Many caching plugins will also provides mechanisms to optimise your website’s page output such as minifying and combining JavaScript and CSS. Typically this involves minification (to reduce the size fo CSS and JS files) and combining multiple CSS and JS files in to singular files. This reduced the amount of requests per page load, and the amoutn of data transferred when a page is loaded. These can also help reduce the time it takes for web browsers to render a web page.
Typically most caching plugins support this functionality. This and the minifcation of HTML is supported by the Litespeed Cache plugin.
If you’re using hosting that provides the Litespeed web server, it’s strongly advisable to use the Litespeed Cache Plugin as it’s made by the same people that make the Litespeed web server. The caching plugin and the underlying web hosting server are effectively integrated to a greater degree than would normally be the case.
You’d install and activate the Litespeed cache plugin just like you would any other plugin. Then to carry out a base configuration click on “presets”, the “apply preset” in the recommended section:
You’d then need to configure object caching by clicking on: Cache > Object
If Redis is available in your hosting, set: Object cache: on Method: Redis Host: localhost Port: 6379
Then save changes.
If you only have Memcached available or would prefer to use this set: Object cache: on Method: Memcahed Host: localhost Port: 11211
Then save changes.
Finally click on: General > General Settings > Request a domainkey
Wait a few minutes then refresh the page and you should see dots appear in the domainkey field:
It would be advisable to check your site after making these changes to ensure that it functions as expected. In almost all cases it will, but you may need to disable the minify and combining of javascript files (cache > page optimisation > JS settings) if the mobile menu breaks, or Javascript based functionality is broken.
How using caching plugin and integrate object caching improves performance
The configuration of the Litespeed cache plugin that’s outlined above covers quite a lot of different things with the 3 changes.
Object caching (as explained above) is bought in to effect.
HTML, Javascript and CSS is minified and Javascript and CSS are also combined. This reduces the size of JS and CSS files and the HTML in the page output by removing whitespace and comments. The combining of JS and CSS files reduces the number of CSS and JS files requested upon page load. Both of these reductions improve page performance.
A caching policy is also defined when you carry out the above, which instructs browsers with regard to how long they should cache and locally store static assets. This caching and local storage allows browsers to load some of your website’s resources from it’s local cache, rather than your site generating them, then them being transferred over the network. Again, this improves page load times.
You can find a detailed breakdown of the full configuration of the Litespeed cache plugin in this Litespeed cache configuration guide.
Use next generation images and lazy load images
Next generation images are image formats such as webp or avif. Webp and avif files are smaller than their equivalent jpg of png equivalents without a loss of quality. This is because the impage compression associated with these file types is a lot more effective, and the size of images is reduced (without compromising image quality). As the images are smaller, they reduce the total size of your pages and the amount of data being transferred upon page load. This in turn decreases page load times.
The litespeed cache plugin can be used to automatically convert your sites images by clicking on: Image optimisation > Send optimisation request
Your site and the QUIC.cloud then work together to reformat and replace images. The advantage of operating like this is that the conversion overhead takes place externally to your website, so there’s no processing overhead placed on your site when the conversion takes place.
There are other plugins such as smush and converter for media that perform the same function, but carry this out within your site, so there is an additional processing overhead when the conversion takes place, which can slow your site down.
It is also possible to manually convert images using a piece of image editing software on your computer before uploading them to your WordPress. This is the best option if you’re able to do this as the mage conversion takes place on your computer, so has no negative impact on your website.
Lazy loading images can be enabled in the Litespeed cache plugin configuration by clicking on: Page optimisation > Media settings > On (next to lazy load images) > Save changes
How using next generation images and lazy loading images improves performance
As next generation images are smaller in size, the total size of your website’s pages is reduced by using these image formats. The reduction in page size means that less data is transferred over the network when a page of your website is loaded. Not only does this reduce the time it takes for a page to load, it also reduces bandwidth consumption which can help if you have a bandwidth limited hosting account.
Lazy loading images means that images are only loaded if they’re displayed on the part. of the page you see when it loads (above the fold). As you scroll down the page, the additional images then load.
Lazy loading images results in only the “seen” or above the fold images being displayed on the initial page load. As images further down the page aren’t loaded immediately, this results in less data being transferred over the network upon the initial page load, so it takes less time to display the part of the page you initially see.
Use different LCP images for desktop and mobile
Google now prioritises mobile performance when assessing websites performance. The way that the performance of a mobile page is measured is more stringent as it’s generally assumed that mobile devices are less powerful and may be using mobile network connections which are often slower the broadband.
Using a theme or a plugin that allows different images for mobile and desktop can help improve performance.
LCP stands for largest contentful paint. This is effectively the draw (or render) of the largest part of a web page. This usually involves an image, and in the context of WordPress this is usually a large image at the top of the page (just beneath the menu).
If you have a large LCP image being used for both mobile and desktop, this can make the mobile performance measurement worse due to the stringency of mobile performance measurement.
How using different LCP images for desktop and mobile improves performance
Being able to use different images for mobile and desktop allows you to put two different images in place for the same page, and then which is loaded is dictated by the device used to access the page.
You can create a smaller, optimised image for mobile devices to fit smaller screens and load faster. Meanwhile, a different, larger, high-resolution image can be used for desktops, ensuring the page looks great on larger screens.
The Blocksy theme can accomodate different images for mobile and desktop devices. The stackable add on for Gutenberg can be used to specify separate images for desktop and mobile.
By using device specific images, you can gain device specific page optimisations to improve performance and without compromising page quality, whilst minimising LCP times.
Preload LCP images
Preloading is a technique used to tell a browser to start loading resources sooner in the page loading processes. This works by putting a preload directive in the head of the HTML document that defines what should be preloaded.
The Preload LCP Image plugin is a really good, quick, and easy way of preloading LCP images. It can even be used to specify a different image to preload for mobile and desktop versions on different pages (rather than using a single universal site wide image), so works well with the “use different LCP images for desktop and mobile” methodology mentioned above.
You simply install and activate this plugin, and when you’re editing a page, at the bottom theres’s a section that allows you to specify which image should be preloaded for desktop and which image should be preloaded for mobile:
You simply use these options to preload the mobile LCP image for mobile, and to preload the desktop LCP image for desktop, then publish the page.
How preloading LCP images helps with performance
Without any preloading directives in place, a browser has to download a page’s HTML in fill before it will start to load the image at the top of the page. This means you have one thing taking place (the downloading and rendering of the HTML) then another thing taking place after (the downloading of the image). This “one then the other” type loading is slower compared to loading downloading both the image and the image and the HTML at the same time.
Preloading an image instructs the browser to start downloading the image while the page’s HTML is still being downloaded. This preloading results in two things happening at the same time (the downloading of the HTML and the downloading of the LCP image). Due to both happening at the same time, rather than one after the other, the total time for LCP is reduced when preloading the LCP image.
The time it takes for LCP to complete is one of the measurements used by Google when assessing a website’s core web vitals, so by improving LCP time with preloading, you’ll be more likely to pass core web vitals and consequently rank better in google.
