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
リアルタイム分析データベースで実現する SQLベースのオブザーバビリティ
mikimatsumoto
0
950
リーダブルテストコード 〜メンテナンスしやすい テストコードを作成する方法を考える〜 #DevSumi #DevSumiB / Readable test code
nihonbuson
11
5.8k
テストアーキテクチャ設計で実現する高品質で高スピードな開発の実践 / Test Architecture Design in Practice
ropqa
3
710
マルチモーダル理解と生成の統合 DeepSeek Janus, etc... / Multimodal Understanding and Generation Integration
hiroga
0
360
技術的負債解消の取り組みと専門チームのお話 #技術的負債_Findy
bengo4com
1
1.2k
Ask! NIKKEIの運用基盤と改善に向けた取り組み / NIKKEI TECH TALK #30
kaitomajima
1
450
データ基盤の成長を加速させる:アイスタイルにおける挑戦と教訓
tsuda7
3
650
依存関係があるコンポーネントは Barrel ファイルでまとめよう
azukiazusa1
3
530
The 5 Obstacles to High-Performing Teams
mdalmijn
0
270
7日間でハッキングをはじめる本をはじめてみませんか?_ITエンジニア本大賞2025
nomizone
2
1.4k
AndroidデバイスにFTPサーバを建立する
e10dokup
0
240
管理者しか知らないOutlookの裏側のAIを覗く#AzureTravelers
hirotomotaguchi
1
240
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
KATA
mclloyd
29
14k
Become a Pro
speakerdeck
PRO
26
5.1k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Building Applications with DynamoDB
mza
93
6.2k
How to train your dragon (web standard)
notwaldorf
90
5.8k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
540
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 ✅ ✅ ✅