Quick little talk I did at an Envato Code Party on May 9 2016.
The 12MB Web PageA tale of perfect PageSpeed scores& developer happiness
View Slide
A static HTML page+some photosFast?Easy to build?Free?
Fast?
https://eev.ee/blog/2016/03/06/maybe-we-could-tone-down-the-javascript/
http://idlewords.com/talks/website_obesity.htm
Web pages are prettyfast by default!They only get slow whenwe add “clever” cruft
on the other hand…
Photos are biiiiiiiiiig!
The challenge:Can I make a blazing fast, image-heavy web page withoutresorting to lots of hacks &workarounds
How fast can a simple HTMLdocument be?
Speed Index: 1613 In the fastest ~10% of all websites
Optimisation #1A truthful browserspinner
https://medium.com/@kellycatchpole/10-best-dog-breeds-for-your-family-22ea2cdde78dBrowser says pagehas finishedloadingLIES!!!!
Don’t make the browser spinnerlie.When the page says it’s doneloading, it’s really done!
Optimisation #2Progressive JPEG
Optimisation #3Responsive Images
Widescreen + Retina: 11.1MBTablet + Retina: 9.8MBPhone + Retina: 8.7MBWidescreen: 7.8MBTablet: 6.5MBPhone: 1.7MB
Optimisation #4Font Face Observer
https://github.com/bramstein/fontfaceobserver
Optimisation #5<br/>
Optimisation #6Cache everythingforever
Optimisation #7Use a CDN
Notable absentees:• “Critical CSS”• Loading content asynchronously• Anything very tricky or hacky at all…
Easy to build?
I couuuld hand-writethe HTML & CSS for this,but I want…
• A living styleguide!• Sass!• Hot reloading!• Reusable components!
The tooling:• React (no client side!)• Webpack + static-site-generator-webpack-plugin• Sass• CSS Modules
React is a better back-endtemplating language thanyour favourite back-endtemplating language.
Free?
GitHub Pages+CloudFlare=
GitHub Pages has prettycrappy caching settings…
But if you stick CloudFlarein front of it…
Easy cache header setting!
Free SSL! (well, “flexible SSL”)
A static HTML page+some photosFastEasy to buildFree✅✅✅