Google’s page experience ranking algorithm update

On 28th May 2020, Google announced that the Google Page Experience update will become a ranking factor in May 2021.

The new algorithm will combine several signals that measure how well or badly users experience a web page. Google will combine these amongst other ranking factors to determine whether to rank a web page.

The Page Experience Update is another step forward in Google’s algorithm using real user signals to rank web pages.

What is the Page Experience update?

The Page Experience algorithm evaluates a user’s real experience on a webpage based on the following set of signals:

• Core Web Vitals (site speed factors)
• Mobile-friendliness
• Safe browsing
• HTTPS security
• Presence of intrusive interstitial (a type of full-screen pop-up)

These user-centred metrics are not new and have been search ranking factors for some time. The new Page Experience Update brings existing search signals together to provide a holistic view of how a user experiences a webpage. It reiterates the importance of delivering a good user experience, along with great page content.

Will page experience be a big ranking factor?

Most of the signals in the Page Experience Update are already small ranking factors. Website owners who follow SEO best practice shouldn’t expect to see a huge change when this algorithm goes live in May.

That said, Google has given us a heads-up in stating they will continue to add metrics to the page experience algorithm over time. With a combination of small ranking factors and incremental additions, page experience may become a bigger ranking factor in the future.If you know your site has intrusive ads or a slow loading speed, you may want to refocus your efforts for this year.

If you’re confident your site meets page experience best practice, you could predict the next signal to be added to the update. If you measure and test signals that show how people interact with your site, you will find there’s always room for improvement.

To reiterate Google, while page experience will be important, it does not override having great page content. Page experience will be a more influential ranking factor when there are several relevant, high-quality pages, and Google needs to pick which one to rank. This is where page experience is likely to be the differentiating ranking factor.

How to optimise for page experience

To optimise page experience, you need to focus on delivering a fast, secure, and easy experience for your users. Here we explore how to do this.

Improve site speed aka Core Web Vitals

Site speed has been a mobile ranking factor since July 2018, so you should already be optimising for it.

On 5th May 2020, Google released the Web Vitals initiative to help simplify the landscape and guide site owners about which quality signals are crucial to delivering good user experience.

Following this, Google updated the Search Console speed report to “Core Web Vitals”, representing the primary speed metrics that site owners should monitor and improve.

These core metrics are Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS).

Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP) marks the point in the page load timeline when the largest content element is visible to the user. It’s designed to measure how well a page loads for users.

To deliver a good page experience, the Largest Contentful Paint should load within 2.5. seconds.

How to improve Largest Contentful Paint

To improve Largest Contentful Paint, we’ve listed below nine actionable steps you can take with the help of your hosting provider, website builder, an SEO specialist or a web developer.

1. Invest in fast and reliable web hosting by paying a hosting provider for a high-performance server.

2. Use a Content Delivery Network (CDN), either through a package with your web hosting company or by choosing a third-party provider and manually integrating the CDN. A Content Delivery Network is a network of servers distributed in several locations that enable browsers to request your site from the nearest server to the user.

3. Speed up your database by clearing it out frequently, increasing your storage, or optimising slow queries using indexes and other solutions.

4. Implement caching so that your website’s code doesn’t have to fetch and load from the server each time users request it. Instead, your page will be stored temporarily in a user’s browser for fast retrieval.

5. Minify JavaScript and CSS – this simply means removing unnecessary code and external scripts without changing the visual appearance of a page. There are many tools or plug-ins available to help with code minification.

6. Defer render-blocking or non-critical JavaScript and CSS – when scripts and stylesheets are added to your HTML, they increase the loading time of your page, blocking any content from rendering quickly. Usually, this JavaScript and CSS are not critical to show the above-the-fold content to users and by deferring it until it’s needed, you can significantly improve page speed experience. There are different snippets of code a developer can add to your HTML to defer the loading of CSS and JavaScript. Alternatively, WordPress and other website builders have plug-ins or built-in solutions that will do this for you.

