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
5. A static HTML page + some photos Fast? Easy to build? Free?
6. Fast?
7. https://eev.ee/blog/2016/03/06/maybe-we-could-tone-down-the-javascript/
8. http://idlewords.com/talks/website_obesity.htm
9. Web pages are pretty fast by default! They only get slow when we add “clever” cruft
10. on the other hand…
11. Photos are biiiiiiiiiig!
12. The challenge: Can I make a blazing fast, image- heavy web page without resorting to lots of hacks & workarounds
13. How fast can a simple HTML document be?
19. Speed Index: 1613 In the fastest ~10% of all websites
20. Optimisation #1 A truthful browser spinner
21. https://medium.com/@kellycatchpole/10-best-dog-breeds-for-your- family-22ea2cdde78d Browser says page has finished loading LIES!!!!
22. Don’t make the browser spinner lie. When the page says it’s done loading, it’s really done!
23. Optimisation #2 Progressive JPEG
25. Optimisation #3 Responsive Images
26. Widescreen + Retina: 11.1MB Tablet + Retina: 9.8MB Phone + Retina: 8.7MB Widescreen: 7.8MB Tablet: 6.5MB Phone: 1.7MB
27. Optimisation #4 Font Face Observer
29. https://github.com/bramstein/fontfaceobserver
31. Optimisation #5 <script async src=“…”>
32. Optimisation #6 Cache everything forever
34. Optimisation #7 Use a CDN
36. Notable absentees: • “Critical CSS” • Loading content asynchronously • Anything very tricky or hacky at all…
37. Easy to build?
38. I couuuld hand-write the HTML & CSS for this, but I want…
39. • A living styleguide! • Sass! • Hot reloading! • Reusable components!
40. The tooling: • React (no client side!) • Webpack + static-site-generator-webpack-plugin • Sass • CSS Modules
41. React is a better back-end templating language than your favourite back-end templating language.
44. Free?
45. GitHub Pages + CloudFlare =
46. GitHub Pages has pretty crappy caching settings…
48. But if you stick CloudFlare in front of it…
49. Easy cache header setting!
50. Free SSL! (well, “flexible SSL”)
51. A static HTML page + some photos Fast Easy to build Free ✅ ✅ ✅