Workshop: Making Responsive Websites Fast

Summary of what we learned at the @LDNWebPerf workshop by https://twitter.com/guypod from Akamai, on how to make RWD sites fast!

(Used for an internal presentation)

1. Making Responsive Websites Fast
2. What We Learned At The Akamai Workshop
3. Setting The Scene
4. • Mobile is big (1/3 of all traffic)! • Original approach - do nothing • Then, dedicated domains (eg. m.domain.com) • Now, Responsive Web Design The Mobile Web
5. Responsive Web Design • Google recommends it • Adoption is fast on the increase • Challenge: • Different devices, same download • More bytes-per-pixel on smaller screens
6. RWD Problems • Very few RWD sites optimise for performance • RWD sites generally heavier than mdot sites • RWD sites generally heavier to process than mdot sites • Example: • Old CNN site - Adaptive mdot, 571KB, 15s • New CNN site - RWD, 2.9MB, 41.9s • Load time matters!
7. Problem: Over Downloading
8. Problem: Over Downloading • Download and Shrink - the same image is used on all devices and just shrunk for smaller screens
9. Solution: Responsive Images • ‘srcset’ - suggests to the browser which images to use • <picture> element - forces the browser to use certain images (art direction) • Browser support is good, but Polyfills are available for older browsers
10. Problem: Download And Hide
11. Problem: Download And Hide • Often images are hidden on ‘mobile’ views • The problem is that the browser still has to download them
12. Solution: Conditional Loading (Client-Side) • Use placeholders (1px.gif), then swap the ‘src’ if the image is not set to ‘display: none;’ • Or check for screen size, orientation changes etc. • You can also use the <picture> element to achieve a similar effect
13. Problem: Over Downloading CSS
14. Problem: Over Downloading CSS • Most sites have just one CSS file • Fewer requests, but wasteful bytes
15. Solution: Conditional loading • You could have one file for each ‘breakpoint’ • Conditionally load each file using media queries • All files are still downloaded, but deferred so not render blocking • or JavaScript (async) • Design mobile first
16. Solution: Critical Rendering Path • Inline critical CSS in the head • Load non-priority CSS asynchronously • Without the CSSOM first paint is blocked
17. REsponsive + Server Side
18. REsponsive + Server Side (RESS) • Server conditionally assembles design response • Doesn’t replace RWD • Tuned for families families of devices (http:// web.wurfl.io/) • Use cookies, get user’s device data, include/ignore blocks • Can’t add a cookie using JavaScript because it won’t be set on first view
19. RESS With EDC
20. RESS With Akamai Edge Device Characterisation (EDC) • Uses smarter device matching and smarter routing
21. RESS With ESI
22. RESS With Edge Side Includes (ESI) • Another form of conditional loading • Benefit: Can be placed directly in templates (looks like XML) • Works with EDC, eg. detect user’s screen width, then conditionally load block • Other providers offer (limited) ESI support, eg. Varnish
23. Problem: Image File Sizes
24. Problem: Image File Sizes • A LOT of image variants are required: • Thousands of products • Multiple images per product • Multiple breakpoints • Standard def and High def (Retina) • Versions optimised for browser type • Versions optimised for poor network • = LOTS of images to manage! • Image transcoding takes time (especially on the first-run)
25. Solution: Better file formats • JPEGXR (IE) • WebP (Chrome, Android, Opera) • JPEG2000 (iOS, Safari) • JPEGXR and WebP can save over 30% compared to a standard JPEG
26. • Akamai Image Manager for delivery-time selection • Use ‘srcset’ to load the right sized images • Use <picture> to load the right image format • Akamai Image Manager can also adjust image compression based on network performance
27. Problem: Third-Party Scripts
28. Problem: Third-Party Scripts • On the increase • Can pose a risk: SPOF (Single Point Of Failure)
29. Solution: Async • Always load third-party scripts asynchronously
30. Problem: Too Many Images
31. Problem: Too Many Images • Often most images are ‘below the fold’ • Especially on mobile
32. Solution: Lazy Loading • Use JavaScript to load images on-demand
33. You can be Responsive and fast!
34. Thank you