Background
12.4.2022

Core web vitals

Google in­tro­duced Core Web Vitals metrics in 2021 to evaluate the overall user ex­pe­ri­ence of websites in more detail. These metrics have an impact on website ranking.

10% of website visitors leave if the website is not suf­fi­cient­ly ac­ces­si­ble. 40% will leave if the website takes more than 3 seconds to load. It is therefore essential that the ex­pe­ri­ence of using a website is in order.

What is Core Web Vitals?

Core Web Vitals measure loading per­for­mance, in­ter­ac­tiv­i­ty, and visual stability of a web page. Core Web Vitals is included in what Google calls Page Ex­pe­ri­ence metrics. These metrics include also mobile-friend­li­ness, HTTPS, intrusive in­ter­sti­tials. The Core Web Vitals metrics are these:

Largest Con­tent­ful Paint (LCP)

The time in seconds before the user sees the largest content element on the page. Less than 2.5 seconds is con­sid­ered good for the user ex­pe­ri­ence.

First Input Delay (FID)

This measures user in­ter­ac­tiv­i­ty (e.g. when a user clicks on a button on a page). This value should be less than 100 mil­lisec­onds.

Cu­mu­la­tive Layout Shift (CLS)

The visual stability of the page, that is, whether the elements change position on the page during loading. The value should be less than 0.1. The higher the value, the more elements move on the page during loading, which is bad for the user ex­pe­ri­ence.

One can check how a website performs with regards to these metrics using the Light­house test that can be found on Chrome’s Developer Tools.


1615620022837_corevitals.png-me

Mobile-first

Mobile op­ti­miza­tion is an official ranking factor as more and more people are accessing websites on mobile devices. You can check if a website is mobile-friendly with this tool. Core Web Vitals make mobile per­for­mance more important than before. Therefore it is critical that websites perform great also on mobile devices.

Great user ex­pe­ri­ence is not just about fast loading times. Usability is important for a great mobile user ex­pe­ri­ence. Here are a couple of things you can make yourself to improve the mobile user ex­pe­ri­ence.

Content: Keep it simple. The space on a smart­phone touch­screen is limited. Use short, concise sentences without filler words, but keep in mind that the content should be the same on desktop and mobile devices. Oidom makes it easy, the website is au­to­mat­i­cal­ly optimized to work on all devices.

Fonts: Use as few different fonts as possible. The more uniform the typeface is, the easier texts can be read on small screens. Example: Use one font for headlines and another for body text. Fonts without serifs are rec­om­mend­ed for small screens. You can easily change the fonts of an Oidom website in the Theme Settings.

Core Web Vitals tools for testing

Google provides several tools for testing the Core Web Vitals of your own and other pages.

Google Light­house

Google Light­house is perhaps the easiest way to measure if you're using the Chrome browser. Light­house is an open source tool developed by Google to help optimize website speed, search engine op­ti­miza­tion, usability, and ac­ces­si­bil­i­ty. You can access the tools in Light­house either by right-clicking on the page and selecting "Review" or by selecting "View" -> "For Developer" -> "Developer Tools" from the Chrome main menu. The report is run by pressing the "Generate Report" button. Test results may vary by test factor, so it's a good idea to run the test a few times. Testing should be done on a mobile device, as is the default selection in the test.

Google Pagespeed Insights

Pagespeed Insights is Google's online service. You can find it at: https://pagespeed.web.dev/

If the website has enough visitors, Pagespeed Insights will tell you the basics of the actual user ex­pe­ri­ence. If there is not enough user data available, the test is run directly to the regular test page.

Google Search Console

You should always add each web page to the Google Search Console. This will give you valuable insight into how your site is working and make it easy to see if there are any problems. Below the Expirence section you will also find the Core Web Vitals page, which tells you how good results your various pages have received. Here, too, you should look mainly at mobile results.

Website op­ti­miza­tions with Oidom

At Oidom we optimize each website to have great Core web vitals. Lately, we have done the following en­hance­ments to the Oidom platform.

AVIF - Next-gen­er­a­tion image format

Images are usually the largest files on a website and delay page load sig­nif­i­cant­ly while they are down­loaded. Images can drop your Core Web Vitals metrics and thus hurt your SEO. In our latest updates we have in­tro­duced support for AVIF images. We convert each image uploaded in Oidom to AVIF image format. AVIF is an optimized image format that was created to make our images smaller while keeping the same quality. AVIF images are sig­nif­i­cant­ly smaller in size than PNG or JPG images, up to 10 times smaller. For browsers that do not yet support AVIF images, we show the images in the PNG format.

Fonts loaded locally

You can choose fonts from a large selection of Google Fonts for your website. However, Google Fonts can load a bit slowly, and using them is not GDPR compliant. So we changed the fonts to be all loaded locally.

Get great Core Web Vitals scores with Oidom

At Oidom our goal is to make the web easier. Achieving great Core Web Vital score’s are usually not that easy and requires a lot of work. With Oidom it is easy. And we work con­stant­ly to make the websites made with Oidom even faster. In the future, we will make en­hance­ments to the loading of 3rd party scripts, loading of the Map section, and Javascript op­ti­miza­tions.