Core Web Vitals – optimized!

What are Core Web Vitals?

Michael Winchester SEO and Website Design footer logo

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.

Why is optimizing for Core Web Vitals important?

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.

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.

Core Web Vitals scoring explained

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.

My own personal optimization score.

Real Core Web Vital Before and After Test Results

Core Web Vitals case study – commercial painter website

Before CWV optimizations by Michael Winchester
After CWV optimizations by Michael Winchester

After re-optimizing images, moving some of the essential scripts to the footer, and ensuring only necessary scripts are loaded. Using PHP’s built-in Memcache and W3 cache, I improved the website’s overall performance, and this client’s score rose from a dismal F to an impressive B. This score could be improved even more if the client re-designated their hero slider and moved to a faster web server.