Skip to content
Get packs

fetchpriority Attribute Guide

Guides the agent to add fetchpriority hints to images, preloads and fonts to improve LCP

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

What it does

Once installed, the agent can review web pages for loading performance and suggest or apply the HTML fetchpriority attribute. It flags the main above-the-fold image (the likely Largest Contentful Paint element) and recommends marking it high priority, while marking below-the-fold images such as carousels as low priority. It explains how browsers order resource downloads and how these hints change that order.

Great for

  • Front-end developers tuning Core Web Vitals and page load speed
  • Designers or site owners who want a quick performance review of a page's hero image
  • Teams reviewing HTML for render-blocking or resource contention issues

Skip it if

  • Projects that do not serve web pages, since the guidance is specific to browser HTML (no benefit to backends or apps)
  • Treating the quoted 5–30% LCP improvement as guaranteed: the skill states it as a claim from real-world tests without linking the data, and results depend on the page
  • Blindly applying high priority to many resources, which the skill itself warns defeats the purpose

Try asking

  • “Review this homepage HTML and check whether the hero image has fetchpriority set correctly”
  • “Add fetchpriority="high" to the LCP image and fetchpriority="low" to the carousel images below the fold”
  • “Explain how fetchpriority changes the browser's resource loading order for my landing page”
  • “Check my preload links for fonts and CSS and suggest where fetchpriority should be used”
Step-by-step guide: how to use fetchpriority Attribute GuideInstall, 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.

    fetchpriority-attribute.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip fetchpriority-attribute.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip fetchpriority-attribute.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 actual page HTML or the hero section so it can identify the real LCP candidate rather than guessing.
  • Ask it to verify the LCP element with a browser tool such as Lighthouse or DevTools, since the skill itself does not include measurement steps.
  • Keep high-priority hints to one or two resources per page, as the skill recommends, and re-measure after each change.

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.