render-blocking

What it does and when to use it

Use when auditing slow page loads, heavy assets, or rendering delays related to Eliminate render-blocking resources. Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes.

How it works

1. Quick Reference
2. Check
3. Fix
4. Explain
5. Code Review

---
name: render-blocking
description: "Use when auditing slow page loads, heavy assets, or rendering delays related to Eliminate render-blocking resources. Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes."
metadata:
  category: performance
  priority: medium
  difficulty: intermediate
  estimatedTime: "10"
  source: frontendchecklist.io
  url: https://frontendchecklist.io/rules/performance/render-blocking
---

# Eliminate render-blocking resources

Render-blocking resources prevent the browser from painting anything on the screen, leading to a "white screen" effect and poor user experience.

## Quick Reference

- Load non-critical CSS and JS asynchronously using `defer`, `async`, or media queries
- Inline critical CSS to allow the page to start rendering immediately
- Avoid `@import` in CSS as it creates serial request chains

## Check

Review the page's resources and identify any CSS or JavaScript files that are blocking the initial render of the page.

## Fix

Update the loading strategy for render-blocking resources by using `defer`, `async`, or inlining critical styles.

## Explain

Explain how render-blocking resources impact the First Contentful Paint (FCP) and how to resolve them.

## Code Review

Review the routes, assets, and loading behavior that affect Eliminate render-blocking resources. Flag exact files, requests, or rendering steps that add unnecessary network, CPU, or layout cost, and describe the measurement method used to confirm the issue.

---

For full implementation details, code examples, and framework-specific guidance,
see `references/rule.md`.

Rule page: https://frontendchecklist.io/rules/performance/render-blocking

Versions

The database has no other skills named render-blocking.

Database snapshot: 13.11.2026 · package version a5890d404d53 (SHA-256 digest of the entire package)

Downloads in the last 30 days: 0 · ranking

Report a problem with this skill: harmful content, incorrect descriptions or an author’s removal request.

Similar skills

• 100performance-resource-hints
  Use when auditing slow page loads, heavy assets, or rendering delays related to Use resource hints for faster loading. Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes.
• 100page-load-time
  Use when auditing slow page loads, heavy assets, or rendering delays related to Keep page load time under 3 seconds. Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes.
• 90devtools
  Frontend DevTools audit workflow — Lighthouse/CWV, a11y (axe), network/layout, when checks are MUST vs optional. Use for /test-ui deep passes, "audit performance", "cek Lighthouse", "axe", or verifying UI before ship with tooling evidence.
• 100update-trace-engine
  Build, validate, publish, and roll @paulirish/trace_engine from devtools-frontend into Lighthouse. Invoke when asked to update or roll the trace_engine package.
• 95web-perf
  Analyzes web performance using Chrome DevTools MCP. Measures Core Web Vitals (LCP, INP, CLS) and supplementary metrics (FCP, TBT, Speed Index), identifies render-blocking resources, network dependency chains, layout shifts, caching issues, and accessibility gaps. Use when asked…
• 100react-devtools
  React DevTools CLI for AI agents. Use when the user asks you to debug a React or React Native app at runtime, inspect component props/state/hooks, diagnose render performance, profile re-renders, find slow components, or understand why something re-renders. Triggers include "why…