Log in

A complete guide to page speed for 2021

What is Page Speed and why is it important?

In short, page speed is the time it will take for a user to load a specific page on your website. This is often used interchangeably with ‘site speed’ which actually refers to the gauge of how your website loads across all or a sample set of pages.

Bearing in mind that Google’s ultimate goal is to provide users with the best possible experience, it’s logical that Google would factor this into its rankings. However, while improving page speed may get you higher rankings, it also directly benefits your users. In fact, Google estimates the probability of a user bouncing increases 32% as page load time goes from 1 second to 3 seconds.

How does Google measure load times?

As the web has become increasingly advanced, Google has moved away from measuring speed simply as the loading time from start to finish. Google now evaluates a whole host of factors used to determine the experience of your site for actual users. This can include factors such as the order in which assets load on your site, or whether you leverage caching for better return-visit speed.

Fully Loaded Page – The full amount of time it takes everything to load on the page excluding content that requires further user interaction (for example calculations by on-page calculator).

Time to First Byte – When a webpage is first loaded their browser requests information in the form of ‘bytes’ from a server. Time to First Byte measures the number of milliseconds it takes the browser to receive the first byte.

First Contentful Paint (FCP) – This is the time taken for the first piece of visible content to load on the page which is most often in the form of text, images or video.

First Meaningful Paint (FMP) – Coined by Google themselves, this refers to the time taken for the main content of the page to load. It typically refers to content that makes the page unique, as opposed to generic assets like navigation or logos.

DOMContentLoaded (DCL) – DOMContentLoaded is the time taken to generate the model from the HTML code it received without loading external scripts such as stylesheets (CSS) or JavaScript for additional functionality. This means the page can start rendering and visuals such as images can appear as soon as they load.

In May 2020, Google announced it would factor in new page experience signals to its rankings which they’ve dubbed ‘Core Web Vitals’. This is part of an overall shift to ensure users get the optimal experience, rather than just a fast one which benefits users as it will place a greater focus on reliable, engaging websites.   These will be factored into Google’s ranking algorithm as of May 2021 and combine several new metrics which webmasters need to prepare for.

Core Web Vitals

Largest Contentful Paint

(LCP) – The time taken for the largest visible asset to load, determining when the main content of the page has finished rendering.

First Input Delay (FID)

– Is user to determine interactivity and how it is perceived by the user. It does this by measuring the first time a user attempts to interact with the page and when the page is actually able to respond.

Cumulative Layout Shift (CLS)

– Measures the visual stability of a page, or whether your content moves as it loads. In simple terms, this means anything that loads and pushes already loaded content downwards is a problem.

Now we know what Google is measuring, it’s important to note that your page speed is dependent on several factors beyond your control. Factors such as internet connection speed, device and browser type all play a role in determining how fast your pages load. Therefore, Google uses a mixture of field and lab data to evaluate your site.

Lab Data

Lab data is essentially a virtual test environment that simulates the conditions a user would have when visiting your site. This can be particularly useful when analysing a page with low visits to understand whether page speed will be a limiting factor before  directing traffic there.  This can even be used prior to launching a page to solve problems before going live.

Field Data

This is a record of how real-world users experienced your site. While it’s unlikely Google has accurate records on how your site loaded for every user that’s visited, they do provide several tools that show how a page loaded for at least a sample of real users. Most notably Chrome User Experience Report (CrUX) shows aggregated metrics for chrome users. Some measurements such as first input delay are dependent on user behaviour and therefore, can only be tested in the field.

How to optimise your site speed in 2021

Now you understand how Google is measuring the speed and experience of your site, let’s learn how to best optimise a page.

Compress Images

One of the quickest wins for any webmaster is to reduce the size of the images loaded on the page, as they usually take up the most bandwidth. There are two forms of compression for images; ‘lossless’ and ‘lossy’.

Lossless loses no quality when compressing but it will mean the user has to load the full set of data needed to load the image whereas Lossy will remove some of the original data but will still produce a quality image. When deciding between the two it’s important to keep your users in mind. If you’re expecting the majority of your traffic to come via mobile, then Lossy may be preferable as it’s harder to notice a drop in quality on smaller screens.

In some cases, removing an image entirely can be a way to improve page load speed. It’s best practice to use only necessary visual aids rather than a high number of images.

Optimize Code structure

