Optimizing WordPress Websites
July 22, 2024
Load speed and performance are important factors for anyone that manages their own website. Poor performance can hurt your search rankings and is a poor experience for users that still manage to find their way to your site. In this post we’ll discuss what we feel are some of the largest factors in the performance of WordPress websites and what you can do to quickly resolve some common issues.
Images
A good portion of the data transfer at the time of a webpage loading is likely to be in the form of images. You can’t very well remove all the images from your site, but it’s important to load images efficiently.
So how do we do that in a WordPress site?
- First, we can ensure that images are compressed and optimized to reduce file size. This is generally handled either prior to upload or by plugins at upload-time. We won’t go into the optimization process in detail here, but this generally includes stripping meta data from image files, compressing them, and converting to lighter weight file types (if possible). There are a number of plugins for this purpose which will automatically optimize all images at time of upload to the WordPress media library.
- Second, we can ensure we load appropriate image sizes through the code. For this purpose, every WordPress site has a number of image sizes registered and generates duplicate resized copies of every image uploaded. For many years now, browsers have implemented the ‘srcset’ and ‘sizes’ HTML attributes on image tags for dynamically determining which of the provided image source files to use at any given display size. Registering and loading the correct sizes requires some development work, but given the website design, a developer should have no issues registering a number of appropriate image sizes to the site and configuring templates to load the correct image source for a specific screen size. This ensure your site is optimized to be responsive and perform well regardless of device.
- Lastly, we can lazy-load images so that they aren’t loaded by the browser until they are actually required (eg. images at the bottom of the page aren’t loaded until you scroll down toward them). This used to be a more complex issue, but over the past few years browsers have adopted support for the ‘loading’ HTML attribute, removing the need to develop custom solutions as browsers now have their own implementations of lazy loading. It is important to note that images that load ‘above the fold’ (immediately in view when the page loads) should not be lazy loaded as that will slightly slow the loading of those images and will affect core web vital scores – negatively impacting your Search Engine Optimization. As with the second suggestion, setting the loading attribute appropriately will require some development work, but WordPress has developer functions to make this a simple task with great benefits.
The first two solutions listed above focus on reducing the size of files loaded by the browser, while the third focuses on the number of files loading at any given time and attempts to limit loading to only images required by the current user. While these each can have a great impact in web development, all three methods should be used in tandem to improve the load time of your website.
Asset Optimization
In the context of web development, the term ‘assets’ typically refers to static files loaded alongside a web page’s HTML to provide functional and visual enhancement. This primarily includes images, CSS stylesheets, and JavaScript files. We’ve already discussed images, but here we’ll look at CSS and JS optimization. Similar to image optimization, there are two main components: limiting the size of files loaded; and limiting the number of files loaded.
In the past it was important to have fewer total files loaded to reduce round-trip requests, but since the standardization of HTTP/2 this has become less of an issue. Rather than bundling all of your CSS and JS into one file per type for example, you can now split code into smaller groups that each pertain to a specific UI element or feature. This ensures that they can be loaded on demand and not create an unnecessary impact. This allows smaller, context-dependent, payloads to avoid loading assets that a user may never need during their browsing session. This is something that is typically handled by the developer of a theme or plugin.
Minification is a process of removing unnecessary content in files. This is a process that converts a human-readable file into a much smaller file that is difficult for humans to read but equivalent for machine-reading. This is typically achieved by removing whitespace and replacing lengthy variable names with abbreviated alternatives. There are various software packages and services available for minification and it can be done on many levels. A theme/plugin developer will often publish both the original source code and a minified version for production. There are also a number of WordPress plugins that can create and serve minified versions of assets that are loaded by your site as a quick solution.
File compression is another excellent way to reduce payload size and applies to all assets, including images. Compression is handled at the server level and methods available depend on your server. As an example, an Apache server running gzip compression typically reduces file size by roughly 50%.
Plugins
WordPress plugins are like extensions that can add a lot of functionality to your site and don’t necessarily require modification of your content or theme to integrate, however they can also be a major pain point for performance for a variety of reasons:
Asset Bloat
Plugins often include some sort of interface addition or modification on user-facing pages of your site. In order to make these both aesthetically pleasing and functional, they need to load their own assets, which they often do without proper respect to performance.
An issue typical of many plugins is that they don’t restrict their assets to loading only when required. For example, plugins that add shortcodes allowing output of some custom content as part of any database-driven content editor will often load their scripts and styles on every page since the shortcodes could potentially be used anywhere. These files have to be downloaded, parsed, and executed by the browser, leading to slower loading times as well as higher bandwidth, which could be an issue for both your server and the user.
Plugins will sometimes load a third-party web library for its own use, often without the knowledge that the same library might already be loaded to your site. In the worst cases this can lead to conflicts, but even when conflicts are avoided it leads to duplicate load, parse, and execution of these assets. Sometimes these issues can be mitigated by admin settings within the plugin or through minor code changes in cases where a plugin provides an easy programmatic method to toggle loading of feature-specific assets, but each plugin must be treated separately to truly improve your site’s performance and optimize your website for all users.
Unused Features
Often a single plugin will encompass many features as a sort of ‘one-stop shop’. While this may seem helpful by lessening the need to find solutions to each problem individually, there is also an overhead cost to these large feature-rich plugins. The code that manages features that aren’t used is still parsed and executed, which takes time and server memory. Sometimes a plugin will even cause the site to load a suite of assets for features that aren’t being used.
If your site has large feature-rich plugins that you find you aren’t getting full use of, it may be time to consider replacing them with something lighter-weight and more specific to your needs.
Conclusion
A key part of performance optimization is managing overall data transfer from the server to the end user’s device and can be broken into two key components the number of files loaded; and the size of files loaded. In short, load only the necessary components and ensure that those components are reduced in size through minification and compression.
To squeeze the most performance out of your site, you will need the developers of themes or plugins that you are using to properly optimize the methods that images and other assets are loaded, but as a site manager you can also take steps to improve performance by using plugins: for example to automatically optimize all image files on upload. It is also important to consider alternatives for large feature-rich plugins that you are not taking full advantage of.