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
470
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
110
Automating UI development
ddprrt
0
140
The hero's journey in JavaScript frameworks
ddprrt
0
640
Get a grid for flex' sake
ddprrt
1
500
Technical Writing
ddprrt
0
520
Web performance optimisation for single page applications
ddprrt
1
640
The Super Mario Bros. Principle - Extended Edition
ddprrt
0
140
HTTP/2 is coming! Unbundle all the things?!?
ddprrt
4
570
The Super Mario Bros. Principle
ddprrt
2
540
Other Decks in Technology
See All in Technology
A2Aのクライアントを自作する
rynsuke
1
170
20250625 Snowflake Summit 2025活用事例 レポート / Nowcast Snowflake Summit 2025 Case Study Report
kkuv
1
310
低レイヤを知りたいPHPerのためのCコンパイラ作成入門 完全版 / Building a C Compiler for PHPers Who Want to Dive into Low-Level Programming - Expanded
tomzoh
4
3.2k
GitHub Copilot の概要
tomokusaba
1
130
Postman AI エージェントビルダー最新情報
nagix
0
110
“社内”だけで完結していた私が、AWS Community Builder になるまで
nagisa53
1
380
OpenHands🤲にContributeしてみた
kotauchisunsun
1
430
HiMoR: Monocular Deformable Gaussian Reconstruction with Hierarchical Motion Representation
spatial_ai_network
0
110
標準技術と独自システムで作る「つらくない」SaaS アカウント管理 / Effortless SaaS Account Management with Standard Technologies & Custom Systems
yuyatakeyama
3
1.2k
Model Mondays S2E02: Model Context Protocol
nitya
0
220
M3 Expressiveの思想に迫る
chnotchy
0
100
AWS Summit Japan 2025 Community Stage - App workflow automation by AWS Step Functions
matsuihidetoshi
1
260
Featured
See All Featured
Docker and Python
trallard
44
3.4k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Navigating Team Friction
lara
187
15k
The Invisible Side of Design
smashingmag
299
51k
Done Done
chrislema
184
16k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.3k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Thoughts on Productivity
jonyablonski
69
4.7k
Agile that works and the tools we love
rasmusluckow
329
21k
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