This month we’ve been looking again at the performance of our WordPress websites, aiming to improve both the page loading speed and the page size. High-performance websites give a better user experience and have been shown to improve visitor conversion and retention. Because of increased visitor satisfaction, website performance is now measured by search engines and affects ranking so making pages faster and more light-weight is also an effective SEO strategy. Page size affects the bandwidth used by the server and the visitor as well as the page loading speed so minimising page size is a win-win.
Server-side Caching
The feature-richness of WordPress websites comes at a cost: a considerable amount of server processor time is used in generating pages. For every line of code or database query behind a bespoke high-performance web page, there will be a hundred lines of code or database queries run to generate a typical WordPress web page, taking several seconds even on the fastest server hardware. The only real solution is to use a caching plugin, configured to preload all static pages so they can be served up to visitors in a fraction of a second (giving a low “Time To First Byte”).
Google PageSpeed
There are many website performance-testing tools but for SEO purposes it’s worth taking particular note of how Google rates your web pages’ speed and usability. The PageSpeed tool gives you hints about aspects of your web page that most need improving.
Minifying, Merging and Compressing
The text assets (.html, .js, .css, .json etc) in a web page can all be reduced in size by minifying and compressing the files. At the same time it can help page loading speed to merge files since browsers place a limit on concurrent HTTP requests. Merging files often breaks WordPress features though so any merging configuration needs to be carefully tested before deployment.
HTTP/2
The merging of files can be redundant if a server is configured to support HTTP/2, which is particularly useful for WordPress websites which typically involve dozens of file dependencies.
Image Compression
Images typically account for over half the file size of a web page. Compressing jpeg, png and svg images appropriately using modern tools is critically important. Too often a WordPress theme will directly use the image file you upload to the media libary, and if this is a high-resolution high-quality photo the file size can be disastrously high – in this case it needs to be passed through a compression tool, either before or after you upload the image.
Responsive Images
The size at which images are displayed on different devices is only one aspect of responsive images, the other is ensuring image files are served at an appropriate resolution for a given size on a given display: high enough to match or exceed the display’s resolution, but low enough to keep the image files size to a minimum. In HTML5 this can be achieved through the srcset and sizes image attributes and media queries for background images. WordPress now includes native responsive image support by adding srcset and sizes attributes to image HTML tags, but many WordPress themes bypass this and simply serve up single-source images. We’ve been getting to grips this problem on our websites by writing bespoke code to override the themes’ image-handling routines and reinstating srcset and sizes attributes, and adding media queries for background images. The images on our pages are now dramatically smaller and faster to load, particularly on small-screen devices where smaller versions of the images are served. Conversely we can also serve sharper better-quality images for retina screens and other devices with a high pixel density.
Browser Caching
Using HTTP headers to specify appropriate expiry times on various file assets enables a visitor’s browser to cache those assets and avoids the need to load them more than once when a visitor browses several pages on a webite.
The Result: Optimised Web Pages
By applying a combination of strategies we’ve been able to dramatically reduce the size of our web pages, improve the loading speed and time-to-first-byte, reduce the latency and bandwidth, and improve our image quality. As well as providing a better user experience this has also considerably improved our Google PageSpeed scores which will help our search engine rankings.