7. Compressing images is the simplest technique listed here to improve First Contentful Paint. Before adding images to your page, compress them using a tool such as TinyPNG or Squoosh first. If you can get your images below 50KB, you’ll see improved speed performance. Alternatively, consider converting your images from JPEG to WebP format.  

8. Implement lazy-loading which will load images and videos as a user scrolls down your page, rather than on the initial page request. Google offers guidance on implementing lazy-loading, while many website builders will also have an easy option to switch this on via plug-ins or inbuilt functionality.

9. Preload necessary resources – if you know certain resources, such as your font, above-the-folder content or logo need to be loaded first, you could add to your code. This logic will tell the browser to prioritise and start fetching a critical resource earlier than less important resources.

First Input Delay (FID)

First Input Delay measures how soon a user can interact with your page after it has loaded, for example by clicking on a link, scrolling down the page, or inputting information.

A slow Input Delay will occur between First Contentful Paint (when there’s visible content on the page) and Time to Interactive (when the browser can respond to user interaction). If there is visible content but a user is unable to scroll or do anything, this is a slow Input Delay.

A good First Input Delay should be less than 100 milliseconds. A slow First Input Delay can result in users thinking your site is broken or leaving in frustration. With the new Page Experience Update, this could harm your rankings.

How to improve First Input Delay

To optimize First Input Delay, you need to focus on reducing scripts and HTTP requests. Here are four ways to get you started.

1. Reduce JavaScript execution

Parsing, compiling and executing scripts consume the network and CPU idle, slowing down performance. JavaScript should be as small and lean as possible to minimise the impact of page experience for end-users. One simple way to optimise your JavaScript is to get a developer to identify and remove any unnecessary scripts. Removing these shouldn’t have any impact on your site’s appearance or functionality.

As mentioned previously, JavaScript files can also be minified, compressed, and deferred. Uglify or Closure Compiler are two tools that can be used to minify script. Alternatively, a website builder like WordPress has several speed plug-ins to do this, eliminating the need for development work.

2. Reduce JavaScript payloads with code splitting

Once you’ve reduced your JavaScript code, the next step is to look at breaking up any long tasks that will be increasing input delay and making your site unresponsive. Code-splitting and breaking up long tasks into smaller chunks can be achieved by using module bundlers like Webpack. When working through splitting your code, it’s important to test and analyse load times and potential user impact.

3. Remove or optimise third party scripts

Third party scripts are any scripts from an external site such as analytics, ads, and widget integrations. If your site has been running for a long time, it could be worth reviewing these scripts and looking at Tag Manager to see if there are any that are no longer needed. Otherwise you can consider using either the async or defer attribute to dictate when the scripts should be loaded. When The Telegraph deferred JavaScript on both first party and third party scripts, the performance results were notable. They now question all JavaScript execution and audit Tag Manager quarterly.

4. Keep requests to a minimum

Everything you include on a webpage needs to be loaded when requested. Certain requests are larger and take longer than others, such as images, videos, and scripts. If you have a slow page, review the requests in Lighthouse and investigate where the bottlenecks are. You don’t necessarily need to be a developer to reduce requests. Can you consider removing the number of media files on the page?

Cumulative Layout Shift (CLS)

While First Contentful Paint and First Input Delay are metrics we’ve been measuring for a while, Cumulative Layout Shift (CLS) is a brand new metric.

It refers to the unexpected movement of visual elements on a webpage. The unsolicited movement of elements on a page indicates visual instability and results in a poor user experience, which is why Google has included it in Core Web Vitals.

The Cumulative Layout Shift metric that Google measures identifies how often this issue occurs for real users. Websites should strive to have a Cumulative Layout Shift score of less than 0.1.

How to improve Cumulative Layout Shift

Cumulative Layout Shifts can be annoying and confusing to users. They’re often caused by visible elements on a web page being required to move because another element has resized or been added to the page. To avoid layout shifts, there are some simple best practices for both site build and design that you should follow. These are:

1. Set image dimensions

