How to eliminate render-blocking scripts and CSS

Before a browser can show anything, it has to download and run every normal script and stylesheet in the <head>. These are called render-blocking resources.

Why it matters

Each blocking file adds a network round trip before the first paint, which hurts First Contentful Paint and Largest Contentful Paint, especially on slow mobile connections.

Every extra script also costs download and processing time, which can make the page slow to respond to taps and clicks.

How to fix it

1. Add defer to scripts in <head> so they download in parallel and run after the HTML is parsed.
2. Use async for independent scripts such as analytics.
3. Combine small stylesheets, and inline the critical CSS for above-the-fold content if your build tool supports it.
4. Self-host web fonts instead of loading a third-party font stylesheet, and use font-display: swap.
5. Remove scripts and plugins you no longer use.

<script src="/js/app.js" defer></script>