How the server can help Responsive Web Design to perform better.

1. John Arne Sæterås
Twitter: @jonarnes
Head of innovation at Mobiletech
http://www.slideshare.net/jonarnes/
August 18, 2010
YEP, WEB ON MOBILE IS SLOW
fredag 7. juni 13

2. 100 ms faster:
1% increased revenue
1 sec delay:
2.8% drop in revenue
http://www.slideshare.net/stubbornella/designing-fast-websites-presentation
http://slideshare.net/markstanton/speed-matters
SLOW IS NOT COOL
...even less cool on mobile
fredag 7. juni 13

3. THE VALUE CHAIN
developer server internet telco
network device
Doesn’t really make things more
difficult, but reveal a few issues
browser
fredag 7. juni 13

4. WHY IS MOBILE SLOWER?
• Network Latency
• Available Bandwidth
• The Implementation
• Processing Power
• Browser
• Battery Preserving Strategies
fredag 7. juni 13

5. CURRENT STATE
OF THE WEB
AND MOBILE
fredag 7. juni 13

6. 1.4 MB
4%9%
7%
3%
16% 61%
Images Scripts
CSS Flash
Other HTML
in 92 requests on average
http://httparchive.org/
fredag 7. juni 13

7. 1.4 MB
in 92 requests on average
• Avg. speed: 2Mbps (cisco)
• 1 Mbps = 0.12 MB/s
• 1.4 / 0.24 = 6s
6Seconds
download
time
Hold that thought...
more on this later.
http://www.cisco.com/en/US/solutions/collateral/ns341/ns525/ns537/ns705/ns827/white_paper_c11-520862.html
fredag 7. juni 13

8. 1.4 MB
in 92 requests on average
•100-200 ms pr roundtrip
•Depends....(DNS, pipelining,
concurrentTCP connections
etc.)
9,1Seconds
latency in
total
Hold that thought...
more on this now.
fredag 7. juni 13

9. MOBILE
NETWORKS ARE
FREAKING
MAGIC!
don’t get me started on
handovers!
fredag 7. juni 13

10. 2.1 s to connect.
Latency, anything from
100 - >500ms
fredag 7. juni 13

11. 2.40 s, html page loaded
TCP stuff
fredag 7. juni 13

12. 3-60 seconds....
Infographic: http://www.research.att.com/articles/featured_stories/2011_03/201102_Energy_efficient?fbid=YmB5ErqPR7b
Now download assets
fredag 7. juni 13

13. SERVE A PAGE TO A
MOBILE DEVICE IN
LESS THAN 1 SECOND?
A great overview by Ilyva Gricorik:
bit.ly/mobile-barrier
fredag 7. juni 13

14. 1.4 MB
in 92 requests on average
•Wake up radio (one time)
•TCP and DNS (one time)
•92 round trips (6 req pr conn.)
•Downloading 1.4 mb over 2Mbps
10,1Seconds
total
+ rendering time in the browser
+ server response time
Disclaimer: lots of assumptions in this calculation!
fredag 7. juni 13

15. GOOGLE: 10.2 S.
http://analytics.blogspot.nl/2012/04/global-site-speed-overview-how-fast-are.html
fredag 7. juni 13

16. Load time: 9.7 s
Size: 1.6 MB
Load time: 9.1 s
Size: 1.2 MB
fredag 7. juni 13

17. WHO CARES?
The users care!
Telco Network
53,53 %
Other
46,47 %
How users connect. Page views per
connection type. (Scandinavian Countries).
Source: Mobiletech
fredag 7. juni 13

18. WHY USERS CARE?
http://mobiforge.com/designing/blog/performance-money-part-1-end-users-wallet
= EuropeanVodafone
account roaming in US
fredag 7. juni 13

19. HOW DO WE APPROACH THIS?
fredag 7. juni 13

20. ENTER
RESPONSIVE
WEB DESIGN
Yay!
fredag 7. juni 13

21. RESPONSIVE
WEB DESIGN
Doh...
Much smaller
6%
Same size
72%
Smaller
22%
http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/
Also about the same
number of
HTTP requests
fredag 7. juni 13

