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
170
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
440
Measuring Web Performance for Wikipedia using synthetic testing tools
soulislove
0
390
Measuring Web Performance Using Selenium
soulislove
2
730
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
330
Monitoring web performance using Open Source tools (South Bay JavaScript Meetup)
soulislove
0
230
Optimise your home page (fast as lightning)
soulislove
1
48
Integrating performance tools into continuous delivery
soulislove
0
240
Sitespeed.io Lightning demo @ Velocity Santa Clara 2014
soulislove
0
110
Other Decks in Technology
See All in Technology
Azureの開発で辛いところ
re3turn
0
210
.NET AspireでAzure Functionsやクラウドリソースを統合する
tsubakimoto_s
0
140
30分でわかるデータ分析者のためのディメンショナルモデリング #datatechjp / 20250120
kazaneya
PRO
17
4.1k
大規模言語モデルとそのソフトウェア開発に向けた応用 (2024年版)
kazato
2
460
三菱電機で社内コミュニティを立ち上げた話
kurebayashi
1
250
ハイテク休憩
sat
PRO
2
190
大規模言語モデル・対話型生成AIによるテスト支援の広さと深さ / Exploring Use of LLM/AI for Testing 2024
ishikawafyu
0
110
DUSt3R, MASt3R, MASt3R-SfM にみる3D基盤モデル
spatial_ai_network
3
510
組織に自動テストを書く文化を根付かせる戦略(2024冬版) / Building Automated Test Culture 2024 Winter Edition
twada
PRO
26
7.1k
深層学習と3Dキャプチャ・3Dモデル生成(土木学会応用力学委員会 応用数理・AIセミナー)
pfn
PRO
0
410
知っててうれしい HTTP Cookie を使ったセッション管理について
greendrop
1
110
I could be Wrong!! - Learning from Agile Experts
kawaguti
PRO
8
2.6k
Featured
See All Featured
Embracing the Ebb and Flow
colly
84
4.5k
Docker and Python
trallard
43
3.2k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.9k
Optimizing for Happiness
mojombo
376
70k
Practical Orchestrator
shlominoach
186
10k
The Cult of Friendly URLs
andyhume
78
6.1k
YesSQL, Process and Tooling at Scale
rocio
170
14k
Documentation Writing (for coders)
carmenintech
67
4.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
112
50k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Faster Mobile Websites
deanohume
305
30k
Rails Girls Zürich Keynote
gr2m
94
13k
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