User experience becomes a Google ranking factor

Google has announced that in May 2021, user experience will become a ranking factor. Content will remain the most important factor, but user experience will now be added on top of that. Everyone understands the importance of user experience, but how exactly it's measured is probably a question raised by many. Let's explore this Google update in depth and explain!

So, what is user experience to Google? Basically it's looking at how usable your site is. Some of the criteria for measuring this are pretty familiar: how quickly  the site loads, is it secure (HTTPS), are there intrusive ads and is it mobile friendly. However, these measures of usability will soon be joined by three less familiar factors:

• LCP – Large Contentful Paint
• FID – First Input Delay
• CLS – Cumulative Layout Shift.

These come from Google's Core Web Vitals initiative to develop a set of metrics that allow you to understand user experience on your site with greater precision. 

You can test the existing metrics  with Google's mobile friendly test to discover if your site is secure, you're using https or have intrusive interstitials. These metrics are live and already affecting your Google ranking, so if they are not up to date or performing poorly you should address them with high priority. But what about the three new criteria? What do they measure and how can you optimise your performance for them?

Large Contentful paint

This measures how long it takes the most meaningful content to be loaded in the viewport or, in other words, the first screen I see without scrolling.

This is better than the first visual presentation of something as this is often not the most meaningful. The largest image or text block is very likely to be  most significant content of what is loading. As soon as this is loaded, the likelihood is high that I can start digesting what I am seeing for my next step.

Here is what that looks like while loading a site:

FCP is the first content paint, which in this case is the logo, LCP is then coming after.

How do I improve LCP?

Improving LCP is usually achievable by looking at the following elements:

• The loading time of your images
• Slow and non-optimized servers
• Render-blocking sources and CSS files
• Dependent heavily on the non-optimized loading time on the customer side

First Input Delay

First Input Delay is a bit more difficult to explain, so for the sake of the article I'm going to simplify things slightly. Users want to be able to interact with a site and receive an immediate response. However, as a site is loading, it takes time to render everything and respond to user interactions. The longer the delay, the worse the experience.

Long delays create the potential for rage clicking - a  very poor user experience which will drive visitors off your site. Tools like Hotjar can help identify rage clicks, but you should keep in mind though that poor FID performance doesn't always necessarily lead to rage clicking and it's better to identify your FID score even before that. 

How do I improve FID?

• Reduce the execution time of JavaScript files
• Delete JavaScript files that are barely or not used
• Minimize unused codes and set them aside for situations where these codes are strictly necessary

Cumulative Layout Shift

This is something everyone has experienced on the web for sure. As the page is loading, the content shifts or jumps because a new element has loaded just as you want to click something. In most cases this is frustrating but without serious consequences, but it's easy to imagine situations  where you commit to things you did not intend by misclicking due to buttons or content shifting.

For example inadvertently deleting a file you wanted to keep:

Of course, these are extreme examples. In reality, it's likely that the things pulling your site's score down are more subtle and and harder to identify. Fortunately, tools like Crazy egg and Hotjar enable you to create heatmaps and session recordings to identify problems with this area of user experience.

How do I improve CLS?

• Make sure all images have the specified dimensions, preferably using CSS aspect ratio boxes
• Pay attention the placement of ads, iframes and inclusions
• Avoid adding dynamic content above the existing content on the page
• Make sure essential web fonts are pre-loaded to avoid shifting layout and text

So what are the thresholds?

Now that we understand these new usability evaluation criteria better, what is Google aiming for? An LCP below 2.5 seconds is considered to be good and makes sense. Users need a perception the site has loaded very quickly, and this is achieved partly by showing the main content.

FID is only 100 Milliseconds and again this makes sense. Everyone knows the frustration of clicking somewhere and the site not responding or responding more slowly than expected. Both of these are perceived as a problem with the site.

CLS is the only one of the new criteria measured not in time but with a ranking. You can find out more on how this is calculated in this article on web dev. The threshold for good CLS performance is 0.1 - this reflects a level of performance where layout shifts do not happen at all or, if they do, they don't interfere with the user experience.

Preparation

Due to the global pandemic crisis, Google has given everyone ample time to prepare for this update. The first step is to run the tools and identify your scores and check if there is room for improvement. If there is then it is highly recommended to address the issues, not only for a better Google ranking but also because your users will love you for it. After all, who does not want a better user experience?

Here are a few tools to help you get started:

• Ligthhouse dev tools
• Pagespeed insights
• The Chrome User Experience Report
• Experience section in dev tools of chrome
• Web Vitals Chrome extension

Need help?

These changes are quite technical, and many site owners will be concerned at the potential effect on their Google ranking and unsure how best to make the changes needed. We have broad experience with optimizing for these kinds of changes on both design and development level. Reach out to us and speak to one of our consultants to help you out.