The step-by-step guide on how to prepare for Google's Page Experience update

Having good user experience (UX) is something every webmaster should strive for. When it comes to optimising your site, there is no question that having a strong SEO strategy is important but if users are not satisfied with the overall experience of your website, it will have a negative impact on conversion and the likelihood of the user returning. In recent years, Google has started to incorporate ‘user experience’ signals into their algorithm, however, the approaching Page Experience algorithm update places a greater emphasis on user experience and will take this into consideration for ranking in search results. With the page experience update rolling out in May 2021, we’ve outlined what this is and how you can prepare for it. 

What is page experience and why should I care? 

Google’s goal is to help users find the most relevant and highest quality sites on the web and provide them with the best onward experience from search results. In order to determine which results are returned for a search query, Google will take into consideration a number of factors and page experience is yet another step they are taking into measuring the quality of a page. Aptly named, the Page Experience update will provide a holistic picture of the quality of a user’s experience on a web page. 

Having poor page experience signals could negatively impact your search rankings or be a decisive factor in outranking your competitors. For example, if a competitor with similar content and a similar backlink profile has better page experience signals, then you may find that they’ll edge it in search results. 

The page experience update is broken down into five criteria which combines existing signals with the new ‘Core Web Vitals’ signal.

• Core Web Vitals  
• Mobile Friendliness 
• HTTPs 
• Interstitial use 
• Safe Browsing

Introducing Core Web Vitals

Along with the announcement of the Page Experience update in May 2020, Google also announced a new ranking signal - Core Web Vitals. Based on real world usage data, these are a set of metrics that focus on three aspects of user experience - speed, responsiveness and the visual stability of a page as it loads for users. These focal points correspond with three new metrics: Largest Contentful Paint (LCP), First Input Delay (FID) and Cumulative Layout Shift (CLS). 

In order to get a feel for your current performance against these metrics, we can jump into Google Search Console which gives us a ‘Core Web Vitals’ report. This gives us a breakdown of URLs against your site’s performance for LCP, FID and CLS. 

Whilst this gives us a top level overview of current performance, it does not explicitly tell us the issues behind the flagged URLs. To get a bit more granular, we have outlined some of the steps you can take and some of the common issues to look out for in the following: 

Largest Contentful Paint (LCP)

The Largest Contentful Paint measures the loading time of the largest image, video or text block visible above the fold. To provide good user experience, Google recommends that the Largest Contentful Paint should occur within the first 2.5s of a page loading.

You can identify the LCP of a page using PageSpeed Insights which will give you the largest element.

Or you can use Chrome DevTools and find the LCP in the performance tab: 

What causes poor LCP and how can we improve?

• Slow server response times - Content is slow to download from the server and subsequently longer to render content on screen. Consider optimising your server, utilising a CDN and preloading key requests to help browsers prioritise critical resources.
• Render-blocking JavaScript and CSS - When a browser encounters a render-blocking script it stops downloading content and other resources until it has been processed. Minifying, removing or deferring non-critical code can help reduce the time it takes to load your LCP. 
• Slow resource load times - Large scripts or a page that contains lots of elements such as images, increases the overall size of your page, meaning it will take longer to download the content. Making sure images and text files are compressed and optimised, preloading important resources and caching assets can all be used as tactics to decrease load times. 
• Client-side rendering - Sites that use JavaScript rendering can put a lot of strain onto the browser if code is unoptimised which can have an affect on LCP. Minimise critical JavaScript or look at additional solutions such as server-side rendering or pre-rendering. 

First Input Delay (FID)

First Input Delay measures the time from when a user first interacts with your site (i.e. click a button), to the time when the browser is able to respond to that action. In order to provide a good user experience, Google recommends that you should aim to have a First Input Delay of less than 100 milliseconds.

As FID is a real user metric it cannot be simulated in a ‘lab test’ as it requires user interaction. Field data from tools such as PageSpeed Insights or Google Search Console can give you the data you need. However, the Total Blocking Time (TBT) metric can be used to capture any issues that affect interactivity. 

What causes poor FID and how can we improve?

The main cause of poor FID is heavy JavaScript execution. Essentially, JavaScript files that take a long time to execute and process keep the browser ‘busy’ meaning it cannot respond to user interactions. There are a number of tactics that can be implemented to speed up the execution time of JavaScript: 

