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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. on the other hand…

    View full-size slide

  7. Photos are biiiiiiiiiig!

    View full-size slide

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

    View full-size slide

  9. How fast can a simple HTML
    document be?

    View full-size slide

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

    View full-size slide

  11. Optimisation #1
    A truthful browser
    spinner

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  14. Optimisation #2
    Progressive JPEG

    View full-size slide

  15. Optimisation #3
    Responsive Images

    View full-size slide

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

    View full-size slide

  17. Optimisation #4
    Font Face Observer

    View full-size slide

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

    View full-size slide

  19. Optimisation #5
    <br/>

    View full-size slide

  20. Optimisation #6
    Cache everything
    forever

    View full-size slide

  21. Optimisation #7
    Use a CDN

    View full-size slide

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

    View full-size slide

  23. Easy to build?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  28. GitHub Pages
    +
    CloudFlare
    =

    View full-size slide

  29. GitHub Pages has pretty
    crappy caching settings…

    View full-size slide

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

    View full-size slide

  31. Easy cache header setting!

    View full-size slide

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

    View full-size slide

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



    View full-size slide