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
5 Capacidades Principales de OpenClaw Disponibles Sin Instalar Habilidades
La instalación base de OpenClaw puede manejar operaciones de archivos, comandos de terminal, obtención web, tareas programadas y flujos de trabajo de múltiples pasos sin habilidades adicionales, reduciendo costos de tokens y complejidad de configuración.
Guía: Implementación de OpenClaw con llama.cpp en la Mini PC GEEKOM IT15
Un recorrido técnico detalla cómo cambiar OpenClaw de Ollama a llama.cpp para ejecutar un modelo local Qwen3-8B con aceleración de GPU Intel Arc, cubriendo cambios de configuración, gestión manual del servidor y solución de problemas comunes.
Qwen 3.5 122B MoE a 35 t/s en una sola 3090 con ik_llama.cpp MTP
Una pila local ejecutando Qwen 3.5 122B MoE en una sola 3090 a 35 t/s usando las operaciones MoE fusionadas de ik_llama.cpp para MTP. El llama.cpp estándar mostró solo un +4% de mejora; el fork de ik ofrece un +20%.
Optimización de Costos de OpenClaw: Cinco Configuraciones para el Uso Continuo de Agentes
Un desarrollador que ejecuta OpenClaw continuamente en una Raspberry Pi identificó cinco configuraciones que redujeron significativamente los costos del agente al optimizar para el costo en lugar de la capacidad predeterminada.