Debugging de INP: Del 'algo va lento' al 'esto es lo que lo rompe'
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.
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.
23 artículos from this blog
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.
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.
El autor reflexiona sobre por qué CSS está infravalorado y olvidado en la comunidad de desarrollo web, defendiendo su importancia y criticando su escasa enseñanza.
Presenta un plugin de PostCSS para usar imágenes AVIF en CSS, detectando automáticamente el soporte del navegador.
Cómo detectar soporte AVIF en imágenes CSS usando image-set y PostCSS para optimizar formatos de imagen.
Reseñas y opiniones sobre libros de CSS para aprender y profundizar en el lenguaje, incluyendo 'CSS The Definitive Guide'.
Introducción a aprender programación usando Processing y P5.js, lenguajes visuales e interactivos ideales para principiantes.
Análisis del libro 'Diseño Ágil con TDD' de Carlos Blé, explorando la metodología Test-Driven Development y su aplicación práctica en desarrollo de software.
Reseña del libro 'Clean JavaScript' sobre código limpio, principios SOLID y testing para mejorar el desarrollo de software.
Guía sobre animaciones CSS con @keyframes, propiedades de animación y ejemplos para crear efectos dinámicos en la web.
Guía teórica sobre Transiciones CSS, explicando cómo crear animaciones suaves mediante interpolación de propiedades y el uso de propiedades CSS específicas.
Análisis del formato de imagen AVIF, que promete reducir el peso de las imágenes hasta un 50% respecto a JPEG manteniendo la calidad.
Introducción a las técnicas de animación web, incluyendo transiciones CSS, animaciones con @keyframes y próximamente SVG, JavaScript y Canvas.
Tutorial sobre cómo crear pixel art utilizando únicamente la propiedad CSS box-shadow, explorando técnicas creativas de diseño web.