Análisis de web performance de la web de Zara
January 07, 2019
Gracias a Paco Segovia y Jaime Lozano por sugerirnos este site para la review.
Análisis de Accesibilidad y Usabilidad de Paco Segovia
Estáticos
- ✅ 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.
Fuentes
- ✅ 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.
Imágenes
- ✅ 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.
Scripts
- ✅ 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)
CSS
- ✅ 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).
SVG
- ❌ 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)
Más cosas
- ✅ 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.
Performance una vez cargada
- ❌ 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.