Photo from unsplash

Originally Posted On: Google Page Experience: How it Impacts Optimization & UX (speero.com)

 

‍Google announced that page experience will be rolling out a new set of “Core Web Vital” signals. These will sit alongside existing search ranking factors, such as mobile-friendliness, safe-browsing, HTTPS, and intrusive interstitial guidelines.

This algorithm update, while slightly postponed from the original timeline, is rolling out from mid-June 2021. And according to Google, they’ve already seen a 70% uptick in businesses using their assessment tools to review performance in these new areas.

Optimizing your page experience will not only ensure that your website isn’t penalized by the algorithm update in terms of search rankings, but it will also help create a better experience for your users too. It’s also worth understanding how testing, personalization and other tools used in optimization may impact these metrics.

What is ‘page experience’?

Google utilizes certain ‘signals’ to assess a website’s overall “page experience”. They define “page experience” as:

“A set of signals that measure how users perceive the experience of interacting with a web page beyond its pure information value.“

But what exactly does Google mean by “signals?” Let’s break down each of the metrics that make up the page experience score.

Core Web Vitals

Core Web Vitals are made up of three metrics;

• Largest contentful paint (LCP)
• First Input Delay (FID)
• Cumulative Layout Shift (CLS)

Largest Contentful Paint (LCP)

LCP refers to the “perceived” page speed by calculating; the time it takes to render the largest image or text block visible within the browser window, relative to when the page loaded.

It’s important to differentiate this from some of the backend measurements such as Time To First Byte (TTFB) which focuses on server responses. Instead, this metric focuses on the effect felt by users browsing the site. A “good” score for LCP means the main content is loaded within 2.5 seconds of the page loading.

 

For now, Google is only measuring LCP’s which are;

• <img> elements, <image> elements inside <svg>, and background images loaded by a url()
• <video> elements
• Block-level elements with text nodes

 

You can improve this metric by ensuring that the largest element visible on the viewport is loaded faster than the rest of the content on the page.

First Input Delay (FID)

FID refers to page interactivity, which is the time from when a user first interacts with a web page, to when the browser begins processing event handlers in response to that interaction.

Essentially, FID quantifies the ‘delay’ in event processing on a page, and it helps to show how responsive your website is. Google classes interaction as actions like clicks, taps, and key presses–essentially the “R” (responsiveness) in the RAIL performance model.

Pages with a good user experience have an FID of 100 milliseconds or less.

 

The following table puts this scale into context of how users themselves experience the delay.

 

Cumulative Layout Shift (CLS)

CLS refers to “visual stability.” Have you ever visited a website and the page scrolls up just as you’re about to click on something? Or you’re reading an article and a banner loads and moves the text so you lose your place? Frustrating, right? This is what’s meant when we talk about visual stability.

To provide the best possible user experience, it’s important to ensure the elements on a page remain in place. Google recommends aiming for a CLS score of 0.1 or less.

 

The measurement of this metric changed in early 2021. Previously CLS was calculated using the sum of all individual layout shift scores that happened during the lifespan of a page. The change in how CLS is calculated came about after a lot of feedback on unfair scoring for “long-lived” pages e.g infinite scroll or single-page applications (SPA).

Now measurement is capped so that scores are more consistent across websites despite session duration. To achieve this Google has set a “maximum session window with a 1-second gap, capped at 5 seconds.”

How might testing and personalization affect Core Web Vitals? 

Loading speed, responsiveness, and layout shift are all elements that we try to improve, but they could also be negatively affected because of our work as optimizers.

As an industry, we’ve talked about the “flicker effect” for a long time–that is when a control element is seen before the test variant is loaded, creating a noticeable “flicker”. This would effectively cause a layout shift that may impact the CLS score.

While tag managers have been used by many marketing teams to deploy testing tool code, this is generally not best practice, as you have less control over when and how these scripts are run.

How to avoid testing tools impacting Core Web Vitals

• Ensure as a baseline, you have optimized your site for speed. This includes compressing images, using CDNs, and locating your web hosting close to the majority of your users. For large images use the latest responsive practices with aspect ratio CSS properties to reduce layout shift.
  ‍
• Depending on the amount of traffic your website receives, consider loading your A/B testing tool script asynchronous if site speed is of the most importance. Or synchronously if there’s a high likelihood of layout shifts occurring. A technical guide to improving third-party Javascript can be found here.
  ‍
• Alternatively consider how you run a test e.g split URL testing.
  ‍
• Consider the speed of the testing tool itself and use server-side rather than client-side setups.

How will Core Web Vitals impact UX design?

While most of these metrics refer to things that in CRO we’d consider just plain good practice, they can now affect your search rankings too–so even more impetus to improve them if you haven’t already. For example, if your website has a lot of large images that aren’t optimized, it’s going to affect your page loading score (LCP). Or if users take a long time to find menus, search bars, and buttons, this will impact your FID.

How can I assess my Core Web Vitals? 

Chrome User Experience Reports & CrUX Dashboards

Access the Chrome User Experience report through Google’s BigQuery tool which provides you with real-world “field data” from Chrome users. The data covers 4 million different websites or “origins.”

If your website doesn’t have enough visitors to show any data, you can still use this to get an idea of how your competitors or industry are performing. But be careful of making like-for-like comparisons as the populations will be different between datasets.

