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
450
Measuring Web Performance for Wikipedia using synthetic testing tools
soulislove
0
400
Measuring Web Performance Using Selenium
soulislove
2
780
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
51
Integrating performance tools into continuous delivery
soulislove
0
250
Sitespeed.io Lightning demo @ Velocity Santa Clara 2014
soulislove
0
110
Other Decks in Technology
See All in Technology
OCI Success Journey OCIの何が評価されてる?疑問に答える事例セミナー(2025年2月実施)
oracle4engineer
PRO
2
220
【Snowflake九州ユーザー会#2】BigQueryとSnowflakeを比較してそれぞれの良し悪しを掴む / BigQuery vs Snowflake: Pros & Cons
civitaspo
2
490
LayerXにおけるAI活用事例とその裏側(2025年2月) バクラクの目指す “業務の自動運転” の例 / layerx-ai-deim2025
yuya4
1
550
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership, regardless of position
madoxten
3
2k
ABWG2024採択者が語るエンジニアとしての自分自身の見つけ方〜発信して、つながって、世界を広げていく〜
maimyyym
1
210
データモデルYANGの処理系を再発明した話
tjmtrhs
0
310
大規模アジャイルフレームワークから学ぶエンジニアマネジメントの本質
staka121
PRO
3
1.6k
Aurora PostgreSQLがCloudWatch Logsに 出力するログの課金を削減してみる #jawsdays2025
non97
1
240
リクルートのエンジニア組織を下支えする 新卒の育成の仕組み
recruitengineers
PRO
2
180
Amazon Athenaから利用時のGlueのIcebergテーブルのメンテナンスについて
nayuts
0
110
フォーイット_エンジニア向け会社紹介資料_Forit_Company_Profile.pdf
forit_tech
1
1.7k
MIMEと文字コードの闇
hirachan
2
1.5k
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
134
33k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Facilitating Awesome Meetings
lara
53
6.3k
A Philosophy of Restraint
colly
203
16k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
GraphQLとの向き合い方2022年版
quramy
44
14k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
GitHub's CSS Performance
jonrohan
1030
460k
For a Future-Friendly Web
brad_frost
176
9.6k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
A Tale of Four Properties
chriscoyier
158
23k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
13
1k
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