Web Performance in Action

Guía de Jeremy Wagner, desarrollador front-end y conferenciante especializado en rendimiento web, para que los sitios carguen y se pinten más rápido. Publicado por Manning a finales de 2016, con prólogo de Ethan Marcotte, se centra en técnicas aplicables a cualquier sitio y no en un framework concreto. Está pensado para desarrolladores con poca experiencia en optimización: basta con conocer HTML, CSS y JavaScript, aunque muchos ejemplos usan Git y Node.js.

El recorrido empieza por los fundamentos (cómo se mide el rendimiento y qué ocurre durante el renderizado) y por herramientas de análisis como Google PageSpeed Insights y las herramientas para desarrolladores del navegador. Después dedica capítulos a optimizar el CSS y extraer el CSS crítico, a las imágenes responsivas (srcset, picture) y su compresión, incluido WebP, a cargar tipografías web más rápido, y a mantener el JavaScript ligero, con un apéndice de equivalentes nativos a funciones habituales de jQuery. También trata los service workers para la caché, el ajuste de la entrega de recursos (compresión, caché HTTP, CDN, resource hints) y el impacto de HTTP/2 en las prácticas de optimización. Cierra automatizando todo el proceso con gulp.

El lector aplica las técnicas sobre sitios de ejemplo que se descargan con Git y se sirven con Node.js, y mide el antes y el después de cada cambio. Su punto fuerte es la amplitud y el tono didáctico: es una excelente puerta de entrada al rendimiento front-end. Hay que tener en cuenta que gulp ha sido desplazado por empaquetadores como webpack o Vite, que no aparecen métricas posteriores como las Core Web Vitals y que HTTP/2 se presenta todavía como el futuro. Los principios siguen siendo válidos, pero conviene complementarlo con material actual sobre Lighthouse y formatos como AVIF.