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
480
Measuring Web Performance for Wikipedia using synthetic testing tools
soulislove
0
430
Measuring Web Performance Using Selenium
soulislove
2
840
Monitoring Web Performance using Open Source tools (Stockholm)
soulislove
2
240
Monitoring web performance using Open Source tools (San Francisco & Silicon Valley Web Performance Group)
soulislove
1
350
Monitoring web performance using Open Source tools (South Bay JavaScript Meetup)
soulislove
0
240
Optimise your home page (fast as lightning)
soulislove
1
55
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
『FailNet~やらかし共有SNS~』エレベーターピッチ
yokomachi
1
200
DDD集約とサービスコンテキスト境界との関係性
pandayumi
2
250
サンドボックス技術でAI利活用を促進する
koh_naga
0
170
「魔法少女まどか☆マギカ Magia Exedra」のグローバル展開を支える、開発チームと翻訳チームの「意識しない協創」を実現するローカライズシステム
gree_tech
PRO
0
500
「魔法少女まどか☆マギカ Magia Exedra」での負荷試験の実践と学び
gree_tech
PRO
0
500
事業価値と Engineering
recruitengineers
PRO
8
5.6k
異業種出身エンジニアが気づいた、転向して十数年経っても変わらない自分の武器とは
macnekoayu
0
280
AWS環境のリソース調査を Claude Code で効率化 / aws investigate with cc devio2025
masahirokawahara
2
1.2k
退屈なことはDevinにやらせよう〜〜Devin APIを使ったVisual Regression Testの自動追加〜
kawamataryo
4
1.4k
研究開発と製品開発、両利きのロボティクス
youtalk
1
290
Bye-Bye Query Spaghetti: Write Queries You'll Actually Understand Using Pipelined SQL Syntax
tobiaslampertlotum
0
130
7月のガバクラ利用料が高かったので調べてみた
techniczna
3
830
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
A Modern Web Designer's Workflow
chriscoyier
696
190k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.8k
Navigating Team Friction
lara
189
15k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
11
1.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