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
Captura sin esfuerzo las transcripciones de Google Meet y Teams con OpenClaw — Guía de habilidades y configuración.
Integrar OpenClaw en Google Meet y Microsoft Teams proporciona capacidades de transcripción sin interrupciones. Aprenda a configurar y optimizar este proceso para una mejor eficiencia en el flujo de trabajo.
Reglas de Vibe Coding: Crea proyectos paralelos desde tu teléfono usando Claude Code sin leer código
Un ingeniero experimentado comparte sus reglas para construir proyectos paralelos completamente desde el teléfono usando Claude Code sin leer código: empezar en modo plan, hacer commits en git, escribir pruebas, usar subagentes para revisiones y el modo automático.
Usuario de Reddit comparte configuración práctica de Claude para asistencia constante en codificación con IA.
Un desarrollador describe cómo pasó de usar prompts únicos a archivos de contexto separados (about-me.md, my-voice.md, my-rules.md) e implementó un flujo de trabajo estructurado donde Claude lee el contexto, hace preguntas, crea planes y luego ejecuta tareas.
Cómo optimizar tu configuración de OpenClaw con instrucciones y refinamientos específicos.
La optimización de OpenClaw se basa en instrucciones precisas y en el perfeccionamiento continuo de las personalidades de los agentes y en la utilización económica de los modelos.