Well-written lightweight code is the key to having a fast loading site. Google will load everything written in the code base, so a simple win is to remove anything that isn’t being used. This can be legacy code that no longer serves a purpose or even just removing unused spaces, commas and code comments – this is known as ‘minifying’ code.

Defer scripts

A web browser builds the document object model (DOM) in a set order. This means there will be scripts it needs to execute before it can continue building the rest of the page. Therefore, it’s important to ensure scripts are only loaded when necessary and the order isn’t preventing other aspects of the site from loading.

Enable Browser Caching

Browsers can store information on your site for some time so that users don’t need to reload everything when they return. This is commonly referred to as ‘caching’ and is important for improving repeat visit speeds. However, if you make frequent changes to a page you may want users to reload specific assets, otherwise the changes won’t appear. Webmasters can therefore set the policy for which assets can be stored, by whom and for how long. Google provides guidelines on the best practices for this.

Utilize a Content Delivery Network (CDN)

Browsers need to connect to a server to retrieve content, and the distance between the user and that server has an impact on page speed. To reduce the distance information has to travel, webmasters can utilize a content delivery network (CDN). This stores a cached version of your site across a network of smaller lightweight servers in better geographical locations. This is particularly handy when targeting customers on an international scale.

Reduce HTTP requests (and use the latest version)

A http request is when a browser pings a server asking for information about a webpage, and the server responds with the relevant information. Naturally, the higher the number of requests made, the more time information will spend in transit, which slows overall load times. One easy way to reduce these is to limit the number of requests needed to load the page by only using crucial assets or a more minimalist design.

The technology behind HTTP has improved in recent years, with HTTP/2 released in 2015 and HTTP/3 in development. HTTP/2 allows for what is known as ‘multiplexing’ which, in simple terms, allows a browser to send multiple requests simultaneously which dramatically improves load speeds.

Reduce Server Response times

One major area that is often overlooked by SEOs is server response times. This refers to how quickly your server can respond once a request is made which is impacted by both the hardware and the set-up of your server.

Of course, one way to improve this is to pay for better servers or hosting, as increasing the computational power will reduce the server response time. However, if this isn’t an option there are optimisations that can be made to get the most out of the servers you have.

Typically, a server will use database queries to retrieve information, but poorly written queries can make these processes slow. This, coupled with slow application logic and poor routing, will add unnecessary computational time. Running server-side code through a profiling tool and creating new direct routes to specific assets will improve page load times. Regular audits and cleansing of the database will help ensure page speed doesn’t degrade overtime.

Using CMS Plug-ins

For smaller websites, there are a number of CMS plug-ins to make life easier. If you’re using WordPress plug-ins such as Smush or WP rocket can help webmasters cache assets, minify code and even utilise a CDN automatically. While plug-ins can be a great solution for non-technical webmasters it’s important to remember there are limits to automated solutions.

How to test your sites page speed

From here we know what Google is measuring and some tactics you can deploy to improve upon these, but let’s dive into how you might test your site and identify areas of focus. Google provides some great free tools that make analyzing a site’s performance very simple.

Chrome UX Report

Google stores information on how real users loaded your site via Chrome, which anyone can access provided your site is large enough. These include experience metrics and should be balanced against your onsite analytics data.

Page Speed Insights

Page Speed insights provides both lab data and field data, assuming your site is visited enough to have field data stored by Chrome UX reports. The real aim of this tool is to gauge the configuration of your site by granting it a score out of 100 and providing actionable recommendations on how to improve.

Google’s Lighthouse

Lighthouse is built directly into Chrome Dev Tools and using it is as simple as opening your webpage in Google chrome, right clicking ‘inspect element’ and choosing the far-right tab ‘audit’. From there you can play around with the settings and run an audit directly in your browser.

Webpage Speed Test

If you need to take a deeper dive into performance a great tool not provided by Google is webpagetest.org. This is highly configurable and will load your page in an actual browser running multiple tests and correlating the performance. It can even break down your pages loading into a waterfall tree showing which assets are slowing performance.

For more support, take a look at our full list of our recommended free SEO tools.

Trusted in the Industry by

Case Studies

Read about some our recent successes with some of our fantastic clients.

Signet (H Samuel)

Read More

Hotel Chocolat

Read More

OvuSense

Read More

Let’s work together on your next project

We work with household names and hundreds of small bussinesses to help them get more from online.