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
How to make your boss speed-curious and other w...
Search
Peter Hedenskog
September 04, 2014
Technology
0
180
How to make your boss speed-curious and other webperf tricks - coldfront2014
My presentation from ColdFront2014:
http://coldfrontconf.com/
Peter Hedenskog
September 04, 2014
Tweet
Share
More Decks by Peter Hedenskog
See All by Peter Hedenskog
Keeping Wikipedia fast [WeLoveSpeed]
soulislove
1
470
Measuring Web Performance for Wikipedia using synthetic testing tools
soulislove
0
420
Measuring Web Performance Using Selenium
soulislove
2
830
Monitoring Web Performance using Open Source tools (Stockholm)
soulislove
2
230
Monitoring web performance using Open Source tools (San Francisco & Silicon Valley Web Performance Group)
soulislove
1
340
Monitoring web performance using Open Source tools (South Bay JavaScript Meetup)
soulislove
0
240
Optimise your home page (fast as lightning)
soulislove
1
54
Integrating performance tools into continuous delivery
soulislove
0
270
Sitespeed.io Lightning demo @ Velocity Santa Clara 2014
soulislove
0
120
Other Decks in Technology
See All in Technology
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
2
7.8k
FOSS4G 2025 KANSAI QGISで点群データをいろいろしてみた
kou_kita
0
410
[SRE NEXT] ARR150億円_エンジニア140名_27チーム_17プロダクトから始めるSLO.pdf
satos
2
650
ビギナーであり続ける/beginning
ikuodanaka
3
790
NewSQLや分散データベースを支えるRaftの仕組み - 仕組みを理解して知る得意不得意
hacomono
PRO
3
190
サイバーエージェントグループのSRE10年の歩みとAI時代の生存戦略
shotatsuge
4
420
Lakebaseを使ったAIエージェントを実装してみる
kameitomohiro
0
160
20250707-AI活用の個人差を埋めるチームづくり
shnjtk
6
4k
関数型プログラミングで 「脳がバグる」を乗り越える
manabeai
2
210
オフィスビルを監視しよう:フィジカル×デジタルにまたがるSLI/SLO設計と運用の難しさ / Monitoring Office Buildings: The Challenge of Physical-Digital SLI/SLO Design & Operation
bitkey
1
120
さくらのIaaS基盤のモニタリングとOpenTelemetry/OSC Hokkaido 2025
fujiwara3
3
460
【LT会登壇資料】TROCCO新コネクタ「スマレジ」を活用した直営店データの分析
kazari0425
1
110
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Designing for Performance
lara
610
69k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Side Projects
sachag
455
42k
A designer walks into a library…
pauljervisheath
207
24k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Bash Introduction
62gerente
613
210k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Transcript
How to make your boss speed-curious and other #webperf tricks
Peter Hedenskog
None
None
The Performance Golden Rule!
80-90% of the end-user response time is spent on the
frontend.
front end dev
front end dev
front end dev
front end dev
front end dev
front end dev
With great power …
comes great responsibility!
2
How to be really fast
The boss
World fastest web page
None
Start render: 0,2 s Visually Complete: 0,2 s
What can we learn?
What CDN are you using?
We know the Golden rule!
The rendering path
1. Download HTML
2. If CSS files then download
3. If JS files then download
4. DOM + CSSOM = render tree
5. Paint
Optimize the rendering path
“I like thinking big.” Donald Trump
“Think small” Peter Hedenskog
What?
super computers
super fast internet
remember
mobile phones
data
the city
magic number
14:ish kb
High Performance Browser Networking - Ilya Grigorik Paul Irish
focus
above the fold
“Think small” Peter Hedenskog
Overall
minimize
combine
avoid requests
no requests
HTML
DOM node depth
CSS
inline
<head> ... <style> body { background: #fff; } ... </style>
</head> <body>
https://github.com/filamentgroup/loadCSS
None
NEVER
Avoid reflow and repaint
None
Javascript
JAVASCRIPT CAN BE EVIL
JAVASCRIPT IS EVIL* *inside your rendering path
Synchronously loaded Javascript blocks the rendering path!
Example of non working
NEVER
use async <script src=“/js/calculate.js” async></script> https://www.igvita.com/2014/05/20/script-injected-async-scripts-considered-harmful/
measure above the fold
User Timing API
window.performance. mark(‘logoLoaded’);
window.performance. measure(‘logoTiming’, ‘navigationStart’, ‘logoLoaded’);
var items = window.performance .getEntriesByType(' measure');
None
There’s a polyfill for that!
https://gist.github.com/pmeenan/5902672
Demo
front end dev
The boss
2 kinds
money
http:// www.peterhedenskog.com/ blog/2014/09/more-speed- more-money/
end user Be kind to your users! Mother Theresa
< 0.1 second - instant < 1.0 second - flow
=>10 seconds - lost ! Robert B. Miller - Response Time in Man-Computer Conversational Transactions (1968) The brain
Visualize
Your boss understands red, yellow and green
1200 ms
red 1200 ms
yellow 1200 ms
green 1200 ms
None
x
we are 12% slower than …
None
summary
front end dev
None
small
None
•Peter in Denmark - Lars Von Trier •Donald Trump -
Gage Skidmore •Super computer - Zdjęcia Arkadiusz Sikorski •Monkey with iphone - Marsel Van Oosten •The house - Bert Kaufmann •Stop light peppers - Dennis S Hurd •What is this? - Jeff Carson •Corcovado jesus - Doug88888 •Developers - Austin Wordpress Camp •The evil king - HBO •Pippi Longstocking - Ingrid Vang Nyman •Montgomery Burns - Matt Groening •The dog - Emiliano •Paint over - franziska •Super heroes - Marvel •Vee - Netflix Image credits
Thank you! Peter Hedenskog
[email protected]
@soulislove