Critical rendering path

Summary

HTML → DOM, CSS → CSSOM, combined render tree → layout → paint → composite. Render-blocking CSS/JS delays first paint; @import and sync scripts in <head> extend the path. Identify what blocks LCP element discovery (fonts, hero image, lazy hydration). Inline critical CSS; defer/async non-critical JS.

Code example

<head>
  <link rel="stylesheet" href="/critical.css" />
  <link rel="preload" href="/hero.webp" as="image" fetchpriority="high" />
  <script src="/app.js" defer></script>
</head>

Key points

• HTML → DOM, CSS → CSSOM, combined render tree → layout → paint → composite.
• Render-blocking CSS/JS delays first paint; @import and sync scripts in <head> extend the path.
• Identify what blocks LCP element discovery (fonts, hero image, lazy hydration).
• Inline critical CSS; defer/async non-critical JS.

Further reading

• Critical rendering path
• Render blocking CSS

Related concepts

• Event loop (macro vs microtasks)
• Code splitting strategies