Unlike earlier times SEO was link-based it still is so but many factors now govern on-page optimization. It is user-friendliness that counts the most. UX-optimized websites now rank higher in SERPs or search engine result pages.
User Experience
Google now accords great importance to UX to keep the visitors engaged and be active on the site. This simply means that the visitor is pleased by the results on the SERPs and his pain points are being solved. Like a good library that keeps the best books in the front search engines too want the best website on the top. The searcher should not end up disgusted by the result the search companies strive hard to retrieve the most relevant websites to rank higher. They are constantly upgrading and refining their algorithms such that the best remains on the top.
Web Core Vitals
Thus web core vitals that Google announced are vital for user experience. These are metrics that are meant to measure elements and check if they are within the parameters that make the site download fast, are stable, and get quick responses from the server. The main metrics that are taken into account are:
LCP (Largest Contentful Paint)
FCP (First Contentful Paint)
CLS (Cumulative Shift)
TBT (Total Blocking Scripts)
TTFB (Time to First Bite)
There are more metrics that I have not mentioned here since this article focuses on LCP.
Largest Content Paintful
Large blocks of text or images are considered as Largest Contentful Paint or LCP. If these images are not properly sized or compressed can slow down the page. Also known as hero images usually placed in the header they should be regularly checked to find out if they are affecting the download.
The metrics LCP measures how quickly the website loads the faster the better. For the whole page to be seen that large block of text and images should download fast. The ideal LCP download time is under 2.5 seconds. Google takes into account the data from real Chrome users and whether the sites reach the benchmark.
How to Improve LCP
To improve on LCP you need to make sure that the HTML responsible for LCP appears quickly. There should be no delay in rendering the HTML.
In the case of a hero image, you should compress the file size and mention the dimensions. You should use coding to mention height and length. You should get rid of old or outdated image formats. Check for blocking resources and use simple fonts that do not require much time to download and are easy to read, especially on mobiles.
Some resources that impact LCP negatively are:
Render-blocking resources.
Unoptimized Images.
Old photo formats.
Unoptimized Fonts.
Browser download a lot of coding and if they are render blocking they will impact LCP negatively. The major coding responsible for render-blocking is CSS and JavaScript. This coding delay not only LCP but also First Content Paintful. Unnecessary CSS and JavaScript should be removed for further improvement. Use compression or minify the resources for more improvement.
As the server begins to serve the request the browser does not know the priorities of the images that are nested in coding. Thus, we should use fetchpriority attribute on images.
<img src=”photo.jpg” fetchpriority=”high”>
In the absence of the above code, browsers may load LCP late.
The file size of high-resolution images can impact download negatively. Compress the images and use modern formats like WebP and AVIF.
Fonts on any block of text or heading besides the Hero image can slow down the website. You can preload these by using the following code or hint
<link rel=”prefetch” href=”/public/app.08343a72.js” as=”script”>
There 3 types of resource hints
Preload
Prefetch
Preconnect
The preload hint informs the browser of extra URLs that have to be downloaded or preloaded. For instance, both the background image and CSS file should be downloaded together. Example of preload tag:
<link rel=”preload” href=”/public/home.js” as=”script”>
Thus preload content is required for the initial rendering of the page.
Prefetch hints are needed when the user navigates to the next page. They are also needed when the user starts interacting with the webpage.
Preconnect establishes a server connection. This is done without loading the web page yet.