PerfReviews

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

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.

Informes

PageSpeed Insights

WebPageTest

  • Home La Rioja, Spain - Chrome - Cable
  • Category La Rioja, Spain - Chrome - Cable

CSS Stats

Image Analysis Results

Recurso


PerfReviews

PerfReviews es un proyecto de Joan León y José M. Pérez.
Hablamos sobre web performance en Twitter y Youtube.