Google’s Page Experience Update: What it is and how to get your site ready

Google has rolled out its Page Experience Update. Here is what you need to know about Core Web Vitals and site improvement tips to meet these new user experience metrics.

What Makes A User Experience Great?

Users today expect website great experiences. Knowing it is more than the quality of content, Google has identified the following as key elements to delivering a great user experience:

- Do your pages load fast enough? It’s commonly known that faster experiences lead to lower bounce rates, high session lengths, increased conversions, and revenue.

- Is your site mobile friendly? Over 50 percent of site traffic occurs on mobile devices. If your site is not mobile or responsive, this could result in a poor experience for more than half of your users.

- Does your site provide the information users expect? Google wants to rank pages that best fit the search term and user intent. Are users seeking out information? Are they looking to make a purchase? It’s essential that your page fits the audience search intent.

Google takes these elements into account with the Page Experience Update which will introduce a new signal that combines Google’s Core Web Vitals with existing page experience signals to provide a comprehensive view of the quality of a user’s experience on a web page. This includes being mobile friendly, safe browsing with no malicious content (or malware), HTTPS, no intrusive interstitials getting in the way. Overall, does the page deliver a good user experience?

How Google’s Core Web Vitals Work

Introduced earlier this year, Core Web Vitals measure different dimensions of web stability such as load time, interactivity, and the stability of content as it loads. Think of these as the baseline requirement for your website’s overall technical health. Not just how fast it loads, but just as importantly, how easy it is for the user to find what they’re looking for.

The common set of signals that make up the Core Web Vitals include:

Largest Contentful Paint

LCP measures page load speed, marking the point in the page load timeline that your page’s main content has loaded, only counting the elements that are relevant to the user experience such as images, video thumbnails, background images with CSS and other text elements such as paragraphs and headings.

You want your useful content to load and be visible to the user as quickly as possible with the benchmark being the first 2.5 seconds of the page starting to load.

LCP is often looked at the most important out of these three core vitals metrics for two reasons: First, it’s the most visible. Second, if you improve the score of your LCP, in many cases, most other metrics are improved at the same time.

Tips to improve your LCP score:

1. Minify CSS using Gulp or Webpack

Both Javascript files and CSS stylesheets are render blocking resources, which delay FCP and consequently LCP, because they contain spaces, indentions or comments. Humans benefit from those, but browsers don’t need them. Use packages such as Gulp and Webpack to clean up those files and reduce the amount of blocking CSS.

2. Defer any non-critical CSS

Use the Coverage tool in Chrome, to identify unused CSS on your web page. Remove the unused CSS or move to another stylesheet if used on a separate page. For example, create a separate stylesheet for article or section pages only, but don’t load it on the homepage.

3. Inline critical CSS

Inline critical CSS and content above the fold to eliminate the need for another roundtrip request. There are packages such as Critical CSS to help with this process.

4. Optimize and compress images.

For many sites, hero images, large carousels, or banner images are the largest element in view when a page has finished loading. Directly affecting the speed of your LCP, compress these images and convert to a newer format such as JPEG 2000 or WebP.

First Input Delay

FID measures the time from when a user first interacts with a page i.e., when they click a link, or tap a button, to the time when the browser actually begins processing event handlers in response to that interaction. Or in other words, how easy it is to interact with the page. The ideal FID time is under 100ms.

The main culprit of a slow first input delay is heavy JavaScript execution. Optimizing how JavaScript is parsed and executed on your website will directly impact your First Input Delay times.

Tips to improve your FID score:

1. Defer unused JavaScript

Much like CSS, Javascript is also render blocking. When the browser finds a script tag, it must pause, download it, parse it, compile it, and execute it. Only load the code needed for the page and use the Coverage Tool in Chrome to find any unused JS.

2. For third-party scripts, load async or defer

Split the code in your bundles into smaller chunks and always use async or defer for scripts that are not necessary for your critical-path or above-the-fold content.

Cumulative Layout Shift

Have you ever been reading a page when suddenly the text moves and you’ve lost your place? The culprit might be an image or video with unknown dimensions, a font that renders larger or smaller than its fallback, or a third-party ad or widget that dynamically resizes itself.

CLS measures this visual stability and the unexpected layout shifts that occur when visible elements change positions on a page. The ideal CLS score is less than 0.1 – a measurement of how much of the viewport has shifted multiplied by the distance it has shifted.

Tips to improve your CLS score:

1. Include size attributes on images and videos

While specifying width and height was an old practice that faded away with responsive design, modern browsers set the default image aspect ratio based on width and height, making it a good practice to set size attributes to prevent layout shifts.

2. Reserve ad space

Ads are the biggest contributors to layout shifts. Supporting dynamic ad sizes pushes content further down the page, leading to a suboptimal user experience. To avoid this, reserve space for those ads and style them before they are loaded.

3. Never insert content above existing content that pushes it down.

Additionally, reserve space for other embeds such as videos/iframe or dynamically injected content like a popup newsletter sign up or cookie acceptance.

4. Use font-display with rel-reload

When a browser needs a font from a web server, any element that uses that font will be hidden until the font asset has been fully downloaded. The font-display CSS property allows you to control the rendering behavior of custom fonts. Use preload on these fonts to have a higher chance of meeting the first paint so there’s no layout shift.

It’s also worth noting that Google has indicated the Core Web Vitals could change over time. While these are not the only important metrics for a web experience, each is both user-centric and field-measurable, which makes them a great place to start improving your user experience.

Tools and Resources

Google PageSpeed Insights

Google PageSpeed Insights is one of the easiest tools to use for getting a gauge of a page’s user experience. Simply insert your URL, click Analyze, and Google’s open-source tool, Lighthouse, scans the page to give a technical overview of both mobile and website performance. The output includes performance insights as well as recommendations on how to improve the user experience.

Core Web Vitals Chrome Extension

For real-time metrics, add the Core Web Vitals Chrome extension. It’s a lightweight tool that gives instant feedback on loading, interactivity and layout shift metrics. To use, click the Core Web Vitals Extension icon and a pop-up will display with the three web vitals metrics for any page you’re on.

Prepare Your Site

While a good page experience won’t circumvent having great, relevant content, Google has indicated that in cases where multiple pages provide similar content, the page experience will become much more important for search rankings.

With Google providing six months' notice before its Page Experience Update goes into effect, use this time to assess your site pages against the Core Web Vitals and make the needed adjustments.

Arc XP’s digital experience platform is built with SEO, speed and performance in mind. Reach out to learn more about how we help our customers reach their SEO and site performance goals.