As a web designer, your SEO team members are counting on you to build a site that not only looks great but also meets all of Google’s Web Vitals requirements.
Want to learn more about Web Vitals and why it’s so important? We’ve gathered together the facts on Google’s new Web Vitals, how it can affect your design, and what to do about it.
WHAT IS GOOGLE WEB VITALS?
Google’s Chromium Blog has recently introduced Web Vitals. This is a new program that is meant to provide tips on meeting essential metrics for a healthy site.
Google is constantly figuring out new ways to improve the user experience online via desktop and mobile devices. This is why they have created Web Vitals which is an initiative to share how to build a website that will deliver the best user experience possible.
It’s important to note that Google may use Web Vitals standards as a further SEO ranking metric. That means your website could be penalized if it doesn’t meet all of Google’s Web Vitals expectations.
GOOD NEWS! YOU CAN HELP
How do you make sure your website will meet the Web Vitals’ qualifications? Let’s start with the basic metrics that Google has created.
LCP (LARGEST CONTENTFUL PAINT)
According to Google, this metric determines the load speed of the largest content element on your page. For example, a large image or video that takes additional time to load.
This also includes an element with a background image loaded via the “url(.).” function as opposed to a CSS gradient.
Google ranks a load speed of 2.5 seconds or faster as “Good” and 4.0 seconds or slower as poor.
FID (FIRST INPUT DELAY)
The FID metric determines the responsiveness of your website. This determines the experience of the website for users interacting with each page. Simply put, how long does it take a page on your site to load after a user clicks on it?
Pages with a 100ms FID or faster are ranked as “Good” whereas anything higher than 300ms will be rated “Poor.”
Google has determined using data that tracks user experience, that a “Poor” ranking for FID means your site is not reacting quickly enough to a user’s clicks.
CLS (CUMULATIVE LAYOUT SHIFT)
When you load pages in a website and the layout shifts around, it can make it difficult to use and lead to negative user experience.
The CLS metric measures your site’s visual stability then ranks it from 0.0-0.1 for “Good” and 0.25 or more as “Poor.” A zero score means no shifting is taking place and 1 represents Google’s standards of too much shifting.
If any of the above metrics lie somewhere in-between, they are considered “Needs Improvement.”
HOW CAN YOU RATE YOUR SITE?
As a graphic designer, the layout you use, imagery, graphics, and navigation, all have an effect on its Web Vitals. You may be wondering how your current website’s design ranks on Google’s scale.
It’s easy to track your website’s Web Vitals by using tools such as Google’s Search Console, PageSpeed Insights, Lighthouse, ChromeDevTools, Chrome UX Report and the Web Vitals Extension.
UTILIZE THE TOOLS
The Core Web Vitals report allows you to see how your pages are performing and fix poor user experiences. This report uses the Chrome User Experience Report metrics which uses real user experience metrics across the public web.
You are able to view the results of the Chrome UX Report via the PageSpeed Insights and Public Google Big Query project.
The Web Vitals extension will give you a quick and easy way to see how your site ranks for the three key metrics (LCP, FID, and CLS) described above. Simply download the extension onto Google Chrome and you can view live results.
DATA DOESN’T LIE
Even if you feel that your website will meet these standards, it’s important that you check to be sure. Google provides these multiple ways to easily figure out exactly how your pages rank.
Google is the leading search engine online. The majority of your website’s leads are most likely finding your company through Google. Meeting Google’s standards is the only way to continue to show up high on search results.
HOW CAN YOU IMPROVE YOUR SITE?
Once you figure out what pages are being ranked poorly, you may be wondering where to start? Google recommends starting with the lowest-ranked pages and begin by fixing these pages first.
There are many ways to improve your site’s performance including using AMP. This tool is recommended by Google to increase the speed and performance of your site. It will prevent things like ads from blocking the execution of the main page.
For some issues, you may need to work with your web developer along with your SEO team in order to fix it. A good general practice is to reduce your page sizes. Less than 500KB is recommended for a page and all its resources.
You can use the PageSpeed Insights tool to get suggestions for how to make slow pages faster. Google has listed the Tools to measure Core Web Vitals, such as Lighthouse, PageSpeed Insights, Chrome DevTools, Search Console, web.dev’s measure tool, the Web Vitals Chrome extension and Chrome UX Report API for developers.
Sometimes fixing one page will also improve other pages on your website. It may seem like a big project to tackle but the speed of your site will directly affect your user’s experience. So it’s a necessary part of the web design process.
As you make changes to your pages, use the validation tool in Core Web Vitals to be sure that the error has been completely fixed.
READY, SET, GOOGLE!
Your work as a web designer is extremely important to upholding Google Web Vitals’ standards. As your website continues to grow, it’s important to be aware of its performance and user experience.
Your SEO team can’t build a stellar site without your help. That’s why understanding Google Web Vitals is imperative to the success of your site. We know the technical side of Google can get complex so we hope this guide will help you to get started!
20670