Embed Size (px)
DESCRIPTION
With RWD as the base, a story about how to still utilize the server for what the server is great at.
Citation preview
John Arne SæteråsTwitter : @jonarnesHead of innovation at Mobiletechhttp://www.slideshare.net/jonarnes/
August 18, 2010
YEP, WEB ON MOBILE IS SLOW
@jonarnes - Velocity conf 2013
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
http://techcrunch.com/2013/10/24/amazon-reports-q3-sales-of-17-09b-up-24-but-records-second-straight-loss/?ncid=f
SLOW IS NOT COOL...even less cool on mobile
For Q3 2013 that is $17mill.
@jonarnes - Velocity conf 2013
THE VALUE CHAIN
developer server internet telco network device
Doesn’t really make things more difficult, but reveal a few issues
browser
@jonarnes - Velocity conf 2013
WHY IS MOBILE SLOWER?
• Network Latency • Available Bandwidth
• The Implementation
• Processing Power • Browser • Battery Preserving Strategies
@jonarnes - Velocity conf 2013
FUN-FACTLoading apple.com consume 1.41% of battery
life.
http://www2012.wwwconference.org/proceedings/proceedings/p41.pdf
Not so
12 - 4% in 8 mins of web surfing
@jonarnes - Velocity conf 2013
“4G” BANDWIDTHM
bps
0
12,5
25
37,5
50
Location 1Location 1Location 2Location 3Location 4Location 5Location 6Location 7Location 8 Location 9Location 9Location 9 Location 10Location 11Location 12Location 12Location 13Location 13Location 14Location 15Location 16Location 17
15,1818,6918,17
6,18
14,9913,17
19,6519,7119,9619,07
8,86
2,770,15 1,47
18,85
9,16
19,6520,1616,5
20,04
9,59
0,1
36,3336,39
24,76
0,36
9,15
42,49
30,55
38,79
24,01
7,8611,78
0 0
21,5
44,09
10,4910,6112,3416,29
2,53
13,57
1,29
Netcom Telenor
VG 10.11.2013@jonarnes - Velocity conf 2013
1.6 MB4 %9 %
5 %3 %
17 % 63 %
Images ScriptsCSS FlashOther HTML
in 95 requests on average
http://httparchive.org/
@jonarnes - Velocity conf 2013
1.6 MBin 95 requests on average
• Avg. speed: 2Mbps (cisco) • 1 Mbps = 0.12 MB/s • 1.6 / 0.24 = 6,7s
6,7Seconds download
time
http://www.cisco.com/en/US/solutions/collateral/ns341/ns525/ns537/ns705/ns827/white_paper_c11-520862.html@jonarnes - Velocity conf 2013
1.6 MBin 95 requests on average
• 100-200 ms pr roundtrip • Depends....(DNS, pipelining,
concurrent TCP connections, keep alive etc.)
9,5Seconds latency in
total
@jonarnes - Velocity conf 2013
1.6 MBin 95 requests on average
• Wake up radio (one time) • TCP and DNS (one time) • 95 round trips (6 req pr conn.) • Downloading 1.6 MB over 2Mbps
10,6Seconds total
+ rendering time in the browser + server response time
Disclaimer: lots of assumptions in this calculation!@jonarnes - Velocity conf 2013
GOOGLE: 7.5 S.*at the time, the average web site was 1,2MB. Minus the 2s wakeup, we’re in the ballpark.
SERVE A PAGE TO A MOBILE DEVICE IN
LESS THAN 1 SECOND?
A great overview by Ilya Grigorik bit.ly/mobile-barrier
@jonarnes - Velocity conf 2013
WHO CARES?The users care!
Telco Network 53,53 %
Other 46,47 %
How users connect. Page views per connection type. (Scandinavian Countries). Source:
Mobiletech
@jonarnes - Velocity conf 2013
WHY USERS CARE?
http://mobiforge.com/designing/blog/performance-money-part-1-end-users-wallet
➜European Vodafone
account roaming in US
@jonarnes - Velocity conf 2013
SO, WHAT IS OUR CURRENT APPROACH TO THIS?
@jonarnes - Velocity conf 2013
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
@jonarnes - Velocity conf 2013
RWD IS A TECHNIQUENothing wrong with the technique! It is brilliant!
The famous Iceberg: @brad_frost@jonarnes - Velocity conf 2013
RWD != MOBILE FRIENDLYbut an important step in the right direction
@jonarnes - Velocity conf 2013
Load time: 9.07s * Size: 288.14 KB
Load time: 2.36 s * Size: 36.59 KB
*) Load event fired. - More on how the built the new BBC News site: http://slidesha.re/14IYNOO @jonarnes - Velocity conf 2013
http://www.bbc.co.uk/blogs/bbcinternet/2012/03/bbc_news_mobile_site_refresh.html
IT’S MORE TO MOBILE THAN JUST “GOING RESPONSIVE”
PARET0 PRINCIPLE
Responsive Design is 20% of the work, and might get you 80% of the way
the “80/20 rule”
@jonarnes - Velocity conf 2013
THE LAST 20%will improve performance by 80%
Our example: Shaving
80%off 10,6 s. gives a
load time of 2,1s
@jonarnes - Velocity conf 2013
When all you have is a hammer, every problem looks like a nail
RWD
device or browser
@jonarnes - Velocity conf 2013
HOW CAN WE FIX THIS?
What can we do to help front end developers make
use of server side stuff?
@jonarnes - Velocity conf 2013
THE VALUE CHAIN
Adaptive Responsive
developer server internet telco network device browser
@jonarnes - Velocity conf 2013
RANTThere is a web server. A very capable one, too.
Use it!@jonarnes - Velocity conf 2013
RESSREsponsive design with Server
Side components
@jonarnes - Velocity conf 2013
PURPOSE OF RESS
• Eliminate “over downloading”
• Let the server do the work instead of the browser
@jonarnes - Velocity conf 2013
RESS IN A NUT SHELL
• RWD provide a sensible default or fallback • The server does the optimization
Reduce asset size
Selective markup
Ad serving
Social networks
Minify
zip
Cache
etc.
@jonarnes - Velocity conf 2013
SOMETIMES IT MAKES SENSE TO MULTI-SERVE...or at least do layout adjustments to components on the page
@jonarnes - Velocity conf 2013
INGREDIENTS OF RESS
Hello, I know exactly how to make you shine!
Information about the requesting device, network, etc.
Request/Response
@jonarnes - Velocity conf 2013
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/
@jonarnes - Velocity conf 2013
THERE IS A DIFFERENCE
User-Agent sniffingvar isiPhone = /iPhone/i.test(navigator.userAgent);
Feature Detectionvar appCache= function() { return !!window.applicationCache; };
Device DetectionGET http://ddr.demo.wew.io/c/dual_orientation
Using the User-Agent (++) as a key to look up in a data base.@jonarnes - Velocity conf 2013
NYTIMES
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
@jonarnes - Velocity conf 2013
FEATURES OF A DDR
Nice place to store custom stuff • “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 Descri
ption
Repository
@jonarnes - Velocity conf 2013
EXAMPLE
if ($type_of_device == ”smartTV”) include(TVnav.php);
else include(nav.php);
@jonarnes - Velocity conf 2013
EXAMPLE
if ($supports_h264) echo ‘<video .../>’;
else echo ‘<a href=”...”>Download</a>’;
@jonarnes - Velocity conf 2013
EXAMPLE
if ($your_property == “Z”) //ad network X …
else //ad network Y
@jonarnes - Velocity conf 2013
DEVICE DETECTIONSingle Capability
RequestGET http://ddr.demo.wew.io/c/pointing_method
Response{"model_name":"touchscreen"}
Capability SetsRequestGET 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@jonarnes - Velocity conf 2013
EXAMPLE
var http = new XMLHttpRequest(); http.open("GET", "http://ddr.demo.wew.io/c/pointing_method", true); http.onreadystatechange = function() { if (http.readyState == 4) console.log(http.responseText);
} http.send();
@jonarnes - Velocity conf 2013
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; }
@jonarnes - Velocity conf 2013
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@jonarnes - Velocity conf 2013
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 S
ide renderi
ng
@jonarnes - Velocity conf 2013
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);
@jonarnes - Velocity conf 2013
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 client side
@jonarnes - Velocity conf 2013
FTW?Does adaptive design have a
positive impact on performance?
@jonarnes - Velocity conf 2013
EFFECT
0
108
215
323
430
Size
No WeW With WeW
0
950
1 900
2 850
3 800
Time0
575
1 150
1 725
2 300
Latency
20% less data transfer
50% faster download
73% reduced latency
@jonarnes - Velocity conf 2013
MARSHALLHEADPHONES.COM
• Down from 1.6MB to 432KB
• Load time down from 6,1s to 1,9s
@jonarnes - Velocity conf 2013
@jonarnes - Velocity conf 2013
http://mobile.smashingmagazine.com/2013/04/09/improve-mobile-support-with-server-side-enhanced-responsive-design/@jonarnes - Velocity conf 2013
PERFORMANCE FRONT END STARTS WITH THE BACK END
Too much is left to the browser to figure out.
@jonarnes - Velocity conf 2013
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 the Top 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
Most of these are implemented server side.
@jonarnes - Velocity conf 2013
SUMMING UP
developer server internet telco network device browser
We......must do stuff
here...
...to relieve...
...and......to make life easier for...
...and...
@jonarnes - Velocity conf 2013
John Arne Sæteråstwitter : @jonarnes
http://www.slideshare.net/jonarnes/
THANK YOU
?
@jonarnes - Velocity conf 2013
