Skip to content
Get packs

Critical Image Loading Review

Reviews hero and above-the-fold images so they load with high priority and improve LCP.

Source Download skill
Repository
thedaviddias/Front-End-Checklist
Stars
74,632
Licence
MIT
Files
2 files

What it does

This skill teaches an AI agent to review a website's images, markup, and build or CDN settings with one goal: making the most important image on a page (usually the hero or Largest Contentful Paint element) load first. When it runs, the agent checks which images appear before the user scrolls, suggests adding fetchpriority='high' or a preload hint, and flags lazy-loading on images that should load immediately. It also explains why this matters for Core Web Vitals and how to confirm the result in browser DevTools.

Great for

  • Front-end developers auditing page speed or Core Web Vitals scores
  • Teams reviewing a landing page or hero section before launch
  • Designers or SEO specialists who want a clear explanation of LCP and image loading

Skip it if

  • Sites with no image-heavy above-the-fold content, where the advice has little effect
  • Anyone expecting automatic changes without review: the skill is guidance for the agent, and edits to production code should be checked by a person
  • Image format or compression work alone, since this skill focuses on loading priority rather than file size optimisation

Try asking

  • “Review the homepage markup and tell me which images are above the fold and whether they should have fetchpriority='high'.”
  • “Check my hero section for lazy-loaded images that hurt LCP and suggest the fix.”
  • “Explain to my team why our LCP image needs a preload tag.”
  • “Audit our build and CDN image configuration for loading problems affecting the first screen.”
Step-by-step guide: how to use Critical Image Loading ReviewInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the MIT licence and an attribution note.

    critical-images.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip critical-images.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip critical-images.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Point the agent at the specific page or component files so it can name exact lines to change.
  • Ask it to explain how to verify results in Chrome DevTools (Performance panel or Lighthouse) before and after changes.
  • Read the referenced rule page for framework-specific examples, since the skill itself is brief.

What's inside

  • references/rule.md
  • SKILL.md

Redistributed unmodified from thedaviddias/Front-End-Checklist under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.