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
450
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
96
Automating UI development
ddprrt
0
120
The hero's journey in JavaScript frameworks
ddprrt
0
600
Get a grid for flex' sake
ddprrt
1
480
Technical Writing
ddprrt
0
500
Web performance optimisation for single page applications
ddprrt
1
590
The Super Mario Bros. Principle - Extended Edition
ddprrt
0
130
HTTP/2 is coming! Unbundle all the things?!?
ddprrt
4
540
The Super Mario Bros. Principle
ddprrt
2
500
Other Decks in Technology
See All in Technology
사이드 프로젝트를 20번 실패한 주니어의 오답노트 훔쳐보기(feat. KMP)
yjyoon
0
580
みんなで育てるNewsPicksのSLO
troter
4
1k
日本MySQLユーザ会ができるまで / making MyNA
tmtms
1
130
我々に残された仕事はあるのか?
taishiyade
0
170
パスキー導入の課題と ベストプラクティス、今後の展望
ritou
6
590
もうVPNは古い? VPNを使わずに オンプレサーバーを 管理する手法あれこれ
ebibibi
0
170
OPENLOGI Company Profile for engineer
hr01
1
22k
単一の深層学習モデルによる不確実性の定量化の紹介 ~その予測結果正しいですか?~
ftakahashi
PRO
3
490
ISUCONにPHPで挑み続けてできるようになっ(てき)たこと / phperkaigi2025
blue_goheimochi
0
120
Amazon Bedrock GenUハンズオン座学資料 #1 GenU環境で生成AIを体験してみよう
tsukuboshi
0
240
組織に持ち込む脅威モデリング
nikinusu
3
680
BCMathを高速化した一部始終をC言語でガチ目に解説する / BCMath performance improvement explanation
sakitakamachi
2
530
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Practical Orchestrator
shlominoach
186
10k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
21k
Building an army of robots
kneath
303
45k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
28
2k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.2k
Thoughts on Productivity
jonyablonski
69
4.5k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
430
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
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