In the early days of the internet, search engines were limited to searching the World Wide Web for keywords. This often led to unsatisfactory results, and clever SEO specialists used countless tricks to outwit the search engines.
Google responded with various and increasingly complex algorithms that not only looked for search terms but also checked the relevance of websites. In addition, regular refinements are made to reflect users’ reading habits more precisely: the algorithms adapted to people’s habits.
When evaluating websites, the focus remains on content, quality and – above all – relevance. Attractively designed and regularly updated websites with descriptive headlines, flawless and content-rich text, images, videos and interaction options still offer an advantage over “tinkered” or outdated websites.
However, new criteria are constantly being added. Users should find the information that is important to them, and websites should also be technically well structured so that content can be displayed quickly and properly on desktop and mobile devices. In other words, the user experience is becoming one of the most crucial criteria for a page’s ranking.
Core Web Vitals: technical quality in figures
Google introduced a new website rating process called “Page Experience Update” in summer 2021, which has really started to have an impact in recent months. A significant part of it are Core Web Vitals: the criteria that affect the user experience, particularly during the first few seconds of a website visit, expressed in numerical values. Google measures the value on various platforms (desktop, tablet, cellphone, etc.) and calculates an average value. After all, the user experience should be as positive for everyone as possible.
Core Web Vitals are primarily about the following three key points:
Largest Contentful Paint (loading time)
“Largest Contentful Paint” (LCP) is a value that indicates how fast the largest element on the page is loaded. The size does not refer to the data volume but to the actual visual visibility of the content elements. Usually, it involves content in the form of text, images or videos. Google sets a guideline of 2.5 seconds for a good LCP time. Since the largest blocks are often loaded last, this is a reliable evaluation criterion.
In the past, the loading time was mainly measured using “First Contentful Paint” (FCP). However, this only measures the time it takes for the first block to be displayed. For an overall loading experience, Google now takes into account both the FCP and the new LCP measurements. If there are issues with the measured variable LCP, Google still uses FCP to be able to make more detailed diagnoses.
Google’s experiment with the parameter “First Meaningful Paint” (FMP), i.e. the time before the first “meaningful” block was loaded, proved to be too complex and therefore unusable. FMP was dependent on the specific browser settings and, therefore, could not be standardized. In practice, it also proved to be too susceptible to minor changes in page loading time. The test results were simply too inconsistent to achieve reliable results.
First Input Delay (interactivity)
“First Input Delay” (FID) measures the loading time before the user can interact with the website. All too often, page content is already displayed, but the interactive elements such as login fields or links do not work yet. However, this is not necessarily caused by the server that the website is stored on. If a page keeps the browser busy with too many tasks at the same time because it contains large JavaScript files, for example, certain processes can slow down. Google therefore requires that the user’s input on the desktop be effective and visible in no more than one-tenth of a second.
Important note:
The FID was replaced by Interaction to Next Paint (INP) as the Core Web Vital on March 12, 2024.
For all other tools such as PageSpeed Insights and CrUX, there will be a six-month phase-in period from this date to allow developers to update their code. Further information can be found here.
Cumulative Layout Shift (visual stability)
Does the layout shift while loading? We’re most familiar with this happening on news portals when adverts are played. Loading a page quickly has many advantages but if one element loads slower, it can cause elements of the layout to jump around. This is confusing and especially annoying when the user clicks on an item and is a bit late – and then finds themselves on a website that they have absolutely no interest in. Google measures changes in the page layout with “Cumulative Layout Shift” (CLS) and immediately registers when an element changes its position. CLS doesn’t just measure how often shifts take place; it also takes into account the distance of the shifts.
Where can I check my Core Web Vitals?
If you want to check your website’s Core Web Vitals, you can easily do so using Google Search Console or the latest version of the Google Chrome Browser. Go to the desired website and select “View”, “Developer” and then “Developer tools”. In the window that appears, select “Lighthouse” and click on the “Generate report” button.
Other developer tools from Google also support the analysis of Core Web Vitals, such as PageSpeed Insights and Measure page quality. These can be used by experienced users to analyze and optimize their own websites.
| Loading time (LCP) |
Interactivity (FID) |
Visual stability (CLS) |
|
|---|---|---|---|
| PageSpeed Insights | ✓ | ✓ | ✓ |
| Chrome UX Report | ✓ | ✓ | ✓ |
| Search Console | ✓ | ✓ | ✓ |
| Chrome DevTools | ✓ | Total blocking time | ✓ |
| Lighthouse | ✓ | Total blocking time | ✓ |
| Web Vitals Extension | ✓ | ✓ | ✓ |
Google provides the tools required to check the values of Core Web Vitals. Own design based on web.dev.
How can Core Web Vitals be improved?
Optimizing Core Web Vitals requires a certain amount of expertise in most cases. However, there are also points that amateurs can take advantage of, such as compressing images. Here are the key tips to improving your website’s Core Web Vital values:
LCP: load large elements faster
- If you use a framework instead of larger HTML pages, you can control the loading of the individual elements more easily
- Use a web hosting provider with fast infrastructure such as Hostpoint
- Keep any JavaScript code as short as possible
- “Lighter” images load faster. It’s worth compressing photos and saving them in modern image formats such as WebP Server and browser-side caches speed up page construction
- Only allow images that are placed outside the first visible area of the website (first “viewport”) to load as the user scrolls (“lazy loading”). This will often help to significantly optimize the LCP value
FID: interactivity first
- If you break up long tasks, everything will be faster as while JavaScript is running, the browser does not process any other jobs. Processing times over 50 milliseconds should be avoided at all costs
- Prioritize interactive code elements when loading. This allows users to act quicker
- Have a Web Worker perform more complex tasks in the background
CLS: no jumping side elements
- Specify the dimensions of the embedded images in the website’s HTML source code. This allows the browser to reserve the corresponding space when constructing the layout
- If possible, avoid advertising banners, embedded content and iFrames without size specifications
- Use placeholders for dynamic content and ads
- There is the option of “preloading” so that fonts do not have to be loaded when the page is accessed. The fonts are, instead, loaded as HTML elements in advance
- Define good “fallback” fonts. Before the website font loads, the browser uses a system font as a bridge. If you define a system font that looks as close as possible to the final font, the layout shift is smaller (i.e. smaller CLS). For example, serif fonts should not be defined as a fallback for non-serif fonts (and vice versa)
Google also provides detailed tips for optimizing Web Core Vitals. These can be found at https://web.dev/optimize-lcp, https://web.dev/optimize-fid and https://web.dev/optimize-cls.
What about the other ranking factors?
You should be aware, however, that Web Vitals are not a substitute for all other factors that influence a site’s ranking. They are additional factors, primarily relating to the loading speed of the website. The following criteria are also crucial:
- Mobile-friendly: the cards are stacked against web pages that are only displayed on a mobile phone as a miniature version of the desktop browser right from the start, especially if they are displayed with screen overflow, i.e. only as a section
- HTTPS: an insecure connection between the user’s browser and the web server (http instead of https) is a reason for Google to penalize the website. Hostpoint customers can activate the free FreeSSL from Let’s Encrypt for every website
- No intrusive interstitials: Intrusive and interruptive ads (“interstitials”) annoy users and Google. However, pop-ups for cookie preferences, age certificates, etc. do not count as a negative factor.
SEO thanks to rankingCoach
If delving into Core Web Vitals is a bit too much for you, basic SEO is still a good idea. The basic, classic SEO criteria have not changed significantly. And the good news, especially for beginners, is that there are helpful tools and wide-ranging toolboxes, such as Hostpoint’s rankingCoach. This allows even amateurs to test a website based on Google criteria for its search engine ranking. Users will also receive tips and tools to improve their website’s ranking. rankingCoach offers to-do lists, tutorials and videos to help you reach the top rankings on Google.