Make sure all your images and videos have width and height attributes. Alternatively, in your CSS, you can set a default aspect ratio for images based on the ratio of an image’s height to its width. This will allow the browser to reserve this space when loading, preventing layout shifts.

2. Reserve ads, embeds and dynamic content space

The most common reason for layout shifts is advert placements on a website. To avoid ads shifting content, you can statically reserve the most likely and largest possible space for the ad slot. You can also avoid placing ads near the top of the viewport as it’s more likely to cause layout shifts here. Additionally, if you have any embedded iframes, such as YouTube videos or dynamic content pop-ups like newsletter sign-ups, you should reserve and pre-set space for these elements.

3.Preload fonts
The final tip which can also help with loading time is to preload your fonts using.

Performance budgeting

To get ahead of the 2021 Page Experience Update, you could consider implementing performance budgeting at your organisation. Introduced by Google, performance budgeting aims to enforce certain standards and limits on your site that everyone adheres to. This could be maintaining your Core Web Vitals scores or limiting page size.

Performance budgeting needs to be a culture shift within the organisation. Everyone needs to be introduced to the concept fully so they can understand the commercial benefits; only this way can it be implemented successfully.

Tools to monitor Core Web Vitals

You can easily see Core Web Vitals data in Google Search Console or by using Page Speed Insights.

Alternatively, a good way to analyse and keep track of the Core Web Vitals metrics is to set-up a Chrome Experience Report.

Mobile-friendliness

Since July 2019, Google started using the quality of mobile sites as a ranking factor, known as the mobile-first index. Today, Google has combined this with Core Web Vitals and other existing ranking factors to create the Page Experience Update.

Mobile-friendliness is simply about making your website easy to use for people accessing it on a mobile device. There are two main differences for users who are on a mobile vs. a desktop.

Firstly, you take your mobile on-the-go so you won’t always have a high-speed wi-fi connection. If a user is on a 3G or 4G connection then having a website that loads fast is important.

Secondly, the screen size on a mobile device is much smaller than a desktop screen, but you still need to give users the same experience, functionality and required information.

Speed has already been discussed in detail earlier in this article, so let’s explore how you can optimise the usability of your site on a smaller-screen mobile device.

How do I make my site mobile-friendly?

Before doing anything, test the mobile-friendliness of your site using Google’s Mobile-Friendly Test and the Mobile Usability report in Search Console.

Both these tools will report if you have any issues impacting how mobile-friendly your site is. Common issues include clickable buttons being too close together, your site’s content being wider than a mobile screen, and text being too small to read.

You should resolve these issues as a priority because as well as being a ranking factor, they’ll likely be impacting engagement and conversions as well.

Use a responsive website design

Another mobile usability issue that is reported frequently is “viewport not set” or “viewport not set to device-width”. This means the content on the site can’t adapt to a device’s width.

You can eliminate this issue by using responsive web design, which means that no matter the size of a user’s screen, the site will present and function well for the user. This set-up will also improve crawl efficiency as Google’s algorithms can detect it and won’t need to crawl multiple times to find different versions of your content.

Design mobile-first

Several websites now have more mobile traffic than desktop, however, many designers still do their desktop design first and follow it with a mobile version after. “Design mobile-first” is a strategy whereby you always design your mobile view first, followed by tablet and desktop.

There’s a technique in web design called progressive enhancement which is the principle of building the HTML foundations, ensuring they work and then adding the visual (CSS) and behavioural or interactive (JavaScript) features.

This concept can also work if you build a great mobile experience first, then enhance the site on the larger screens where you have the space to do more and show more. With much less space to play with on mobile, it is essential to prioritise the most important information and functionality first.

Eliminate steps and make forms easy

One piece of advice Google always gives to make your site mobile friendly is to eliminate steps and make forms easy. This applies primarily to e-commerce sites, but also to any site whereby a user is required to input information.

We are more impatient than ever, and study after study shows that the more steps or fields a user has to go through the lower your conversions. Here are some common examples of where businesses add steps that can reduce the conversion rate:

