Despite Core Web Vitals representing major new changes to the digital landscape, addressing a website’s shortcomings in terms of Cumulative Layout Shift, First Input Delay, and Largest Contentful Paint are quite easy.
Core Web Vitals measure the performance of a webpage’s visual stability, page responsiveness, and load speed.
Taken together, Core Web Vitals are essential to a page’s overall search engine ranking.
One of the problems related to poor Core Web Vitals scores is that there is so much information on the topic across the internet.
Mistakes occur as UX practitioners attempt to adapt to the new digital measurements and scramble to make improvements.
Let’s take a look at some of the most common Core Web Vitals mistakes.
First mistake: under-optimized above the fold content
The faster the load time of a webpage, the more engaging it is for a user. Put another way, first impressions do matter.
An overlooked fact is that content displayed above the fold has to be the priority when it comes to loading first.
Consider what text should be placed above the fold, what’s necessary, and what’s just clutter. Content such as the embedding of Google Maps, any social media feeds, audio streams, or custom video are all examples of content that don’t need to be placed above the fold.
Second mistake: the use of multiple custom fonts
It’s pretty normal for web designers to use fronts from places like Typekit, Google Fonts, etc. And if they’re not careful, they can easily end up weighing down the page and slowing the page speed.
If custom fonts are used then it could cause them to flicker on pages that are loading, which ultimately equals a poor user experience, represented as a poor Cumulative Layout Shift score, the Core Web Vital responsible for page stability.
So stick to no more than one or two custom fonts and limit their sizes.
Third mistake: to display multiple images above the fold
Typically, images and videos are the largest assets that a browser downloads. As such, when there are multiple large videos or images displayed on a page, it is likely to lead to poor performances in Largest Contentful Paint and Cumulative Layout Shift.
The most effective solution for web developers who design pages is to emphasize a single compressed image above the fold.
When it comes to videos and phone slides, move them below the fold to further improve general Core Web Vitals scores.
Fourth mistake: under-optimized images
It’s not that photo-heavy websites are bad as such. It’s that photo-heavy sites that display images that are uploaded as they are. It disrupts loading time and makes the user wait.
Optimizing images, however, is quite easy. Before images are uploaded to a site, you must first compress them and resize them. Doing this results in faster loading times.
Fifth mistake: over-using analytics solutions
It’s so easy today to add handfuls of tracking tech like Tag Manager, Google Analytics, AdRoll, etc. You may think that when it comes to analytical tools, the more the merrier.
Yet running many of these tools can cause sites to run significantly slower.
Consider all the tracking tech that is available and choose which is most beneficial to you and your business. And even if you believe it to be important to run multiple tools, you can still improve Core Web Vitals scores if developers use a well-documented guide to make sure that tracking code loads properly.