Getting to know what LCP, FID, and CLS are
Now Google has gradually implemented various new criteria to determine whether a website deserves to be in the top position or not. A series of important factors intentionally used by Google to determine the UX or User Experience on the website page.
Google Page Experience Update
This Google Page Experience update is a set of official factors used by Google to determine the position of a website on the search page. Considering Google uses core web vitals to determine the page experience, improving website performance is a step you must take.
3 Pillars of Page Experience
Basically, this page experience will affect the comfort and experience of visitors when accessing a website and will affect the website's ranking on Google search.
Google considers visitor experience far more meaningful than engaging content. However, it does not mean that content is not important to consider, as content quality also determines visitor comfort. Here are several pillars of page experience, including:
Website loading speed
Element response on the website
Stable layout.
What are LCP, FID, and CLS?
In core web vitals, there are indicators that need to be considered, such as:
LCP: Largest Contentful Paint
The LCP indicator is closely related to website speed. LCP is the time it takes for large elements on a website to load on a web page. Large elements in LCP are not only videos or images with large content, but also long texts.
With LCP, Google will evaluate web performance when visitors access the website. The optimal website load is considered to be a maximum of 2.5 seconds since visitors first access the website.
This is done to provide a good experience to visitors. From PageSpeed Insight, you can see what elements are hindering LCP. There are several optimizations that can be done to improve LCP scores, such as:
Improving web loading time
To achieve fast load time, you can use CDN, and choose the server location that suits the majority of your website visitors.
Optimizing file size
File size optimization on the website can be done by compressing image files and other formats.
Reducing text size
In addition to the above, you can optimize file with text formats like CSS, HTML, and JavaScript to use lighter compression like Brotli and GZIP.
FID: First Input Delay
Next is FID. FID is an indicator that will assess the interaction speed between visitors and elements on your website.
FID will work by scoring when visitors access a web page. For example, clicking a link, opening a photo, and more. FID will assess the response speed on the first click by visitors, not from zooming and scrolling.
The ideal FID value is less than 100 milliseconds to maintain visitor experience. If the web response is slow, it will reduce the quality of visitor experience.
Generally, poor FID is caused by browsers loading large scripts, so they cannot execute commands given by users immediately. When the website is creating a script, other commands will enter a queue to be executed.
To improve FID, you can optimize JavaScript files. If there are no efficiently structured JavaScript files, the FID score cannot reach 100 milliseconds.
To find out which JavaScript files need to be optimized for performance, you can search for the "eliminate render-blocking resources" column on the Page Speed Insight page.
CLS: Cumulative Layout Shift
CLS will assess the stability of website content such as ad images, layouts, and articles. CLS will evaluate whether there are unexpected shifts on the website during the loading process.
This indicator is used to measure changes that occur on the website when accessed. CLS measurement for layout changes is 0.1 seconds after the input made by visitors.
Imagine if you access a website and there are moving images or when loading, there are shifting images, it will definitely reduce comfort. To improve CLS, here are things you can do:
Set image dimensions
Media and images without specified dimensions can cause other elements to move when the website loading time is running. Therefore, make sure you set image dimensions properly.
Determine a specific space for ads
If the ad display keeps changing, it can interrupt other elements. Not only that, inconsistent ad displays can also reduce UX or User Experience.
Adjust embed spaces
If you embed large files, there is a possibility that other elements will be inside first. This can cause the visual page to be less stable.
Enable preload
In addition to the above steps, you can also speed up font downloads by using the font loading API and enabling the preload feature. This will make text display more consistent.
Tools for Analyzing Core Web Vitals Performance
After understanding parts of core web vitals, another interesting thing to discuss is how to check the performance of core web vitals. To analyze core web vitals, here are some tools that can be used, including:
Google Search Console
Actually, to make a website recognized by Google and eventually appear on the search page, you must first register the website in Google Search Console. This tool can be used to check core web vitals indicators.
To register a website in Google Search Console, here are the steps you can take:
Verify from cPanel
Login through domainname/cpanel
Click editor, then click manage on the domain to be set
Create txt record
PageSpeed Insight
Another way to check is through PageSpeed Insight. This tool will be used to check the scores of core web vitals. This tool can report core web vitals on mobile and desktop devices. Here are the steps:
Access PageSpeed Insights
Enter the domain name in the column
Click Analyze
The analysis results will appear
Although you have learned how to analyze core web vitals and some details within it, implementing various things above is certainly not as easy as imagined.
Especially if you have no prior experience, there will definitely be difficulties. To overcome this, you can entrust it to WEBARQ. With 10 years of experience in website development, security, and content, WEBARQ will help you manage your website effectively.
Moreover, WEBARQ has been managing websites for several large companies until now. So, what are you waiting for? Follow the success of those big websites with WEBARQ now.
