# Eliminate render-blocking resources: what it means and how to fix it **Audit ID:** `render-blocking-resources` · **Category:** Performance The browser can't render anything until it finishes downloading and parsing every render-blocking CSS and synchronous JS in the ``. Each blocking resource adds latency to FCP and LCP. ## TL;DR - **What:** CSS and synchronous ` ``` Rule of thumb: - **`defer`** for scripts that need DOM access and depend on each other (your app code) - **`async`** for independent scripts that don't depend on order (analytics, error tracking) - **Move below ``** if you can't use either, old-school but still works ### 4. Load fonts strategically Web fonts are a common silent render-blocker. Best practice: ```html ``` Or self-host fonts and use `font-display: swap` so text renders with a fallback font immediately. ## Common mistakes - **Inlining the entire stylesheet.** That gives you all of it on every page even if 90% is unused. Inline only critical (~5–10 KB). - **Defer-loading critical CSS.** If your above-the-fold renders unstyled (FOUC), critical CSS isn't inlined, fix that first. - **Forgetting `