Slide 1
Slide 1 text
Faster Mobile Websites
Slide 2
Slide 2 text
Dean Hume
@deanohume
Slide 3
Slide 3 text
Why is speed so
important?
Slide 4
Slide 4 text
100 millisecond delay
Slide 5
Slide 5 text
100 millisecond delay
Decreased sales by 1%
Slide 6
Slide 6 text
£1
Slide 7
Slide 7 text
A slow site will :
Affect the impression of your brand
Slide 8
Slide 8 text
A slow site will :
Affect the impression of your brand
Increase user frustration
Slide 9
Slide 9 text
A slow site will :
Affect the impression of your brand
Increase user frustration
Cost your user’s money
Slide 10
Slide 10 text
whatdoesmysitecost.com
Slide 11
Slide 11 text
A slow site will :
Affect the impression of your brand
Increase user frustration
Cost your user’s money
Make your user’s use your competitors
Slide 12
Slide 12 text
A slow site will :
Affect the impression of your brand
Increase user frustration
Cost your user’s money
Make your user’s use your competitors
Affect your SEO rankings
Slide 13
Slide 13 text
People != Patience
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
Mobile Devices?
Slide 16
Slide 16 text
Mobile
Slide 17
Slide 17 text
is
Mobile
Slide 18
Slide 18 text
Mobile
HUGE
is
Slide 19
Slide 19 text
Mobile commerce
will be 40%
of eCommerce by
the end of 2015
source: criteo.com/resources/mobile-commerce-q1-2015/
Slide 20
Slide 20 text
Mobile
transactions
grew 10%
in the
last 3 months
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
So what can we do?
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
Understand Mobile Networks
Slide 25
Slide 25 text
RRC
Negotiation
Network Overhead
100ms
Slide 26
Slide 26 text
DNS
Lookup
RRC
Negotiation
Network Overhead
100ms 200ms
Slide 27
Slide 27 text
DNS
Lookup
TCP
Connection
RRC
Negotiation
Network Overhead
100ms 200ms 200ms
Slide 28
Slide 28 text
DNS
Lookup
TCP
Connection
HTTP
Request &
Response
RRC
Negotiation
Network Overhead
100ms 200ms 200ms 200ms
Slide 29
Slide 29 text
Latency
is
Slide 30
Slide 30 text
Latency
is
bad.
Slide 31
Slide 31 text
Latency
is
Slide 32
Slide 32 text
Latency
is
“the new web
performance
bottleneck.”
Slide 33
Slide 33 text
3G 4G
Slide 34
Slide 34 text
3G
200 - 3500 ms
delay
4G
Slide 35
Slide 35 text
3G
200 - 3500 ms
delay
4G
100 - 600 ms
delay
Slide 36
Slide 36 text
In North America 92% of
smartphones took >
200ms to load a 20KB file
Slide 37
Slide 37 text
Deliver only the
goods
that will be used!
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
RAIL
Slide 40
Slide 40 text
R
A
I
L
Slide 41
Slide 41 text
Response
A
I
L
Slide 42
Slide 42 text
Response
Animation
I
L
Slide 43
Slide 43 text
Response
Animation
Idle
L
Slide 44
Slide 44 text
Response
Animation
Idle
Load
Slide 45
Slide 45 text
RAIL in Action
Slide 46
Slide 46 text
RAIL in Action
1. Reduce page size (Load)
Slide 47
Slide 47 text
RAIL in Action
1. Reduce page size (Load)
2. Reduce HTTP requests (Load)
Slide 48
Slide 48 text
RAIL in Action
1. Reduce page size (Load)
2. Reduce HTTP requests (Load)
3. Reduce Blocking (Load, Idle)
Slide 49
Slide 49 text
RAIL in Action
1. Reduce page size (Load)
2. Reduce HTTP requests (Load)
3. Reduce Blocking (Load, Idle)
4. Improve render times (Animation,
Idle, Response)
Slide 50
Slide 50 text
1. Reduce page size
Slide 51
Slide 51 text
1. Reduce page size
Load
Slide 52
Slide 52 text
● Optimize images
● Remove unused CSS
● Minify CSS and JS files
● Responsive images
Reduce page size
Slide 53
Slide 53 text
Optimize images
Slide 54
Slide 54 text
160 KB 110 KB
Before After
Slide 55
Slide 55 text
kraken.io
Slide 56
Slide 56 text
imageoptimization.info
Slide 57
Slide 57 text
Remove unused CSS
Slide 58
Slide 58 text
Before
107 KB
After
30 KB
Slide 59
Slide 59 text
86%
Unused CSS
Slide 60
Slide 60 text
Chrome
Developer
Tools
Slide 61
Slide 61 text
Grunt
Gulp
Slide 62
Slide 62 text
Grunt
uncss
Gulp
uncss
Slide 63
Slide 63 text
Responsive images
Slide 64
Slide 64 text
No content
Slide 65
Slide 65 text
72%
Slide 66
Slide 66 text
This is some accessible text.
Slide 67
Slide 67 text
This is some accessible text.
Slide 68
Slide 68 text
This is some accessible text.
Slide 69
Slide 69 text
Responsive
-images
Gulp-
Responsive
Slide 70
Slide 70 text
responsiveimages.org
Slide 71
Slide 71 text
responsiveimages.org
scottjehl.github.io/picturefill
Polyfill
Polyfill
Slide 72
Slide 72 text
2. Reduce HTTP Requests
Slide 73
Slide 73 text
2. Reduce HTTP Requests
Load
Slide 74
Slide 74 text
★ Combine Styles and Scripts
Reduce HTTP Requests
Slide 75
Slide 75 text
★ Combine Styles and Scripts
★ Spriting
Reduce HTTP Requests
Slide 76
Slide 76 text
★ Combine Styles and Scripts
★ Spriting
★ Caching
Reduce HTTP Requests
Slide 77
Slide 77 text
★ Combine Styles and Scripts
★ Spriting
★ Caching
★ Do you really need that?
Reduce HTTP Requests
Slide 78
Slide 78 text
Combine
Slide 79
Slide 79 text
Grunt
Gulp
Slide 80
Slide 80 text
Automate all the
things!
yeoman.io/blog/performance-optimization.html
Slide 81
Slide 81 text
Spriting
Slide 82
Slide 82 text
No content
Slide 83
Slide 83 text
No content
Slide 84
Slide 84 text
1 request
Slide 85
Slide 85 text
1 request
many
images
Slide 86
Slide 86 text
- No whitespace
Sprites
Slide 87
Slide 87 text
- No whitespace
- Optimize & cache
Sprites
Slide 88
Slide 88 text
- No whitespace
- Optimize & cache
- Aim for similar palettes
Sprites
Slide 89
Slide 89 text
Caching
Slide 90
Slide 90 text
- Beware of proxies
Caching
Slide 91
Slide 91 text
- Beware of proxies
- Standardize your file
capitalization
Caching
Slide 92
Slide 92 text
- Beware of proxies
- Standardize your file
capitalization
- Determine the best cache lifetime
Caching
Slide 93
Slide 93 text
- Beware of proxies
- Standardize your file
capitalization
- Determine the best cache lifetime
- Minimize churn
Caching
Slide 94
Slide 94 text
Do you really
need that?
Slide 95
Slide 95 text
“When you want to be
fast, you have to give up
the things slowing you
down.”
Addy Osmani
Slide 96
Slide 96 text
CSS instead of images
Consider :
Slide 97
Slide 97 text
CSS instead of images
Social Widgets
Consider :
Slide 98
Slide 98 text
No content
Slide 99
Slide 99 text
“Across the 61 million
mobile sessions we
studied, we found that
only 0.2% of mobile users
do any social sharing.”
source: http://moovweb.com/blog/anyone-use-social-sharing-buttons-mobile/
Slide 100
Slide 100 text
CSS instead of images
Social Widgets
3rd Party Scripts
Consider :
Slide 101
Slide 101 text
CSS instead of images
Social Widgets
3rd Party Scripts
Carousels
Consider :
Slide 102
Slide 102 text
shouldiuseacarousel.com
Slide 103
Slide 103 text
Deliver only the goods
that will be used!
Slide 104
Slide 104 text
No content
Slide 105
Slide 105 text
3. Reduce Blocking
Slide 106
Slide 106 text
3. Reduce Blocking
Load / Idle
Slide 107
Slide 107 text
HTML
Slide 108
Slide 108 text
HTML CSS
Slide 109
Slide 109 text
HTML CSS JS
Slide 110
Slide 110 text
HTML CSS JS
Blocking Blocking
Slide 111
Slide 111 text
“More Weight Doesn't
Mean More Wait”
Scott Jehl
Slide 112
Slide 112 text
Finding the Critical Path
Slide 113
Slide 113 text
No content
Slide 114
Slide 114 text
14 KB
Slide 115
Slide 115 text
No content
Slide 116
Slide 116 text
Grunt
Critical
Critical
Slide 117
Slide 117 text
/* inlined critical CSS */
loadCSS('deferred.css');
...body goes here
Slide 118
Slide 118 text
/* inlined critical CSS */
loadCSS('deferred.css');
...body goes here
Slide 119
Slide 119 text
Inline?
Slide 120
Slide 120 text
1 Roundtrip
14 KB
Slide 121
Slide 121 text
4. Improve Rendering
Slide 122
Slide 122 text
4. Improve Rendering
Load / Idle
Animation, Idle, Response
Slide 123
Slide 123 text
No content
Slide 124
Slide 124 text
Dev Tools are your
Best Friend
Slide 125
Slide 125 text
Profiling tools are everywhere
Slide 126
Slide 126 text
Find your slowest points
Slide 127
Slide 127 text
Find your slowest points
Slide 128
Slide 128 text
Find your slowest points
Slide 129
Slide 129 text
Stay Jank
Free!
jankfree.org
Slide 130
Slide 130 text
http://bit.ly/60-fps
Building 60 FPS
Web Apps
Slide 131
Slide 131 text
discover-devtools.codeschool.com
Slide 132
Slide 132 text
No content
Slide 133
Slide 133 text
github.com/zeman/perfmap
Slide 134
Slide 134 text
Recap
1. Reduce page size
2. Reduce HTTP requests
3. Reduce Blocking
4. Improve render times
Slide 135
Slide 135 text
Show me the Money
Slide 136
Slide 136 text
No content
Slide 137
Slide 137 text
Stats 52 HTTP Requests
950 KB Total
250 KB of CSS
158 KB of JavaScript
Speed Index - 2075
Slide 138
Slide 138 text
15 seconds
3G Dulles, VA
Slide 139
Slide 139 text
No content
Slide 140
Slide 140 text
Grunt-UnCSS
Slide 141
Slide 141 text
Grunt-UnCSS
Kraken.io
Slide 142
Slide 142 text
Grunt-UnCSS
Grunt-Responsive-images
Kraken.io
Slide 143
Slide 143 text
Grunt-UnCSS
Grunt-Responsive-images
Grunt-Critical-CSS
Kraken.io
Slide 144
Slide 144 text
Grunt-UnCSS
Grunt-Responsive-images
Grunt-Critical-CSS
Grunt-Contrib-htmlmin
Kraken.io
Slide 145
Slide 145 text
After
32 HTTP Requests
402 KB Total
3.7 KB of CSS
44 KB of JavaScript
Speed Index - 1675
Slide 146
Slide 146 text
After
(52) 32 HTTP Requests
(950) 402 KB Total
(250) 3.7 KB of CSS
(158) 44 KB of JavaScript
(2075) Speed Index - 1675
Slide 147
Slide 147 text
3.7 seconds
3G Dulles, VA
3G Dulles, VA
Slide 148
Slide 148 text
Critical Path
0 0.5 1.0 1.5 2.0 2.5
Slide 149
Slide 149 text
bit.ly/upfront-conf
Slide 150
Slide 150 text
Testing
Slide 151
Slide 151 text
webpagetest.org
Slide 152
Slide 152 text
Pagespeed Insights
Slide 153
Slide 153 text
Device
Emulator
Chrome
Slide 154
Slide 154 text
Remote debugging Android
Slide 155
Slide 155 text
Remote debugging iOS
Slide 156
Slide 156 text
Remote debugging iOS
developer.apple.com/safari/tools
Slide 157
Slide 157 text
Summary
The importance of a fast website
Slide 158
Slide 158 text
Summary
The importance of a fast website
The latency delay in mobile networks
Slide 159
Slide 159 text
Summary
The importance of a fast website
The latency delay in mobile networks
RAIL
Slide 160
Slide 160 text
Summary
The importance of a fast website
The latency delay in mobile networks
RAIL
Critical Path
Slide 161
Slide 161 text
Summary
The importance of a fast website
The latency delay in mobile networks
RAIL
Critical Path
Improve rendering
Slide 162
Slide 162 text
Summary
The importance of a fast website
The latency delay in mobile networks
RAIL
Critical Path
Improve rendering
Profiling & testing tools
Slide 163
Slide 163 text
No content
Slide 164
Slide 164 text
Think lean
Think fast!
Slide 165
Slide 165 text
Thank you
@deanohume