It’s almost as if we didn’t have enough acronyms to keep up with in the web world… Google has created some new ones that are centered around an algorithm update that landed in 2021 and is growing in importance. We’re going to de-geek the terms and explain what you need to be thinking about as you upgrade/update your website in the new year.
What are “Core Web Vitals”?
Google has shifted from the “how many keywords are on the page, in various places” to paying more attention to the experience that people have on a website. It understands more of the search context when you Google something, and it’s moving into the experience that you have once you’re on a page during the 1st few seconds.
Currently, there are three areas of focus. Each of these can be measured, so they should become an important part of the metrics that you look at on a regular basis for your website. Currently, almost like PE class in grade school, there are only 3 grades you can receive for these: Poor, Needs Improvement, and Good. These are a little geeky, but hang with us as we turn the geek into English.
Website load time
The techno-term that is used here is “Largest Contentful Paint” or LCP.
To define what this is, we first need to take a step back and look at how your website loads. Here’s a simplified outline of what happens:
- Person lands on your website, a message is sent to your server “please load this page”.
- The server responds with your page template which is full of stylesheets, javascript, content and images.
- Each of the elements on the page has to load in a specified order. By default, the server will load information from the top of the page to the bottom.
- In many cases, one file or image must load before the next one can start. This “wait time” is called “blocking”.
LCPis the time that it takes from the time that the request is sent to the server until the largest image or block of content is viewable to your users. The goal is 4 seconds or less, with 2.5 seconds or less falling in the “good” category.
What can kill LCP?
Huge images and sliders are the #1 killer for a good LCP rating. A complex page layout comes in at a close #2. But, we don’t want to go back to the days of 1999 looking websites, so what can be done? We’re taking a serious look at this as well, and covered a number of these in more depth in our previous tip “Avoiding the spinning wheel”.
- Even when you use a page builder, build the page structure as simple as you can. Most page builders these days let you create fancy bullet lists or titles. Skip those and use a regular heading and bullet list — you can make them fancy with a couple lines of code in the stylesheet.
- Do you need that slider? Or, would a well-optimized, large header image with overlaid text give the same message?
- Have you optimized your images? This includes sizing them down to the closest size that you need.
- Have you moved any javascript that can load later to the bottom of the page?
Page interactivity
The techno-term is “First Input Delay” or FID. How long does it take before people can interact with your page by scrolling or clicking?
What affects FID?
We’ve talked about images, but we really haven’t defined the javascript piece of your website. What is javascript? It’s a scripting (coding) language that is used to create the functionality behind web sliders, form submissions, etc. CMS platforms like WordPress by default will load all of the javascript files at the top of the page – and, depending on how many plugins you have, there can be a lot of files.
It’s a tedious testing process, but it is possible to move javascript files down lower on the page. The trick is to move one and test your site to make sure it works. Then, wash, rinse and repeat. Easy if you’ve got a simple site, harder if you’ve got a complex layout that depends on a number of plugins for full functionality.
So, if your website has to wait on large images to load in a slideshow run by javascript before people can click or scroll, your time here will skyrocket. The goal is to get this metric below 300 milliseconds, with under 100 milliseconds being “Good”.
Visual stability on your page
The techno-term is “Cumulative Layout Shift” or CLS.
As we define this term, let’s look at how the design of your page is created from the point where someone sends that request to the server.
Once the request is received, the server starts sending information… the stylesheet files, the javascript files that are called at the top of your page, then the page content which includes images and text.
IF you’re pulling in a hero image (the big one at the top), but the code isn’t there to define the image, the page as it is loading doesn’t know how much space to create for that image before the image actually loads.
For example, let’s say a hero image is 1600px by 400px in actual size. But nothing in the code defines that. No space will be left for that image as the rest of the content fills in below the image, and when the image finally loads, everything will shift down to accommodate the size.
How to minimize shifting on your page
The biggest effect is centered around your images. Make sure that the size of your hero image is defined in the code along with other images.
Other factors include:
- Depending on how your fonts are pulled in, especially heading font sizes will load smaller or larger than you have defined. And, when the right size finally appears, there will be a shift.
- Using specialty fonts will cause a delay and could affect shifting. If you’re pulling in a Google font, Adobe Typekit font, or custom font housed on your server, all of them have to load — and before they do, a default font will be shown, even if for a flashing moment.
- Call to action buttons — if you’re using a complex page layout system and a Call-to-Action (CTA) button loads slowly, it will push any content below it down.
There are times you expect a shift in the layout — for example, when you’re on mobile and you click on a navigation item that has sub-items under it, you expect the rest of the navigation to shift down to make room for the expanding sub-items. This is OK! It’s when the unexpected shift happens that it leaves a bad taste in your user’s mouth.
This metric gets uber-geeky to define in giving you the score. We found a great resource at Web.dev that while it talks “geek” it also gives pictures showing what it is talking about. The simple definition is that you want your web page to shift as little as possible while it is loading so that if people start reading your content, they aren’t interrupted when the page shifts and they have to try and figure out where they were before the shift.
Making the metrics usable
Our goal with these tips is to put tools in your hands that you can either jump in and make your own improvements on your website, or be able to have a knowledgeable conversation about improving your website with the person who manages your website.
You don’t have to have every page on your website meet these requirements at this point. But your home page should. That’s why we try to steer people away from large sliders on the home page and other elements that, while “cool”, hinder the experience of people coming to your site.
Be prepared as you work with your web guru to test your home page to have a serious conversation of “fluff” vs “content”, and how you can get your branding and message across as efficiently as possible.
Your Online Partner… for Success
We’re here to help in any way we can, please don’t hesitate to reach out. Turning the geek into English and taking care of you online!
