This blog post will show you how to speed up your WordPress website, score 100 points on Google's PageSpeed Insights, and get full A grades in GTMetrix.
For this article, we will use the website we showed you how to build in our post titled - How To Make An Online Shop.
Why Speed Matters?
In 2020, speed is of prime importance. People have grown accustomed to getting results fast, and if a page takes over 4-5 seconds to load, there is a 90% chance they will simply hit the back button and go to the next one. This is represented by the so called bounce rate metric. If a page takes too long to load, the person will just bounce back to the search results and check the next page.
A faster website means lower bounce rates and higher conversions. If your site is a part of your business, you should invest in speeding up your website. And to add to all that, page speed is also one of the ranking factors on Google searches. On July 9, 2018, Google rolled out the speed update for all users:
Today we’re announcing that starting in July 2018, page speed will be a ranking factor for mobile searches.Google Webmaster Central Blog
Let's check out some of the page load time averages for each industry in the US:
You can see that a load time of about 3-4 seconds is considered the best practice, but the industry averages in the US are nearly double that.
About Our Test Environment
We will use GTmetrix and Google's PageSpeed Insights (which we will call PSI) to carry out our tests as these are widely regarded as the most important performance analyzers. Pingdom's Website Speed Test is another popular and quite useful tool that should help you get the job done with similar results.
One important thing to note right off the bat here is that Google's PageSpeed Insights test tends to produce quite volatile results and it's normal to see fluctuations with as much as ten or even 15 to 20 points. Don't be shocked if you see that, just make sure to run several tests to get an average score.
Another thing worth mentioning is that we have intentionally started with an older PHP version, as it is the default for many existing websites - PHP 5.6. Newly launched sites should have already started with PHP 7.x (PHP 7.4 is currently the default PHP version for new accounts on our servers).
Running Our First Test
Let's run our first test, so we can get a baseline where we are at in terms of our website speed. This is important as it will serve as a reference point, so you can later find (through tests and comparisons) what works for your WordPress website performance-wise.
So, without further ado, go to gtmetrix.com and run your first test. You could also register an account (for free) in order to have these results saved for future use. Registering also gives you the option to change the location of the testing "browser".
Here are some descriptions of terms you will see when performing a speed test:
Network latency is the time it takes for data or a request to go from the source to the destination.dnsstuff.com
Fully loaded time – is the point after the Onload event fires and there has been no network activity for 2 seconds. Essentially, GTmetrix is now waiting until your page stops transferring data before completing a test, resulting in more consistent page load times.GTMetrix.com
Establishing Our Baseline
As you can see from the tests we ran, we are starting with somewhat poor performance scores. The PageSpeed Score is 44% or grade F and the YSlow score is 58% (grade E). You can see that the Fully Loaded Time is 2.8 seconds and the total page size is 2.56 MB.
So although our site was built with WordPress and WooCommerce - the two most common and well-optimized web platforms, we are actually starting with a slow website, and that could be quite detrimental for our online business. Let's see what we can do about that and whether we will be able to get a Grade A score!
Let's also check our website with Google's PSI. Again, not great - 27 points for the mobile version and about 49 points for the desktop.
1. Setting Up a Backup
When it comes to improving the speed of WordPress, you have to know right from the start that some techniques described in this tutorial could cause issues with certain websites. Due to the fact that there are thousands of different plugins and themes resulting in various WordPress configurations (each unique in its own way), an optimization technique that works for one website could completely break another. That's why we've done our best to pick the safest WordPress optimization tricks. And have no fear, we will set up a backup of your working WordPress, so you can always revert to it if a problem occurs. Furthermore, in most cases, if a certain plugin or setting causes an issue with your website, you can always undo the change by deactivating the plugin or rolling back that setting.
Top WordPress Troubleshooting Tips - Fixing the WordPress WSOD
Before you make such significant changes to your WordPress installation, it's always a good idea to have a backup.
So our first and most important step in this tutorial is to generate a backup of our entire WordPress the way it currently is, so we can easily revert to it.
To do that, go to the Control Panel > WordPress > Manage WordPress installations > Edit. There, click on the Backup now button under the Backup section. The process could take a minute. When the backup is ready, you can easily roll back to this version of the website by clicking the Restore button.
2. Use SSL
Although the impact might not be so noticeable, the first thing we want to do (in terms of the actual performance optimizations) is to configure our website to work over SSL.
This may not sound like a performance improvement, but this change enforces the use of the HTTP/2 protocol on your website. HTTP/2 has significant performance improvements over HTTP. That's why ensuring its use is an important step in the optimization of your WordPress website.
ICDSoft Offers Free Let's Encrypt SSL Certificates With All Hosting Plans
We already activated a free SSL certificate from Let's Encrypt as part of our previous tutorial on building the store, so now we just have to configure our WordPress application to use it and work over HTTPS. To do that, go to the WordPress section in the Control Panel > Manage WordPress installations > click Edit next to our actual installation. There, all you need to do is place a check on the Use HTTPS option and press the Change button. This will automatically convert all database entries that contained the old HTTP URL to HTTPS.
Now our website is working over HTTPS at https://icdsoft-store-demo.com/. Before you test it, we would recommend that you clear the cache of your web browser. Using the Command + R on a Mac or Ctr + F5 on a PC shortcuts should ensure that your browser skips its internal cache.
3. Use PHP 7
PHP 7 offers a significant speed improvement over previous PHP versions. You can see from the graph below that PHP 7 can process around three times as many requests per second compared to PHP 5 versions.
On ICDSoft's servers, there are multiple PHP versions you can choose from - from the outdated PHP 5.3 and PHP 5.6 (still used by some legacy apps) all the way up to the most recent PHP version - PHP 7.4. We always recommend the use of the latest PHP version available.
Normally, you should not have any problems if your WordPress is up to date along with all plugins and themes. However, it's important to test your website after changing the PHP version. If you notice an error, you can try switching to a prior PHP version. You can also contact our Support Team for assistance - the problem may be easily solved and instead of running an old PHP version, a small fix, which our support team can apply for you, can allow you to run the latest PHP version.
You can change the PHP version via the Control Panel > PHP Settings > Default PHP Version as it can be seen on the screenshot here:
4. Use PHP-FPM
We are currently enabling a new PHP execution mechanism on all our servers - PHP-FPM. It is currently available on all our servers in the European datacenter, and is expected to be available everywhere by the end of the month (July, 2020).
PHP-FPM, short for PHP FastCGI Process Manager, is a FastCGI daemon for PHP that allows a website to handle strenuous loads. PHP-FPM maintains pools of PHP worker processes that can handle incoming requests. PHP-FPM provides not only reduced server response time (TTFB), but can also handle much more incoming requests compared to the traditional CGI execution scheme employed at some shared hosting environments.
PHP-FPM keeps a hot pool of several PHP processes which are immediately ready to handle requests. This is where the performance benefit over CGI comes from - with CGI, the PHP interpreter is initialized with each incoming request. Furthermore, PHP-FPM doesn't shut down the PHP process after processing requests, but keeps reusing the same processes.
In the context of how to speed up a WordPress website, PHP-FPM addresses the "initial server response time" that you might see on reports from Google's PageSpeed Insights (the so called TTFB metric).
Let's go ahead and activate PHP-FPM for our account. You can do this from the Control Panel > PHP Settings. There, change the PHP Handler from CGI to FPM.
Note: PHP-FPM is being rolled-out. If your account doesn't allow the switch to FPM, contact our support team.
5. Update WordPress
In order to make full use of the latest PHP version, you have to ensure that your entire WordPress installation is up-to-date. Otherwise, you could end up having an outdated plugin that's not compatible with PHP 7, resulting in actual PHP-related errors on your website and/or other issues.
You should go to your WordPress Dashboard > Updates menu, and check if there are any pending updates. Make sure to apply all of them. Some users are afraid to update as it could "break" their website. However, we already generated a backup of our WordPress installation, so you can safely proceed. If a problem does occur, you can easily revert by restoring from the backup. Of course, our Support Team will gladly give you a helping hand if needed.
6. Minimize The Number of Plugins
Plugins bring extra functionalities to your WordPress, but they could be quite taxing to your average site speed. Having too many plugins could significantly slow down your website, so you want to keep the number of active plugins to minimum. A rule of thumb here is that you should not have plugins that you don't really use.
You can check your list of active plugins under the WordPress dashboard > Plugins > Installed Plugins > Active menu. Every case is different and our installation is quite basic, but we've seen websites with over 40 active plugins and most of them are not even necessary. Having a large number of plugins has a negative impact on the average execution time of WordPress in almost all cases. Webmasters would often experiment with different setups and different plugins, and they could end up forgetting certain plugins active without really needing them. That's why it's really important to go through your list of active plugins and see if you have some old plugins left active. If you no longer require them, you should deactivate them.
Identify Your Slowest Plugins
7. Optimize Your Home /Landing/ Page
Optimizing your homepage is in fact one of the most effective ways to speed up WordPress.
Having too much content on your main (home) page could hurt your speed score. A lot of resources results in a lot of network requests and a higher page size, which in turn translates into slower load times.
For example, image sliders could cause major slowdowns especially if the images are extremely large. In such cases, you should consider scaling down the images or lowering the number of slides.
Loading too many posts or products on your main page could slow down your site as well. Note that there is no need to place all your website content on the homepage. Place your most important content and use some catchy excerpts to attract the attention of your visitors to your most important posts/product pages.
The main idea of the home /landing/ page is to serve as an entry point to your website, not to show off all your content - that's what your internal pages are for.
It's all about striking the perfect balance between content and performance. Ideally, you want a website that's as lean as possible, so it can perform at an optimal speed.
8. Enable Compression & Leverage Browser Caching
GTmetrix are asking us to Enable compression and Leverage browser caching, and Google's PSI is saying the same things but with different terms: Enable Text Compression and Use efficient cache policy on static assets.
Enable compression for the following resources to reduce their transfer size by 1.1MiB (79% reduction).GTmetrix
What is compression?
So what does that actually mean and how does it impact your WordPress speed? When a user hits your website, a call is made to your server to deliver the requested files. Compression reduces the size of these files, which in turn drastically reduces the transfer time. Therefore, it would take less time for the visitor's browser to download them.
And if you take a closer look at the list presented by GTmetrix, you'll see that the files suggested for compression are CSS and JS files. All compression mechanisms work very well with such files, because CSS and HTML files use a lot of repeated text and have loads of blank space. What the compression algorithm does is to replace those common/repeated strings (with something shorter) and eventually it can reduce the size of the page by up to 70%. All modern browsers support compressed transfer methods so enabling compression it is a no-brainer.
How is compression performed?
The browser will announce if the compression method is supported when sending a request to the server for a specific file, for instance, http://www.example_domain.com/index.html. If you enable compression for your website, the content of index.html will be compressed and sent to the browser. The browser, on the other hand, will decompress the file and will display it to the client as a simple html file. The web visitor would not be aware of the above operations.
On ICDSoft's servers both the Gzip and Brotli compression methods are supported. While Brotli has some advantages over Gzip, the latter is the most commonly used and supported one.
What about browser caching?
You can drastically improve the speed and performance of your WordPress website by asking browsers to save and reuse the downloaded page resources. Here is the thing - whenever a visitor's browser loads your web page, it has to download each and every resource that's part of it. This includes all the HTML code, JS and CSS, and all the images.
With browser caching, some of these resources can be stored on the visitor's computer (upon their first visit). From that moment on, every time they load a page on your website, their browser will load some of the resources from your local computer, saving them network bandwidth and time. It's simple logic and math - fewer requests required by the visitor's browser to the server result in decreased Page Load Times.
For example, your website logo probably won't change very often. And that's actually true for most of the images on your website.
When possible, cache immutable static assets for a long time, such as a year or longer.https://web.dev/uses-long-cache-ttl/
The Cache-Control header is defined in seconds. Thus, max-age=31536000 corresponds to 1 year.
ICDSoft users can easily enable compression and leverage browser caching
Here are the actual directives that would be added to the .htaccess file of your WordPress installation:
This first segment enables the Gzip compression. You can see that it also excludes it for certain browsers that are known to not support Gzip, so they would get the "uncompressed" version of these files. You can also see that it sets the cache for jpg, jpeg, gif and png files to 1 year, which is exactly what Google suggests. CSS files are actually changed more often as webmasters tend to tinker with page design, so their cache is set to one month.
The only thing you can change here is the following .htaccess directive:
ExpiresDefault "access 2 days"
Change it to:
ExpiresDefault "access 1 year"
You can easily apply this change using the File Manager in the Control Panel. In that way, all file extensions that have not been configured explicitly (above) would be cached for one year.
Using Brotli instead
9. Optimize Images
The next thing on our website optimization list is to optimize the images used on the website. Don't skip this step, as it can bring very good results.
Google recommends the use of newer image formats, like JPEG 2000, and WebP. Even if you don't use these formats, you can gain serious performance boost by just resizing and optimizing your images for web viewing.
Image formats like JPEG 2000, JPEG XR, and WebP often provide better compression than PNG or JPEG, which means faster downloads and less data consumption.Google Page Speed Insights
The WebP image format
The WebP format claims that it can shave off over 30% of the file size without losing much quality.
WebP is an image format that was created in 2010 and is currently being developed by Google. Apple were not quick to adopt it, but support for WebP is scheduled for Safari 14 as it can be seen at https://caniuse.com/:
Lacking support in the Safari browser is the one major drawback against using WebP, but this is expected to be solved in the fall of 2020, when support is coming to the Apple browser.
Converting your images
The great thing with WordPress is that you don't have to manually convert each and every image that you've already uploaded to your website. You can use a plugin to automate this entire process. The plugin we'll use is WebP Express.
With little effort, WordPress admins can have their site serving autogenerated WebP images to browsers that supports it, while still serving jpeg and png files to browsers that do not support WebP. WebP Convert is able to convert images using multiple methods. There are the “local” conversion methods: imagick, cwebp, vips, gd. If none of these works on your host, there are the cloud alternatives, some of which are paid.WebP Express
Good news is that the necessary local conversion methods (such as imagick, cwebp and gd) are supported on ICDSoft's servers. What this plugin does is to create redirection rules for images, such that a request for a jpeg will result in a webp – but only if the request comes from a webp-enabled browser. If a webp image already exists, it is served immediately. Otherwise, it is converted and then served. So the plugin implements the “WebP On Demand” solution.
Keep in mind that this plugin could cause issues with certain WordPress configurations, so make sure to test your website after activating it.
Let's go ahead and install and activate WebP Express. Go to your WordPress Dashboard > Plugins > Add new, search for "WebP express", go ahead and Install and Activate it. Now our next step is to set it up, so click the Settings link under it.
All the default settings are OK. The only thing you need to do is change the Cache-Control header. Switch it from "do not set" to set - public - one year. At the end, it's super important to press the Save settings and force new .htaccess rules button.
10. Install an Optimization Plugin
Our last tip on how to improve the speed of a WordPress website, but definitely not in terms of impact, is to install a caching plugin. Every WordPress installation is different and in terms of speed, it's practically impossible to provide a one-size-fits-all approach that would serve as a universal type of solution.
Our experience has shown that Swift Performance Lite does a great job right out the box, and that's why we will start with it.
If Swift Performance Lite doesn't work for you
The great thing about caching plugins is that you can use them to generate static HTML versions of your WordPress posts and pages. This solves the biggest issues with slow WordPress websites. WordPress is based on PHP and as such, every page is generated on the fly after a serious chunk of PHP code is executed and processed by the hosting server, request by request. HTML, on the other hand, does not require absolutely any processing on the server-side. All the code is downloaded as-is and then complied by the visitor's browser. In that way, caching plugins can give you the best of both worlds - the rich features of WordPress and the stellar speed of HTML.
Unless your website changes its content with every request, you should always run some sort of caching.
Converting WordPress pages to static HTML is just one of the many optimizations that "caching" plugins can do for you. Other WordPress performance improvement features usually provided by such plugins include:
- lazyloading of images
- minification of HTML
- minification of CSS
- merging of JS files (to reduce the number of HTTP requests)
- merging of CSS files
Always make sure to test your website after activating a caching plugin
As with every other solution, there is a catch. Caching/Optimization plugins often require fine tuning as they could interfere with the normal operation of a website.
Websites with shopping carts are particularly susceptible to caching-related issues. If you are looking to speed up a WordPress store, it's of crucial importance to test your website extensively after cache activation. It's best to place a test order on your site to check for possible problems. News, magazines and blog-type websites usually handle caching plugins without any issues.
Installing and setting up Swift Performance Lite
Let's go ahead and Install Swift Performance Lite since it's the easiest one to configure. Upon activation, the plugin asks us to go through a quick setup wizard. The automatic settings produce great results, so let's directly use the Autoconfig option.
Build Your Website Cache
As with the majority of such caching plugins, you are given the option to generate a "cache" copy of just some of your pages or do a bulk-convert on all of them. The "cache" copy is in fact an HTML version of the page. In the case of Switft Performance Lite, this feature is available under the plugin's dashboard where you should scroll down to the Warm Up table.
Let's Check Our Gains
Now, let's test the performance of our website with both GTmetrix and Google's Pagespeed Insights. As you noticed, we used the automatic configuration for the Swift Performance Lite plugin.
And boom! We have a 99% Page Speed Score on GTmetrix and a 96% YSlow Score. A Fully Loaded Time of just over a second, which is great. Just 25 Requests in total (we started with 76). And the Total Page Size has been reduced to 895 kB from the initial 2.56 MB.
And if we take a look at Google's Pagespeed Insights - WOW. We have a score of 100 for the desktop version and a pretty decent, nearly perfect score for the mobile version.
Alternative Solution: Autoptimize & WP Super Cache
Here are the safest settings that you can apply with Autoptimize and still improve the WordPress speed significantly.
As for WP Super Cache, once you Install and Activate it, you should navigate to its Settings > Advanced tab. There, you should place a check next to Enable Caching and switch the Cache Delivery Method to Expert mode.
Use a Content Delivery Network (CDN) and Get 100% YSlow Score on GTMetrix
One final bit that we haven't addressed thus far is the D Grade we received from GTmetrix under the YSlow Score tab for not using a Content Delivery Network.
Indeed, we've set our domain to use the ICDSoft DNS service, because it works flawlessly and it's included in our hosting package (and even with most of our domain registrations), so you don't have to pay extra for it.
Furthermore, Google does not seem to care all that much about using a CDN as we did receive a 100 score without it. So we will leave this choice up to you - whether you wish to utilize a CDN or not.
Using a CDN does provide an improvement on the Network Latency as in theory, the site is served from a cache copy on a server that's closest to your visitor. To put it into perspective, CDNs consist of servers spread all over the world, and they all keep the same cached copy of your site ready to serve it to visitors who are at the closest proximity to the corresponding CDN server. In the graph below, our server plays the role of the Origin Server.
However, this caching mechanism does have its drawbacks. It could lead to additional difficulties when troubleshooting a problem with your website or scripts due to the extra party that's involved (the visitor's computer, our server, and the CDN server). There are also potential debugging issues as you could be looking at a cached copy. So the change you've just submitted might not be in effect. Also, using a CDN means that third parties receive information about your website and systems. Of course, you do have the option to encrypt all the traffic with an SSL certificate.
Using the ICDSoft Hosting Service With Cloudflare
Now that you are aware of the pros and cons, we will show you how to easily set up Cloudflare with our hosting service. You should be able to do just fine with their free plan "For personal websites, blogs, and anyone who wants to explore Cloudflare."
That's it. You are now using Cloudflare's CDN. You can check their Help site for further optimization mechanisms that are available with the plan you have chosen. Most websites are well served by the free plan, so usually there is no need to pay for the higher tiered plans.
So we achieved a great turnaround by applying a number of different optimization techniques. Keep in mind, however, that it's nearly impossible to provide a universal WordPress "speed-up solution" given the variety of applications that this widely used platform has found nowadays. Nevertheless, we've done our best to give you the safest and most effective tools to improve the performance of your WordPress.
The process does involve a bit of experimenting on your part, but have no fear, our backups are just a click away and you have a wide range of caching plugins to pick from. Armed with knowledge and the right tools, you've now put yourself in a great position to seriously improve the speed of your WordPress website. Good luck!