• Derick Johnson

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.

FID can only be measured in the field, meaning that real people must interact with the site for the tools to measure it. Chrome’s User Experience report is a handy tool that measures all the metrics that we will be talking about here. PageSpeed insights is also a good tool if you don’t use Chrome as well as the Google Search Console. As stated before, the way that you should analyze this data is by looking at the data from all your pages and then focus on fixing the ones that give the worst readings back. Since its hard to tell what page your users will visit first, its best to take care of all that give bad readings no matter the device that it’s pulling from. These delays are usually caused by Javascript execution. As such, splitting these scripts will help cut down on the time it takes to execute. Using a web worker can help run that JavaScript thread faster and move non-user interface operation can cut these times significantly. Workway and Comlink are recommended software for optimizing FID.

Largest Contentful Paint or (LCP) is a metric that measures perceived load speed. As the name suggests, it marks the point in time that the largest part of the page’s content has loaded. A good LCP score is around 2.5 seconds and anything over 4 seconds is poor. Google Chrome’s user experience report and search console in the Core Web Vitals report are the best ways to measure it. So how can you improve LCP? The most common causes are Slow server response times, render-blocking JavaScript and CSS, Slow resource load times and client-side rendering.

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.

5 views0 comments

Recent Posts

See All

Go Global with International SEO

Seeing as Smiths Falls is so close to the United States, having good SEO that caters to both regions is quite important. Though, Google is the still the biggest search engine in both countries there a

Creating Alt-Text for SEO and Accessibility

They say a picture is worth one thousand words and in SEO nothing could be truer. In time working at the University of Toronto, I found that written communication could only go so far. You had to pul

Go Further with a Frequent Blog

having a good online presence is important to any business. Though having an organic way to do that can be difficult. So the best way to add keywords to your site is by having a blog or a place where