Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Data Driven Performance Optimisation
Stefan Baumgartner
June 10, 2015
Technology
2
330
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
52
Automating UI development
ddprrt
0
110
The hero's journey in JavaScript frameworks
ddprrt
0
390
Get a grid for flex' sake
ddprrt
1
310
Technical Writing
ddprrt
0
330
Web performance optimisation for single page applications
ddprrt
1
310
The Super Mario Bros. Principle - Extended Edition
ddprrt
1
120
HTTP/2 is coming! Unbundle all the things?!?
ddprrt
4
340
The Super Mario Bros. Principle
ddprrt
2
340
Other Decks in Technology
See All in Technology
230125 モニターマウントLT ITガジェット翁(Ryu.Cyber)さん
comucal
PRO
0
4.8k
USB PD で迎える AC アダプター大統一時代
puhitaku
2
2k
NGINXENG JP#2 - 1-NGINX-エンジニアリング勉強会-きょうの見どころ
hiropo20
0
120
5分でわかるファストドクターテクノロジーズ
fast_doctor
0
100
DNS権威サーバのクラウドサービス向けに行われた攻撃および対策 / DNS Pseudo-Random Subdomain Attack and mitigations
kazeburo
5
1.4k
OPENLOGI Company Profile
hr01
0
13k
Exploring MapStore Release 2022.02: improved 3DTiles support and more
simboss
PRO
0
410
データ分析基盤の要件分析の話(202201_JEDAI)
yabooun
0
400
開発者と協働できるメトリクスダッシュボードを作ろう!/SRE Lounge 2023
lmi
3
660
金属加工屋の営業マンがSTマイクロで・・・
usashirou
0
180
02_プロトタイピングの進め方
kouzoukaikaku
0
850
01_ユーザーリサーチ実施の進め方
kouzoukaikaku
0
860
Featured
See All Featured
A designer walks into a library…
pauljervisheath
199
16k
Three Pipe Problems
jasonvnalue
89
8.9k
Producing Creativity
orderedlist
PRO
335
38k
Testing 201, or: Great Expectations
jmmastey
25
5.7k
Pencils Down: Stop Designing & Start Developing
hursman
114
10k
Designing on Purpose - Digital PM Summit 2013
jponch
108
5.9k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
318
19k
Done Done
chrislema
178
15k
What the flash - Photography Introduction
edds
64
10k
Scaling GitHub
holman
453
140k
The Pragmatic Product Professional
lauravandoore
21
3.5k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
2
410
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