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
81
Objects in Space: A practical guide to CSS display, position & z-index
bensmithett
0
25
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
480
Smarter Sass/Less Builds with Webpack (MelbJS Edition)
bensmithett
0
300
Smarter Sass builds with Webpack
bensmithett
1
200
Faking Real Time: Optimistic Updates & Eventual Consistency (Decompress 2015)
bensmithett
0
470
Other Decks in Technology
See All in Technology
アジャイルチームがらしさを発揮するための目標づくり / Making the goal and enabling the team
kakehashi
3
160
The Rise of LLMOps
asei
9
1.8k
【Startup CTO of the Year 2024 / Audience Award】アセンド取締役CTO 丹羽健
niwatakeru
0
1.4k
Lambda10周年!Lambdaは何をもたらしたか
smt7174
2
130
ドメインの本質を掴む / Get the essence of the domain
sinsoku
2
160
10XにおけるData Contractの導入について: Data Contract事例共有会
10xinc
7
690
Shopifyアプリ開発における Shopifyの機能活用
sonatard
4
260
IBC 2024 動画技術関連レポート / IBC 2024 Report
cyberagentdevelopers
PRO
1
120
個人でもIAM Identity Centerを使おう!(アクセス管理編)
ryder472
4
240
Mastering Quickfix
daisuzu
1
130
飲食店データの分析事例とそれを支えるデータ基盤
kimujun
0
210
TypeScript、上達の瞬間
sadnessojisan
48
14k
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
44
2.2k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Visualization
eitanlees
145
15k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
28
2k
The Cult of Friendly URLs
andyhume
78
6k
Testing 201, or: Great Expectations
jmmastey
38
7.1k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2.1k
Practical Orchestrator
shlominoach
186
10k
Designing on Purpose - Digital PM Summit 2013
jponch
115
7k
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.3k
Product Roadmaps are Hard
iamctodd
PRO
49
11k
Intergalactic Javascript Robots from Outer Space
tanoku
269
27k
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 ✅ ✅ ✅