jon arne sæterås - give responsive design a mobile performance boost
DESCRIPTION
Responsive Web Design (RWD) is a giant leap in the right direction for web on mobile devices. However, RWD is just a small, part of the big picture. What we really want is for the whole value chain to be responsive, not only in the browser., There are a vast number of frameworks and tools on the webs for implementing RWD. Most of these provide a great starting point for mobile ventures. However, there are not so many tools out the to help you with the rest of the value chain. Especially tools that are easy to use and provide a relatively small footprint for front end developers., This talk will explore possibilities you get when you combine the best practices from the client side, with best practices from the server side. Sometimes this technique is called RESS, or Adaptive Design. The talk will contain coding, code samples and best practices based on popular frameworks and tools for Adaptive Design that combines client side and server side techniques. Results, effects and gains in terms of performance will also be documented and exemplified., The audience will gain insights into how their next project can perform even better in mobile devices and smart ways to reduce data traffic, increase speed and be more future friendly by utilizing the server for heavy-lifting.TRANSCRIPT
August 18, 2010
YEP, WEB ON MOBILE IS SLOW
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
For Q3 2013 that is $17mill.
THE VALUE CHAIN
developer server internet telco network device
Doesn’t really make things more difficult, but reveal a few issues
browser
WHY IS MOBILE SLOWER?
• Network Latency • Available Bandwidth
• The Implementation
• Processing Power • Browser • Battery Preserving Strategies • Memory
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
“4G” BANDWIDTH
Mbp
s
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,69 18,17
6,18
14,99 13,17
19,65 19,71 19,96 19,07
8,86
2,770,15 1,47
18,85
9,16
19,65 20,1616,5
20,04
9,59
0,1
36,33 36,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,49 10,61 12,3416,29
2,53
13,57
1,29
Netcom Telenor
VG 10.11.2013
CURRENT STATE OF THE WEB AND MOBILE
1.8 MB3 %7 %4 %3 %
17 %65 %
Images ScriptsCSS FlashOther HTML
in 95 requests on average
http://httparchive.org/
1.8 MBin 95 requests on average
• Avg. speed: 2Mbps (cisco) • 1 Mbps = 0.12 MB/s • 1.8 / 0.24 = 7,5s
7,5 Seconds download
time
http://www.cisco.com/en/US/solutions/collateral/ns341/ns525/ns537/ns705/ns827/white_paper_c11-520862.html
1.8 MBin 95 requests on average
• 100-200 ms pr roundtrip • Depends....(DNS, pipelining,
concurrent TCP connections etc.)
9,5 Seconds latency in
total
LATENCY
3g 4g
Control plane 200–2,500 ms 50–100 ms
DNS lookup 200 ms 100 ms
TCP handshake 200 ms 100 ms
TLS handshake 200–400 ms 100–200 ms
HTTP request 200 ms 100 ms
Total latency overhead 200–3500 ms 100–600 msO’Reilly: High Performance Browser Networking
MOBILE NETWORKS ARE
FREAKING MAGIC!
a quick look on how they work
.01 s.
User opens app. Wakes the radio. Device sends a request to the cell tower to use the network
Tower signaling. Device promoted to full power state. Process takes about 2 seconds
2.1 s.
Only needed when device is idle
App is “on line” App does a DNS lookup. Roundtrip is 100-200 ms.
2.2 s.
Latency, anything from 100 - >500ms
TCP connection HTML document returned
2.4 s.
2.4 s, the HTML page is downloaded
Browser rendering Fetches linked resources. More DNS lookups (one for each unique domain) and TCP connections.
2.6 s.
Page displayed Puh...
3-60 s.
http://www.research.att.com/articles/featured_stories/2011_03/201102_Energy_efficient?fbid=YmB5ErqPR7b
1.8 MBin 95 requests on average
• Wake up radio (one time) • TCP and DNS (one time) • 95 round trips (6 req pr conn.) • Downloading 1.8 mb over 2Mbps
11,2Seconds total
+ rendering time in the browser + server response time
Disclaimer: lots of assumptions in this calculation!
GOOGLE: 7.5 S.*at the time, the average web site was 1,2MB. Minus the 2s wakeup, we’re in the
ballpark.
DEVCONFU.EU
• Load event fired: 32 s.
• 2.3 MB
• 180 requests
iPhone 4 iOS 5.1 on 3G (latency 300ms)
SERVE A PAGE TO A MOBILE DEVICE IN LESS THAN 1 SECOND?
A great overview by Ilya Grigorik bit.ly/mobile-barrier
WHO CARES?The users care!
Telco Network 53,53 %
Other 46,47 %
How users connect. Page views per connection type. (Scandinavian Countries). Source:
Mobiletech
WHY USERS CARE?
http://mobiforge.com/designing/blog/performance-money-part-1-end-users-wallet
➜European Vodafone
account roaming in US
SO, WHAT IS OUR CURRENT APPROACH TO THIS?
ENTER RESPONSIVE WEB DESIGN
Yay!
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
RWD IS A TECHNIQUENothing wrong with the technique! It is brilliant!
The famous Iceberg: @brad_frost
RWD != MOBILE FRIENDLYbut an important step in the right direction
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
http://www.bbc.co.uk/blogs/bbcinternet/2012/03/bbc_news_mobile_site_refresh.html
PRIMARY ISSUES
• Over downloading
• Unused assets
• Large images
• Stuff...
!
• Network issues
• High Latency
• Bandwidth
• Flaky connection
!
• Processing power
• Slower CPU
• Memory
• Cache limits
30-40% SLOWER WITH
JAVASCRIPT ENABLED
PARET0 PRINCIPLE
Responsive Design is 20% of the work, and might get you 80% on the way
the “80/20 rule”
THE LAST 20%will improve performance by 80%
Our example: increasing
performance by 80%
gives a load time of 2,2s
SOMETIMES IT MAKES SENSE TO MULTI-SERVE...or at least do layout adjustments to components
When all you have is a hammer, every problem looks like a nail
RWD
device or browser
HOW CAN WE FIX THIS?
What can we do to help front end developers make
use of server side stuff?
THE VALUE CHAIN
Adaptive Responsive
developer server internet telco network device browser
RANTThere is a web server. A very capable one, too.
Use it!
SERVER?How to make the server side
available to front end devs
http://mobile.smashingmagazine.com/2013/04/09/improve-mobile-support-with-server-side-enhanced-responsive-design/
RESSREsponsive design with Server
Side components
A BALANCING ACTno right answer
PURPOSE OF RESS
• Reduce need for client side processing
• Eliminate “over downloading”
• Let the server do the work instead of the browser
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.
INGREDIENTS OF RESS
Hello, I know exactly how to make you shine!
Information about the requesting device, network, etc.
Request/Response
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/
THERE IS A DIFFERENCE
User-Agent sniffingvar isIpad = /iPad/i.test(navigator.userAgent);
Feature Detectionvar appCache= function() { return !!window.applicationCache; };
Device DetectionUsing the User-Agent (++) as a key to look up in a data base.
http://www.otsukare.info/2013/10/02/ua-parsing
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";! window.WMDevice = true;!} else if (ua.indexOf("MSIE 10.0") >= 0 || ua.indexOf("IEMobile/10.0") >= 0) {! window.WMDevice = true;!} else if (ua.indexOf("Opera Mini") >= 0) {! window.OperaMiniDevice = true;!}
http://mpulp.mobi/2013/05/user-agent-sniffing-on-the-new-nyt-mobile-site/
http://mobile.nytimes.com
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
EXAMPLE
if ($type_of_device == ”smartTV”) include(TVnav.php);
else include(nav.php);
EXAMPLE
if ($supports_h264) echo ‘<video .../>’;
else echo ‘<a href=”...”>Download</a>’;
WHAT WE ENDED UP WITH
DEVICE DETECTION
RESTful APIGET http://ddr.demo.wew.io/c/pointing_method
Response{“pointing_method":"touchscreen"}
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();
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; }
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”/>
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.
Using Picturefill
CSS OPTIMIZATION
Device Capabilities as Media Features
Removing overhead and excess styles
@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
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
FTW?Does adaptive design have a
positive impact on performance?
EFFECT
0108215323430
Size
No RESS With RESS
0950
1 9002 8503 800
Time0
5751 1501 7252 300
Latency
20% less data 50% faster download
73% reduced latency
BUT...
CAN’T DO MAGIC
0
975
1 950
2 925
3 900
Onload
no WeW with RESS
Only 4% faster in total
Due to lazy loading of assets and repaints etc.
Lazy loading good
or bad? Depends...
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
MARSHALLHEADPHONES.COM
• Down from 1.6MB to 432KB
• Load time down from 6,1s to 1,9s
WURFL.IO
PERFORMANCE FRONT END STARTS WITH THE BACK END
Too much is left to the browser to figure out.
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.
SUMMING UP
developer server internet telco network device browser
We......must do stuff
here...
...to relieve...
...and......to make life easier for...
...and...
THANK YOU
John Arne SæteråsTwitter : @jonarnesVP of innovation at ScientiaMobile.comhttp://www.slideshare.net/jonarnes/