The 12MB Web Page: A tale of perfect PageSpeed scores & developer happiness

Quick little talk I did at an Envato Code Party on May 9 2016.

Transcript

1. The 12MB Web Page
   A tale of perfect PageSpeed scores
   & developer happiness
   

   View Slide

2. View Slide

3. View Slide

4. View Slide

5. A static HTML page
   +
   some photos
   Fast?
   Easy to build?
   Free?
   

   View Slide

6. Fast?
   

   View Slide

7. https://eev.ee/blog/2016/03/06/maybe-we-could-tone-down-the-javascript/
   

   View Slide

8. http://idlewords.com/talks/website_obesity.htm
   

   View Slide

9. Web pages are pretty
   fast by default!
   They only get slow when
   we add “clever” cruft
   

   View Slide

10. on the other hand…
    

    View Slide

11. Photos are biiiiiiiiiig!
    

    View Slide

12. The challenge:
    Can I make a blazing fast, image-
    heavy web page without
    resorting to lots of hacks &
    workarounds
    

    View Slide

13. How fast can a simple HTML
    document be?
    

    View Slide

14. View Slide

15. View Slide

16. View Slide

17. View Slide

18. View Slide

19. Speed Index: 1613 In the fastest ~10% of all websites
    

    View Slide

20. Optimisation #1
    A truthful browser
    spinner
    

    View Slide

21. https://medium.com/@kellycatchpole/10-best-dog-breeds-for-your-
    family-22ea2cdde78d
    Browser says page
    has finished
    loading
    LIES!!!!
    

    View Slide

22. Don’t make the browser spinner
    lie.
    When the page says it’s done
    loading, it’s really done!
    

    View Slide

23. Optimisation #2
    Progressive JPEG
    

    View Slide

24. View Slide

25. Optimisation #3
    Responsive Images
    

    View Slide

26. Widescreen + Retina: 11.1MB
    Tablet + Retina: 9.8MB
    Phone + Retina: 8.7MB
    Widescreen: 7.8MB
    Tablet: 6.5MB
    Phone: 1.7MB
    

    View Slide

27. Optimisation #4
    Font Face Observer
    

    View Slide

28. View Slide

29. https://github.com/bramstein/fontfaceobserver
    

    View Slide

30. View Slide

31. Optimisation #5
    <br/>

    View Slide

32. Optimisation #6
    Cache everything
    forever
    

    View Slide

33. View Slide

34. Optimisation #7
    Use a CDN
    

    View Slide

35. View Slide

36. Notable absentees:
    • “Critical CSS”
    • Loading content asynchronously
    • Anything very tricky or hacky at all…
    

    View Slide

37. Easy to build?
    

    View Slide

38. I couuuld hand-write
    the HTML & CSS for this,
    but I want…
    

    View Slide

39. • A living styleguide!
    • Sass!
    • Hot reloading!
    • Reusable components!
    

    View Slide

40. The tooling:
    • React (no client side!)
    • Webpack + static-site-generator-webpack-plugin
    • Sass
    • CSS Modules
    

    View Slide

41. React is a better back-end
    templating language than
    your favourite back-end
    templating language.
    

    View Slide

42. View Slide

43. View Slide

44. Free?
    

    View Slide

45. GitHub Pages
    +
    CloudFlare
    =
    
    

    View Slide

46. GitHub Pages has pretty
    crappy caching settings…
    

    View Slide

47. View Slide

48. But if you stick CloudFlare
    in front of it…
    

    View Slide

49. Easy cache header setting!
    

    View Slide

50. Free SSL! (well, “flexible SSL”)
    

    View Slide

51. A static HTML page
    +
    some photos
    Fast
    Easy to build
    Free
    ✅
    ✅
    ✅
    

    View Slide