A hero image with loading="lazy" next to a preload for the same file, a font preload without crossorigin that downloads the font twice, a link rel="preload" with no as value that the browser ignores: each one quietly costs your page its Largest Contentful Paint. So do images without width and height that make the text jump, a chat widget loaded synchronously in the head, and a 600 KB illustration nobody resized. This skill finds those and the other loading mistakes listed below before the page ships, and tells you how to fix each one.

Your agent runs a scanner on your HTML pages and templates (Liquid, Nunjucks, Handlebars, EJS, ERB, Twig), Vue, Svelte and Astro components, JSX/TSX, JavaScript that writes markup, and CSS. It reads tags the way frameworks write them (JSX expressions and spreads, Vue bound attributes, template blocks), knows that next/image, Astro's Image and Angular's NgOptimizedImage lazy-load unless marked priority, skips comments, noscript fallbacks and values that templates fill in at run time, and leaves the standard Google Tag Manager, gtag, Google Fonts (with display=swap) and Cookiebot snippets alone. For image files your pages use, it reads only the file size. It never runs, builds or loads your site. It returns BLOCK, REVIEW, or NOT FLAGGED, with the file, line, reason, and a safer approach, and each rule links to the web.dev, HTML standard or Chrome documentation behind it. Secrets are never printed.

What it checks

BLOCK (fix before shipping)

• P01: an image that is preloaded (link rel="preload", or priority/preload in next/image, Astro or Angular) and also loading="lazy", with no eager copy of it on the page
• P02: link rel="preload" without a valid as value (the browser fetches nothing)
• P03: font or fetch preloads without crossorigin (downloaded twice)
• P04: document.write on the page itself of a script from another host without async or defer

REVIEW (check before release)

• P11: lazy images that look like the first screen (fetchpriority="high", first image in the body, or named hero, banner and similar)
• P12: img elements without width and height (sizes set in the page's own or linked CSS count)
• P13: scripts in the head without async, defer or type="module"
• P14: @font-face without font-display, and Google Fonts URLs without display=
• P15: CSS @import chains the browser has to follow one by one
• P16: data: URIs longer than 10,000 characters inlined in HTML, CSS or JavaScript
• P17: iframes (videos, maps, widgets) without a loading attribute
• P18: image files over 500 KB used by a page, component or stylesheet
• P19: srcset with width descriptors and no sizes

What's included

• The scanner (Python 3.9+, standard library only)
• A rules guide with the reason, safer approach and official source link for each rule
• A risky and a safe example project (a static site and a Next.js page), and the real report the scanner produces on the risky one

Limits

It reads each file on its own and does not know screen sizes, so it cannot tell which image is really the LCP element: the first-screen rule is a hint to confirm. CSS the page does not link or import itself (a layout's global stylesheet, CSS modules, CSS-in-JS), preloads in a layout file or HTTP headers, and markup built at run time are not seen. It does not measure INP, server response time or the cost of third-party scripts; confirm the result with Lighthouse or PageSpeed Insights. NOT FLAGGED is not a guarantee.

Contents

One ZIP file with 25 files: SKILL.md, the scanner in scripts/ (5 Python files), references/rules.md (every rule with its reason and safer approach), and examples/ (17 example files plus report.md, the real scanner output on the risky example).

How to use: This is an agent skill: a folder with a SKILL.md file and Python scripts that an AI coding agent such as Claude Code, Cursor, or Codex CLI can run. Unzip it into your agent's skills folder (for Claude Code: ~/.claude/skills/), then ask your agent to check your project. The scripts also run on their own with Python 3.9 or newer, with nothing to install. They read your files only: no network access, and nothing is sent anywhere.