In previous articles we have looked at several ways to improve your WordPress page load times for a faster website. This centered around code changes in WordPress and the use of a few select plugins to optimize your images ( such as Imagify) cache your pages, lazy load images, minify JS, CSS and HTML (such as WPRocket) and use a CDN for content delivery.
Speed of web page rendering is a high-powered factor in user engagement and retention and is a major factor in search engine rankings. With a more diverse range of content available visitors become more and more demanding, they want more quality, more speed and more entertainment. Delivering modern attractive and interactive pages all consumes more bandwidth and increases the need to tune for speed.
First of all, it is important to conduct performance analysis and depending on its results search for the appropriate solutions.
Today we are going to look at server side website speed optimizations – in other words changes and additions that can be made directly on the server, rather than in the WordPress application layer. These types of changes are in general a little more complicated to perform as they require an understanding of the command line, tools, services and file structure of the webserver – in this case Linux – being the most common. However one advantage of using these tools is they will work for almost any website, not only WordPress.
It should be noted that changes to services running on the server will almost always require hosting your website on a VPS – administration access to a shared server is not usually available.
Pagespeed Module
This module is part of a family of tools by Google. It is free and opensource and works with both Apache and Nginx stacks.
To place this tool into context Wikipedia explains:
Google PageSpeed is a family of tools by Google Inc, designed to help a website’s performance optimizations. It was introduced at Developer Conference in 2010. There are four main components of PageSpeed family tools: PageSpeed Module, consisting of mod_pagespeed for the Apache HTTP Server and ngx_pagespeed for the Nginx, PageSpeed Insights, PageSpeed Service, and PageSpeed Chrome DevTools extension. All of these components are built to identify faults in a website’s compliance with Google’s Web Performance Best Practices, as well as automate the adjustment process.
Pagespeed Overview
The PageSpeed module, or mod_PageSpeed is a free and open-source tool that speeds up websites, reduces page load time, improves web page latency and bandwidth usage by optimizing web pages and their assets. This module automatically applies general front-end best practices to pages and associated resources (HTML, CSS, JavaScript, images) without the need to modify existing content or workflow.
Page load time is period of time starting from the moment user requests a new page to the moment the page is fully rendered by the browser. Page load time is one of the main characteristics of the website performance, especially from the client point of view. It is main focus of the PageSpeed, so to improve web performance PageSpeed automatically checks whether page corresponds to a number of different rules that represent best practices in web development.
Pagespeed Filters
The optimization rules can be set by the use of filters, which cover the following areas:
- Stylesheets optimizations;
- Javascript files optimizations;
- Images optimizations;
- HTML optimizations;
- Tracking activity filters.
You can choose which filters you want to apply via your site’s htaccess file, so you aren’t forced to use every single optimization that mod_PageSpeed offers. Broadly the use of the above filters provide the following speed optimizations:
Minifies HTML, CSS, and JavaScript.
Optimizes file caching.
Combines external JavaScript files and optimizes them.
Optimizes file loading by prioritizing important CSS and deferring JavaScript.
Optimizes images via compression, conversion from PNG to JPG (if no transparency), resizing images, and converting to WebP (for browsers that support WebP).
In little more detail PageSpeed focuses on the following practices.
Minifying payload
The server’s response includes some amount of data that has to be limited as much as it is possible in order to minimize page size. Cutting down the payload size of both dynamic and static resources can be done by reducing HTML, JavaScript, and CSS code; enabling compression; optimizing images and unused CSS. Serving scaled images and resources from a consistent URL also helps in decreasing the size of downloads, responses, and cached pages. Here a CDN helps too.
Optimize caching
Web pages have assets that are rarely changed, e.g. HTML, CSS, JavaScript, images, etc. To reduce the page load time it is necessary to save or cache these assets server-side. A file-system based cache is always employed on each server. In this case there is no need to download them each time, their copy will be used instead. Additionally to file cache memcached can be applied as a scalable network-accessible cache. Optimizing caching leads to reducing round-trip time, bandwidth, and total payload size of the responses.
Optimizing browser rendering
To improve the performance on the client side it is best to format HTML, CSS, and JavaScript code according to the browser characteristics. Efficient CSS selectors, absence of CSS expressions, and inserting CSS in the document head will assist in the enhancing of the browser’s page layout. Specifying image dimensions and character sets also helps.
Minimizing round-trip times
Round-trip time (RTT) includes time spent on sending a request by client and sending a response by server, excluding the time spent on data transfer.Thel ower the RTT the better the web page speed performance.The main methods to reduce the number of round-trips times include minimizing DNS lookups and redirects, combining external JavaScript, external CSS and images using CSS sprites.
Clearly it can be seen that the PageSpeed Module covers much of the same ground as a small collection of plugins at the app level, albeit in a slightly less user friendly manner, but with the advantage of working for any website running on NGINX or APACHE, so for that reason alone it’s worth exploring in order to improve page load times.
We will be covering the installation of PageSpeed and configuration settings in a follow up blog post, and then comparing the performance against a WordPress site using application level performance plugins and code to see if there is a difference in perfrmance between the two.