Slide 1
Slide 1 text
Data Driven
Performance
Optimisation
Stefan Baumgartner | @ddprrt
Slide 2
Slide 2 text
ruxit.com
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
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
Slide 5
Slide 5 text
Faster than a
speeding bullet?
Slide 6
Slide 6 text
Our websites are
too heavy!!
Slide 7
Slide 7 text
Images
1.310
Other
4
Video
227
HTML
56
Fonts
97
Scripts
329
Stylesheets
63
http://httparchive.org/interesting.php
Total: 2099 kB
Slide 8
Slide 8 text
Users expect fast sites.
After 3 seconds of load time,
40% will abandon your site
https://speakerdeck.com/lara/designing-for-performance
Slide 9
Slide 9 text
Etsy found out that:
+ 160kb on a page
+ 12% bounce rate
https://speakerdeck.com/lara/designing-for-performance
Slide 10
Slide 10 text
Also:
- 1 redirect on a page
+ 12% click-through rate
https://speakerdeck.com/lara/designing-for-performance
Slide 11
Slide 11 text
Performance matters!
Slide 12
Slide 12 text
But what should we
be aiming for?
Slide 13
Slide 13 text
We need good,
reliable and replicable
key metrics
Slide 14
Slide 14 text
1 Pageweight
Slide 15
Slide 15 text
“Weight” is an easy one: The bigger your
site is, the more it has to transfer over the
wire.
Slide 16
Slide 16 text
So the goal is: Reduce weight!
Slide 17
Slide 17 text
Images
1.310
Other
4
Video
227
HTML
56
Fonts
97
Scripts
329
Stylesheets
63
Slide 18
Slide 18 text
http://imageoptim.com
Slide 19
Slide 19 text
Slide 20
Slide 20 text
How to keep track?
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
https://github.com/macbre/phantomas
Slide 24
Slide 24 text
http://www.filamentgroup.com/lab/weight-wait.html
Slide 25
Slide 25 text
This menu at
the top holds 94
product images
The requests alone
stall the browser
for roughly 14 sec
Slide 26
Slide 26 text
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
Slide 27
Slide 27 text
2 Page Speed Score
Slide 28
Slide 28 text
“Page Speed Score” tells you if you’ve
followed a series of best practices for every
component of your website
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
https://developers.google.com/speed/pagespeed/insights
Slide 31
Slide 31 text
Eliminate render-blocking JS and CSS
Optimize images
Minify HTML, CSS, JavaScript
Slide 32
Slide 32 text
Reduce server response time
Leverage browser caching
Avoid landing page redirects
Enable compression
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
How safe is Page Speed Score?
Slide 37
Slide 37 text
blog.catchpoint.com/2011/12/27/biggest_misconception_about_google_page_speed/
Slide 38
Slide 38 text
blog.ruxit.com/pagespeed-score-matters-less-think/
Slide 39
Slide 39 text
http://mobiforge.com/research-analysis/googles-mobile-friendly-test-can-spruce-goose-really-fly
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
What the …?
Slide 44
Slide 44 text
Solution: Page Speed Score is a good
indicator on your dev style
… but we need more!
Slide 45
Slide 45 text
3 Speed Index
Slide 46
Slide 46 text
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.
Slide 47
Slide 47 text
∫ 1 - visuallycomplete/100
0
end
Slide 48
Slide 48 text
What does this mean?
Slide 49
Slide 49 text
Visually complete (%)
0
25
50
75
100
Time in Seconds
0s 1s 2s 3s 4s 5s 6s 7s 8s
Slide 50
Slide 50 text
Visually complete (%)
0
25
50
75
100
Time in Seconds
0s 1s 2s 3s 4s 5s 6s 7s 8s
Slide 51
Slide 51 text
Visually complete (%)
0
25
50
75
100
Time in Seconds
0s 1s 2s 3s 4s 5s 6s 7s 8s
Slide 52
Slide 52 text
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
Slide 53
Slide 53 text
The lower
Speed Index: The lower the better
Slide 54
Slide 54 text
http://webpagetest.org
Slide 55
Slide 55 text
No content
Slide 56
Slide 56 text
Critical CSS
Slide 57
Slide 57 text
No content
Slide 58
Slide 58 text
This is where the content is loaded
So let’s show the user everything
we’ve got so far
Slide 59
Slide 59 text
No content
Slide 60
Slide 60 text
CSS is blocking.
That means: No content shown until
the whole CSS is loaded
Slide 61
Slide 61 text
Open up your
website at the
desired viewport.
Look at the above
the fold content.
Slide 62
Slide 62 text
Open a headless
browser to
find the CSS for
that content.
Slide 63
Slide 63 text
npm install --save-dev critical
Slide 64
Slide 64 text
critical.generate({
src: 'index.html',
dest: 'styles/main.css',
width: 1300,
height: 900
});
Slide 65
Slide 65 text
critical.generate({
src: 'index.html',
dest: 'styles/main.css',
width: 1300,
height: 900
});
Slide 66
Slide 66 text
critical.generate({
src: 'index.html',
dest: 'styles/main.css',
width: 1300,
height: 900
});
Slide 67
Slide 67 text
http://jonassebastianohlsson.com/criticalpathcssgenerator/
Slide 68
Slide 68 text
Slide 69
Slide 69 text
var ms=document.createElement(“link");
ms.rel=“stylesheet";
ms.href=“http://path/to/main.min.css”;
document.getElementsByTagName(“head”)[0].appendChild(ms);
Slide 70
Slide 70 text
No content
Slide 71
Slide 71 text
No content
Slide 72
Slide 72 text
One more optimisation
Slide 73
Slide 73 text
No content
Slide 74
Slide 74 text
What happened?
Slide 75
Slide 75 text
On loading a new page…
why should we (even if it’s cached)
check everything again and again?
Slide 76
Slide 76 text
Just load the things we need and
tell the browser where we are without
loading all the burden
Slide 77
Slide 77 text
As an enhancement!
Slide 78
Slide 78 text
if(window.history && history.pushState) { … }
Slide 79
Slide 79 text
$('body').on('click', '#content
a:not([href*=#]):not([href^=http])', function(e) {
e.preventDefault();
retrieveContent(this.href);
});
Slide 80
Slide 80 text
var retrieveContent = function(loc) {
$.get(loc)
.done(function(data) {
updateContent(data, loc);
})
.fail(function(err) {
window.location.href = loc;
});
};
Slide 81
Slide 81 text
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);
};
Slide 82
Slide 82 text
Speed Index equals regular Speed Index
of the site without JS and CSS
Slide 83
Slide 83 text
Take it even further…
Slide 84
Slide 84 text
Do contents change during the period
of a session?
Slide 85
Slide 85 text
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);
};
Slide 86
Slide 86 text
var retrieveContent = function(loc) {
if(sessionStorage.key(loc)) {
updateContent(sessionStorage.getItem(loc), loc);
} else {
$.get(loc)
.done(function(data) {
updateContent(data, loc);
})
}
};
Slide 87
Slide 87 text
Speed Index? Probably 0
Slide 88
Slide 88 text
+ What’s more?
Slide 89
Slide 89 text
Apdex
Network latency
Connection speed
Bandwidth
Slide 90
Slide 90 text
THX!
@ddprrt - fettblog.eu - workingdraft.de