เจาะลึก LCP, FID และ CLS

Welcome to a deeper look into the Core Web Vitals! These metrics are crucial for understanding and improving your website's user experience.

In this lesson, we'll analyze Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS). You'll learn what each measures, why they matter, and practical techniques to optimize them.

Largest Contentful Paint (LCP) measures the time it takes for the largest content element visible within the viewport to render. Think of it as how quickly a user sees the main content of your page.

• A good LCP score is 2.5 seconds or less.
• Anything above 4 seconds is considered poor.

LCP is a key indicator of your page's perceived loading speed.

Not all elements contribute to LCP. Typically, the largest image or text block that's visible when the page first loads is the LCP element. Common LCP elements include:

• <img> elements
• <video> elements (using their poster image)
• Elements with a background image loaded via url()
• Block-level text elements containing text nodes (e.g., <h1>, <p>)

Knowing your LCP element is the first step to optimizing it!

A major factor for LCP is how quickly your browser can fetch and render critical resources, especially images and fonts. Here's a common strategy:

• Preload critical images: Use <link rel="preload"> to tell the browser to fetch high-priority resources sooner.
• Optimize images: Compress, use modern formats (WebP, AVIF), and responsive images.
• Minimize render-blocking resources: Reduce or defer CSS and JavaScript that prevent the page from rendering quickly.

Let's see an example of preloading a hero image:

First Input Delay (FID) measures the time from when a user first interacts with a page (e.g., clicks a button, taps a link) to when the browser is actually able to begin processing that interaction.

It's about responsiveness and how quickly your page reacts to user input. It doesn't measure the event handler execution time, only the delay before it can start.

• A good FID score is 100 milliseconds or less.
• Anything above 300 milliseconds is considered poor.

A high FID often means the browser's main thread is busy doing other work, typically executing JavaScript, and can't respond to user input immediately.

Common causes include:

• Long JavaScript tasks: Heavy scripts that run for an extended period, blocking the main thread.
• Large JavaScript bundles: More code means more time to parse, compile, and execute.
• Third-party scripts: Ads, analytics, or other external scripts can consume significant main thread time.

To improve FID, you need to reduce the amount of time the main thread is blocked. Here's how:

• Break up long tasks: Divide large JavaScript operations into smaller, asynchronous chunks.
• Defer or async non-critical JS: Use defer or async attributes for scripts that aren't essential for initial rendering.
• Reduce JavaScript payload: Minify, tree-shake, and code-split your JavaScript bundles.
• Use Web Workers: Offload computationally intensive tasks to a background thread, keeping the main thread free.

Cumulative Layout Shift (CLS) measures the visual stability of a page. It quantifies how much unexpected layout shifts occur during the page's lifespan.

An unexpected shift happens when a visible element changes its start position from one rendered frame to the next. This can be very frustrating for users!

• A good CLS score is 0.1 or less.
• Anything above 0.25 is considered poor.

Layout shifts often happen when content loads or changes dynamically without reserving space. Key culprits include:

• Images or videos without dimensions: The browser doesn't know how much space to reserve until the media loads.
• Dynamically injected content: Ads, banners, or widgets that appear after the page has started rendering.
• Web Fonts causing FOIT/FOUT: Fonts loading late can cause text to reflow or disappear/reappear.
• Actions waiting for a network response: Content that shifts after an API call completes.

Preventing CLS is all about reserving space and ensuring elements don't unexpectedly move. Here are some techniques:

• Specify image/video dimensions: Always use width and height attributes, or CSS aspect-ratio.
• Reserve space for ads/embeds: Use CSS min-height or a placeholder element.
• Avoid inserting content above existing content: Especially after initial page render.
• Preload fonts & use font-display: Use font-display: optional or swap to manage font loading behavior.

Here's an example of how setting image dimensions prevents CLS:

Let's test your understanding of Core Web Vitals and their optimization techniques.

You've successfully dived deep into the Core Web Vitals!

• LCP (Largest Contentful Paint): Measures perceived load speed, focusing on the largest content element. Optimize by preloading, optimizing images, and reducing server response time.
• FID (First Input Delay): Measures interactivity, focusing on the delay before the browser responds to user input. Optimize by minimizing and breaking up JavaScript tasks.
• CLS (Cumulative Layout Shift): Measures visual stability. Optimize by reserving space for dynamic content, specifying image dimensions, and managing font loading.

By understanding and improving these metrics, you contribute to a much better user experience!