The Ultimate Page Speed Optimisation Checklist

Page speed is one of the most important factors that determine a website's user experience. It's no secret that visitors are more likely to bounce if a website takes too long to load. In fact, according to Google, 53% of mobile users will abandon a site that takes more than 3 seconds to load. That's why optimising your website's page speed is crucial for keeping visitors engaged, reducing bounce rates, and ultimately, improving your website's search engine rankings.

In this blog post, we'll provide you with a comprehensive page speed optimisation checklist that covers fonts, assets, interactivity, and more after providing a brief introduction.

What is website performance?

Website performance looks at 5 key metrics. These metrics also have different weights associated with how imporant they are for overall performance:

1. First Contentful Paint (FCP) | 10% - First Contentful Paint marks the time at which the first text or image is painted.
2. Largest Contentful Paint (LCP) | 25% - Largest Contentful Paint marks the time at which the largest text or image is painted.
3. Total Blocking Time (TBT) 30% - Sum of all time periods between FCP and Time to Interactive, when task length exceeded 50ms, expressed in milliseconds.
4. Cumulative Layout Shift (CLS) | 25% - Cumulative Layout Shift measures the movement of visible elements within the viewport.
5. Speed Index (SI) | 10% - Speed Index shows how quickly the contents of a page are visibly populated.

Being aware of these different weights can help you place your eggs in the right baskets so you don't optimise things that won't have a large impact. You can clearly see that optimising for CLS, TBT and LCP account for 80% of page performance.

It can also show you what areas you can actually target. Meaning that if an essential part of your user experience is reducing your performance then you'll have to target other areas to improve overall performance.

The next few sections look at how you can improve the 5 metrics described above, broken down into the major culprits for failing page optimisation.

Optimising website fonts

Fonts can have a significant impact on your website's page speed because they can block rendering if they're hosted 3rd party, cause CLS, and impact both FCP and CLP. Here are some best practices to follow when it comes to optimising fonts:

Convert Fonts to Woff2 Format

Woff2 is a compressed font format that reduces the size of the file, making it faster to load. It's also widely adopted by so you shouldn't run into any issues that you might when using TTFs for example. By converting your fonts to Woff2, you can improve your website's page speed and compatibility.

Don't Use Too Many Font Weights and Families

Using too many font weights and families can slow down your website's page speed dramatically. Instead, choose a few fonts that are easy to read and use them consistently across your website.

Self-Host Fonts

Self-hosting your fonts can improve your website's page optimisation because you're not relying on third-party services to load them. Loading third-party fonts can block the rendering of your website which negatively impacts total blocking time (TBT), a metric that holds 30% weight! Avoid using Google Fonts if possible for this reason as they slow down your website by blocking rendering.

Asynchronously Load Typekit Fonts

If you're using Typekit fonts, asynchronously loading them can improve your website's page speed. Asynchronous loading means that the fonts are loaded in a way that doesn't block the rest of the pages loading. This does wonders for TBT.

Use the Display-Swap Property and Set the Fallback Font to Web-Safe Font Family:

Using the display-swap property ensures that your website's text is visible even if the font hasn't loaded yet. Setting the fallback font to a web-safe font family ensures that your website remains readable even if the font doesn't load. Web-safe font's are font's that exist on every machine and therefore don't need to be loaded. Using these as fallbacks can help protect against CLS, TBT and FCP in particular.

Optimising website images, videos and assets

Optimising your website's assets can significantly improve your website's page speed. Here are some best practices to follow when it comes to optimising assets:

Strip Out Excess SVG Code

SVG files can have quite a lot of excess code that's not actually needed for them to render, so it's essential to strip out excess weight to reduce their size.

Use SVG Code for Logos, Icons, and Illustrations

Using SVG code for logos, icons, and illustrations can significantly reduce your website's page load time. Your browser interprets SVG code and HTML so it doesn't need to send a request to the server to load them, they load along with the HTML document. Less requests = faster load speeds, simple maths! 

Use WebP Image Format if Possible

WebP is a compressed image format that can reduce your website's page load time. If your website's audience is using modern browsers, using WebP images can improve your website's page speed.

Compress your assets

The failure to compress assets is one of the leading causes of poor website performance. Developers, designers and marketers often fail to take the necessary steps to optimise assets. Thankfully they're as simple as copying and pasting your assets into a website.

Compress and purge CSS

