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
SA Night #2 FinatextのSA思想/SA Night #2 Finatext session
satoshiimai
1
130
Googleマップ/Earthが一般化した 地図タイルのイマ
mapconcierge4agu
1
200
2024.02.19 W&B AIエージェントLT会 / AIエージェントが業務を代行するための計画と実行 / Algomatic 宮脇
smiyawaki0820
10
1.5k
現場の種を事業の芽にする - エンジニア主導のイノベーションを事業戦略に装着する方法 -
kzkmaeda
2
1.8k
地方拠点で エンジニアリングマネージャーってできるの? 〜地方という制約を楽しむオーナーシップとコミュニティ作り〜
1coin
1
220
ハッキングの世界に迫る~攻撃者の思考で考えるセキュリティ~
nomizone
13
5k
The Future of SEO: The Impact of AI on Search
badams
0
160
トラシューアニマルになろう ~開発者だからこそできる、安定したサービス作りの秘訣~
jacopen
2
1.8k
急成長する企業で作った、エンジニアが輝ける制度/ 20250214 Rinto Ikenoue
shift_evolve
2
1.1k
開発組織のための セキュアコーディング研修の始め方
flatt_security
3
1.4k
速くて安いWebサイトを作る
nishiharatsubasa
9
11k
管理者しか知らないOutlookの裏側のAIを覗く#AzureTravelers
hirotomotaguchi
2
320
Featured
See All Featured
The Language of Interfaces
destraynor
156
24k
Designing for Performance
lara
604
68k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
29
2.2k
How to train your dragon (web standard)
notwaldorf
91
5.8k
Thoughts on Productivity
jonyablonski
69
4.5k
Designing Experiences People Love
moore
139
23k
Fireside Chat
paigeccino
34
3.2k
Become a Pro
speakerdeck
PRO
26
5.1k
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 ✅ ✅ ✅