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

✅ 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.

✅ 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.

✅ 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.json references two transparent placeholder images with similar names. Either remove them or unify them.

✅ 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)

✅ Good results in CSS Stats.
❌ Unminified CSS files, sometimes with commented code (e.g., spa-hacks in desktop, mobile-hacks in mobile).

❌ 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)

✅ 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 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.gif for images continues to render. Similar to Spotify's issue. It should be hidden.
❌ A raf is running continuously, probably only used on the main page in desktop and mobile.

Reports