Análisis de web performance de la web de Zara

Gracias a Paco Segovia y Jaime Lozano por sugerirnos este site para la review. Análisis de Accesibilidad y Usabilidad de Paco Segovia

✅ Utilizan http/2 y un CDN para servir estáticos
✅ Sirven vídeos en diferentes tamaños dependiendo de la resolución de la pantalla. Basta con cambiar el path en la URL a 600, 1080, etc.
❌ Caché muy corta.

✅ Usan woff2
✅ Usan una fuente con sólo los caracteres necesarios para Zara SRPLS (ZaraSRPLS_Font-Regular). Quizás se podría reemplazar por un SVG, pero no está mal la idea.

✅ Hacen lazy loading. Bien!
❌ En la home piden imágenes que son un SVG con texto con la misma fuente cargada en la página. CUIDADO: Cloudinary dice que se puede pasar a WebP y hacer la imagen pequeña para ahorrar bytes pero sería demasiado pequeña.
❌ En mobile parecen pedir las imágenes a un tamaño muy grande.
❌ products-category.json referencia a 2 imágenes transparentes con nombre similar. Se usan como placeholder. O bien se quitan o se pueden unificar.

✅ Usan require.js para cargar módulos JS en lugar de un bundle enorme.
❌ Usan jQuery 1.11.2, con una vulnerabilidad conocida y que fue releaseado en diciembre de 2014. (ver lighthouse) (ver audit performance para versión mobile).
❌ Hay mucho script inline sin minificar en el HTML inicial.
❌ Usan optimizely en el lado del cliente de forma bloqueante. Sin minificar y con código comentado.. WebPageTest con Optimizely y sin Optimizely y aquí la comparación
❌ Algún recurso tiene una TTL de caché muy baja (eg launcher-std.js, redesign.css) (ver lighthouse)

✅ En CSS Stats tenemos buenos resultados.
❌ Ficheros CSS sin minificar, y a veces con código comentado (eg spa-hacks en desktop, mobile-hacks en mobile).

❌ Logo de Zara, carrito, etc pueden ocupar casi la mitad si se pasan por SVGOMG. La idea de SVG + h2 es mejor que Web font para iconos + http/1.1, lo cual es positivo. (ver devtools + svgomg)

✅ Usan boomerang de Akamai, lo que quiere decir que tienen RUM configurado y miden el page load time. Más info en https://www.akamai.com/uk/en/products/web-performance/mpulse-real-user-monitoring.jsp y https://developer.akamai.com/tools/boomerang/#Introduction
❌ Responsive? No mucho en desktop. Es fácil que la pantalla se corte. En mobile usan un dominio diferente.

❌ Hay un problema de performance al hacer scroll y setear el top del menú de la izquierda. En app-std > adjustVerticalPos > this.$navigationMenu.css. Además, onScroll() no tiene throttling. Esto da para una buena demo mostrando Rendering > Paint flashing y un performance recording.
❌ Hablando de flashing, el loader.gif de las imágenes sigue pintándose. En Spotify tuvimos el mismo problema. Basta con ocultarlo.
❌ Hay un raf ejecutándose todo el tiempo. Probablemente sólo usado en la página principal en desktop y mobile.

Informes