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
530
Get a grid for flex' sake
ddprrt
1
430
Technical Writing
ddprrt
0
440
Web performance optimisation for single page applications
ddprrt
1
480
The Super Mario Bros. Principle - Extended Edition
ddprrt
0
130
HTTP/2 is coming! Unbundle all the things?!?
ddprrt
4
470
The Super Mario Bros. Principle
ddprrt
2
410
Other Decks in Technology
See All in Technology
DevIO2024_レガシー運用からの脱却 -クラウド活用の実践事例とベストプラクティス-
jun2882
0
210
dxd2024-生成AIに振り回された3か月間の成功と失敗/dxd2024-link-and-motivation
lmi
2
260
Github Actions 로 Android 팀의 효율성 극대화
hadonghyun
0
160
RAGのサービスをリリースして1年3ヶ月が経ちました
segavvy
4
920
DDDにおける認可の扱いとKotlinにおける実装パターン / authorization-for-ddd-and-kotlin-implement-pattern
urmot
4
390
Git 研修 Advanced【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
200
GoとアクターモデルでES+CQRSを実践! / proto_actor_es_cqrs
ytake
1
150
AWSでRAGを作る法方
sonoda_mj
1
140
[I/O Extended Android 2024] What`s new in Android 2024
kyeongwan
0
220
累計ダウンロード数1億8000万を超えるアプリケーションプラットフォームのレガシーシステム脱却とモダン化への道
kmitsuhashi
0
120
CTOから見た事業開発とプロダクト開発 / My Perspective on Business and Product Development as CTO
keisuke69
4
960
地理情報とAPIのトレンド
nagix
0
160
Featured
See All Featured
Building Your Own Lightsaber
phodgson
101
5.9k
How to Ace a Technical Interview
jacobian
274
23k
The Art of Programming - Codeland 2020
erikaheidi
48
13k
[RailsConf 2023] Rails as a piece of cake
palkan
35
4.4k
Practical Orchestrator
shlominoach
185
10k
Building Adaptive Systems
keathley
34
2k
Build The Right Thing And Hit Your Dates
maggiecrowley
28
2.2k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
How STYLIGHT went responsive
nonsquared
93
5k
We Have a Design System, Now What?
morganepeng
46
7k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
105
6.8k
The Illustrated Children's Guide to Kubernetes
chrisshort
39
47k
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