Designing for Performance

Guía de Lara Callender Hogan, que entonces dirigía la ingeniería de rendimiento de Etsy. Su idea central es que el rendimiento forma parte de la experiencia de usuario y que los diseñadores influyen mucho en la velocidad de carga. Es una obra breve (unas 180 páginas) de 2014, dirigida a diseñadores web y desarrolladores front-end de nivel intermedio que conocen HTML y CSS y quieren equilibrar estética y velocidad. La autora la ofrece gratis para leer en su sitio web.

Empieza explicando cómo afecta la velocidad a la marca, al posicionamiento en buscadores y a los usuarios móviles. Después cubre lo básico de la velocidad de página: cómo renderiza el navegador, peticiones y conexiones, peso de página, rendimiento percibido, critical rendering path y jank. En la parte práctica muestra cómo elegir formatos de imagen (JPEG, GIF, PNG) y comprimirlos, y cómo reemplazar peticiones con sprites, CSS3, data URIs en Base64 y SVG. También enseña a limpiar el HTML (evitar la "divitis", semántica, accesibilidad, frameworks y grids) y el CSS (estilos sin usar, especificidad), optimizar fuentes web, minificar con gzip, aprovechar la caché y crear guías de estilo reutilizables. Dedica un capítulo al diseño responsive (carga deliberada de imágenes y fuentes, mobile first) y otro a la medición con YSlow, Chrome DevTools, pruebas sintéticas y monitorización con usuarios reales (RUM).

Los últimos capítulos son quizá lo más valioso: cómo fijar presupuestos de rendimiento para diseños nuevos, experimentar con el rendimiento en mente y cambiar la cultura de la organización ("policías" y "conserjes" del rendimiento, convencer a la dirección con métricas de negocio). No tiene proyectos ni ejercicios guiados, sino consejos aplicables al trabajo diario. Algunas técnicas han envejecido: HTTP/2 hace menos necesarios los sprites, y hoy existen WebP/AVIF, carga diferida nativa y Core Web Vitals. Aun así, el enfoque de presupuestos y cultura de rendimiento sigue vigente.