Responsive in the Wild

Deck from Velocity 2014 Lightning Demo.

Transcript

1. Responsive in the wild
2. Many techniques Picturefill Inline CSS & JS Conditional loading WebP RESS 14k Srcset
3. 250 Responsive websites
4. 17 Viewport widths 1024 1366 320 1920 360 400 480 560 640 768 864 960 1152 1280 1483 1600 1760
5. 449 316 320 1920 IMG JS CSS FONT HTML KB KB PX PX PX 1024
6. 1024 1366 2217 KB 1861 KB 18% 320 1920
8. 38% FLATLINE
9. 1024 1366 320 1920 IMG JS CSS 3530 3530
10. 3530k 3530k
11. 38% 55% IMAGES
12. 1024 1366 1020 587 43% 768 320 1920 IMG JS CSS FONT Size
13. 1024 2021 51 grolsch.co.uk 320 1920 IMG JS
14. 768 1280 2160 1254 rue21.com 320 1920 IMG JS FONT
15. 768 1280 1770 637 newzealand.com 320 1920 IMG JS
16. =!
17. 864 1959 3395 engadget.com 320 1920 IMG JS
18. 5% Conditional CSS
19. 1024 254 32 barackobama.com 320 1920 IMG JS CSS
20. 11% Conditional JS
21. 1024 280 156 famm.org 320 1920 IMG JS CSS
22. 1024 38 14 320 1920 IMG JS CSS HTML 34 15 Requests 5 5 5 5
23. Mobile is nearing 50%
24. yet there’s minimal responsive optimisation!
26. 1024 1599 768 mediatemple.net 320 1920 IMG JS FONT
27. speedcurve.com/blog @MarkZeman FRONT-END PERFORMANCE MONITORING mark@speedcurve.com