You can learn how to set up BigQuery to explore the data. If you are low on developer resources a simplified prebuilt template called the CrUX Dashboard can be found in Data Studio. It’s worth noting, however, while the CrUX template is more accessible, it has some downsides compared to accessing the data in BigQuery

• CrUX doesn’t provide a granular level of detail e.g rather than specific scores, they are grouped by ‘good’, ‘needs improvement’, or ‘poor’.
  ‍
• Segmentation of the data is limited to “connection type” and “device category”. The data in the CrUX Dashboard is also globally aggregated without country filters.
  ‍
• Data is updated monthly. Meaning there’s a long lag time being a problem occurring and you becoming aware of it.
  ‍
• While the data tells you what’s happening it doesn’t tell you why. To achieve this you want to review this data alongside your analytics. Here’s a guide to using the web vitals data alongside Google Analytics 4.

PageSpeed Insights (PSI)

A few benefits of the PSI report;

• PSI uses the same underlying “field” data that is used in the Chrome User Experience Report (if available), as well as including “lab” data (using Lighthouse to simulate page loads on a mid-tier device (Moto G4) using a mobile network).
  ‍
• The PSI data is updated daily for the trailing 28-day period.

Here’s an example of what a Core Web Vitals report looks like in PageSpeed Insights:

 

Google Search Console (Core Web Vitals Reports)

A final option is Google Search Console, which measures all page experience metrics (not just FUD, LCP, and CLS). It’s an amalgamation of data from Google’s Mobile Usability report and Chrome User Experience dataset–so you’ll only get information on your Core Web Vitals if it’s captured in the Chrome User Experience dataset.

Here’s an example of what a Core Web Vitals report looks like in Google Search Console:

For a more comprehensive review of how you can measure and report on Google’s web core vitals check out this blog post.

4 Established page experience metrics

In addition to the three core web vitals, there are four other measurements that will impact your overall page experience rating. These are:

• Mobile-friendliness
• Safe browsing
• HTTPS
• No intrusive Interstitials

Mobile-friendliness

Mobile-first indexing began rolling out as early as 2015 and helps Google assess your website’s mobile user experience.

How will this impact UX design?

On mobile, some of the markers of a user-friendly site or app include:

• Responsive design
• Displaying click-to-call buttons
• Provide clear menu and search options
• Using short forms
• Avoiding intrusive ads and pop-ups
• Avoid using too many font-size variations

According to research by Google, 89% of people are more likely to recommend a brand if they have a positive customer experience on mobile. Therefore, a poorly designed mobile website could harm your brand reputation, sales, search, and conversions.

Your overall mobile usability rating can be seen in the Google search console, or you can assess your website using the Mobile-Friendly Test.

Safe Browsing

Safe browsing is concerned with your website’s perceived safety, and this is measured through the presence of harmful content, unwanted software, and deceptive pages.

How will this impact UX design?

Most of the work we do is about addressing user concerns and this relates to safe browsing. It’s important that users feel safe or protected when visiting your website.

Avoid the use of deliberately deceptive pages that are designed to trick or deceive users in any way. This includes:

• False testimonials.
• Websites that are a carbon copy of another popular website.
• Websites that look like surveys but capture users’ passwords or personal information instead.
• Websites that claim to share information about a product or service, but are designed to help the website owner make money through affiliate links.
• Websites that claim to be associated with a celebrity, but are deliberately created so that the website owner makes money without the celebrity’s permission.

HTTPS

Google favors websites on HTTPS rather than non-HTTPS websites. Why? It provides an added level of security for website users. It offers better web performance, and it can support features that can help to improve conversion, such as credit card autofill.

Non-Intrusive Interstitials

Intrusive interstitials (pop-ups) are seen as a barrier to a positive page experience. And I think anyone who’s had the displeasure of trying to use a site with these annoying ads can attest to it. Google is more likely to favor sites without intrusive interstitials, compared to those with them.

How will this impact UX design?

Features such as pop-ups are classed as intrusive interstitials, so including too many on your site is likely to impact your site’s SEO-friendliness. Not only this, but they can be an annoyance to users depending on the frequency, timing, and content so it is best to A/B test such elements to see if they have the desired impact.

11 Ways to improve page experience

1. Delete old scripts that are unused.
2. Reduce the impact of third-party code. Defer scripts that do not need to be loaded as quickly and prioritize those that may lead to a layout shift or affect page speed. e.g testing tools, personalization tools, or other research and data gathering tools.
3. Compress files and optimize images with next-gen formats, lazy-load offscreen images, add dimensions to images (to avoid CLS), and use CDNs.
4. Font optimization; reduce the number of fonts or glyphs used. Self-host fonts to reduce requests.
5. Lengthen caching periods to improve the return visitor experience.
6. Reserve space for headings, layouts, and hero sections. Dynamically injected content.
7. Ensure your domain has enabled HTTPS
8. Test any popups you wish to use to ensure they have the desired impact if not remove.
9. Conduct heuristic evaluations or user research on your mobile experience to learn where and how to improve it. Pay particular attention to any apprehensions, misleading information, or security concerns users have.
10. Use experimentation to A/B test technical approaches that impact your core web vitals.
11. Monitor your page experience metrics over time as website changes/new elements get added that may impact your performance.