daily notes

Core Web Vitals

Modern websites are built using a mix of HTML, CSS, and JavaScript. For optimal performance, browsers and search engines favor pages that render quickly with minimal blocking.

• HTML + CSS → fast initial rendering
• JavaScript → adds interactivity but can delay rendering if not optimized

The key challenge is balancing interactivity with performance.

Render-blocking resources (especially large CSS and synchronous JavaScript) delay:

• Parsing
• Execution
• First paint

Therefore, optimization focuses on:

• Reducing resource size
• Eliminating unnecessary work
• Prioritizing critical content

Why Core Web Vitals Matter

Core Web Vitals (CWV) are ranking signals used by Google to measure real-world user experience.

Benefits of good CWV scores:

• Higher search rankings
• Better user experience
• Increased organic traffic
• Higher conversion rates

Timeline:

• May 2020 → Announcement
• May 2021 → Ranking factor rollout
• May 2023 → INP replaces FID

Key Metrics

Largest Contentful Paint (LCP) — Loading Performance

Measures how quickly the main content becomes visible.

Target: ≤ 2.5 seconds

Common causes of poor LCP:

• Slow server response
• Large images/videos
• Render-blocking CSS/JS

Optimization techniques:

• Optimize images
• Use CDN
• Inline critical CSS
• Defer non-critical JS

Example: Preloading LCP image

<link rel="preload" as="image" href="/images/hero.webp">
<img src="/images/hero.webp" alt="Hero Image" loading="eager">

Interaction to Next Paint (INP) — Interactivity

Measures responsiveness to user interactions (clicks, taps, inputs).

Target: ≤ 200 ms

Replaced FID because it measures overall responsiveness, not just first interaction.

Common causes of poor INP:

• Heavy JavaScript execution
• Long main-thread tasks
• Event handler delays

Optimization techniques:

• Break long tasks
• Use requestIdleCallback
• Optimize event handlers

Example: Breaking long tasks

function heavyTask(items) {
  let index = 0;

  function processChunk() {
    const chunkSize = 50;
    const end = Math.min(index + chunkSize, items.length);

    for (; index < end; index++) {
      processItem(items[index]);
    }

    if (index < items.length) {
      requestAnimationFrame(processChunk);
    }
  }

  processChunk();
}

Cumulative Layout Shift (CLS) — Visual Stability

Measures unexpected layout shifts during page load.

Target: ≤ 0.1

Common causes:

• Images without dimensions
• Ads or embeds loading late
• Dynamic DOM updates

Optimization techniques:

• Reserve space for elements
• Avoid injecting content above existing content
• Use CSS aspect-ratio

Example: Prevent layout shift

<img 
  src="/images/banner.webp" 
  width="1200" 
  height="600" 
  alt="Banner">

Or using CSS:

.image-container {
  aspect-ratio: 2 / 1;
}

Supporting Metrics

Reducing Render-Blocking Resources

CSS Optimization

• Inline critical CSS
• Load non-critical CSS asynchronously

<link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>

JavaScript Optimization

• Use defer or async
• Remove unused JS
• Split bundles

<script src="app.js" defer></script>
<script src="analytics.js" async></script>

Reduce DOM Size

Large DOM trees slow rendering.

// Bad: Excessive nesting
<div><div><div><div>Content</div></div></div></div>

// Better: Flatten structure
<div class="content">Content</div>

Lazy Loading

Load resources only when needed.

<img src="image.webp" loading="lazy" alt="Lazy image">
<iframe src="video.html" loading="lazy"></iframe>

Font Optimization

Fonts can block rendering if not handled properly.

@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/font.woff2') format('woff2');
  font-display: swap;
}

Tools for Measurement

• Page Speed Insights (PSI)
• Lighthouse
• Chrome DevTools
• Web Vitals extension

Best Practices Summary

• Minimize render-blocking resources
• Optimize images and media
• Defer non-critical JavaScript
• Use efficient CSS delivery
• Reduce main-thread work
• Prevent layout shifts
• Monitor performance continuously

10. Glossary