The Critical Rendering Path is how browsers convert HTML, CSS, and JS into pixels on the screen.
To speed up page load, we need to minimize render-blocking resources and prioritize above-the-fold content.
Here's a basic HTML snippet that follows CRP best practices:
HTML1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 7 <!-- Critical CSS inline to speed up first paint --> 8 <style> 9 body { font-family: sans-serif; margin: 0; } 10 header { background: #222; color: white; padding: 1rem; } 11 </style> 12 13 <!-- Non-critical CSS loaded asynchronously --> 14 <link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'" /> 15 <noscript><link rel="stylesheet" href="styles.css" /></noscript> 16 17 <!-- JS deferred to not block rendering --> 18 <script defer src="main.js"></script> 19 20 <title>Fast Page</title> 21</head> 22<body> 23 <header>🚀 Fast & Optimized</header> 24 <main> 25 <p>Speed matters. Load only what’s needed—first.</p> 26 </main> 27</body> 28</html>
Keep the path to first paint light and fast!