A website’s loading speed has always been an important aspect of user experience (UX), along with having an affect on rankings, but with the upcoming Core Web Vitals update, it’s going to be more important than ever before.
Along with the Core Web Vitals update, discussions are being held at Google about whether fast websites that meet all three Core Web Vitals metrics (Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS)) should be given a ranking boost, along with a complementary badge that rewards such websites for prioritising UX.
As a business with some, or all of your operations online, it is vital to deliver seamless customer journeys through to the checkout page. One of the greatest threats to good UX is slow-loading pages that frustrate visitors causing them to “bounce”, before they’ve processed anything about your business. So, essentially, this means all the effort you’ve put into good copy, images, and the UI of the site is completely wasted if web pages on your site don’t load within 2.5-3 seconds and people bounce off the site as a result.
With only a couple of months left until the update rolls out, causing rankings to fluctuate, you might be wondering what steps you could take to prepare in-time for this new website standard.
First of all, you might be wondering how to view the performance of your own website. For a general overview of how your site is doing, PageSpeed Insights is a good tool for showing you exactly where your website needs work; but do keep in-mind that the overall score tends to fluctuate as the tests rely on network connections, and that it’s not a score to obsess over.
Delivery Optimisations
Delivery optimisations, along with asset optimisations, will be the most noticeable improvements you could make, in terms of both perceived and actual load speed. Such changes involve lazy-loading your resources so that less important ones that are not visible without scrolling down the page are only loaded when they are visible.
Similar to lazy-loading, outlining critical CSS is also important for not loading any styling that is not for above-the-fold content. This is usually a bit more difficult to set-up because it can take some careful filtering of what styles are needed and which ones are not, and avoiding breaking the styling of some elements. There are other pitfalls to watch-out for, too, such as any elements that are styled dynamically such as sliders, which are not always simple to extract the CSS of. But if this is pulled off without a hitch, it can have a noticeable impact on your site speed because you have greatly reduced the number of styles that are being rendered at one time.
But even if you do optimise all of your CSS code, large amounts of CLS can negate the performance gains because they force your browser to re-calculate styles of elements, especially if they’re dynamically sized. Common examples are things like images and containers without fixed height and width attributes; it is quite common to see dozens of style calculations in Developer Tools because of this, which blocks the rendering of the rest of the page.
One step above CSS changes is optimising how your JavaScript code is delivered. Most plugins and 3rd party domains such as Google Analytics will use this, so preloading, deferring, and asynchronous loading is an essential practice to moderate JavaScript’s cost on web performance. JavaScript will be the main culprit of slow site-speeds because it can only execute code one line at a time, so beware of the number of plugins you are using and assess where you could cut down. There may be a plugin that combines the functionality of two, or you might find that you’re using a plugin for changes that can be made with code. Plugins should be a last resort to implement functionalities that are too complicated and time-consuming to set-up via custom code.
Finally, web fonts can hugely bottleneck your page loading speed because it requires connecting to an external domain (most of the time it’s fonts.googleapis.com). If it’s acceptable for you to use standard fonts that are automatically available, such as Arial, Helvetica, and Verdana, then you will be rewarded with a faster site. If using custom web fonts is important for your brand image, then pre-loading these is your best course of action.
Asset Optimisations
Asset optimisations involve serving your images and font files in the most browser-friendly formats.
WebP is one of the most efficient image formats available to use, but browser and CMS support is still a work-in-progress. On WordPress, while you can’t directly upload WebP files, you can use a plugin to convert all of your images for you and deliver them only to browsers that support it. This is typically not too difficult to set-up, and will tend to deliver 30% smaller images, with a negligible drop in image quality. If your website uses a lot of background images for sliders and containers, then you will likely run into some difficulty in serving those images in WebP, even if the plugin can generate them. This can be resolved but requires changing the structure of those sliders and containers to accommodate this.
For fonts, you will be safe using WOFF2 as these are specifically made for web browsers, with support for virtually every browser. If a key portion of your target audience uses older versions of Internet Explorer (version 8 and below), then WOFF is the next best option.
The above changes are only a handful of changes that can be made to speed up a site; the well is much deeper and we haven’t even gone into Network and Build optimisations yet!
Page Speed Optimisation Checklist
Delivery Optimisations
- Lazy-load images.
- Outline critical CSS.
We only recommend doing this if you’re comfortable with editing CSS.
- Provide fixed height and width dimensions for all images.
WordPress provides height and width attributes automatically most of the time, but background images and Advanced Custom Field (ACF) images are usually excluded.
- Minify and concatenate render-blocking JS & CSS files.
WP Rocket and Autoptimize can minify and concatenate files; though, they tend to break parts of a website, so be careful with the settings.
- Reconsider the number of external fonts you need.
- Revise how external fonts are served (preload them if possible).
Asset Optimisations
- Serve WebP image format.
- Make sure all images are being served in WebP format.
Watch-out for sliders and background-images that may not be served in WebP format.
- Assess whether images on your site are being scaled up or down to fit containers.
This can be difficult to assess manually if you’re not familiar with Developer Tools, so we recommend using EWWW Image Optimizer, which has a feature that detects scaled images on your website.
- If images are being scaled, you may be serving images in a larger size than is necessary; make sure to serve appropriately sized images.
Image optimisation plugins usually come with an auto-resize feature that you can use.
- Check if WOFF2 is being used for font files, and migrate to this format if not.
You will either have to manually re-upload font-files via FTP or if you’re using external services such as Google Fonts, then you will need to re-do the links in the head of your site which will contain links to each font file. We recommend using the Insert Headers and Footers plugin to do this in a simpler way.
Here are some trusted WordPress plugins to help you get started:
For more advice get in touch, email us > hello@quibblecontent.co.uk