How to use the fetchpriority Attribute Guide agent skill

What is an agent skill?

An agent skill is a folder containing a SKILL.md file and optional reference files. The file explains to an AI agent when a task applies and how to approach it. When your request matches the skill's description, the agent loads those instructions and follows them.

What does the fetchpriority-attribute skill make the agent do?

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, which is the likely Largest Contentful Paint element, and recommends marking it high priority. It marks below-the-fold images such as carousels as low priority. It also explains how browsers order resource downloads and how these hints change that order.

The skill's own guidance says browsers use heuristics to guess priority but cannot know which image is the LCP candidate, so the hint lets you supply that information.

• Flag the LCP candidate if it lacks fetchpriority="high"
• Flag carousel or below-the-fold images that lack fetchpriority="low"
• Check that high-priority preload links carry the attribute
• Explain how fetchpriority changes the browser's loading order

How do you install the fetchpriority-attribute skill?

Download the ZIP of the skill from the directory page. Unzip it so the fetchpriority-attribute folder sits in one of these locations:

For a personal install across projects, use ~/.claude/skills/. For a single project, use the .claude/skills/ folder inside that project.

In the Claude apps, you can instead upload the skill under Settings → Capabilities → Skills.

• Personal: ~/.claude/skills/fetchpriority-attribute/
• Project: .claude/skills/fetchpriority-attribute/
• Claude apps: Settings → Capabilities → Skills, then upload

How do you trigger the skill with natural requests?

You do not need a special command. The skill's description tells the agent to use it when you are optimising Largest Contentful Paint, reducing render-blocking resource contention, or fine-tuning resource loading order. Ask in those terms, and point the agent at the HTML you want reviewed.

Good requests name the page or file and the goal. Vague requests such as 'make it faster' may not match the skill's description as closely.

• Review index.html for LCP issues and tell me which image should get fetchpriority="high".
• Check this product page for render-blocking or resource contention problems.
• Which images on this landing page should be fetchpriority="low" because they are below the fold?
• Explain how fetchpriority would change the order the browser downloads my resources.

What does a typical review look like?

The skill's quick reference describes a short workflow. The agent checks whether the LCP image or hero element has fetchpriority="high" and whether any high-priority preload links are missing it. It then adds the attribute to the LCP image and to preloaded critical resources, and sets fetchpriority="low" on non-critical below-the-fold images. The reference notes that the LCP image is usually a hero image, often discovered late inside CSS or a JavaScript-rendered component.

The reference file also includes a code example for a hero image with width, height and fetchpriority="high", and a section on Next.js.

What does the skill need, and what are the safety notes?

The skill lists no requirements. It does not run scripts and does not use the network, so it works from the files you give it and the HTML in your project. Because it only reads and suggests HTML changes, review any edits the agent makes before deploying them.

Be careful with the claimed benefit. The skill states that adding fetchpriority="high" to the LCP image reduced LCP by 5–30% in real-world tests, but it does not link that data, and results depend on the page. Measure your own page before and after.

• Requires: nothing listed
• Runs scripts: no
• Uses network: no
• Files: SKILL.md and references/rule.md

What tips help you get the best results?

Mark only the true LCP element as high priority. The skill warns that marking many resources as high defeats the purpose. Keep the high-priority list to one or two resources where possible.

Give the agent the actual page HTML and say which element is above the fold. Ask it to explain its reasoning so you can check the decision against your layout.

• Keep high priority to one or two resources
• Use low priority for carousel and below-the-fold images
• Re-measure LCP after each change