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
widthyheighta 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.
📖 Lee la fuente completa: r/ClaudeAI
👀 Ver también
Un Marco de Gestión para Dirigir Agentes de IA de Manera Efectiva
Un antiguo líder de backend identifica una meseta en la productividad de los agentes de IA y propone un marco basado en tres disciplinas: cibernética, teoría de la información y gestión. El marco detalla dos modos operativos: el Capitán y el Arquitecto.
Guía para Homelab con V100 SXM2 NVLink: Construyendo 64GB de VRAM Unificada por ~$1,100
Una guía completa detalla cómo construir un homelab V100 SXM2 con 64 GB de VRAM unificada por NVLink por aproximadamente $1,100 utilizando hardware chino de ingeniería inversa, cubriendo la obtención de hardware, estimaciones de rendimiento y compatibilidad de software.
VPS vs Máquina Dedicada: Dónde Ejecutar OpenClaw
Migrando agentes OpenClaw a Claude Code después de la depreciación del arnés de terceros
Un desarrollador migró 17 agentes de OpenClaw a Claude Code en una tarde después de que Anthropic terminó el soporte para herramientas de terceros. El proceso involucró crear puntos de entrada CLAUDE.md, envoltorios bash y trabajos cron mientras se preservaba la lógica existente de los agentes.