Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
The 12MB Web Page: A tale of perfect PageSpeed ...
Search
Ben Smithett
May 09, 2016
Technology
1
320
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
Share
More Decks by Ben Smithett
See All by Ben Smithett
Atomic CSS with Fela
bensmithett
0
89
Objects in Space: A practical guide to CSS display, position & z-index
bensmithett
0
32
The UI is an Application
bensmithett
0
1.1k
Hands on with the modern front end stack
bensmithett
0
1.2k
The New Front End Stack: A really really really high level introduction
bensmithett
1
500
Smarter Sass/Less Builds with Webpack (MelbJS Edition)
bensmithett
0
310
Smarter Sass builds with Webpack
bensmithett
1
210
Faking Real Time: Optimistic Updates & Eventual Consistency (Decompress 2015)
bensmithett
0
480
Other Decks in Technology
See All in Technology
MC906491 を見据えた Microsoft Entra Connect アップグレード対応
tamaiyutaro
1
520
速くて安いWebサイトを作る
nishiharatsubasa
9
11k
Amazon S3 Tablesと外部分析基盤連携について / Amazon S3 Tables and External Data Analytics Platform
nttcom
0
120
Tech Blogを書きやすい環境づくり
lycorptech_jp
PRO
1
230
技術負債の「予兆検知」と「状況異変」のススメ / Technology Dept
i35_267
1
1k
開発組織のための セキュアコーディング研修の始め方
flatt_security
3
1.4k
運用しているアプリケーションのDBのリプレイスをやってみた
miura55
1
490
バックエンドエンジニアのためのフロントエンド入門 #devsumiC
panda_program
16
7k
レビューを増やしつつ 高評価維持するテクニック
tsuzuki817
1
480
目の前の仕事と向き合うことで成長できる - 仕事とスキルを広げる / Every little bit counts
soudai
24
6.6k
スクラムのイテレーションを導入してチームの雰囲気がより良くなった話
eccyun
0
110
現場で役立つAPIデザイン
nagix
32
11k
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
The Invisible Side of Design
smashingmag
299
50k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
How to Ace a Technical Interview
jacobian
276
23k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
Bash Introduction
62gerente
610
210k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
Statistics for Hackers
jakevdp
797
220k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Optimizing for Happiness
mojombo
376
70k
Transcript
The 12MB Web Page A tale of perfect PageSpeed scores
& developer happiness
None
None
None
A static HTML page + some photos Fast? 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 pretty fast by default! They only get
slow when we add “clever” cruft
on the other hand…
Photos are biiiiiiiiiig!
The challenge: Can I make a blazing fast, image- heavy
web page without resorting to lots of hacks & workarounds
How fast can a simple HTML document be?
None
None
None
None
None
Speed Index: 1613 In the fastest ~10% of all websites
Optimisation #1 A truthful browser spinner
https://medium.com/@kellycatchpole/10-best-dog-breeds-for-your- family-22ea2cdde78d Browser says page has finished loading LIES!!!!
Don’t make the browser spinner lie. When the page says
it’s done loading, it’s really done!
Optimisation #2 Progressive JPEG
None
Optimisation #3 Responsive Images
Widescreen + Retina: 11.1MB Tablet + Retina: 9.8MB Phone +
Retina: 8.7MB Widescreen: 7.8MB Tablet: 6.5MB Phone: 1.7MB
Optimisation #4 Font Face Observer
None
https://github.com/bramstein/fontfaceobserver
None
Optimisation #5 <script async src=“…”>
Optimisation #6 Cache everything forever
None
Optimisation #7 Use a CDN
None
Notable absentees: • “Critical CSS” • Loading content asynchronously •
Anything very tricky or hacky at all…
Easy to build?
I couuuld hand-write the 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-end templating language than your favourite
back-end templating language.
None
None
Free?
GitHub Pages + CloudFlare =
GitHub Pages has pretty crappy caching settings…
None
But if you stick CloudFlare in front of it…
Easy cache header setting!
Free SSL! (well, “flexible SSL”)
A static HTML page + some photos Fast Easy to
build Free ✅ ✅ ✅