PageSpeed Forensics: skill de Claude Code para PageSpeed móvil

Descripción

Qué es

PageSpeed Forensics es una skill para Claude Code (y cualquier agente que lea SKILL.md) para el último tramo del puntaje móvil en PageSpeed Insights y Lighthouse. Trae un método paso a paso, 6 guías técnicas y 11 scripts de Node.js sin dependencias, salvo sharp (opcional) para la comparación visual.

Qué problema resuelve

Los consejos de siempre (comprimir imágenes, diferir JavaScript, precargar la imagen del LCP) suelen dejar una página cerca de 85. Los puntos que faltan en móvil se esconden donde esas listas no miran: cómo cruza el HTML la red, cuándo Chrome produce el primer cuadro y cómo el simulador de Lighthouse convierte una corrida en puntaje.

Si Lighthouse marca 100 en tu PC y PageSpeed marca 85, si la primera pintura sale 1–2 s tarde sin que nada la bloquee, o si el TBT viene casi todo del administrador de etiquetas, esta skill busca la causa y la demuestra con evidencia.

Cómo funciona en 3 pasos

• Lee el informe real: psi-report guarda de pagespeed.web.dev los puntajes, las métricas, las auditorías con sus tablas, el entorno de prueba, la captura final y la tira de cuadros, sin llave de API.
• Reproduce PageSpeed en tu computador: un proxy local agrega latencia y tiempo de servidor, y entrega el HTML en tandas tipo arranque lento de TCP. Corres Lighthouse 3–5 veces por variante y comparas medianas de métricas simuladas y observadas.
• Prueba y verifica: el proxy aplica arreglos sin recompilar (CSS en línea, sin precarga de fuentes o imágenes, content-visibility o CSS propio). Antes de pasar nada al código comparas capturas en gris con desenfoque y revisas anclas, elementos fixed y la altura de la página.

Qué recibes

• SKILL.md: el método en 6 pasos, una tabla síntoma → causa y una plantilla de informe (hallazgo, evidencia, causa, arreglo, riesgo, cómo revertir y si requiere decisión del dueño)
• 6 guías: congelamiento del primer cuadro, primera tanda TCP (initcwnd), arreglos del camino de render y sus trampas, particularidades de Lighthouse y PageSpeed, etiquetas de terceros y verificación
• 11 scripts: flight-proxy, burst-timing, lh-runs, lh-summary, trace-milestones, main-thread-per-second, trace-first-frame, psi-report, screens, visual-diff y section-heights
• README en español e inglés y archivo de licencia

Para quién es

• Desarrolladores y agencias con sitios que no pasan de ~85–90 en móvil después de aplicar los consejos típicos
• Equipos con landing pages en Next.js o React (las guías traen notas específicas de Next.js)
• Quien necesita explicar con datos por qué PageSpeed y su computador no dan el mismo puntaje

Requisitos

• Node.js 22 o superior
• Google Chrome o Chromium (o la variable CHROME_PATH)
• Internet para Lighthouse (se ejecuta con npx, sin instalar) y para leer PageSpeed
• sharp, solo para la comparación visual (npm i -D sharp)
• Un build de producción de tu sitio servido por HTTP en tu computador, para el laboratorio
• Claude Code u otro agente que lea SKILL.md (o correr los scripts a mano)

Notas importantes

• No garantiza un puntaje: encuentra causas y mide cada cambio con medianas. El resultado depende de tu sitio y de lo que decidas cambiar.
• Algunos arreglos son decisiones de negocio (diferir la analítica, cambiar el servidor o poner un CDN): la skill te muestra el costo y la decisión es tuya.
• Los datos de campo de CrUX tardan 28 días en reflejar un cambio.
• La skill, las guías y la salida de los scripts están en inglés; el README está en español e inglés.
• psi-report lee la página web de PageSpeed: si Google cambia su diseño, ese script puede dejar de funcionar.
• Ampliar la ventana TCP inicial del servidor requiere acceso de administrador a un servidor Linux, o un CDN.
• Producto independiente, sin afiliación con Google. PageSpeed Insights, Lighthouse y Chrome son marcas de Google.