Eliminate render-blocking resources
SkillMediaRender-blocking is a skill for auditing slow page loads caused by resources that stop the browser from painting anything on screen. It guides an AI agent through verifying the actual bottleneck in DevTools, Lighthouse, or field data, then identifying and fixing CSS and JavaScript that delay the first render.
Available today. Use it from your connected AI after setup.
No other account needed.
Have an agent environment that can load skills, and access to the page or codebase you want to audit.
Then ask your AI: use the Eliminate render-blocking resources skill
What your AI can do with it
- Identify CSS and JavaScript files that block the initial render of a page
- Verify the actual bottleneck using DevTools, Lighthouse, or field data before recommending
- Recommend loading strategies using defer, async, media queries, or inlined critical CSS
- Flag @import usage in CSS that creates serial request chains
- Explain how render-blocking resources impact First Contentful Paint (FCP)
- Review routes, assets, and loading behavior and flag exact files or requests adding cost
Getting started
- Have an agent environment that can load skills, and access to the page or codebase you want to audit.
- Add the render-blocking skill to the agent's available skills.
- Ask the agent to audit a page for slow loads, heavy assets, or rendering delays.
- Provide or point the agent to measurement data from DevTools, Lighthouse, or field data so it can verify the bottleneck.
- Review the agent's findings, which should name exact files, requests, or rendering steps and the measurement method used.
What this skill tells your AI
The instructions your AI receives, as published by thedaviddias/front-end-checklist in skills/render-blocking/SKILL.md and read by ahel’s review.
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
@importin 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/en/rules/performance/render-blocking
Signals
- GitHub stars
- 74k
- Forks
- 7k
- Last commit
- Aug 2026
Questions
- When should this skill be used?
- Use it when auditing slow page loads, heavy assets, or rendering delays related to eliminating render-blocking resources.
- Does it fix the problem automatically?
- No. It verifies the actual bottleneck first, then recommends fixes such as defer, async, media queries, or inlining critical styles. Code changes are applied by the person or agent working on the project.
Advanced
- Item type
- skill
- Key
render-blocking- Source
- github.com/thedaviddias/front-end-checklist