Navigating Google's Core Web Vitals
As of two weeks ago Google has begun to roll out their newest update: The Page Experience Update. This new feature will make user experience on your website an integral part of how Google sees and ranks your page. In other words, if you have a site that is hard to navigate or takes too long to load Google will rank it lower. User experience matters now more than ever considering that we are still amid lockdowns, people are going to be finding products and services online. The businesses that adapt to these new changes will find themselves on top with new clients being able to find them easier, and older clients will have a more pleasant experience. Just how does one go about preparing their site? This article will go through all the ways that your site can be optimized for the new update so that you can keep on top and in the know before the roll out.
The process that these new metrics will be measured are called Core Web Vitals. These are a set of uniform ways to monitor the experiences of your clients that come to your site. There are three that you need to worry about: Cumulative Layout shift, Largest Contentful Paint and First Input Delay. We will go over them in the upcoming paragraphs. Once you know how these metrics work, you will be in a great position for the upcoming changes.
First things first, the First Input Delay (FID) will be the potential client’s first experience with you site. This metric is going to define how fast your site can react to a person interacting with your website such as clicking a link or a button. A good score would be around 100 milliseconds whereas anything over 300 milliseconds would require changes. Page delays occur because the browser is trying to do something else so can’t respond immediately to loading the link. This type of delay is common on mobile devices and, since people like to get their information quickly on the go, it can leave a bad first impression. That said, this varies from user to user, with some people not really interacting with links and others needing to go to multiple links to get things done. As such, analyzing and tracking FID is going to be different to other metrics that we will be talking about.
A faster server will be able to improve LPC, which means that you have to optimize the way that the server is delivering content to your clients. A service worker is a program that can help reduce those load times. Another aspect to speeding up load times is changing the way that your content is presented. Consider compressing your images or not using them at all, especially if they aren’t relevant to the page that they are on.
The final metric that Google will be promoting will be Cumulative Layout Shift. This metric helps to ensure that your site doesn’t have any weird issues when people read your site. Sometimes sites load so slowly that the certain links and text will move as things load. This, as you could probably tell, is annoying sometimes you mean to order something, but another button pops up and changes the position of the buttons and it sends you back to the start. It’s very frustrating because what the site looks like in development can be radically different to what users’ experience. The CLS manages how often this problem is occurring for real people that access your site.
A layout shift is when an element, like a button or text, changes position from one rendered frame to another. Naturally, the faster the better. A good score is 0.1 seconds or better and bad is about 0.25 or higher. There are programs that you can download to monitor the instability of the elements on your site. You can calculate your layout shift score yourself, but it can be a tricky to get the measurements to calculate it; however, I’ll list it here if you are interested.
Before I move on, I would be remiss if I didn’t mention that not all element shifts are bad. If they are expected by your users and they are minimal then its not something to worry about. Particularly if you have animated elements. This helps prime the user for layout shifts in an aesthetically pleasing way. Another best practice is to not insert content above existing content unless its in response to a user’s interaction. Finally, include size attributes on your image and video elements. Most web hosting sites will do this for you however, if you code your own site or use WordPress then keep that in mind.
Google has been good enough to provide us with websites for our businesses with tools to monitor and fix these issues as they come up. Chrome DevTools is one such tool that will help with the CLS issue. SEO Journal provides a great overview of all the different tools we can use to measure our Core Web Vitals. As Google moves forward with these updates, it will be important to keep an eye on how these changes affect your site traffic and adjust accordingly. Keeping up with this new Google rollout is not going to be too difficult with all the tools at our disposal, but simply being aware of these new changes will help to make sure that your site stays on Google’s first page.