Alright, you're aiming for top-notch Core Web Vitals — crisp, smooth, fast-loading webpages that make Lighthouse go “WOW” and Google rank you like royalty 👑. Let’s break down the best practices to write HTML, CSS, JS, fonts, etc. that give you green scores across all Web Vitals:

HTML: Keep it Clean, Semantic & Lightweight

Your Awesome Page

  
  
  

  
  
    /* Only critical styles here (for above-the-fold content) */
    body {
      font-family: 'Inter', sans-serif;
      margin: 0;
      padding: 0;
      background: #fff;
      color: #333;
    }
    h1 {
      font-size: 2rem;
      text-align: center;
      margin-top: 2rem;
    }
  

  
  

  
  
  

  



  Hello, Web Vitals!
  Click Me

  
  
    document.addEventListener('DOMContentLoaded', () => {
      document.getElementById('btn').addEventListener('click', () => {
        alert('Hi there!');
      });
    });
  

  
  






    Enter fullscreen mode
    


    Exit fullscreen mode
    




CSS: Optimize, Minify & Use Only What’s Needed
Extract Critical CSS and inline it (manually or with tools like critical)
Load the rest asynchronously (media="print" trick)
Avoid unused styles (Lighthouse can show you these)
Use :where() or :is() instead of long selector chains (faster parsing)
JavaScript: Split, Defer, and Delay
Inline only critical JS
Use defer for everything else
Use code splitting (in frameworks like React, Vue, etc.)
Avoid large JS bundles — aim for <150KB (gzipped) for initial load
Lazy-load expensive features like charts, sliders, chat widgets
Fonts: Load Fast and Avoid Layout Shifts
Use font-display: swap (default with Google Fonts)
Preconnect to fonts.googleapis.com and fonts.gstatic.com

Prefer system fonts for super-fast load (optional)


@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');



    Enter fullscreen mode
    


    Exit fullscreen mode
    




OR use:

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;



    Enter fullscreen mode
    


    Exit fullscreen mode
    




Images: Compress, Lazy Load, Responsive





    Enter fullscreen mode
    


    Exit fullscreen mode
    





Use loading="lazy"

Add width and height attributes to prevent CLS (layout shift)
Prefer WebP or AVIF

Use srcsetfor responsive images if needed
Core Web Vitals Targets (What You’re Chasing)
Metric                          Goal
LCP (Largest Contentful Paint)  < 2.5s
FID (First Input Delay)         < 100ms
CLS (Cumulative Layout Shift)   < 0.1
TTI (Time to Interactive)   As fast as possibleRead More
Comprehensive Guide to Documentation Comments in C#
Understanding Strong Password Regex in C#: From Basic to AdvancedThank You,
Keep coding