Compressing and purging your CSS can reduce the file size, making it faster to load. Purging is the process of removing CSS that isn't being used form the main CSS file that's loaded on the website.

Compress and purge JavaScript

Compressing and purging your JavaScript files can reduce their size, making them faster to load for the same reasons and compressing, and purging, your CSS.

Compress Videos

Compressing videos can reduce their size, making them faster to load. There are some great free tools like TOOL NAME that make this process really easy, and they even provide an image of the first frame so you have a cover photo.

Compress Images

Compressing your website's images helps them load faster. Images tend to be the main culprit for LCP so having a small file size can make a big impact on your overall pages performance.

Use a Mobile Version for Images and Background Images

Using a smaller version of images for mobile devices can significantly improve your website's page speed. For background images you can use media queries to display different versions depending on screen width. Most browsers are smart enough to only load the image that's relevant for the device screen width.

You can have different versions for in-page images by using the srcset property. This is relatively simple to setup and it increased page load speed by reducing the LCP.

Lazy load Images and Iframes

Lazy loading images and iframes within the main page content can significantly improve your website's page speed. This technique delays the loading of images and iframes until they're needed, which means that the initial page load time is faster.

However, it's important to note that you should avoid lazy loading anything above the fold, which refers to the content that's visible to the user without scrolling. Lazy loading anything above the fold can create CLS which holds 25% weighting! So simply changing the loading type can have a positive impact on your websites performance.

Make sure your images are property sized

Another important aspect of optimising assets is ensuring that images are the correct dimensions for the area they're used in. When images are too large, they take longer to load and can slow down your website. Adding width and height properties to images can also help your website avoid CLS because the browser can allocate the necessary space for the image before it loads.

Dynamically load large assets

To further optimise your website's assets, you can dynamically load assets above the fold using data attributes. This means that you can load only the necessary assets when they're needed, instead of loading everything at once. This technique can significantly improve your website's page speed.

Here's how it works:

1. Set the asset URL as the value for a data attribute eg. <img class="myImage" data-src="assetUrl"/>
2. Target the .myImage class in your javascript code, for example by using const image = document.querySelector(".myImage");
3. Save the value of image data attribute's in a new variable
4. Use the value of that data attribute to set the src with setAttribute

Loading of this asset now only happens after the page has finished loading so it doesn't block rendering (TBT) or lower FCP or LCP.

Optimising JavaScript animations for websites

In addition to optimising fonts and assets, it's also essential to optimise your website's interactivity. Here are some best practices to follow:

Add defer and async to 3rd party scripts

Adding defer and async attributes to 3rd party scripts can prevent them from blocking the rendering of your website. This means that your website can load faster, even if there are external scripts involved. Big win for TBT! 

Load scripts after closing the <body> tag if possible

Placing scripts at the bottom of the page can prevent them from blocking the rendering of the page's content. This means that the user can see the content faster, which can improve their experience on your website.

Avoid animating width/height or transitional properties on elements above the fold

Animating these properties can negatively impact the CLS metric. These types of animations cause elements to change their appearances in ways that cause the website content to shift.

Use visibility hidden to animate elements from an invisible state

Using visibility hidden instead of display none can help your website calculate the dimensions of the element your intend to load in even if the user can't see it. This does wonders for CLS but it also lets you transition invisible elements which isn't possible with display none. Another drawback of display none is the loading of the asset might case a layout shift.

Use CSS transitions instead of JavaScript for animations where possible

CSS transitions are faster and more efficient than JavaScript animations, which can improve your website's page speed. With the death of IE 11, god rest its soul, we can now use the intersectionObserver api. This can be used to toggle classes on and off in order to trigger animations.

This is a very efficient alternative to animation libraries which can sometimes block the rendering of the website.

Write scalable, reusable functions

This can help reduce the amount of code on your website, which can improve your website's performance. Performing repetitive/ bulk tasks should be done with functions because less code means less stuff to load, leading to greater load speeds.

Conclusion

Page speed optimisation is essential for improving your website's user experience and search engine rankings. By following these best practices for optimising fonts, assets, and JavaScript, you can significantly improve your website's page speed. The methods described above are proven to specifically target those metrics mentioned in Googles Page Speed Insights.

References

Asynchronously load Typekit - https://blog.typekit.com/2011/05/25/loading-typekit-fonts-asynchronously/

Strip out excess SVG code - https://jakearchibald.github.io/svgomg/

Compress assets - https://convertio.co/