Core web vital was introduced by Google on May 5, 2022, according to which relatively new criteria were introduced by Google to developers and SEO experts.
But why relatively new? Because these criteria have long attracted the attention of Google, and almost all developers were aware of its importance. But with the official announcement of Google and the update of SEO technical websites such as gtmetrix, this issue became completely public.
But what is the framework of this vital Google core update? What criteria have become more important than ever? As an SEO expert, how can we improve our site according to these criteria and what tools can we use to measure it?
Be sure to read this article to ask these questions as well as learn some SEO tricks to improve core web vitals and improve website speed.
Table of Contents
What are Core web vitals?
According to the GSC report, in May 2022, new criteria were officially introduced by Google, and its importance and significant impact on ranking and SEO was discussed.
This update was based on three basic principles:
- LCP or the largest contentful paint
- FID or the first input delay
- CLS or cumulative layout shift
These three metrics are based on the three main aspects of the website, namely loading, interaction, and visual stability, and somehow cover everything that brings user satisfaction. In essence, core web vital focuses on speeding up the site.
Now, without further ado, let’s go to the introduction and review of each of these criteria and in addition to showing the desired score of each, let’s examine the ways to improve these items together.
What is LCP and how to optimize it?
LCP stands for Largest Contentful Paint and indicates how long it takes for the largest content element of the page to be displayed to the user.
Instead of measuring the total load time of the site, it measures and uses the time as soon as the largest content element is displayed. In this case, it can indicate that the rendering of the main content on the site has been completed and will give a certain score to your site based on that.
Elements and criteria for calculating LCP
- Element <img>
- The <image> element within a <svg> element
- Block Level elements in HTML that contain text.
- Element <video> (video poster photo is also considered)
- Element which background image is uploaded via the url () function.
Optimal score for LCP
Ideally, your LCP should be visible to the user as well as the search engine in less than 2.5 seconds. Obviously, the shorter this time, the better your site performance.
If the LCP is between 2.5 and 4 seconds, it means that your site is out of your safe margins and you need to improve the speed of the site as soon as possible and load the first color element of your content.
LCP for more than 4 seconds also indicates a bad user experience and weakness of your site. You need to plan immediately to improve the speed of your site and bring this criterion to a safe margin by finding the problems that caused it (discussed below). This way you can do something to avoid a drop in rank.
How to improve site LCP
The best way to improve LCP time is to increase the server speed of the site, but what can we do to improve the server speed:
- Find better hosting for your site. (The most important and effective method)
- Use cache and upgrade server response time.
- Optimize your JavaScript and CSS code.
- Reduce file size, if the LCP element is an image, use plugins to reduce its size and compress the files you have on the server with Gzip.
Analysis of LCP improvement methods
If the server response time is high, you can optimize the server by changing the hosts. It is best to use TTFB to measure server response time.
Note: If your host is slow, LCP will run at low speed. So if your hosting is slow, none of the following methods will work to improve LCP.
In addition to reducing unnecessary use of hosts, caching can also reduce the number of server requests and optimize resources by storing a copy of HTML. Therefore, if your WordPress host does not run the caching process on the server, I recommend that you use caching plugins such as wp rocket, autoptimise and lite speed to improve LCP.
To optimize the code, the above plugins can be effective again and help you optimize the html, css and javascript code.
Important note about WProcket plugin
The wp rocket plugin has a small but very important bug that sometimes causes content duplication. This bug is related to trailing slash
There are two main ways to avoid duplicate problems for your website:
- Use the “WP Rocket | Remove Trailing Slash from URLs” plugin
- Put trailing slash code before rocket code in htaccess
What is FID and how to optimize it?
FID stands for First Input Delay and is a parameter for measuring load responsiveness.
FID is another important metric in Core Web Vitals that measures the first interaction and responsiveness of a web page with the user. FID measures the amount of time a user first interacts with a web page until a browser is able to respond to user commands. A real interaction is needed to measure the rate of delay in responding to user commands.
Elements and criteria for calculating FID
- JavaScript
- Parsing
- Compile and run JavaScript
Optimal score for FID
If the FID of your site page is less than 100 milliseconds, the page is in good condition in terms of First Input Delay. On the other hand, if the FID score is between 100 and 300 milliseconds, your page will need to be reviewed and modified.
Finally, if the site FID is more than 300 milliseconds, the page is in an unfavorable position and you should act as soon as possible to optimize your site in this area, which we will examine in the following methods.
How to improve site FID
FID Metric is highly focused on website JavaScript. Therefore, reducing the JavaScript elements that are loaded on a page, by breaking it into smaller and asynchronous tasks, can significantly reduce the site FID.
But the most important ways to improve FID:
Shorten long and long tasks
Long Tasks are the intervals of running JavaScript on a site that may result in a page being unresponsive to the user. Any piece of code that blocks the main thread for 50 milliseconds or more is a long task.
Long tasks are a sign of loading and running JavaScript more than a user needs on that page. Therefore, segmentation of JavaScript can be effective in reducing delay input.
Use Web Worker
One of the main reasons for Input delay is that the main thread is blocked. Using Web workers allows JavaScript to run in a secondary or secondary thread, thus reducing the busy time and blocking of the primary thread by moving non-UI-related operations to a separate thread. Keeping this in mind can significantly improve your site’s FID score.
Postpone additional JavaScript
In general, all JavaScripts are render-blocking. When a browser encounters a tag script that links to an external JavaScript file, it is forced to stop and download, process, compile, and then execute that JavaScript. Therefore, only the code needed for the page or to respond to the user’s command should be loaded and the rest should be deferred.
Now if you use async in the <script> tag, the scripts on the page are completely independent and the page rendering for async scripts will not be delayed. Scripts that defer into the <script> tag do not block page rendering and run whenever the DOM is ready, but this happens before DOMContentLoaded.
What is CLS and how do we optimize it?
CLS stands for Cumulative Layout Shift and is used to measure Visual Stability. In principle, this criterion is introduced to measure the change in page layout during loading and after.
These elements can be page fonts, images, videos, CTA buttons, etc. If they are not stable, they can significantly weaken the user experience. For this reason, Google has taken a big step this year to improve the user experience and enhance user satisfaction by adding this new metric.
Note: Google cares completely about the CLS rate on mobile pages and happens to follow this metric more seriously on these pages.
Optimal score for CLS
If your website’s CLS time is less than 0.1 seconds, the condition of your page is quite good. If it is between 0.1 and 0.25 seconds, it needs to be corrected, and if the CLS was longer than 0.25 seconds, the situation is unfavorable and you need to quickly develop a strategy and plan to solve this problem.
How to improve site CLS
To improve this indicator, you must first know the reasons that cause your score to drop in this metric. The following are some of the factors that can significantly affect your site’s CLS:
Images without standard dimensions
Images and videos must be longitudinal and transverse in HTML. In addition, you need to make sure that the images are responsive and perfectly suited to the various display formats. If the image dimensions do not comply with CSS and HTML standards, when loading the page, your image will be loaded with a delay compared to other elements such as text, causing it to break and go up or down, which will adversely affect your CLS score.
Advertising without specific dimensions
Advertising is one of the biggest problems that usually affects the site CLS.
Although advertisements are used as an important part of some websites, if they are not considered in terms of their dimensions as well as their responsive design, they can easily destroy the user experience of your site.
What can be done to solve this problem:
- Set aside space for ads (before uploading your ad or pop-up to the site)
- Be careful not to place ads on top of your site or content
- By no means do I want to convey that I recommend for the mother to be inactive when the ad is not loaded.
Dynamic content
Avoid uploading content while content is running. For example, many sites will send you a pop-up after you stay on their site for a few minutes and read the content. If this is not done carefully, it can easily undermine the user experience and the CLS of your site as well.
These popes usually fall into the following categories:
- Newsletter subscription pops
- Suggest related content
- Software installation (website application)
- Etc
Web fonts that cause FOIT or FOUT
To avoid this problem, I recommend using rel = “preload” in the web font download link.