22. RWD IS A TECHNIQUE
Nothing wrong with the technique! It is brilliant!
The famous Iceberg: @brad_frost
fredag 7. juni 13

23. RWD != MOBILE OPTIMIZED
but an important step in the right direction
fredag 7. juni 13

24. Load time: 3.81s
Size: 135.20 kb
Load time: 2.36 s
Size: 36.59 kb
More on how the built the new BBC News site: http://slidesha.re/14IYNOO
fredag 7. juni 13

25. http://www.bbc.co.uk/blogs/bbcinternet/2012/03/bbc_news_mobile_site_refresh.html
fredag 7. juni 13

26. PRIMARY ISSUES
• Over downloading
• Unused assets
• Large images
• Stuff...
• Network issues
• High Latency
• Bandwidth
• Flaky connection
fredag 7. juni 13

27. MORE ISSUES
...but that’s another story
http://mpulp.mobi/2011/05/next-steps-of-responsive-web-design/
fredag 7. juni 13

28. PARET0
PRINCIPLE
Responsive Design is
20% of the work,
and might get you
80% of the way
the “80/20 rule”
fredag 7. juni 13

29. THE LAST 20%
will improve performance by 80%
fredag 7. juni 13

30. When all you have is a hammer,
every problem looks like a nail
fredag 7. juni 13

31. HOW CAN WE
FIX THIS?
Adaptive Design
fredag 7. juni 13

32. THE VALUE CHAIN
Adaptive Responsive
developer server internet telco
network device browser
fredag 7. juni 13

33. RANT
There is a web server.A very capable one, too.
Use it!
fredag 7. juni 13

34. SERVER?
How to make the server side
available to front end devs
fredag 7. juni 13

35. fredag 7. juni 13

36. http://mobile.smashingmagazine.com/2013/04/09/improve-mobile-support-with-server-side-enhanced-responsive-design/
fredag 7. juni 13

37. RESS
REsponsive design with Server
Side components
fredag 7. juni 13

38. A BALANCING ACT
no right answer
fredag 7. juni 13

39. PURPOSE OF RESS
• Reduce need for client side
processing
• Eliminate “over downloading”
fredag 7. juni 13

40. INGREDIENTS OF RESS
Hello, I know exactly how to
make you shine!
Information about the
requesting device
Request/Response
fredag 7. juni 13

41. NOT A CRIME!
82% of top 100 Alexa sites
use Device Detection
In the case of
Mashable, we also
detect the type of
device and change
the site’s behavior
accordingly.
“
”
http://www.circleid.com/posts/20120111_analysis_of_server_side_mobile_web_detection/
http://mashable.com/2012/12/11/responsive-web-design/
fredag 7. juni 13

42. THERE IS A DIFFERENCE
User-Agent sniffing
var
isiPhone
=
/iPhone/i.test(navigator.userAgent);
Feature Detection
var
appCache=
function()
{
return
!!window.applicationCache;
};
Device Detection
GET
http://ddr.demo.wew.io/c/dual_orientation
Using the User-Agent as a key to look up in a data base.
fredag 7. juni 13

