Implement lazy loading for offscreen content
SkillMediaLazy-loading is a skill for auditing slow page loads and heavy assets. It helps diagnose whether images and other offscreen content actually need lazy loading before changing code, checking the real bottleneck in DevTools, Lighthouse, or field data rather than assuming that missing loading='lazy' is the problem.
Available today. Use it from your connected AI after setup.
No other account needed.
Have an AI agent that can load skills.
Then ask your AI: use the Implement lazy loading for offscreen content skill
What your AI can do with it
- Audit slow page loads, heavy assets, and rendering delays
- Verify the actual bottleneck in DevTools, Lighthouse, or field data
- Assess whether offscreen content needs lazy loading before recommending changes
- Evaluate fold position to judge if absence of loading='lazy' matters
Getting started
- Have an AI agent that can load skills.
- Add the lazy-loading skill to the agent's available skills.
- Provide the page or site data to audit, such as DevTools traces, Lighthouse reports, or field data.
- Ask the agent to diagnose whether offscreen content needs lazy loading before making code changes.
What this skill tells your AI
The instructions your AI receives, as published by thedaviddias/front-end-checklist in skills/lazy-loading/SKILL.md and read by ahel’s review.
Lazy loading defers non-critical resources until needed—this reduces initial page weight, speeds up first paint, and saves bandwidth for content users may never scroll to.
Quick Reference
- Use loading='lazy' for images below the fold
- Never lazy load LCP/above-fold images—they need priority
- Lazy load iframes, videos, and heavy components
- Use Intersection Observer for custom lazy loading
- If fold position is unclear from the snippet, do not invent a lazy-loading defect
Check
Verify that images and other heavy resources below the fold are lazy loaded. Only report this when the code or route context makes offscreen placement clear.
Fix
Implement lazy loading for images, videos, and iframes using native loading='lazy' or JavaScript solutions.
Explain
Explain how lazy loading defers resource loading until needed, improving initial page load performance.
Code Review
Review the routes, assets, and loading behavior that affect Implement lazy loading for offscreen content. 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/lazy-loading
Signals
- GitHub stars
- 74k
- Forks
- 7k
- Last commit
- Aug 2026
Questions
- Is absence of loading='lazy' enough to recommend a change?
- No. Absence of loading='lazy' is not enough by itself when fold position is unknown. The skill verifies the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes.
- What tools does it use to verify bottlenecks?
- It checks the actual bottleneck using DevTools, Lighthouse, or field data before recommending any changes.
- When should this skill be used?
- Use it when auditing slow page loads, heavy assets, or rendering delays related to lazy loading for offscreen content.
Advanced
- Item type
- skill
- Key
lazy-loading- Source
- github.com/thedaviddias/front-end-checklist