Building a fast-loading website or speeding up WordPress is not rocket science. Nevertheless, it does require some knowledge and some effort. Without further ado, let’s cut to the chase:
1. You Need a Good Hosting Company (Fast Server)
That usually excludes the so-called ‘shared hosting’. You can spend a lot of time trying to optimize your website, but if you share the server with tens or hundreds other customers hosting there God knows what, you might be wasting your time. Forget shared hosting and get a VPS (virtual private server) or, even better, flexible cloud hosting.
Years ago, such solution were rather expensive and/or too difficult for the average website owner. This is no longer the case. There are a few providers of affordable cloud hosting. What’s funny, in some cases cloud hosting may be cheaper than shared hosting, while providing significant performance and security benefits.
Since 2018, I have been a happy customer of Cloudways – a reputable provider or cloud hosting. They are not a hosting company in the traditional sense, because they don’t own the servers. They have created their platform and rent cloud servers from Digital Ocean, Vultr, Linode, Amazon and Google. Cloudways engineers take care of all security- and performance-related aspects of your server. At the time of writing, I operate two servers on the Cloudways platform. A simple fact: my page load time roughly halved when I migrated my first website from Siteground to Cloudways.Yes, that’s an affiliate link. You will thank me later for saving you time and money. You can spend a lot of time trying to speed up your WordPress site, but if the server is poor, you’ll be wasting your time.
Cloudways does not lock you into long-term contracts, as many shared-hosting companies do. Also, you will be able to upgrade your server’s RAM, CPU or SSD anytime, if your traffic grows. Usually, they offer a short free trial period, so that you see the performance and the ease of use yourself. The value for money is excellent, so you should not regret it. Cloudways offers servers in many locations around the world. You should choose the location closest to your target audience.
2. Reduce the Page weight (a.k.a. remove the Bloat / Avoid an excessive DOM size)
This is a very broad subject and the most complex one when we are talking about speed optimization. There are lots of ways to reduce the page weight, some of them can be applied in your WordPress project, others cannot. Reducing the bloat starts with choosing a lightweight WordPress theme (a.k.a. a starter theme). That excludes most, if not all, shiny themes which you can buy at Themeforest, or, for example, the very popular Divi theme. Those are slow themes.
I recommend two themes which I personally use: GeneratePress and Kadence. GeneratePress is super-lightweight and reasonably flexible, whereas Kadence is reasonably lightweight and super-flexible. If you need advanced fancy header options or color palettes, my recommendation is Kadence, otherwise GeneratePress will be slightly more lightweight.
Both are fantastic themes and the developers provide excellent support, you cannot go wrong with either one of them. Highly recommended. There is no point purchasing (and learning!) a new theme for each new website that you will launch. Sticking to a couple of fast and flexible themes is much better in the long run. Both GeneratePress and Kadence offer affordable, developer-friendly licenses for people who build many websites.
Now, that you have installed a lightweight and flexible theme, you should avoid page builders, such as Elementor, Divi, WP Bakery, etc., if you seriously want to have a very fast WordPress website. While these page builders will work fine with such well-coded themes as GeneratePress or Kadence, they will slow down your website a little. Instead, you can use the new native WordPress block editor and learn at least some basic HTML and CSS (it’s easy!).
You can extend the WordPress block editor by installing third-party block collections. The developers of GeneratePress and Kadence have released their own fantastic block collections: GenerateBlocks and Kadence Blocks, respectively. What’s great, you can combine block collections from multiple sources and use them on the same page. You can even insert a Kadence Block inside a block from the GenerateBlocks set.
There are lots of other ways to reduce page weight, and I will try to cover them in future blog posts. Heavy themes, page builders and slow plugins are the main sources of bloat. In the Plugins section of this website, I will be presenting plugins which I have found to be lightweight, as well as plugins which will help you improve the performance of your WordPress website or blog.
3. Reduce the Number of Requests (Where It Makes Sense)
What is a request, then? An HTTP request is basically every file that must be downloaded by the visitor’s browser during each page load. It includes the HTML with the content itself, as well as every image file, every CSS and JS file used on that page, etc.
You should know which fonts are actually used on your website and load only those fonts. Sometimes, inexperienced website owners play with font settings in theme options and as a result, unnecessary webfont files are loaded by visitors (usually from Google Fonts). A good practice is identifying the fonts your website will actually use and keep their number as low as possible. You can check the so-called waterfall on many speed test websites (e.g. GTMetrix) to see which, and how many webfont files your website uses. Do you need all of them? If not, then deactivate them and it will speed up your WordPress site a little bit. There is no point loading webfonts which are not used.
How many webfonts does your website need? Well, that depends on the type of website. If it is focused on information only, perhaps, it doesn’t need fancy webfonts and can stick to system-stack fonts only? Sticking to system-stack fonts will speed up your WordPress site a little bit. But every little bit counts, because all these little bit add up – that’s basically how you optimize your page load times. The disadvantage of using system-stack fonts is that your site will look slightly differently on Windows, Apple and Android devices.
Recently, I have rebuilt a corporate website for a client. The goal was to keep the overall look of the website and make it much faster. As an experiment, I used the system-stack font (normal and bold weights) in place of the Google Fonts which had been used on the client’s old website. The result of the experiment? Nobody has noticed anything, nobody from that company has asked a single question about the font.
Of course, for many websites, sticking to system-stack fonts would be a terrible idea. Websites about e.g. the arts, fashion or design generally should not use system fonts. Also, where the font is part of the corporate identity / branding webfonts must be used. Personally, I am interested in typography, I like webfonts very much and I have bought many fonts for myself from Fontspring!
To reduce the number of requests, you can inline certain types of content (place them inside the page source code). Examples of content which can be inlined are SVG icons and graphics, as well as PNG files converted to Base64. One disadvantage of this approach is that such inlined content is usually not cached by the browser. If the visitor visits multiple pages containing the same inlined graphics on your websites, the inlined contents must be loaded on each page load, instead of being loaded from the browser cache. However, if the typical visitor comes from a search engine and visits only a single landing page, then this approach makes sense.
Another trick helping to speed up WordPress sites is using so-called sprites, if you have multiple PNG graphics on one page. Instead of serving multiple PNG files, you combine them using a sprite generator, e.g. this one. The tool will generate one image file and a CSS stylesheet. Later, you don’t insert the small graphics as you would normally do, but instead you upload the combined file to your media library and set container backgrounds using the background-position values from the generated CSS file. If done correctly, it will look exactly the same as using the regular method. Yes, it does require some CSS/HTML skills, and yes, it is somewhat time-consuming. If you have only 2 or 3 graphic files which could be combined, it’s probably not worth it. But if you have 10 or more such files, then I would definitely do it.
Concatenation (combining) of JS and CSS files is another way of reducing the number of HTTP requests. Some caching plugins have this functionality. Also, the Autoptimize plugin developed by Frank Goossens is a popular tool used by over a million websites for that purpose.
However, concatenation is somewhat controversial nowadays. Some WordPress speed-up experts claim that, with the HTTP/2 or HTTP/3 standards, it is no longer necessary or important to concatenate CSS and JS files. These protocols allow for more concurrent downloads than it was possible in the previous revision of the HTTP protocol (HTTP/1.1).
I still prefer to keep the number of requests low, even though it is not as crucial as it was in the past. Why? Because larger files can achieve higher compression rates than a collection of smaller files with the same contents. If you create a sprite out of, let’s say 20 small .png files and subsequently compress the sprite, it will be more lightweight than the sum of these 20 small files.
4. Compress What You Can Compress.
Compression reduces the weight of your files, which is a great thing, as the compressed assets will load faster.
Text-based formats, such as .html, .css and .js files, can use GZIP or Brotli compression. Most servers nowadays support GZIP compression and some caching plugins can activate it on your server. Brotli offers a little better compression rates than GZIP, but it is not as widespread. If you use Cloudflare, though, you can easily activate Brotli compression there. You just should not use both GZIP and Brotli on the same website.
Text-based files can also be minified. Minification is the process of removing unnecessary characters from files, for example multiple spaces in CSS or javascript files. It reduces the file sizes a little. The difference might not be huge, but all these small improvements add up and will speed up your WordPress site.
You should also compress your images. The most common file formats for website images are .jpg and .png. You can compress your .jpg files in photo-editing software, e.g. Adobe Photoshop, or using a dedicated WordPress plugin, e.g. Shortpixel. When saved at 100% quality, JPG files are unnecessarily heavy for web use. You can safely drop the JPG quality level to 60% or even less and most visitors should not notice significant loss of quality and the difference in file size will be considerable.
5. Install and Configure Correctly a Good Caching Plugin.
Last but not least: you definitely need a good caching plugin and you must set it up correctly. By default, WordPress pages and posts do not exist as .html files before being requested by the visitor’s browser. They are generated at the moment of the request (which takes a little time), unless you have a caching plugin. A caching plugin generates these .html files (called “cache” or “page cache” in advance, so the server can deliver them instantly when they are requested.
Caching plugins fall into two broad categories:
- Those with a preloading mechanism. Popular plugins in this group are WP-Rocket or Swift Performance. They generate cache for all required URLs when the preloading is triggered. Usually, it can be triggered manually or automatically (by specifying a cache lifetime, or after content updates). These plugins are suitable for most websites.
- Some plugins, such as e.g. Cache Enabler or Breeze, do not have a preloading mechanism. They generate the cache only when the first visitors visits the given URL. The .html file of this URL will remain saved on the server for subsequent visitors until the cache is purged. The obvious disadvantage of such plugins is that the first visitor to a URL experiences a longer load time. These kind of plugins are suitable only for websites with high traffic or small websites with very few pages.
Please note that generating full cache for large or complex websites may use a lot of server resources (CPU/RAM). If your website is hosted on a slow server, during cache preloading you might notice very slow performance. Also, if your site uses poorly coded plugins or plugins with bugs, they may cause slow cache generation or CPU usage spikes.
If you have set up a caching plugin and you think that the cache should be preloaded but there is not much improvement in page load times. you might want to check if the cache files are really present on the server. To check it, you can navigate in your FTP software to the cache folder of your plugin. The exact folder location varies between plugins, but it is usually in a subfolder of “wp-content”. That location should contain .html files and the structure should mirror the structure of your website. If these files are not there, then the cache is not generated properly.
A good caching plugin will significantly speed up your WordPress website, assuming it is set up correctly.
- Those with a preloading mechanism. Popular plugins in this group are WP-Rocket or Swift Performance. They generate cache for all required URLs when the preloading is triggered. Usually, it can be triggered manually or automatically (by specifying a cache lifetime, or after content updates). These plugins are suitable for most websites.
Important to Know
Some external scripts or widgets may not slow down your website much at all. Others may have a very negative impact on the performance of your WordPress website. Because of the same-origin principle, you can only optimize things that are hosted on a domain/website which you control.
You cannot optimize and speed up things like widgets, scripts that are hosted on third-party websites and embedded into your site. If it were possible, the Internet, as we know it, would stop working. The only way to achieve optimize external content is when the external site provides an interface for customizing the scripts or widgets. It is then done at their end, and not on your website.