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
330
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
100
Objects in Space: A practical guide to CSS display, position & z-index
bensmithett
0
40
The UI is an Application
bensmithett
0
1.2k
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
520
Smarter Sass/Less Builds with Webpack (MelbJS Edition)
bensmithett
0
320
Smarter Sass builds with Webpack
bensmithett
1
220
Faking Real Time: Optimistic Updates & Eventual Consistency (Decompress 2015)
bensmithett
0
500
Other Decks in Technology
See All in Technology
初めてのAzure FunctionsをClaude Codeで作ってみた / My first Azure Functions using Claude Code
hideakiaoyagi
1
210
20250625 Snowflake Summit 2025活用事例 レポート / Nowcast Snowflake Summit 2025 Case Study Report
kkuv
1
290
Абьюзим random_bytes(). Фёдор Кулаков, разработчик Lamoda Tech
lamodatech
0
330
VCpp Link and Library - C++ breaktime 2025 Summer
harukasao
0
240
データプラットフォーム技術におけるメダリオンアーキテクチャという考え方/DataPlatformWithMedallionArchitecture
smdmts
5
620
JSX - 歴史を振り返り、⾯⽩がって、エモくなろう
pal4de
4
1.1k
AIのAIによるAIのための出力評価と改善
chocoyama
2
540
AIエージェント最前線! Amazon Bedrock、Amazon Q、そしてMCPを使いこなそう
minorun365
PRO
13
4.8k
Witchcraft for Memory
pocke
1
220
監視のこれまでとこれから/sakura monitoring seminar 2025
fujiwara3
11
3.8k
Oracle Cloud Infrastructure:2025年6月度サービス・アップデート
oracle4engineer
PRO
2
210
Amazon ECS & AWS Fargate 運用アーキテクチャ2025 / Amazon ECS and AWS Fargate Ops Architecture 2025
iselegant
16
5.3k
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
490
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
How to Ace a Technical Interview
jacobian
277
23k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
210
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Building an army of robots
kneath
306
45k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
Automating Front-end Workflow
addyosmani
1370
200k
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 ✅ ✅ ✅