Contenido archivado (2019)
Este contenido está archivado y puede estar desactualizado. Las tecnologías, herramientas y mejores prácticas mencionadas pueden haber cambiado desde su publicación.
Web Performance Analysis of Zara
Thanks to Paco Segovia and Jaime Lozano for suggesting this site for the review. Accessibility and Usability Analysis by Paco Segovia
Static Files
- ✅ Uses HTTP/2 and a CDN for serving static files
- ✅ Serves videos in different sizes depending on screen resolution. Just change the path in the URL to 600, 1080, etc.
- ❌ Very short cache times.
Fonts
- ✅ Uses WOFF2
- ✅ Uses a font with only the necessary characters for Zara SRPLS (ZaraSRPLS_Font-Regular). Could be replaced with an SVG, but it's a good approach.
Images
- ✅ Implements lazy loading. Good!
- ❌ On the home page, requests SVG images with text in the same font already loaded on the page. CAUTION: Cloudinary suggests converting to WebP to save bytes, but the image may be too small.
- ❌ On mobile, images appear to be requested at a very large size.
- ❌
products-category.jsonreferences two transparent placeholder images with similar names. Either remove them or unify them.
Scripts
- ✅ Uses Require.js for loading JS modules instead of a large bundle.
- ❌ Uses jQuery 1.11.2, which has a known vulnerability and was released in December 2014. (see Lighthouse) (see performance audit for mobile version).
- ❌ Lots of unminified inline scripts in the initial HTML.
- ❌ Uses Optimizely on the client-side in a blocking manner. Not minified and contains commented code. WebPageTest with Optimizely and without Optimizely, and comparison
- ❌ Some resources have very low cache TTL (e.g.,
launcher-std.js,redesign.css) (see Lighthouse)
CSS
- ✅ Good results in CSS Stats.
- ❌ Unminified CSS files, sometimes with commented code (e.g.,
spa-hacksin desktop,mobile-hacksin mobile).
SVG
- ❌ Zara's logo, cart, etc., could be almost halved if optimized through SVGOMG. The idea of SVG + H2 is better than web fonts for icons + HTTP/1.1, which is positive. (see DevTools + SVGOMG)
Additional Observations
- ✅ Uses Akamai's Boomerang, meaning RUM is set up and page load time is measured. More info at Akamai and Boomerang
- ❌ Not very responsive on desktop. The screen can easily cut off. On mobile, a different domain is used.
Performance Once Loaded
- ❌ Performance issue when scrolling and setting the top position of the left menu.
In
app-std > adjustVerticalPos > this.$navigationMenu.css. Also,onScroll()lacks throttling. This could be demonstrated by showing Rendering > Paint flashing and a performance recording. - ❌ The
loader.giffor images continues to render. Similar to Spotify's issue. It should be hidden. - ❌ A
rafis running continuously, probably only used on the main page in desktop and mobile.