Common Google Core Web Vital Mistakes and How to Fix Them

Defined by Google as an analysis of "how your pages perform, based on real world usage data (sometimes called field data)", a Core Web Vitals (CWV) report measures page load speed, visual stability and page responsiveness over a 28-day period — with results based on actual site visits. This user experience assessment is vital in part because it impacts search rankings. An update to its parameters was rolled out in May of 2021, and it's fair to say that there's been considerable confusion surrounding both the revision itself and the metrics associated with it, resulting in oversights that impact website performance. Mistakes are likely arising because businesses have been bombarded with heaps of information on the topic of CWV since the announcement, and because UX practitioners, digital marketers and SEO experts — having spent years honing their craft and learning exactly what it takes to provide a pleasing user experience (and to achieve high search rankings) — are scrambling to adapt.

The three metrics that Google uses to score a user's experience are Cumulative Layout Shift (CLS), Largest Contentful Paint (LCP) and First Input Delay (FID). CLS refers to how often users experience unexpected shifts in site layout (for example, a button or link position moves when the user attempts to click on it). The metric that measures the length of time it takes for the largest image or text block within the viewport to display is referred to as LCP. The final performance metric, FID, measures the time users spend waiting for a browser to respond to their input or interaction.

Related: What is Google Page Experience, and Why Does it Matter?

Addressing the following common errors will help improve scores:

Mistake 1: Failing to optimize content above the fold

First impressions matter. The faster graphic content is visible to website visitors, the more engaging a site will be. However, you need to make sure that content above the fold is prioritized to load first (this is easier said than done in HTML!) and that it's, ideally, minimalist. Examples of content mistakenly placed above the fold (negatively impacting CLS and FID) include embeds like Google Maps, social media feeds, audio from streaming services like SoundCloud or Mixtape, custom video or widgets that pull data from YouTube and Vimeo, photo galleries and image sliders.

To prevent visitors from experiencing unexpected layout changes and a lag in responsiveness, add all third-party widgets and rich content below the fold. In the case of custom widgets, look into optimal data fetching and rendering techniques such as asynchronous loading and fetching data from the site's main thread (where a browser processes user events and paints).

Related: Use These Web Design Tricks to Grow Your Business Exponentially

Mistake 2: Using more than two custom fonts

It's common for web designers to use fonts from services like Google Fonts, Typekit and other sources. If you're not careful in implementing them, they can easily add extra weight to the page and slow down its loading speed. Custom fonts can also cause the web fonts to flicker on pages that are loading, which creates a poor user experience and can increase CLS, an important metric measuring the total stability of content on a page.

When fixing this mistake, website owners may want to sacrifice style by sticking to no more than two custom font families, and in limited sizes.

Mistake 3: Displaying multiple images above the fold

Images and background videos are typically the largest assets that browsers download on a site, so when there are several large images or videos on display, there can be a delay in LCP and an increase in CLS because the browser has to download these elements before they can be rendered. For web professionals designing pages for clients in verticals that place emphasis on photographic stills and recordings, the most effective solution would be to place a single image above the fold, and ensure that the image has been compressed. In addition, videos and sliders with a maximum of three images or less must be moved lower on the page to further improve the site's CWV score.

Mistake 4: Failing to optimize images

A common occurrence on image-heavy sites is when photographs are uploaded to the site and displayed as is. This mistake disrupts loading time, causing the user to wait for the images to appear and perhaps exit the page completely, both of which have a negative impact on CWV score. Fixing this mistake is relatively easy, however. Before any image is uploaded to a website, it needs to be compressed and resized. Compressing images involves running them through a specialized algorithm to reduce the total file size, while resizing involves making sure that dimensions meet the template and the viewport's size requirements. Keeping resizing and compressing top of mind before, during and after web build will ensure that a site runs smoothly and continues to meet Google's ranking specifications.

Related: Trust a Better Stock Photography Service for Your Business Design Needs

Mistake 5: Using too many analytics solutions

On the web today, it is very easy to add dozens of tracking technologies like Google Analytics, Tag Manager, AdRoll scripts and other tools. While useful at informing data-driven decision-making, running these implementations can cause a site to load at a snail's pace and ruin the overall user experience. So, assess which tracking technologies are necessary. That said, even websites that require a considerable amount of analytics tools stand a good chance of increasing their CWV score, provided their designers use a well-documented guide to make sure the tracking code loads correctly and doesn't hurt site speed.

Is it time to rethink your CMS?

The challenge in rectifying all the above mistakes is that Google CWV requires designers and businesses to rethink current sites and how they should be designed. As the company continues to release new updates, businesses and web professionals will likely need to reassess their Content Management System (CMS) or platform partner if they want to improve their CWV score and maintain (or improve) their ranking on Google.