EngineeringScore
Performance Medium

Reduce render-blocking resources

Render-blocking resources are CSS and JS files the browser must download and process before it can paint anything on screen. A page can have a perfectly reasonable total size and still feel slow if too much of that weight sits in the critical path between the request and the first pixel appearing.

Why it matters

Render-blocking CSS and JS delay the moment visitors see anything on screen, making the site feel slow even when total page weight is reasonable.

How to fix

  1. 1 Inline critical above-the-fold CSS and load the rest asynchronously.
  2. 2 Add defer or async to non-critical script tags.

Common mistakes

  • Inlining so much CSS "to be safe" that the inlined block itself becomes large enough to delay first paint.
  • Adding defer or async to a script that actually needs to run before other scripts, breaking execution order and causing runtime errors.
  • Loading web fonts in a way that blocks text rendering entirely instead of using font-display: swap or preloading key fonts.

How to verify

  1. 1 Run the page through Lighthouse or WebPageTest and check the "render-blocking resources" and "first contentful paint" metrics.
  2. 2 Inspect the page's <head> for stylesheets and scripts without async/defer and confirm which ones are truly necessary before first paint.
  3. 3 Verify page functionality still works correctly after adding defer/async, since deferred scripts run in a different order than inline ones.

Related checks

Performance Slow NavigationPerformance Request Count

Ready to see where you stand?

Scan your site and get your Engineering Score with a prioritized roadmap in under a minute, no signup required.

Scan your site