Un 301 en cada clic: la trailing slash que ralentizaba toda la navegación interna
Análisis de cómo una redirección 301 por trailing slash en cada enlace interno ralentiza la navegación en un sitio web, con diagnóstico y solución.
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.
46 artículos from this blog
Análisis de cómo una redirección 301 por trailing slash en cada enlace interno ralentiza la navegación en un sitio web, con diagnóstico y solución.
Análisis técnico sobre la diferencia entre Keep-Alive y Cache-Control en HTTP, con ejemplos de auditoría y optimización de red.
Análisis de por qué una página web en reposo repinta sin parar, usando Paint flashing y la pestaña Layers de Chrome DevTools para diagnosticar el problema.
Guía avanzada sobre campos YAML en Skills de Antigravity: kind, model, tools y cómo optimizar su uso en proyectos reales.
Implementación de un pipeline de edición de vídeo en tiempo real en el navegador usando WebGPU y WebCodecs.
Cómo detectar y analizar Forced Synchronous Layout (FSL) en Chrome DevTools, con ejemplos de código y soluciones.
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.