We’ve recently rebuilt our website to focus on our key services and products. It’s also given us an opportunity to improve our performance and speed up our page load times, which as we know is an important factor in modern SEO. We’re going to be using Google’s PageSpeed tool to gauge our performance
This time we’ve built our website with WordPress rather than Umbraco, but more on why we chose that in a later post.
Remove jQuery
We based our new website on a base theme that has been optimised to remove jQuery. This is usually included by default on WordPress systems, but this once integral JavaScript library is no longer necessary for the majority of cases.
WordPress also loads a lot of JavaScript in the head by default, but this blocks our content from loading as the head takes higher priority. So, we’ve determined the JavaScript we do need and it is pushed to the bottom of the page. Now it will load behind all our visual assets.
It is worth noting that if you have something above the fold which depends on jQuery or another JavaScript library, then this might no be a simple task of just removing or relocating. But, a developer can help you refactor your code in a way that loads your assets in a non-blocking way or only conditionally load assets on pages they are required on.
Read more: The end of the road for jQuery?
Use WebP and SVG for imagery
Image web technology is constantly changing to be more efficient and to require a smaller file sizes. Right now the WebP format is top of the pile for fast load times and there are plenty of WordPress plugins that transform common image formats into WebP when you upload.
SVG is still a great choice for icons and simple illustrations as they often carry a small footprint and always come out crisp on any screen definition.
A lot of caching and performance plugins now include WebP conversion as part of their feature set, but if you need a stand alone plugin for this feature, then WebP Express is a great choice.
CSS styling for cumulative layout shift
Often Cumulative Layout Shift (CLS) is an overlooked aspect of page load analysis, but it is an important part of your overall score. It refers to how much the elements of your webpage move around during the page load.
Specifically, images and custom fonts need to be downloaded before they can be displayed. Once the asset finishes loading we might see an image push content out of the way to fit into it’s rightful place and this is CLS.
Fixing CLS can greatly improve your score, so to fix this we need to ensure our web fonts use font-display: swap and that all our images have a height and width defined. For responsive images we should introduce the CSS rule for image-ratio.
Read more about Cumulative Layout Shift
Lazy loading, minified assets and caching
These are the items which you probably already know about as they have been the key aspects of page load times for the longest time. They are still majorly relevant, but their importance is part of a larger strategy. In some cases they can even be secondary to some of the items mentioned above.
Lazy loading is now baked into WordPress, but it is also a common feature within most performance plugins. Check out your settings to see if this is turned on already.
If you already have a performance plugin (such as JetPack or WP Rocket) then minification and caching should already be included as a feature. Sometimes the settings can take a bit of tweaking as the load order is still important for dependencies, but your developer can help you here.
Surge is an impressive light-weight cache, that stores your pages as HTML files to save time rendering the same stuff for every user.
Analytics, security and other non-critical plugins
Ok – security is critical, but consider whether your server or host provide a firewall or use a CDN like Cloudflare. This way the security part is taken care of before the request to your page is initiated. There are still some areas of security that can’t be handled in this way, but by reducing the load on our site we save on our page size.
The same goes for analytics. Monster insights and SiteKit do a great job of capturing and curating your website’s user engagement and traffic all into your WordPress area, but it will impact your website performance. Use a simple GA script and review your site externally to save more load performance time
Keep it simple stupid (KISS)
A boss I used to work for once told me that I “should KISS more often”, he was right of course. Over complicating things can sometimes become the problem, so Keep It Simple Stupid.
With this in mind ask yourself “do you really need a carousel slider, animations coming out every corner and parallax scrolling backgrounds for every section?”. You want your website to impress, but these quick win features add a lot of weight to the page load as they require additional assets to load an process.
Most importantly of all: are carousels and parallax scrolling even that impressive anymore?
Faster website rank higher
Now it’s time to test your system and all our improvements should put us in the 90-100 bracket. But, if you really want 100% then we have to sweat the small stuff and solve all of the feedback points. Only then do we see the magic number:
