I have been optimizing the performance of a WordPress site for a couple of days and managed to shave off about half a second from page load times and significantly improve the performance scores.
Evaluating Performance
The first step towards optimization is to measure the performance of your site and identify the issues and bottlenecks. I used the following free online tools for this purpose:
1 | PageSpeed Insigths by Google |
2 | Page Speed by varvy.com |
3 | pingdom |
4 | GTmetrix |
5 | Yellow Lab Tools |
It is suggested to evaluate the performance of your site using the above tools before and after each optimization to understand its impact. The impact of optimization can vary from one site to another and same techniques are not guaranteed to work across different sites. There are many factors which dictate how the site would respond to an optimization such as how dynamic the content is.
Caching
I found caching to have the biggest impact on page load times. It can be easily enabled by installing and configuring a plugin. I went with WP Super Cache plugin because out of the top three caching plugins, this is the only one which works on IIS web server. The other two, WP Fastest Cache and W3 Total Cache don’t work on IIS.
After installing and activating the plugin, the next thing is to configure it properly for getting the most out of it. I made following changes to settings of WP Super Cache:
- Turned on ‘304 Not Modified browser caching’.
- Changed cache timeout to about a day.
This setting makes sense because almost all the content on the site is static in nature and new content is not posted that frequently. - Turned on ‘Preload Cache’ functionality.
Rather waiting for the first user to hit a page and then generate cache for that page, this feature generates cached pages for content in advance.
Minification and Bundling
Minification removes unnecessary and redundant data from HTML, Javascript and CSS files without affecting the functionality or output. While bundling combines smaller resource files into a single file to reduce the requests browser has to make to the server.
Autoptimize is the most popular plugin to achieve this and it also works well with WP Super Cache. I turned on optimization for HTML, JavaScript and CSS code. Another option is to ‘remove Google fonts’ which can have a measurable impact on performance. I didn’t remove Google fonts as it was used by site’s theme in my case.
With HTTP/2, bundling is not advised as it is superfluous thanks to the request/response multiplexing feature.
Content Delivery Network (CDN)
I am using Jetpack by WordPress as CDN for images.
Jetpack has servers around the world and they serve images to users from the geographically nearest server to improve performance. This also saves bandwidth on your hosting server as the request for images are served from Jetpack servers instead.
Leverage Browser Caching
We should instruct the browser to cache resources like images for a long period of time as they don’t usually change. This improves performance for repeat visits to the site.
On Apache server, this can be achieved by making changes in .htaccess file. While for IIS, I added the following highlighted line web.config file.
<configuration> <system.webServer> <staticContent> ... <clientCache cacheControlCustom="public" cacheControlMode="UseMaxAge" cacheControlMaxAge="31.00:00:00" /> ... </staticContent> </system.webServer> </configuration>
This is going to cache static resources like images, JavaScript and CSS in the browser for 31 days. PHP / WordPress ensures that dynamically generated HTML pages are not cached for long.
No Bad Requests (Serving Woff2 font from IIS)
I found that a request for
<xml version="1.0" encoding="UTF-8"?> <configuration> <system.webServer> <staticContent> ... <remove fileExtension=".woff2"/> <mimeMap fileExtension=".woff2" mimeType="application/font-woff2"/> ... </staticContent> </system.webServer> </configuration>
Results
Following are the performance scores after the optimization:
With HTTP/2, bundling is not advised due to the request/response multiplexing feature.
Following is taken from: https://developers.google.com/web/fundamentals/performance/http2/#request_and_response_multiplexing
The ability to break down an HTTP message into independent frames, interleave them, and then reassemble them on the other end is the single most important enhancement of HTTP/2. In fact, it introduces a ripple effect of numerous performance benefits across the entire stack of all web technologies, enabling us to:
– Interleave multiple requests in parallel without blocking on any one.
– Interleave multiple responses in parallel without blocking on any one.
– Use a single connection to deliver multiple requests and responses in parallel.
– Remove unnecessary HTTP/1.x workarounds (see Optimizing for HTTP/1.x, such as concatenated files, image sprites, and domain sharding).
– Deliver lower page load times by eliminating unnecessary latency and improving utilization of available network capacity.
– And much more…