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 scores & developer happiness
Search
Ben Smithett
May 09, 2016
Technology
1
300
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
69
Objects in Space: A practical guide to CSS display, position & z-index
bensmithett
0
19
The UI is an Application
bensmithett
0
1.1k
Hands on with the modern front end stack
bensmithett
0
1.1k
The New Front End Stack: A really really really high level introduction
bensmithett
1
460
Smarter Sass/Less Builds with Webpack (MelbJS Edition)
bensmithett
0
280
Smarter Sass builds with Webpack
bensmithett
1
190
Faking Real Time: Optimistic Updates & Eventual Consistency (Decompress 2015)
bensmithett
0
460
Other Decks in Technology
See All in Technology
CEL(Common Expression Language)で書いた条件にマッチしたIAM Policyを見つける / iam-policy-finder
fujiwara3
0
710
Github Actions 로 Android 팀의 효율성 극대화
hadonghyun
0
160
[NIKKEI Tech Talk]Bias for Action!! 実践から学ぶための仕組とコミュニティ / Community for Practice and Learning
kanamasa
0
270
目標設定は好きですか? アジャイルとともに目標と向き合い続ける方法 / Do you like target Management?
kakehashi
10
3k
ABEMAにおけるLLMを用いたコンテンツベース推薦システム導入と効果検証
cyberagentdevelopers
PRO
1
730
初中級者用如何使用backlog -VALE TUDOEDITION-
in0u
0
140
さらに高品質・高速化を目指すAI時代のテスト設計支援と、めざす先 / AI Test Lab vol.1
shift_evolve
0
190
Classmethod Odyssey 登壇資料
yamahiro
0
390
累計ダウンロード数1億8000万を超えるアプリケーションプラットフォームのレガシーシステム脱却とモダン化への道
kmitsuhashi
0
120
テストケースの自動生成に生成AIの導入を試みた話と生成AIによる今後の期待
shift_evolve
0
180
ここがすごいよ! AWS Systems Manager!
saichan11
0
1.8k
「我々はどこに向かっているのか」を問い続けるための仕組みづくり / Establishing a System for Continuous Inquiry about where we are
daitasu
0
170
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
25
6.7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
17
1.5k
Bash Introduction
62gerente
607
210k
Atom: Resistance is Futile
akmur
261
25k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.8k
How to Ace a Technical Interview
jacobian
274
23k
RailsConf 2023
tenderlove
16
720
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
17
8.7k
In The Pink: A Labor of Love
frogandcode
139
22k
Building Better People: How to give real-time feedback that sticks.
wjessup
357
18k
The Cost Of JavaScript in 2023
addyosmani
31
4.7k
The World Runs on Bad Software
bkeepers
PRO
63
11k
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 ✅ ✅ ✅