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
Data Driven Performance Optimisation
Search
Stefan Baumgartner
June 10, 2015
Technology
2
420
Data Driven Performance Optimisation
Which key metrics should we choose to get an idea on our site's performance?
Stefan Baumgartner
June 10, 2015
Tweet
Share
More Decks by Stefan Baumgartner
See All by Stefan Baumgartner
Idiomatic Rust
ddprrt
0
87
Automating UI development
ddprrt
0
110
The hero's journey in JavaScript frameworks
ddprrt
0
540
Get a grid for flex' sake
ddprrt
1
440
Technical Writing
ddprrt
0
450
Web performance optimisation for single page applications
ddprrt
1
490
The Super Mario Bros. Principle - Extended Edition
ddprrt
0
130
HTTP/2 is coming! Unbundle all the things?!?
ddprrt
4
490
The Super Mario Bros. Principle
ddprrt
2
430
Other Decks in Technology
See All in Technology
開発者の定量・定性データを組み合わせて開発者体験を把握するための取り組み
ham0215
1
140
Technical Writing Meetup vol.35
soracom
PRO
2
120
「自動テストのプラクティスを効果的に学ぶためのカードゲーム」 ( #sqip2024 )
teyamagu
PRO
2
180
開発生産性を始める前に開発チームができること / optim-improve-development-productivity.pdf
optim
0
110
2024年のナビゲーション・フォーカス対応:Composeでキーボード・ナビゲーションをサポートしよう
tahia910
0
110
『GRANBLUE FANTASY: Relink』クオリティと物量の両立に挑戦したフェイシャルアニメーション事例 ~カットシーンからランタイムまで~
cygames
0
100
o1のAPIで実験してみたが 制限きつすぎて辛かった話
pharma_x_tech
0
210
「認証認可」という体験をデザインする ~Nekko Cloud認証認可基盤計画
logica0419
2
450
20240911_New_Relicダッシュボード活用例
speakerdeckfk
0
110
Segment Anything Model 2
tenten0727
3
710
eBPFのこれまでとこれから
yutarohayakawa
10
3.2k
Google CloudのLLM活用の選択肢を広げるVertex AIのパートナーモデル
nayuts
0
130
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
32k
Documentation Writing (for coders)
carmenintech
65
4.3k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
1
55
Build The Right Thing And Hit Your Dates
maggiecrowley
30
2.3k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
230
17k
Robots, Beer and Maslow
schacon
PRO
157
8.2k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
Why Our Code Smells
bkeepers
PRO
334
56k
Navigating Team Friction
lara
183
13k
The Art of Programming - Codeland 2020
erikaheidi
48
13k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
25
3.9k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
363
22k
Transcript
Data Driven Performance Optimisation Stefan Baumgartner | @ddprrt
ruxit.com
None
2011 2015 4 times a week in the fitness studio
0, nada, niente, null, void, undefined able to run 10 kilometers able to get to the supermarket across the corner 20% body fat this is getting too intimate (and embarrassing) 74kg
Faster than a speeding bullet?
Our websites are too heavy!!
Images 1.310 Other 4 Video 227 HTML 56 Fonts 97
Scripts 329 Stylesheets 63 http://httparchive.org/interesting.php Total: 2099 kB
Users expect fast sites. After 3 seconds of load time,
40% will abandon your site https://speakerdeck.com/lara/designing-for-performance
Etsy found out that: + 160kb on a page +
12% bounce rate https://speakerdeck.com/lara/designing-for-performance
Also: - 1 redirect on a page + 12% click-through
rate https://speakerdeck.com/lara/designing-for-performance
Performance matters!
But what should we be aiming for?
We need good, reliable and replicable key metrics
1 Pageweight
“Weight” is an easy one: The bigger your site is,
the more it has to transfer over the wire.
So the goal is: Reduce weight!
Images 1.310 Other 4 Video 227 HTML 56 Fonts 97
Scripts 329 Stylesheets 63
http://imageoptim.com
<img src=“path/to/image/800.jpg“ srcset=“path/to/image/200.jpg 200w, path/to/image/400.jpg 400w, path/to/image/600.jpg 600w, path/to/image/800.jpg 800w,
path/to/image/1000.jpg 1000w," sizes="(min-width: 992px) 60vw, 80vw" >
How to keep track?
None
None
https://github.com/macbre/phantomas
http://www.filamentgroup.com/lab/weight-wait.html
This menu at the top holds 94 product images The
requests alone stall the browser for roughly 14 sec
But it just has to be available when JavaScript is
on … so we load it asynchronously in our JavaScript at the bottom. This reduces time to glass to 1.3s
2 Page Speed Score
“Page Speed Score” tells you if you’ve followed a series
of best practices for every component of your website
None
https://developers.google.com/speed/pagespeed/insights
Eliminate render-blocking JS and CSS Optimize images Minify HTML, CSS,
JavaScript
Reduce server response time Leverage browser caching Avoid landing page
redirects Enable compression
None
None
None
How safe is Page Speed Score?
blog.catchpoint.com/2011/12/27/biggest_misconception_about_google_page_speed/
blog.ruxit.com/pagespeed-score-matters-less-think/
http://mobiforge.com/research-analysis/googles-mobile-friendly-test-can-spruce-goose-really-fly
None
None
None
What the …?
Solution: Page Speed Score is a good indicator on your
dev style … but we need more!
3 Speed Index
The Speed Index is the average time at which visible
parts of the page are displayed. It is expressed in milliseconds and dependent on size of the view port.
∫ 1 - visuallycomplete/100 0 end
What does this mean?
Visually complete (%) 0 25 50 75 100 Time in
Seconds 0s 1s 2s 3s 4s 5s 6s 7s 8s
Visually complete (%) 0 25 50 75 100 Time in
Seconds 0s 1s 2s 3s 4s 5s 6s 7s 8s
Visually complete (%) 0 25 50 75 100 Time in
Seconds 0s 1s 2s 3s 4s 5s 6s 7s 8s
Every page is fully loaded in 10 seconds 93% linear
after 1 second 100% linear after 10 seconds 20% linear after 9 seconds 7% linear after 9 seconds 80% linear after 1 second 881 5000 8610
The lower Speed Index: The lower the better
http://webpagetest.org
None
Critical CSS
None
This is where the content is loaded So let’s show
the user everything we’ve got so far
None
CSS is blocking. That means: No content shown until the
whole CSS is loaded
Open up your website at the desired viewport. Look at
the above the fold content.
Open a headless browser to find the CSS for that
content.
npm install --save-dev critical
critical.generate({ src: 'index.html', dest: 'styles/main.css', width: 1300, height: 900 });
critical.generate({ src: 'index.html', dest: 'styles/main.css', width: 1300, height: 900 });
critical.generate({ src: 'index.html', dest: 'styles/main.css', width: 1300, height: 900 });
http://jonassebastianohlsson.com/criticalpathcssgenerator/
<!doctype html> <html> <head> <style id=“critical”> </style> </head>
<script id=“load-main-css"> var ms=document.createElement(“link"); ms.rel=“stylesheet"; ms.href=“http://path/to/main.min.css”; document.getElementsByTagName(“head”)[0].appendChild(ms); </script>
None
None
One more optimisation
None
What happened?
On loading a new page… why should we (even if
it’s cached) check everything again and again?
Just load the things we need and tell the browser
where we are without loading all the burden
As an enhancement!
if(window.history && history.pushState) { … }
$('body').on('click', '#content a:not([href*=#]):not([href^=http])', function(e) { e.preventDefault(); retrieveContent(this.href); });
var retrieveContent = function(loc) { $.get(loc) .done(function(data) { updateContent(data, loc);
}) .fail(function(err) { window.location.href = loc; }); };
var updateContent = function(data, url) { var mkup = $(data);
url = url.toString(); history.pushState({ url: url, title: title }, mkup.filter('title'), url); $('#content').html(mkup.filter('#content').html()) .remove(); $('title').text(title); };
Speed Index equals regular Speed Index of the site without
JS and CSS
Take it even further…
Do contents change during the period of a session?
var updateContent = function(data, url) { var mkup = $(data);
url = url.toString(); history.pushState({ url: url, title: title }, mkup.filter('title'), url); $('#content').html(mkup.filter('#content').html()) .remove(); $(‘title').text(title); sessionStorage.setItem(url, data); };
var retrieveContent = function(loc) { if(sessionStorage.key(loc)) { updateContent(sessionStorage.getItem(loc), loc); }
else { $.get(loc) .done(function(data) { updateContent(data, loc); }) } };
Speed Index? Probably 0
+ What’s more?
Apdex Network latency Connection speed Bandwidth
THX! @ddprrt - fettblog.eu - workingdraft.de