Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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.

Ben Smithett

May 09, 2016
Tweet

More Decks by Ben Smithett

Other Decks in Technology

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