Web Performance Optimization & Lighthouse · Lesson

Prioritizing Content for Speed

Implement techniques like `async`, `defer`, and resource hints to prioritize critical content and improve perceived performance.

Why Prioritize Content?

When a browser loads a webpage, it follows a sequence of steps to render content. This is often called the Critical Rendering Path (CRP).

Optimizing the CRP means delivering the most important content to the user as quickly as possible. This improves perceived performance – how fast a user *feels* the page is loading.

Blocking Scripts Slow Down

By default, when the browser encounters a <script> tag, it pauses parsing the HTML, fetches the script, executes it, and then resumes parsing. This is called a render-blocking script.

This can significantly delay how quickly users see content, especially if the script is large or on a slow network.

<html>
<head>
  <title>Blocking Script</title>
  <script>
    // This script blocks HTML parsing
    console.log("Blocking script started.");
    // Simulate a long task
    let start = performance.now();
    while (performance.now() - start < 700) { /* busy wait */ }
    console.log("Blocking script finished.");
  </script>
</head>
<body>
  <h1>Page Content</h1>
  <p>This content appears <b>after</b> the script finishes.</p>
</body>
</html>

All lessons in this course

← Back to Web Performance Optimization & Lighthouse