Solution: Page Speed Score is a good
indicator on your dev style
… but we need more!
Slide 36
Slide 36 text
Speed Index
3
Slide 37
Slide 37 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 38
Slide 38 text
∫ 1 - visuallycomplete/100
0
end
Slide 39
Slide 39 text
What does this mean?
Slide 40
Slide 40 text
Visually complete (%)
0
25
50
75
100
Time in Seconds
0s 1s 2s 3s 4s 5s 6s 7s 8s
Slide 41
Slide 41 text
Visually complete (%)
0
25
50
75
100
Time in Seconds
0s 1s 2s 3s 4s 5s 6s 7s 8s
Slide 42
Slide 42 text
Visually complete (%)
0
25
50
75
100
Time in Seconds
0s 1s 2s 3s 4s 5s 6s 7s 8s
Slide 43
Slide 43 text
Visually complete (%)
0
25
50
75
100
Time in Seconds
0s 1s 2s 3s 4s 5s 6s 7s 8s
Slide 44
Slide 44 text
Visually complete (%)
0
25
50
75
100
Time in Seconds
0s 1s 2s 3s 4s 5s 6s 7s 8s
Slide 45
Slide 45 text
Visually complete (%)
0
25
50
75
100
Time in Seconds
0s 1s 2s 3s 4s 5s 6s 7s 8s
Slide 46
Slide 46 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 47
Slide 47 text
The lower
Speed Index: The lower the better
Slide 48
Slide 48 text
qq
http://webpagetest.org
Slide 49
Slide 49 text
No content
Slide 50
Slide 50 text
Define a goal Optimize
Define a goal
Slide 51
Slide 51 text
Delay User reaction
0-100ms Instant
100ms-300ms Feels sluggish …
300-1000ms
User realizes that the
machine is working
1s + Mental context switch
10s + Come back later (or never)
http://goo.gl/QnnbNy
Slide 52
Slide 52 text
Delay User reaction
0-100ms Instant
100ms-300ms Feels sluggish …
300-1000ms
User realizes that the
machine is working
1s + Mental context switch
10s + Come back later (or never)
http://goo.gl/QnnbNy
We want
to avoid
this
Slide 53
Slide 53 text
Delay User reaction
0-100ms Instant
100ms-300ms Feels sluggish …
300-1000ms
User realizes that the
machine is working
1s + Mental context switch
10s + Come back later (or never)
http://goo.gl/QnnbNy
We want
to be in
this area
Slide 54
Slide 54 text
1. User gets information
in under 1 second
Slide 55
Slide 55 text
1. User gets important information
in under 1 second
Slide 56
Slide 56 text
1. ~ Speed Index < 1000
Slide 57
Slide 57 text
2. Page Speed Score > 85
Slide 58
Slide 58 text
3. Page Weight < 1.5 MB
Slide 59
Slide 59 text
Define a goal Optimize
Optimize
Slide 60
Slide 60 text
DNS Lookup
Initial
connection
TTFB
HTML
Download
Life of an URL
request
Slide 61
Slide 61 text
Starting here,
we are able to
control …
Slide 62
Slide 62 text
Starting here,
we are able to
control …
Slide 63
Slide 63 text
blocking!
Slide 64
Slide 64 text
blocking!
blocking!
Slide 65
Slide 65 text
blocking!
blocking!
start render
Slide 66
Slide 66 text
blocking!
blocking!
start render?
Slide 67
Slide 67 text
Important content first!
Slide 68
Slide 68 text
Everything else
is an enhancement
Slide 69
Slide 69 text
Critical CSS
Slide 70
Slide 70 text
…
…
loadCSS(‘main.css’)
Slide 71
Slide 71 text
…
…
loadCSS(‘main.css’)
Slide 72
Slide 72 text
…
…
loadCSS(‘main.css’)
Slide 73
Slide 73 text
Open up your
website at the
desired viewport.
Look at the above
the fold content.
Slide 74
Slide 74 text
Open a headless
browser to
find the CSS for
that content.
Modern
browser?
Supports
WOFF?
Font in
Storage
Show
Font
Pre-Render
Slide 82
Slide 82 text
Modern
browser?
Supports
WOFF?
Font in
Storage
Show
Font
No Font
http://crocodillon.com/blog/non-blocking-web-fonts-using-localstorage
Pre-Render
Slide 83
Slide 83 text
localStorage
available?
Download
Font
Save in
localStorage
Show
Font
No Font
http://crocodillon.com/blog/non-blocking-web-fonts-using-localstorage
Post-Render