• Remove Unused JavaScript - Use a JavaScript bundler such as Webpack to remove any unused code and lazyload any libraries that are not being used in the initial page load.
• Defer Non-Critical JavaScript - Defer or asynchronously load any third-party scripts that are not needed for the rendering of the main page.
• Code-Splitting - Split code into smaller bundles to control what resources are loaded onto a page.
• Preload and Prefetch - For scripts that you know are needed to make your browser interactive, you can tell the browser to fetch that resource sooner which is then prioritised. 

Cumulative Layout Shift (CLS)

Cumulative layout shift is the unexpected shifting of web page elements while the page is still loading that are not caused by user interaction. Google recommends an optimal score of 0.1 or less to provide the best user experience. 

Again, we can use PageSpeed insights to identify the elements that are causing CLS:

Or using Chrome DevTools, we can see highlighted elements that are offending: 

What causes CLS and how can we improve?

• Images without dimensions - Declare width and height size attributes on your images and video elements or reserve the required space using CSS aspect ratio boxes to help the browser understand the layout.
• Ads, embeds and iframes without dimensions - Statically style slots for ad content with the same sizes the ad tag library uses and avoid placing ads near the top of the viewport. Reserve sufficient space for embeds by using a placeholder.
• Dynamically injected content - Avoid injecting new content above existing content unless it is in response to a user interaction. 
• Web fonts causing FOUT/FOIT - If your fonts are hosted online they may fall suspect to ‘flash of unstyled text’ or ‘flash of invisible text’. To avoid this you can use CSS font:display values such as auto, swap, block, fallback and optional. For better results, it is recommended to use <link rel=preload> on key web fonts. 

Mobile friendliness

Ensuring your website is mobilefriendly should not come as a surprise and is something that has been incorporated into Google’s algorithm for a while. In more recent years Google has switched to mobile-first indexing meaning it uses the mobile version of your content for indexing and ranking which is why you should ensure that the mobile version offers optimal user experience. 

To assess whether your website is mobile friendly you can run pages through Google’s mobile friendly test or use the mobile usability test report in Search Console. Usually, the latter is a great place to start and will give you a list of any usability issues when viewed on mobile devices. 

From here you can find out if your website has any errors around the following: 

• Uses incompatible plugins - Uses plugins such as ‘Flash’ that are not supported by mobile browsers. 
• Viewport not set - The browser will not scale the page to suit the screen size if a viewport property is not defined. 
• Viewport not set to “device-width” - The page has a defined fixed width which means it can’t adjust for different screen sizes. 
• Content wider than screen - Content expands the width of the viewport and horizontal scrolling is necessary to see the content. 
• Text too small to read - The font size is too small to be legible and requires the user to ‘pinch to zoom’ in order to read. 
• Clickable elements too close together - Buttons and links are positioned too close to a neighbouring element which makes it hard to tap a desired element. 

Safe browsing

To ensure you are providing the best possible user experience, it is important to protect users against malware, hacked content and unwanted software. Originally launched in 2007, Google’s Safe Browsing initiative was launched to protect users against phishing attacks but has evolved over time to protect users against a variety of web-based threats. 

Google search console helps you monitor your site against security issues and will flag any concerns. In the Security and Manual Actions section, you’ll find a link to the Security Issues report. 

In the unfortunate event that you find your website has been compromised, Google Webmasters have a great video series that provides you with the steps you need to take to clean your site and get it back up and running.

HTTPS

The HTTPS protocol is key to securing your users’ information online and helps protect against breaches of sensitive information such as passwords, credit card numbers and health information. HTTPS is important for user experience as it is a strong trust signal for users, especially on ecommerce websites. You can easily check if your website is using HTTPS as most modern browsers will mark a website as “not secure” next to the URL in the address bar. 

If your website is not currently using HTTPS, you should get an SSL certificate installed on your hosting environment as an absolute priority. 

No Intrusive Interstitials 

Intrusive Interstitials refer to those annoying pop-ups that cover the entire screen and are difficult to dismiss. In 2017, Google announced it would start penalising pages that used interstitials and would have a negative impact on rankings. Interstitials provide poor user experience as they prevent users from accessing the content they were expecting when they arrived at your website. 

The best way to check if your website has any intrusive interstitials is by manually reviewing your pages or by using the URL Inspection tool in Search Console which allows you to see how Google renders your page. 

Get ahead of the game

Whilst we currently do not know how much of an impact this update will have on rankings, it is clear that Google is putting an emphasis on user experience, and the role of UX in search will only increase over time. Killer content will always triumph, but ensuring that content is easily accessible and the overall user experience is great will only have a positive impact on your overall SEO efforts.

If you need help optimising your website for the Page Experience update then get in touch, we’d love to help!