43. NYT HORROR
var ua = navigator.userAgent;
window.BBDevice = {
isOldBB: false,
indexOfVersion: ua.indexOf("Version/"),
indexOfBB: ua.indexOf("BlackBerry"),
fullVersion: null,
version: null
};
if (window.BBDevice.indexOfBB >= 0) {
existingClasses = document.body.className = existingClasses + " bb";
if (ua.indexOf("WebKit") < 0) {
existingClasses = document.body.className = existingClasses + " oldbb";
window.BBDevice.isOldBB = true;
window.BBDevice.fullVersion = ua.substr(window.BBDevice.indexOfBB);
window.BBDevice.fullVersion = window.BBDevice.fullVersion.substr(window.BBDevice.fullVersion.indexOf("/") + 1,
window.BBDevice.fullVersion.indexOf(" "));
window.BBDevice.version = window.BBDevice.fullVersion.substr(0, window.BBDevice.fullVersion.indexOf("."));
} else {
if (window.BBDevice.indexOfVersion >= 0) {
window.BBDevice.indexOfVersion = window.BBDevice.indexOfVersion + 8;
window.BBDevice.fullVersion = ua.substr(window.BBDevice.indexOfVersion);
window.BBDevice.fullVersion = window.BBDevice.fullVersion.substr(0, window.BBDevice.fullVersion.indexOf("
"));
window.BBDevice.version = window.BBDevice.fullVersion.substr(0, window.BBDevice.fullVersion.indexOf("."));
}
}
} else if (ua.indexOf("MSIE 9.0") >= 0 || ua.indexOf("IEMobile/9.0") >= 0) {
existingClasses = document.body.className = existingClasses + " win75";
}
http://mpulp.mobi/2013/05/user-agent-sniffing-on-the-new-nyt-mobile-site/
http://mobile.nytimes.com
fredag 7. juni 13

44. FEATURES OF A DDR
• Nice place to store “tacit knowledge”
• “Business rules”
• Specifics to your site
• Override feature detected features
• If a feature works, but not well enough to make it useable
• False positives (not a HUGE issue, but still)
• Available server side too
• Adapt and optimize stuff before sending to client
Device Description
Repository
fredag 7. juni 13

45. EXAMPLE
if
($type_of_device
==
”smartTV”)
include(TVnav.php);
else
include(nav.php);
http://www.circleid.com/posts/20120111_analysis_of_server_side_mobile_web_detection/
fredag 7. juni 13

46. EXAMPLE
if
($supports_h264)
echo
‘<video
.../>’;
else
echo
‘<a
href=”...”>Download</a>’;
fredag 7. juni 13

47. OUR APPROACH
fredag 7. juni 13

48. DEVICE DETECTION
Single Capability
Request
GET
http://ddr.demo.wew.io/c/model_name
Response
{"model_name":"iPhone"}
Capability Sets
Request
GET
http://ddr.demo.wew.io/cset/mySet
Response
{"capa1":"first
capa
value","capa2":"second
capa
value"
...}
Examples and documentation: https://github.com/whateverweb/device-detection
fredag 7. juni 13

49. EXAMPLE
var
http
=
new
XMLHttpRequest();
http.open("GET",
"http://ddr.demo.wew.io/c/brand_name",
true);
http.onreadystatechange
=
function()
{
if
(http.readyState
==
4)
console.log(http.responseText);
}
http.send();
fredag 7. juni 13

50. EXAMPLE
public
function
get($capa){
foreach(getallheaders()
as
$key
=>
$value)
{
if
($key
!="Host")
$this-­‐>headers[]
=
$key
.
':
'
.
$value;
}
$url
=
$this-­‐>service
.
$capa;
$curl
=
curl_init($url);
curl_setopt($curl,
CURLOPT_RETURNTRANSFER,
true);
curl_setopt($curl,
CURLOPT_HTTPHEADER,
$this-­‐>headers);
$this-­‐>response
=
curl_exec($curl);
curl_close($curl);
return
json_decode($this-­‐>response)-­‐>$capa;
}
fredag 7. juni 13

51. IMAGE OPTIMIZING
<img
src="http://img.demo.wew.io/http://example.com/image.jpg"/>
Simple Usage
Advanced Usage
<img
src=”http://img.demo.wew.io/vpw_1024/bp_w/pc/w_31/m_48/n_98/http://
example.com/img.png”/>
Examples and documentation: https://github.com/whateverweb/Image-Server
fredag 7. juni 13

52. EXAMPLE
<div
data-­‐picture
data-­‐alt="A
beautiful
butterfly">
<div
data-­‐src="http://img.demo.wew.io/px_100/http://exampe.com/image.png"></div>
<div
data-­‐src="http://img.demo.wew.io/px_320/http://exampe.com/image.png"
data-­‐media="(min-­‐width:
320px)"></div>
<div
data-­‐src="http://img.demo.wew.io/px_320/@_2/http://exampe.com/image.png"
data-­‐media="(min-­‐width:
320px)
and
(-­‐webkit-­‐min-­‐device-­‐pixel-­‐ratio:
2.0)"></div>
<noscript>
<img
src="http://img.demo.wew.io/px_10/http://exampe.com/image.png">
</noscript>
</div>
Picturefill: https://github.com/scottjehl/picturefill. Full example: https://github.com/whateverweb/Image-Server/blob/master/examples/picturefill/index.html
Using Picturefill
fredag 7. juni 13

