HTML Performance

🌐 HTML5 🟢 Chapter 36 of 37 📂 Phase 13: Responsive & Production 📅 2026 Edition

📌 Covered in this chapter: Script Loading (defer vs async) · Resource Hints (preload, preconnect, dns-prefetch) · Lazy Loading (loading="lazy") · DOM Size Reduction · Core Web Vitals (LCP, CLS, INP)

Welcome to Phase 13 (Chapter 36): HTML Performance! Optimize page loading speed, script execution, and Core Web Vitals (LCP, CLS, INP).

1Resource Hints & Non-blocking Script Loading

HTML — Resource Hints & Defer ▶ Run in HTML Editor

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preload" href="/banner.webp" as="image" type="image/webp">
  <script src="app.js" defer></script>
</head>

Written by Our Compiler Technical Editorial Team
Reviewed for accuracy & tested on HTML5 Standards · Last updated August 2026