Une image principale avec loading="lazy" à côté d'un preload du même fichier, un preload de police sans crossorigin qui télécharge la police deux fois, un link rel="preload" sans valeur as que le navigateur ignore : chacun coûte discrètement à votre page son Largest Contentful Paint. Tout comme les images sans width ni height qui font sauter le texte, un widget de chat chargé de façon synchrone dans le head et une illustration de 600 Ko que personne n'a redimensionnée. Cette skill détecte ces erreurs et les autres erreurs de chargement listées ci-dessous avant la mise en ligne de la page, et vous indique comment corriger chacune.

Votre agent lance un scanner sur vos pages HTML et templates (Liquid, Nunjucks, Handlebars, EJS, ERB, Twig), vos composants Vue, Svelte et Astro, le JSX/TSX, le JavaScript qui génère du balisage, et le CSS. Il lit les balises comme les frameworks les écrivent (expressions et spreads JSX, attributs liés Vue, blocs de template), sait que next/image, Image d'Astro et NgOptimizedImage d'Angular chargent en différé sauf s'ils sont marqués priority, ignore les commentaires, les solutions de repli noscript et les valeurs que les templates remplissent à l'exécution, et laisse de côté les extraits standard de Google Tag Manager, gtag, Google Fonts (avec display=swap) et Cookiebot. Pour les fichiers image utilisés par vos pages, il ne lit que la taille du fichier. Il n'exécute, ne compile et ne charge jamais votre site. Il renvoie BLOCK, REVIEW ou NOT FLAGGED, avec le fichier, la ligne, la raison et une approche plus sûre, et chaque règle renvoie vers la documentation web.dev, le standard HTML ou la documentation Chrome sur laquelle elle s'appuie. Les secrets ne sont jamais affichés.

Ce qui est vérifié

BLOCK (à corriger avant la mise en ligne)

• P01 : une image préchargée (link rel="preload", ou priority/preload dans next/image, Astro ou Angular) qui a aussi loading="lazy", sans copie chargée immédiatement sur la page
• P02 : link rel="preload" sans valeur as valide (le navigateur ne récupère rien)
• P03 : preloads de polices ou de fetch sans crossorigin (téléchargés deux fois)
• P04 : document.write dans la page elle-même d'un script d'un autre hôte sans async ni defer

REVIEW (à vérifier avant la publication)

• P11 : images en chargement différé qui semblent faire partie du premier écran (fetchpriority="high", première image du body, ou nommées hero, banner et similaires)
• P12 : éléments img sans width ni height (les tailles définies dans le CSS propre ou lié de la page comptent)
• P13 : scripts dans le head sans async, defer ni type="module"
• P14 : @font-face sans font-display, et URL Google Fonts sans display=
• P15 : chaînes de @import CSS que le navigateur doit suivre une par une
• P16 : URI data: de plus de 10 000 caractères intégrées dans du HTML, du CSS ou du JavaScript
• P17 : iframes (vidéos, cartes, widgets) sans attribut loading
• P18 : fichiers image de plus de 500 Ko utilisés par une page, un composant ou une feuille de style
• P19 : srcset avec descripteurs de largeur et sans sizes

Ce qui est inclus

• Le scanner (Python 3.9+, bibliothèque standard uniquement)
• Un guide des règles avec la raison, l'approche plus sûre et le lien vers la source officielle pour chaque règle
• Un projet d'exemple risqué et un sûr (un site statique et une page Next.js), ainsi que le vrai rapport produit par le scanner sur le projet risqué

Limites

Il lit chaque fichier isolément et ne connaît pas les tailles d'écran, il ne peut donc pas savoir quelle image est réellement l'élément LCP : la règle du premier écran est un indice à confirmer. Le CSS que la page ne lie ni n'importe elle-même (la feuille de style globale d'un layout, les modules CSS, le CSS-in-JS), les preloads dans un fichier de layout ou dans les en-têtes HTTP et le balisage construit à l'exécution ne sont pas vus. Il ne mesure ni l'INP, ni le temps de réponse du serveur, ni le coût des scripts tiers ; confirmez le résultat avec Lighthouse ou PageSpeed Insights. NOT FLAGGED n'est pas une garantie.

Contenu

Un fichier ZIP de 25 fichiers : SKILL.md, le scanner dans scripts/ (5 fichiers Python), references/rules.md (chaque règle avec sa raison et une approche plus sûre) et examples/ (17 fichiers d'exemple plus report.md, la vraie sortie du scanner sur l'exemple risqué).

Utilisation : il s'agit d'une skill d'agent : un dossier contenant un fichier SKILL.md et des scripts Python qu'un agent de programmation IA comme Claude Code, Cursor ou Codex CLI peut exécuter. Décompressez-le dans le dossier des skills de votre agent (pour Claude Code : ~/.claude/skills/), puis demandez à votre agent de vérifier votre projet. Les scripts fonctionnent aussi seuls avec Python 3.9 ou plus récent, sans rien à installer. Ils lisent uniquement vos fichiers : aucun accès réseau, et rien n'est envoyé nulle part.