DEV Community

Cover image for Reduce the page execution time
Ravi Vishwakarma
Ravi Vishwakarma

Posted on

Reduce the page execution time

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Your Awesome Page</title>

  <!-- Preconnects for performance -->
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

  <!-- Inline Critical CSS -->
  <style>
    /* 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;
    }
  </style>

  <!-- Load fonts properly -->
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet" />

  <!-- Defer non-critical CSS -->
  <link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'" />
  <noscript><link rel="stylesheet" href="styles.css" /></noscript>

  <!-- Important: Avoid large JS in <head> -->
</head>
<body>

  <h1>Hello, Web Vitals!</h1>
  <button id="btn">Click Me</button>

  <!-- Minimal Critical JS (inlined) -->
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      document.getElementById('btn').addEventListener('click', () => {
        alert('Hi there!');
      });
    });
  </script>

  <!-- Async/defer all non-critical JS -->
  <script src="main.js" defer></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

CSS: Optimize, Minify & Use Only What’s Needed

  1. Extract Critical CSS and inline it (manually or with tools like critical)
  2. Load the rest asynchronously (media="print" trick)
  3. Avoid unused styles (Lighthouse can show you these)
  4. Use :where() or :is() instead of long selector chains (faster parsing)

JavaScript: Split, Defer, and Delay

  1. Inline only critical JS
  2. Use defer for everything else
  3. Use code splitting (in frameworks like React, Vue, etc.)
  4. Avoid large JS bundles — aim for <150KB (gzipped) for initial load
  5. Lazy-load expensive features like charts, sliders, chat widgets

Fonts: Load Fast and Avoid Layout Shifts

  1. Use font-display: swap (default with Google Fonts)
  2. Preconnect to fonts.googleapis.com and fonts.gstatic.com
  3. 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

<img src="banner.jpg" loading="lazy" alt="Banner" width="600" height="400" />
Enter fullscreen mode Exit fullscreen mode
  1. Use loading="lazy"
  2. Add width and height attributes to prevent CLS (layout shift)
  3. Prefer WebP or AVIF
  4. 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 possible

Read More
Comprehensive Guide to Documentation Comments in C#
Understanding Strong Password Regex in C#: From Basic to Advanced

Thank You,
Keep coding

Top comments (0)