Core Web Vitals (CWV) are a set of metrics used by Google to gauge user experience, known as UX. Metrics such as the speed at which a page loads, the time it takes to interactivity, and the visual stability of media elements all come into play.
Core Web Vitals terminology
LCP – Largest Contentful Paint
The time between the start of your page loading and when the largest image or block of text is loaded.
FID – First Input Delay
The amount of time it takes for a page to respond to interaction, like clicks, etc. Interaction can be delayed significantly by the loading of styles, scripts, and external data (like Google Fonts).
CLS – Cumulative Layout Shift
The shift in the browser viewport due to DOM (Document Object Model) manipulation, not properly setting dimension attributes for large images, image sliders, or other large media elements, causing a shift in the content after fully loading.
CWV metrics play a pretty big role in determining page quality, and that affects page rank. We all know ranking in the SERPs will make or break your ability to attract organic traffic.
How can I optimize for Core Web Vitals?
The good news is that a lot of the optimizations for a better Core Web Vitals score align with website design best practices. Tasks like properly sizing, optimizing, and setting dimensions for media (images and video) should already be in place, right? If not, there is a great place to start.
Second, you may want to defer the loading of any scripts that are not vital to the page. Content Management Systems like Word Press, Wix, and Dolphin load all of the resources for the website on every page, regardless of if they are being used or not. Consider resources like API data from Google Reviews or external Google Fonts that can drastically slow down your LCP and FID. Are they necessary on every page?
Another great way to optimize for CWV and speed up your website at the same time is to install a cache on your server. Most servers come equipped with some manner of cache; for instance, my server uses LiteSpeed Cache. It takes the heavy lifting out of tasks like image optimization & deferring scripts. There is a lot of “tweaking” settings involved, and you can damage your website, but the damage is reversible, and the benefits outweigh the risk.
In the end, the goal of the Core Web Vitals metric is to improve the user experience online; this, in turn, helps your bottom line. It’s a pretty basic idea; when your user has a good experience on your website, they are more likely to return and browse or shop again.
What tools are good for helping with CWV?
Chrome – Chrome is Google’s web browser so it should be no surprise that it comes packed with web development extensions galore (not to mention the extensions you can add-on). If you are trying to rank in search and not utilizing Chrome you are missing out on a lot of value; from network performance to viewing your live code. Chrome has all the tools to answer your questions and even pose new ones.
PageSpeed Insights – This is where you go to analyze your webpage and get your CWV scores. It will also give you some tips as to where to start your optimization journey. Maybe your images are not being served in a “next-gen format”, consider swapping them for webP images.
Google Search Console – Verifying ownership of your webpage in Google Search Console is important as it is a great tool for learning about how your website is performing in search. It can also show you what pages are not performing well due to various issues that may or may not affect your CWV score. When Search Console shows you an error in your Coverage report, best to fix it ASAP. Errors that are untended can result in a rankings drop.
GTmetrix.com – This tool is a fast and free way to check your CWV score while you are working on your project. I find it extremely useful and the information tends to be more accurate than some of the other CWV testing tools. See the score for this website below, even I was impressed.
More articles from Michael Winchester at michaelwinchester.com
Website developer, field recordist, instrument builder. My background is largely based in design for the music industry; websites, micro-sites, and apparel. With that experience, I bring a fresh approach to corporate and construction-related web projects looking to stand apart from the competition. My goal is to help clients better understand different aspects of SEO and website development; I write short, easy-to-digest articles on search engine optimization and website performance-related topics.
In my free time, I enjoy field recording, sound design, and building unusual musical instruments.
Michael Winchester is a website developer and search engine consultant in Southern California.
Michael Winchester Design | (562)283-5688