De 88 a 100 PSI: Claude Code para la optimización del front-end

Un desarrollador usó Claude Code como socio de depuración e implementación para subir la puntuación móvil de PageSpeed Insights de su sitio de 88 a 100 (una plantilla de artículo pasó de 74 a 100). La publicación en r/ClaudeAI detalla el flujo de trabajo práctico — no una solución única, sino una serie de intervenciones específicas.

Optimizaciones clave logradas

• Imágenes responsivas + srcset: Claude identificó que la imagen hero móvil era más grande de lo necesario, luego generó variantes de imagen responsivas y añadió atributos srcset.
• Precarga de LCP: Se añadió una precarga responsiva para la imagen LCP usando <link rel="preload" as="image" imagesrcset="...">.
• Corrección de reflujo forzado: Se reemplazó un listener de scroll en el encabezado (que causaba layout forzado al hacer scroll) con IntersectionObserver.
• Auditoría de fuentes: Se identificaron los pesos de fuente realmente en uso y se eliminaron los no utilizados.
• Dimensiones de imagen en tiempo de compilación: Se añadieron atributos width y height a las imágenes en markdown durante la compilación para eliminar cambios de layout.
• Eliminación de precargas de fuentes en páginas de artículo: Contraintuitivo pero efectivo: las fuentes precargadas competían con la imagen hero por el ancho de banda en móvil limitado. Como las fuentes usaban font-display: swap, eliminar las precargas permitió que la imagen LCP cargara más rápido.

Patrón de prompting efectivo

El desarrollador descubrió que Claude Code funciona mejor con hilos de diagnóstico específicos. En lugar de prompts vagos, se le alimentan los hallazgos de PSI y se le pide el parche seguro más pequeño. Ejemplo de patrón: alimentar el hallazgo de PageSpeed Insights, pedir a Claude que inspeccione el componente relevante, luego solicitar una corrección mínima en lugar de una refactorización amplia.

El juicio humano sigue siendo necesario

Algunas optimizaciones se sentían demasiado agresivas visualmente: el autor subió la calidad del logotipo mientras se mantenía en 100. Las imágenes debajo del pliegue y las concesiones de estilo requirieron decisiones humanas. Claude Code aceleró la iteración, pero el desarrollador aún tuvo que equilibrar rendimiento, accesibilidad y calidad de diseño.

Artículo completo

El autor publicó una versión técnica más extensa con cambios específicos de CWV y cifras antes/después en goodrich.digital.