Update: The page experience update will now gradually rollout in mid-June and won’t be fully live until the end of August.
With the Page Experience Update, Google is changing the way it ranks web content.
There’s no denying that this is big news for brands. No matter how strong your marketing message is, how slick your content may read, or how polished product pages are, your web ranking will take a massive hit if you don’t streamline several essential user experience (UX) factors. Sounds fun, right? From May 2021, the Page Experience Update will redetermine whether your site ranks high or poorly. And that’s based on whether your website is responsive and easy to use. So it’s worth having a look in a little more detail.
How Google Works
When you put a search term into Google, it searches an index of websites. The ‘Google Index’ is a collection of every website that the search engine has discovered. The index is made using Google’s own programs: these programs are called ‘spiders’ as they ‘crawl the web’.
Each of these spiders will analyse a web page, looking for key search engine optimisation (SEO) clues that tell it whether it’s a website that’s worth ranking highly. Put simply, the Core Web Vitals are going to add to the set of signals that the spiders look for. This means that user-friendly design is going to be of ever increasing importance.
In fact, user experience has already been affecting page rank for some time. If people have a bad experience on your page, it’s likely they’ll leave it and move on to the next site. However, following the update, Google will use a new page experience signal as a measurable ranking factor. But this also presents an opportunity – what can be measured, can be improved!
According to Google, the goal of the page experience update is to better everyone’s browsing experience, whether they’re using their mobile or desktop. Shockingly, a lot of web development is still optimised to desktop browsers – mobiles being an afterthought – even though people have long preferred to browse on their handheld devices.
In fact, Google has developed several user experience signals already (which we’ll talk about later), including ones that measure mobile-friendliness to browsing safety. However, the recent Page Experience measuring the ‘Core Web Vitals’, are the first to relate to site speed and functionality.
After the update, Google will measure the Core Web Vitals among other UX factors, and all of these metrics will determine your overall page experience score. A positive page experience will directly improve your ranking, while a negative score could cause your page rank to drop.
So let’s get to the nitty-gritty, the Core Web Vitals will measure three speed-based metrics that enhance the overall user experience.
1 – ‘Largest Contentful Paint’: a speed test that measures load times.
2 – ‘First Input Delay’: a metric that measures site interactivity and responsiveness.
3 – ‘Cumulative Layout Shift,’: a test for visual stability.
To break it down, the Core Web Vitals metrics are going to measure the speed at which your pages load, become interactive and visually stabilise for its users.
Core Web Vitals – Broken Down
Largest Contentful Paint
I’ll be the first to say that the Core Web Vitals have pretty ridiculous sounding names. Largest Contentful Paint? Sounds like a module from my BA in Art History. But for the sake of simplicity, we’re just going to look past the names, and focus on what they mean for your websites.
So here goes: First up is Largest Contentful Paint or LCP. Put plainly, it measures how quickly the content on your site loads.
To be exact, it’s a measurement of how long it takes for the main content of a page to download. This tends to be the largest image or block of content, including regular images, video poster images, background images, and block-level text elements like paragraph tags.
It’s a key metric for the Core Web Vitals because it accurately measures how fast a web page can be interacted with by a user. No prizes for guessing why a speedy site is good for user experience. However, not all visual elements are taken into account when Google measures LCP speed. For instance, any SVG and VIDEO files aren’t vital for the Vital.
Ideally, your LCP should be 2.5 seconds or less for any given page. You can measure your site’s score using any number of Core Web Vitals browser extensions.
How to Better Your LCP
Lucky for us, LCP is an easy metric to understand: all you have to do is look at your web page, determine what the largest text block or image is, and then optimise it by making it smaller or removing anything that would prevent it from downloading quickly. Although you want to use high-quality and detailed product images, they really don’t need to be larger than 2048 by 2048 pixels. So it’s not always good to upload the highest quality image you can find.
And because Google includes most sites in the mobile first index, it’s best to optimise for the mobile devices before you optimise for desktop.
First Input Delay
Another confusing techy name: First Input Delay (FID) is essentially how responsive a site is when a user first interacts with it. It measures the time it takes for a browser to respond to a visitor’s first interaction with a site – all while the site is loading. Still confused? I don’t blame you. I am too – Art History grad here, remember.
So here’s another way of looking at it: have you ever tried to click on a link to a website but it doesn’t seem to respond right away? That small delay is First Input Delay.
Essentially, when someone clicks a button, link or even presses a key, they’re interacting with a site. First Input Delay then measures the time a browser is actually able to respond to that interaction.
On a more technical (but highly simplified) level, when you open a web page, the browser makes a couple of network requests from the website so it can load the necessary files. As these requests process, some files download more quickly, appearing before others.
That means some parts of the website may be visible when others aren’t (think of the times that the text has appeared before any images on a slow website). However, that doesn’t mean that the entire web page has fully loaded. In essence, the site is not yet fully interactive – and this will negatively affect the First Input Delay metric.
A long First Input Delay will cause the web page request to excessively pause then start then pause. And this causes unresponsive behavior for site visitors attempting to interact with the web page. Sorry spiders.
You can measure your First Input Delay using the same Core Web Vitals extension listed above.
How to Reduce Your First Input Delay
So how do you reduce your First Input Delay? This is a task for the developers. Unfortunately, it often means cleaning up messy code. Your web page may be built on long blocks of code, that handle complicated tasks. The first step is to break down long-running tasks down into smaller tasks (which take less than 50ms to complete), giving the browser more breathing room.
Cumulative Layout Shift
Stick with me, we’re nearly at the end of the Core Web Vitals. Last up, there’s Cumulative Layout Shift or ‘CLS’ (and not to be confused with JLS).
Have you ever tried to read an article online but the page suddenly shifts, the text moves, and before you know it, you’re back to number 11 of the ‘17 Bagel Fillings that Will Make You Go ‘Whoa!’ Maybe you’re about to click a thumbnail, but the page moves, and sends you to a video that will be a stain on your homepage suggestions for the next 3 months?
This is all related to the ‘stability’ of your page’s layout. CLS measures whether any elements on your page are likely to shift suddenly as your user tries to interact with it. It doesn’t take a genius to tell you that sudden shifts can be a significant problem for user experience.
Google calculates your layout shift score by looking at ‘impact fraction’ and ‘distance fraction’, both of which are metrics that look at how unstable elements move on a page. A good CLS score is 0.1 or lower.
So great, another confusing term to try to get our heads around. What’s impact fraction? Put simply, it’s a measurement of how much space an unstable element takes up in the viewport – which is what you see on the mobile screen.
So when an element loads and then shifts, the total space that the element occupied, from the location in the viewport that it first appeared in, to where it ended up in, both have to render. the viewport when it’s first rendered to the final location when the page is rendered.
The distance fraction is the amount of space that the page element has moved from the original position to the second position. The Cumulative Layout Score is calculated by multiplying the Impact Fraction by the Distance Fraction.
How to Improve Cumulative Layout Shift?
To answer this we need to look at what causes Cumulative Layout Shift.
Images and videos need to have the height and width dimensions that are set out in your page’s HTML tags. And when it comes to responsive images, you need to make sure that the different images sizes for the different viewports use the same aspect ratio.
While HTML isn’t as tricky to master as programming languages, this still may be a job for a developer or web designer.
Another issue is the fact that certain ads cause CLS. With that said, it’s highly important to style the element where the ad is going to show. For example, if a web designer styles the advert to have specific heights and widths, then the ad will be constrained to those.
If an element containing an ad does not show an ad you can set it so that an alternative banner ad or placeholder image is used to fill the space.
Other UX Factors to Consider
Of course, nothing is quite so easy when it comes to SEO and Search Engine Result Pages. Do you remember the pre-existing UX signals we mentioned at the start of this guide? They’re actually being repackaged as part of the Page Experience Update, and each measure 1 of 4 additional ranking factors.
This one is pretty self explanatory: mobile-friendliness Looks at how well your page performs on mobile devices. In fact, Google makes it easy for sites to gauge how mobile friendly they are.
The Mobile-Friendly Test scores your page, showing an image of how the page appears on mobiles and even offers suggestions to resolve any issues. You can check the performance of individual pages or run a full-site usability report.
Safe-browsing checks your page for malware and any other malicious content that may be hiding beneath the surface.
Essentially, the metric measures whether your page is safe for the user to visit, or whether it may even put their personal information at risk. I should hope it’s pretty clear why you’d want your site to pass the safe-browsing test – both in terms of your own self interest and as an ethical brand.
Thankfully, a Google’s Security Issues report shows you how well your site meets the safe-browsing criteria. The report checks security concerns like malware and hacked content (third-party content placed on your site without your knowledge). Not only will this test highlight UX concerns, but it could reveal security vulnerabilities that put your site at risk. It’s best to take this one very seriously.
Next up is HTTPS. This one is relatively simple. The Page Experience Update will check to see whether your page uses a secure HTTPS connection (as opposed to HTTP – the faster alternative that’s unfortunately vulnerable to hacking). The HTTPS check is another measure of how safe the page is for the user. You can use Google’s security symbols to check its evaluation of your site’s security. These symbols appear to the left of your URL in the search bar.
If you don’t have a HTTPS connection, it’s actually quite simple to rectify – well, at least in theory. That said, it still might be a job for the developers of the world.
Firstly, you should purchase an SSL certificate. Then you should install your SSL certificate on your website’s hosting account. Next up, you make sure any website links are changed from http to https so they are not broken after you make the switch switch. Finally, you set up 301 redirects from HTTP to HTTPS so that search engines are notified that your site’s addresses have changed. On second thoughts, it may not be quite so simple.
No Intrusive Interstitials
Try saying this one 5 times quickly. No Intrusive Interstitials looks at whether your page contains pop-ups or other ads that obscure content on the page – but not the sort of ads that matter in terms of Cumulative Layout Shift.
In fact, this is Google’s way to penalise site’s for for intrusive popup ads that affect the mobile user experience.
For example, think of the dodgy websites that force a pop-up ad to appear on the page, blocking the user from visiting unless they dismiss it. However, it’s worth noting that all pop-ups are penalised. For example, login windows or the age verification pop-up that appears on age-restricted sites are good to go.
So what’s Reward’s advice – pop-up ads are unethical at the best of times. Unless you’re sure on what constitutes a safe to use interstitial, they’re best avoided completely.
Page Experience Update: Final Takeaways
Unfortunately, it may take a deal of web development work to rectify any user experience issues that your site currently faces.
Ultimately, it’s an investment you’re going to be thankful for. Google’s Page Experience Update will be of critical importance to any business looking to rank highly on the search engine. And on a deeper level – it’s definitely a positive that we’re being incentivised to make the online experience better for users. If you haven’t taken a look at how well your site meets the Core Web Vitals, now’s the time.