Una imagen principal con loading="lazy" junto a un preload del mismo archivo, un preload de fuente sin crossorigin que descarga la fuente dos veces, un link rel="preload" sin valor as que el navegador ignora: cada uno le cuesta a tu página, sin que lo notes, su Largest Contentful Paint. Lo mismo ocurre con las imágenes sin width y height que hacen saltar el texto, un widget de chat cargado de forma síncrona en el head y una ilustración de 600 KB que nadie redimensionó. Esta skill encuentra esos errores y los demás errores de carga que se enumeran abajo antes de publicar la página, y te dice cómo corregir cada uno.

Tu agente ejecuta un escáner sobre tus páginas HTML y plantillas (Liquid, Nunjucks, Handlebars, EJS, ERB, Twig), componentes de Vue, Svelte y Astro, JSX/TSX, JavaScript que genera marcado y CSS. Lee las etiquetas como las escriben los frameworks (expresiones y spreads de JSX, atributos enlazados de Vue, bloques de plantilla), sabe que next/image, Image de Astro y NgOptimizedImage de Angular usan carga diferida salvo que se marquen con priority, omite comentarios, alternativas en noscript y valores que las plantillas rellenan en tiempo de ejecución, y deja en paz los fragmentos estándar de Google Tag Manager, gtag, Google Fonts (con display=swap) y Cookiebot. De los archivos de imagen que usan tus páginas, solo lee el tamaño del archivo. Nunca ejecuta, compila ni carga tu sitio. Devuelve BLOCK, REVIEW o NOT FLAGGED, con el archivo, la línea, el motivo y un enfoque más seguro, y cada regla enlaza a la documentación de web.dev, al estándar HTML o a la documentación de Chrome en la que se basa. Los secretos nunca se muestran.

Qué comprueba

BLOCK (corregir antes de publicar)

• P01: una imagen precargada (link rel="preload", o priority/preload en next/image, Astro o Angular) que además tiene loading="lazy", sin una copia con carga inmediata en la página
• P02: link rel="preload" sin un valor as válido (el navegador no descarga nada)
• P03: preloads de fuentes o de fetch sin crossorigin (se descargan dos veces)
• P04: document.write en la propia página de un script de otro host sin async ni defer

REVIEW (revisar antes del lanzamiento)

• P11: imágenes con carga diferida que parecen de la primera pantalla (fetchpriority="high", primera imagen del body o nombres como hero, banner y similares)
• P12: elementos img sin width ni height (cuentan los tamaños definidos en el CSS propio o enlazado de la página)
• P13: scripts en el head sin async, defer ni type="module"
• P14: @font-face sin font-display, y URL de Google Fonts sin display=
• P15: cadenas de @import en CSS que el navegador tiene que seguir una a una
• P16: URI data: de más de 10 000 caracteres incrustadas en HTML, CSS o JavaScript
• P17: iframes (vídeos, mapas, widgets) sin atributo loading
• P18: archivos de imagen de más de 500 KB usados por una página, un componente o una hoja de estilos
• P19: srcset con descriptores de ancho y sin sizes

Qué incluye

• El escáner (Python 3.9+, solo biblioteca estándar)
• Una guía de reglas con el motivo, el enfoque más seguro y el enlace a la fuente oficial de cada regla
• Un proyecto de ejemplo arriesgado y otro seguro (un sitio estático y una página de Next.js), y el informe real que el escáner genera sobre el arriesgado

Limitaciones

Lee cada archivo por separado y no conoce los tamaños de pantalla, así que no puede saber qué imagen es realmente el elemento LCP: la regla de la primera pantalla es una pista que debes confirmar. No ve el CSS que la página no enlaza ni importa por sí misma (la hoja de estilos global de un layout, módulos CSS, CSS-in-JS), los preloads en un archivo de layout o en encabezados HTTP ni el marcado generado en tiempo de ejecución. No mide el INP, el tiempo de respuesta del servidor ni el coste de los scripts de terceros; confirma el resultado con Lighthouse o PageSpeed Insights. NOT FLAGGED no es una garantía.

Contenido

Un archivo ZIP con 25 archivos: SKILL.md, el escáner en scripts/ (5 archivos de Python), references/rules.md (cada regla con su motivo y un enfoque más seguro) y examples/ (17 archivos de ejemplo más report.md, la salida real del escáner sobre el ejemplo arriesgado).

Cómo usarlo: es una skill de agente: una carpeta con un archivo SKILL.md y scripts de Python que puede ejecutar un agente de programación con IA como Claude Code, Cursor o Codex CLI. Descomprímela en la carpeta de skills de tu agente (para Claude Code: ~/.claude/skills/) y luego pide a tu agente que revise tu proyecto. Los scripts también funcionan por sí solos con Python 3.9 o posterior, sin instalar nada. Solo leen tus archivos: sin acceso a la red y sin enviar nada a ninguna parte.