53. CSS OPTIMIZATION
Device Capabilities as Media Features
Removing overhead and excess styles
Examples and documentation: https://github.com/whateverweb/CSS-processor
@media
(-­‐wew-­‐pointing-­‐method:
touchscreen){
a
{
padding:
10px;
}
}
@media
all
and
(min-­‐width:
1500px){
//removed
for
devices
where
1500px
is
impossible.
e.g.
iPhones
body{color:
green;}
}
Server Side rendering
fredag 7. juni 13

54. EXAMPLE
@import
url('http://demo.wew.io/styles/iPadStyles.css')
all
and
(-­‐wew-­‐model-­‐name:
iPad);
@import
url(http://demo.wew.io/CSS-­‐processor/examples/inlining/right.css)
all
and
(min-­‐device-­‐width:
480px);
fredag 7. juni 13

55. EXAMPLE
<!doctype
html>
<html>
<head>
<link
rel="stylesheet"
href="//css.demo.wew.io/http://example.com/style.css”/>
</head>
<body>
<img
src="http://img.demo.wew.io/http://example.com/image.jpg"/>
<script>
var
w=new
wew();
w.getSet("myset",cb);
</script>
</body>
</html>
•Markup lives anywhere
•CSS and images are proxied,
optimized and cached
•Device data available clientside
fredag 7. juni 13

56. FTW?
Does adaptive design have a
positive impact on performance?
fredag 7. juni 13

57. EFFECT
0
108
215
323
430
Size
No WeW With WeW
0
1 000
2 000
3 000
4 000
Time
0
575
1 150
1 725
2 300
Latency
20% less data
transfer
50% faster
download
73% reduced
latency
fredag 7. juni 13

58. BUT...
fredag 7. juni 13

59. CAN’T DO MAGIC
0
975
1 950
2 925
3 900
Onload
no WeW with WeW
Only 4% faster in total
Due to
lazy loading of assets
and repaints etc.
Lazy loading good
or bad? Depends...
fredag 7. juni 13

60. FUN-FACT
Loading apple.com consume
1.41% of battery life.
http://www2012.wwwconference.org/proceedings/proceedings/p41.pdf
Not so
fredag 7. juni 13

61. PERFORMANCE FRONT END
STARTS WITH THE BACK END
Too much is left to the browser to figure out.
fredag 7. juni 13

62. THE RULES
1. Make Fewer HTTP Requests
2. Use a Content Delivery Network
3. Add an Expires Header
4. Gzip Components
5. Put Stylesheets at theTop
6. Put Scripts at the Bottom
7. Avoid CSS Expressions
8. Make JavaScript and CSS External
9. Reduce DNS Lookups
10.Minify JavaScript
11.Avoid Redirects
12.Remove Duplicate Scripts
13.Configure ETags
14.Make AJAX Cacheable
By Steve Souders: http://stevesouders.com/hpws/rules.php
fredag 7. juni 13

63. BASICALLY SAYS
• Make as few HTTP requests as possible
• Reduce the size of what is downloaded
• Make page rendering fast
fredag 7. juni 13

64. MORE TIPS
• Don’t wake the radio
• Inline more that feels natural
• Use the server!
What about “eternal
scrolling”
Inline “structural”
CSS and jsDon’t let the browser
decide everything
fredag 7. juni 13

65. POOR IMPLEMENTATION SLOWS
RENDERING DOWN,
POOR INFORMATION SLOWS
PEOPLE DOWN
WHAT IS SPEED, ANYWAY?
fredag 7. juni 13

66. John Arne Sæterås
twitter: @jonarnes
http://www.slideshare.net/jonarnes/
THANK YOU
?
fredag 7. juni 13