Class 28 - Core Web Vitals Part 2 | Website Speed Optimization
|Free Advanced SEO Course With Notes

Watch the Full Video : Core Web Vitals Part 2 | Website Speed Optimization

Fix LCP(Largest Contentful Paint)

The LCP process should happen within <2.5 seconds, but this is incorrect because how is it possible within that time? Because the complete LCP process has 4 steps, and in LCP, most of the issues are with images, so the process is this.

TTFB(Time to First Byte): Basically, this is the time when your website’s server starts thinking. TTFB is the time that your server takes to think. As soon as the user’s request arrives, the server starts thinking about what it has to do with that request.
Resource Load Delay: Resource load delay means how much time your server takes to find that file.
Resource Load Duration: Resource load duration means how much time the server actually takes to download the image.
Element Render Delay: Element render delay means how much time the browser takes to display the image after the image has been downloaded.

Reduce the size of the image (Pixels, Bytes)
Changing the file format from PNG, JPG, BMP, TIFF -> WebP, AVIF

Solution for Image LCP Issue:

TTFB(Time to First Byte): It is possible that your server generates the file again and again for every request, which means there is no caching! The solution is that

“Enable Caching” at the page level or Server Level
Fast Database, database ki speed increase karo
Use CDN

Resource Load Delay: Do not use Lazy Loading. It is useful, but you should never add lazy loading to the Above the Fold part.

Use images via HTML instead of JS or CSS background image (In WordPress, in Elementor, there will be an option for the background image in the Style section.)
Use the priority tag

Resource Load Duration:

Reduce the size of the image (Pixels, Bytes)
Change the file format from PNG, JPG, BMP, TIFF -> WebP, AVIF

Element Render Delay: Easy structure of the website

Solution for Text LCP Issue:

When there is an LCP issue in text, then 2 issues automatically become 0: ‘Resource Load Duration’ because there is nothing to download.

TTFB(Time to First Byte):

Resource Load Delay: Find the font-face rule. (Time to find the font rule in CSS)

Resource Load Duration: Almost zero because even here, something still has to be done.

Element Render Delay: And the most important thing is render-blocking resources. (Other rules that stop the text from rendering)

If there is a text issue in LCP, then it means that you have used a font that is not available on the user’s mobile, so it will take time to download. So, you should use such fonts on the website that are easily available on all devices.

1. Use system fonts
2. Preload custom fonts (Download your custom font first) <link  rel="preload" href="/fonts/Poppins-Regular.woff2" as="font" type="font/woff2" crossorigin="anonymous">
3. Use Swap (You can set the minimum height of the font section, or load another font at load time and then show this one.)

CLS: (Cumulative Layout Shift)

Whenever any large element shifts on your website, then your website’s CLS score will increase.

CLS = IF x DF
IF = Impact Fraction
DF = Distance Fraction

IF = 600/1000 = 0.6
DF = 500/1000 = 0.5
CLS = 0.6 x 0.5 = 0.300

IF = 800/1000 = 0.8
DF = 500/1000 = 0.5
CLS = 0.8 x 0.5 = 0.4

To solve CLS, the easiest way is to set the minimum height.

Fix the dimensions of the images
Set min height for dynamic elements
Set min height for ad spaces
Use system fonts or common fonts | Avoid Swap of fonts

INP: Interaction to Next Paint

Input Delay: The time that it takes after clicking and releasing any element. (Minimize background processes)
Processing Duration: After releasing the click, the time it takes for the process of what to show, how to show it, and where to show which element. (Keep the scripts or files optimized)
Presentation Delay: After all the data is available, the time it takes to show it to the user (Keep a simple structure or DOM)