• Asking for customers additional information unrelated to the purchase, to feed the CRM platform for personalised marketing
• Asking customers where they heard about the business to understand the impact of marketing efforts
• Extra add-ons to upsell and increase average order value per customer

While all the above is important, just bear in mind the conversion impact every time you consider adding steps and fields to your online journey. It might be worth implementing conversion rate optimisation testing to help you measure the impact of changes you make.

Conversion testing can also help identify the steps in a conversion funnel that people are dropping off. This combined with insights from a behaviour tracking tool like HotJar can enable you to detect where users are having difficulties filling in your forms on mobile.

Once conversion or usability issues have been identified, you can then test eliminating steps or making forms easier to fill in.

For more tips on optimising for mobile-friendliness, read Google’s Guide to Mobile-Friendly Sites.

Safe browsing

Google wants to make sure its users have a safe and secure browsing experience. For this reason, Google has created a security team who manage a safe browsing service to identify:

• Malicious websites
• Phishing websites
• Attack sites
• Compromised sites

All these sites are usually designed to hack computers, steal private/personal information and money.

To help users browse securely, Google very clearly warns people to avoid dangerous websites.

How do I know if my website is safe?

Google also reports security issues to website owners to let them know their site has been hacked or exhibits behaviour that is unsafe for users.

Google reports the security issues to you, identifying the problem, and providing information on how to fix it. The Google developers help site also details the steps to recover if your site has been hacked.

One way to avoid your site getting hacked is to use a secure HTTPS connection.

HTTP vs. HTTPS

HTTPS is basically a secure version of HTTP. It means that personal details, payment information, and passwords are encrypted and therefore secure when entered into an HTTPS site. Hackers are less likely to get hold of and use information from a secured site.

To have an HTTPS site, you need to buy secure hosting from your domain provider. This will involve purchasing an SSL and TLS security certificate. This will ensure that communications between the browsers and your website are encrypted to allow for sensitive information to be transmitted securely.

It’s easy to find out if a website is secure. All you need to do is enter a web URL in Google Chrome and you’ll see one of three following security symbols:

•  A padlock – the site is secure (HTTPS)
• An information icon with a circle – the site isn’t secure and is using an HTTP connection
•  An exclamation mark inside a red triangle – the site is not secure or dangerous

If a site is secure but you want to see the SSL certificate, just click on the padlock icon, then click the certificate. Here you can see information about the certificate, including when it was issued and how long it is valid for.

When purchased, most security certificates last for years but be sure to renew your certificate before it runs out so your site doesn’t become insecure.

Having a secure site has been a ranking factor since 2014, but has now just been added to the Google Page Experience Update. HTTPS websites also load much faster than HTTP, so it’s also beneficial from a site speed perspective – also a page experience ranking factor.

Intrusive interstitials

The final factor in the Page Experience Update is “intrusive interstitials”. An interstitial is an advertisement that pop-ups up on a site, obstructing users’ views of the main content on the site.

Since January 2017, Google started to penalise the ranking ability of sites with intrusive interstitials. It’s also included in the Quality Rater Guidelines under the “Distracting Ads/SC” section.

Google’s quality raters would give a site a low rating if it had an interstitial that is difficult to close and distracts or obstructs users from reading the site’s main content.

Not all interstitials are considered intrusive by Google. For example, cookie content notifications, age verification, and reasonably sized banner interstitials are acceptable to Google.

While intrusive interstitials are a ranking signal, unless used extensively they are unlikely to hugely impact your ability to rank well. The priority here is to ensure that an interstitial on your site doesn’t result in an extremely poor user experience.

Final thoughts

• The Google Page Experience Update will come into effect in 2021 so you have plenty of time to prepare your site.
• None of the factors in this update are new so you should already be optimising your site for page experience.
• We don’t know how big this update will be but don’t forget that quality content and meeting user intent are the most important ranking factors.

Now we’ve given you the low down on the Page Experience Update, why not explore our SEO hub for more helpful optimisation tips.

If you need help getting ready for this update, get in touch with the team at upUgo and we’ll let you know what you need to do.