AI-Driven Performance Debugging: Gemini + Chrome DevTools MCP
Workshop sobre cómo usar Gemini CLI con Chrome DevTools MCP y Source Maps para depurar problemas de rendimiento web de forma automatizada y precisa.
Joan León escribe sobre rendimiento web y desarrollo front-end, con especial atención a Core Web Vitals, INP, Long Animation Frames API y la optimización de recursos. En su blog encontrarás guías sobre CSS, JavaScript, React, animaciones, optimización de imágenes y creative coding. Trabaja como Staff Frontend Engineer y consultor de rendimiento, es Google Developer Expert en Web Performance y embajador de Cloudinary. Sus artículos son técnicos, claros y repletos de ejemplos reales que ayudan a mejorar la eficiencia de cualquier proyecto web.
35 artículos from this blog
Workshop sobre cómo usar Gemini CLI con Chrome DevTools MCP y Source Maps para depurar problemas de rendimiento web de forma automatizada y precisa.
Cómo implementar la Chrome Summarizer API para generar resúmenes IA de forma nativa y privada en un blog.
Optimización de Skills de Claude para análisis WebPerf usando 'progressive disclosure' para reducir consumo de contexto.
Cómo optimizar scripts de diagnóstico web para agentes de IA usando retornos JSON estructurados y minimización de tokens.
Cómo usar Agent SKILLs y Chrome DevTools MCP para realizar auditorías de rendimiento web determinísticas y eficientes.
WebPerf Snippets integra WebMCP para exponer herramientas de medición de rendimiento web que los asistentes de IA pueden descubrir y ejecutar directamente en el navegador.
Explorando WebAssembly (WASM), el estándar W3C para ejecutar código de alto rendimiento en navegadores y entornos modernos.
Cómo optimizar la carga de scripts de consentimiento para mejorar Core Web Vitals, evitando que compitan con recursos críticos.
Guía práctica para usar Chrome DevTools en el análisis y depuración del rendimiento web, aplicada a un caso real.
Explora cómo usar la propiedad CSS content-visibility para optimizar el renderizado web y mejorar el rendimiento de páginas con mucho contenido.
Análisis del impacto en rendimiento del CSS dentro de media queries inactivas y cómo optimizarlo usando herramientas y snippets.
Cómo usar la API LoAF para diagnosticar y optimizar problemas de rendimiento web, especialmente en métricas como LCP e INP, identificando código bloqueante.
Cómo usar Long Animation Frames (LoAF) y Event Timing API para identificar código específico que causa problemas de rendimiento e INP elevado.
Explora Long Animation Frames API (LoAF) para diagnosticar problemas de rendimiento web INP, identificando código específico que causa frames lentos en producción.
Glosario técnico sobre la Long Animation Frames API (LoAF) y métricas de rendimiento web como INP, LCP y CLS, con términos y conceptos clave.
Recopilación de charlas y workshops sobre desarrollo web, rendimiento y optimización de imágenes impartidos en conferencias tech durante 2023.
Cómo interpretar correctamente métricas de rendimiento web y el impacto de librerías de terceros como GA4 en la medición de performance.
Guía para usar la nueva pestaña Recorder en Chrome DevTools para analizar el rendimiento web de flujos de navegación completos.
Análisis personal de Tailwind CSS y el patrón Utility-First, explorando sus ventajas, conceptos y aplicabilidad en proyectos de desarrollo frontend.
El autor explica por qué prefiere PostCSS sobre otros preprocesadores CSS como Sass, destacando su flexibilidad y potencia para desarrollo frontend.