To Optimize Google page experience, the main part need to work out is Core Web Vitals, it is further sub-divided into three categories namely, Largest Contentful Paint1, Cumulative Layout Shift 2, and Total Blocking Time3.
Here we will learn how to improve Largest Contentful Paint (LCP) Score. This score measures the time duration to live the first fold of the webpage. Time consumed for loading the most of the content is also evaluated as LCP Score.
According to Google, Largest Contentful Paint (LCP) Score less than 2.5 second is good, 2.5 to 4 second is ok ok (Needs Improvement) and above 4 is poor.
Plan the first fold of the page.
Try to avoid large images, Slide Show, Animation, Hosting videos in the first fold of the page, if Image is required put small image (only required pixel size) and also keep the text optimized. Put the image in Webp format, to minimize the size.
Do not use element containing Java Script or CSS in first fold of the page. Such required element should be served below the first fold of the page. So that user may view your content without any effect to LCP Score.
Font
Try to avoid large images, Slide Show, Animation, Hosting videos in the first fold of the page, if Image is required put small image (only required pixel size) and also keep the text optimized. Put the image in Webp format, to minimize the size.
Do not use element containing Java Script or CSS in first fold of the page. Such required element should be served below the first fold of the page. So that user may view your content without any effect to LCP Score.
It is also one of the issues with latest font which may not available with the user; while loading the content it also required to load the font which will affect the Largest Contentful Paint (LCP) score.
To overcome with it, every mobile/ system have their own font, use the font of that mobile till the font is being downloaded and after that swap the font. To use this technique, it is required to add the following code (Font-display: swap) in CSS file where the font is declared and you are done.
@font-face {
Font-family: “open Sans Regular”;
Font-size 14 px;
Font-display: swap;
}
In case of WordPress: Install the plugin - Swap Google Font display
Hover the mouse on plugin and click on add new plugin, one box will be appear and search for “swap google font display” (Screenshot is shared for easy reference). Install the plugin and activate it, problem will be rectified.
Apart from above mentioned techniques followings can be adopted to enhance the LCP Score below 2.5 second
1. Upgrade the Hosting
The amount of time it takes for a user’s browser to load the first byte of material on your website is called the server response time, or time to first byte (TTFB). Your LCP score will be impacted by page loading delays caused by slow server response times.
Your hosting provider, themes, and plugins can all affect how quickly your server responds.
Better hosting can improve the speed of website. Here budget is also a factor.
2. Use a content delivery network (CDN)
Using a content delivery network (CDN) is another efficient technique to raise WordPress’ Largest Contentful Paint score. This is a dispersed network of servers located in various places.
When you use a content delivery network (CDN), the server that is closest to your visitors’ location will serve cached versions of your material to them. Users will be able to access your site more quickly this way.
A CDN also lessens the strain on your hosting server. This can speed up your website even further.
A CDN is already helpful if you’re utilizing Optimole to load your images. To further enhance LCP, though, you could also wish to employ a CDN for your other static assets.
3. Eliminate render-blocking resources
The amount of time it takes for a user’s browser to load the first byte of material on your website is called the server response time, or time to first byte (TTFB). Your LCP score will be impacted by page loading delays caused by slow server response times.
Your hosting provider, themes, and plugins can all affect how quickly your server responds.
Better hosting can improve the speed of website. Here budget is also a factor.
HTML, CSS, and JavaScript files that render content on your website more slowly are known as render-blocking resources. Consequently, these components lengthen the time it takes for your page to load, which lowers your LCP score.
Eliminating render-blocking items or making them execute after everything else has loaded will fix this loading issue. Luckily, it’s not as difficult as it sounds to accomplish this.
Under CSS files, enable the following:
- Optimize CSS delivery > Remove unused CSS
Under JavaScript files, enable the following:
- Load JS deferred
- Delay JavaScript execution
You may also browse the Indexing techniques by clicking Here
