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.
40 artículos from this blog
Uso de TensorFlow.js con WebGPU para inferencia de machine learning en el navegador, mejorando el rendimiento en tiempo real.
Guía práctica para automatizar Chrome desde la terminal usando la CLI de chrome-devtools-mcp, un daemon persistente que expone DevTools como subcomandos de shell.
Implementación de filtro de desenfoque gaussiano en el browser usando WebGPU, comparado con Canvas 2D.
WebGPU es una API del navegador que da acceso directo a la GPU para mejorar el rendimiento en tareas intensivas como gráficos 3D, procesamiento de imágenes y ML.
Cómo la IA mejora las auditorías de web performance con medición determinística y análisis cruzado para informes accionables.
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.
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.
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.
