Topic 9: The atmosphere Arne Henden Director, AAVSO [email protected].
Jon Arne Sæterås - Give Responsive Design a mobile performance boost
description
Transcript of Jon Arne Sæterås - Give Responsive Design a mobile performance boost
![Page 1: Jon Arne Sæterås - Give Responsive Design a mobile performance boost](https://reader038.fdocuments.net/reader038/viewer/2022103016/5552a2efb4c905e8128b53a0/html5/thumbnails/1.jpg)
![Page 2: Jon Arne Sæterås - Give Responsive Design a mobile performance boost](https://reader038.fdocuments.net/reader038/viewer/2022103016/5552a2efb4c905e8128b53a0/html5/thumbnails/2.jpg)
August 18, 2010
YEP, WEB ON MOBILE IS SLOW
![Page 3: Jon Arne Sæterås - Give Responsive Design a mobile performance boost](https://reader038.fdocuments.net/reader038/viewer/2022103016/5552a2efb4c905e8128b53a0/html5/thumbnails/3.jpg)
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.
![Page 4: Jon Arne Sæterås - Give Responsive Design a mobile performance boost](https://reader038.fdocuments.net/reader038/viewer/2022103016/5552a2efb4c905e8128b53a0/html5/thumbnails/4.jpg)
THE VALUE CHAIN
developer server internet telco network device
Doesn’t really make things more difficult, but reveal a few issues
browser
![Page 5: Jon Arne Sæterås - Give Responsive Design a mobile performance boost](https://reader038.fdocuments.net/reader038/viewer/2022103016/5552a2efb4c905e8128b53a0/html5/thumbnails/5.jpg)
WHY IS MOBILE SLOWER?
• Network Latency • Available Bandwidth
• The Implementation
• Processing Power • Browser • Battery Preserving Strategies • Memory
![Page 6: Jon Arne Sæterås - Give Responsive Design a mobile performance boost](https://reader038.fdocuments.net/reader038/viewer/2022103016/5552a2efb4c905e8128b53a0/html5/thumbnails/6.jpg)
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
![Page 7: Jon Arne Sæterås - Give Responsive Design a mobile performance boost](https://reader038.fdocuments.net/reader038/viewer/2022103016/5552a2efb4c905e8128b53a0/html5/thumbnails/7.jpg)
“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
![Page 8: Jon Arne Sæterås - Give Responsive Design a mobile performance boost](https://reader038.fdocuments.net/reader038/viewer/2022103016/5552a2efb4c905e8128b53a0/html5/thumbnails/8.jpg)
CURRENT STATE OF THE WEB AND MOBILE
![Page 9: Jon Arne Sæterås - Give Responsive Design a mobile performance boost](https://reader038.fdocuments.net/reader038/viewer/2022103016/5552a2efb4c905e8128b53a0/html5/thumbnails/9.jpg)
1.8 MB3 %7 %4 %3 %
17 %65 %
Images ScriptsCSS FlashOther HTML
in 95 requests on average
http://httparchive.org/
![Page 10: Jon Arne Sæterås - Give Responsive Design a mobile performance boost](https://reader038.fdocuments.net/reader038/viewer/2022103016/5552a2efb4c905e8128b53a0/html5/thumbnails/10.jpg)
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
![Page 11: Jon Arne Sæterås - Give Responsive Design a mobile performance boost](https://reader038.fdocuments.net/reader038/viewer/2022103016/5552a2efb4c905e8128b53a0/html5/thumbnails/11.jpg)
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
![Page 12: Jon Arne Sæterås - Give Responsive Design a mobile performance boost](https://reader038.fdocuments.net/reader038/viewer/2022103016/5552a2efb4c905e8128b53a0/html5/thumbnails/12.jpg)
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
![Page 13: Jon Arne Sæterås - Give Responsive Design a mobile performance boost](https://reader038.fdocuments.net/reader038/viewer/2022103016/5552a2efb4c905e8128b53a0/html5/thumbnails/13.jpg)
MOBILE NETWORKS ARE
FREAKING MAGIC!
a quick look on how they work
![Page 14: Jon Arne Sæterås - Give Responsive Design a mobile performance boost](https://reader038.fdocuments.net/reader038/viewer/2022103016/5552a2efb4c905e8128b53a0/html5/thumbnails/14.jpg)
.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.
![Page 15: Jon Arne Sæterås - Give Responsive Design a mobile performance boost](https://reader038.fdocuments.net/reader038/viewer/2022103016/5552a2efb4c905e8128b53a0/html5/thumbnails/15.jpg)
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
![Page 16: Jon Arne Sæterås - Give Responsive Design a mobile performance boost](https://reader038.fdocuments.net/reader038/viewer/2022103016/5552a2efb4c905e8128b53a0/html5/thumbnails/16.jpg)
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!
![Page 17: Jon Arne Sæterås - Give Responsive Design a mobile performance boost](https://reader038.fdocuments.net/reader038/viewer/2022103016/5552a2efb4c905e8128b53a0/html5/thumbnails/17.jpg)
GOOGLE: 7.5 S.*at the time, the average web site was 1,2MB. Minus the 2s wakeup, we’re in the
ballpark.
![Page 18: Jon Arne Sæterås - Give Responsive Design a mobile performance boost](https://reader038.fdocuments.net/reader038/viewer/2022103016/5552a2efb4c905e8128b53a0/html5/thumbnails/18.jpg)
DEVCONFU.EU
• Load event fired: 32 s.
• 2.3 MB
• 180 requests
iPhone 4 iOS 5.1 on 3G (latency 300ms)
![Page 19: Jon Arne Sæterås - Give Responsive Design a mobile performance boost](https://reader038.fdocuments.net/reader038/viewer/2022103016/5552a2efb4c905e8128b53a0/html5/thumbnails/19.jpg)
SERVE A PAGE TO A MOBILE DEVICE IN LESS THAN 1 SECOND?
A great overview by Ilya Grigorik bit.ly/mobile-barrier
![Page 20: Jon Arne Sæterås - Give Responsive Design a mobile performance boost](https://reader038.fdocuments.net/reader038/viewer/2022103016/5552a2efb4c905e8128b53a0/html5/thumbnails/20.jpg)
WHO CARES?The users care!
Telco Network 53,53 %
Other 46,47 %
How users connect. Page views per connection type. (Scandinavian Countries). Source:
Mobiletech
![Page 21: Jon Arne Sæterås - Give Responsive Design a mobile performance boost](https://reader038.fdocuments.net/reader038/viewer/2022103016/5552a2efb4c905e8128b53a0/html5/thumbnails/21.jpg)
WHY USERS CARE?
http://mobiforge.com/designing/blog/performance-money-part-1-end-users-wallet
➜European Vodafone
account roaming in US
![Page 22: Jon Arne Sæterås - Give Responsive Design a mobile performance boost](https://reader038.fdocuments.net/reader038/viewer/2022103016/5552a2efb4c905e8128b53a0/html5/thumbnails/22.jpg)
SO, WHAT IS OUR CURRENT APPROACH TO THIS?
![Page 23: Jon Arne Sæterås - Give Responsive Design a mobile performance boost](https://reader038.fdocuments.net/reader038/viewer/2022103016/5552a2efb4c905e8128b53a0/html5/thumbnails/23.jpg)
ENTER RESPONSIVE WEB DESIGN
Yay!
![Page 24: Jon Arne Sæterås - Give Responsive Design a mobile performance boost](https://reader038.fdocuments.net/reader038/viewer/2022103016/5552a2efb4c905e8128b53a0/html5/thumbnails/24.jpg)
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
![Page 25: Jon Arne Sæterås - Give Responsive Design a mobile performance boost](https://reader038.fdocuments.net/reader038/viewer/2022103016/5552a2efb4c905e8128b53a0/html5/thumbnails/25.jpg)
RWD IS A TECHNIQUENothing wrong with the technique! It is brilliant!
The famous Iceberg: @brad_frost
![Page 26: Jon Arne Sæterås - Give Responsive Design a mobile performance boost](https://reader038.fdocuments.net/reader038/viewer/2022103016/5552a2efb4c905e8128b53a0/html5/thumbnails/26.jpg)
RWD != MOBILE FRIENDLYbut an important step in the right direction
![Page 27: Jon Arne Sæterås - Give Responsive Design a mobile performance boost](https://reader038.fdocuments.net/reader038/viewer/2022103016/5552a2efb4c905e8128b53a0/html5/thumbnails/27.jpg)
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
![Page 28: Jon Arne Sæterås - Give Responsive Design a mobile performance boost](https://reader038.fdocuments.net/reader038/viewer/2022103016/5552a2efb4c905e8128b53a0/html5/thumbnails/28.jpg)
http://www.bbc.co.uk/blogs/bbcinternet/2012/03/bbc_news_mobile_site_refresh.html
![Page 29: Jon Arne Sæterås - Give Responsive Design a mobile performance boost](https://reader038.fdocuments.net/reader038/viewer/2022103016/5552a2efb4c905e8128b53a0/html5/thumbnails/29.jpg)
PRIMARY ISSUES
• Over downloading
• Unused assets
• Large images
• Stuff...
!
• Network issues
• High Latency
• Bandwidth
• Flaky connection
!
• Processing power
• Slower CPU
• Memory
• Cache limits
![Page 30: Jon Arne Sæterås - Give Responsive Design a mobile performance boost](https://reader038.fdocuments.net/reader038/viewer/2022103016/5552a2efb4c905e8128b53a0/html5/thumbnails/30.jpg)
30-40% SLOWER WITH
JAVASCRIPT ENABLED
![Page 31: Jon Arne Sæterås - Give Responsive Design a mobile performance boost](https://reader038.fdocuments.net/reader038/viewer/2022103016/5552a2efb4c905e8128b53a0/html5/thumbnails/31.jpg)
PARET0 PRINCIPLE
Responsive Design is 20% of the work, and might get you 80% on the way
the “80/20 rule”
![Page 32: Jon Arne Sæterås - Give Responsive Design a mobile performance boost](https://reader038.fdocuments.net/reader038/viewer/2022103016/5552a2efb4c905e8128b53a0/html5/thumbnails/32.jpg)
THE LAST 20%will improve performance by 80%
Our example: increasing
performance by 80%
gives a load time of 2,2s
![Page 33: Jon Arne Sæterås - Give Responsive Design a mobile performance boost](https://reader038.fdocuments.net/reader038/viewer/2022103016/5552a2efb4c905e8128b53a0/html5/thumbnails/33.jpg)
SOMETIMES IT MAKES SENSE TO MULTI-SERVE...or at least do layout adjustments to components
![Page 34: Jon Arne Sæterås - Give Responsive Design a mobile performance boost](https://reader038.fdocuments.net/reader038/viewer/2022103016/5552a2efb4c905e8128b53a0/html5/thumbnails/34.jpg)
When all you have is a hammer, every problem looks like a nail
RWD
device or browser
![Page 35: Jon Arne Sæterås - Give Responsive Design a mobile performance boost](https://reader038.fdocuments.net/reader038/viewer/2022103016/5552a2efb4c905e8128b53a0/html5/thumbnails/35.jpg)
HOW CAN WE FIX THIS?
What can we do to help front end developers make
use of server side stuff?
![Page 36: Jon Arne Sæterås - Give Responsive Design a mobile performance boost](https://reader038.fdocuments.net/reader038/viewer/2022103016/5552a2efb4c905e8128b53a0/html5/thumbnails/36.jpg)
THE VALUE CHAIN
Adaptive Responsive
developer server internet telco network device browser
![Page 37: Jon Arne Sæterås - Give Responsive Design a mobile performance boost](https://reader038.fdocuments.net/reader038/viewer/2022103016/5552a2efb4c905e8128b53a0/html5/thumbnails/37.jpg)
RANTThere is a web server. A very capable one, too.
Use it!
![Page 38: Jon Arne Sæterås - Give Responsive Design a mobile performance boost](https://reader038.fdocuments.net/reader038/viewer/2022103016/5552a2efb4c905e8128b53a0/html5/thumbnails/38.jpg)
SERVER?How to make the server side
available to front end devs
![Page 39: Jon Arne Sæterås - Give Responsive Design a mobile performance boost](https://reader038.fdocuments.net/reader038/viewer/2022103016/5552a2efb4c905e8128b53a0/html5/thumbnails/39.jpg)
http://mobile.smashingmagazine.com/2013/04/09/improve-mobile-support-with-server-side-enhanced-responsive-design/
![Page 40: Jon Arne Sæterås - Give Responsive Design a mobile performance boost](https://reader038.fdocuments.net/reader038/viewer/2022103016/5552a2efb4c905e8128b53a0/html5/thumbnails/40.jpg)
RESSREsponsive design with Server
Side components
![Page 41: Jon Arne Sæterås - Give Responsive Design a mobile performance boost](https://reader038.fdocuments.net/reader038/viewer/2022103016/5552a2efb4c905e8128b53a0/html5/thumbnails/41.jpg)
A BALANCING ACTno right answer
![Page 42: Jon Arne Sæterås - Give Responsive Design a mobile performance boost](https://reader038.fdocuments.net/reader038/viewer/2022103016/5552a2efb4c905e8128b53a0/html5/thumbnails/42.jpg)
PURPOSE OF RESS
• Reduce need for client side processing
• Eliminate “over downloading”
• Let the server do the work instead of the browser
![Page 43: Jon Arne Sæterås - Give Responsive Design a mobile performance boost](https://reader038.fdocuments.net/reader038/viewer/2022103016/5552a2efb4c905e8128b53a0/html5/thumbnails/43.jpg)
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.
![Page 44: Jon Arne Sæterås - Give Responsive Design a mobile performance boost](https://reader038.fdocuments.net/reader038/viewer/2022103016/5552a2efb4c905e8128b53a0/html5/thumbnails/44.jpg)
INGREDIENTS OF RESS
Hello, I know exactly how to make you shine!
Information about the requesting device, network, etc.
Request/Response
![Page 45: Jon Arne Sæterås - Give Responsive Design a mobile performance boost](https://reader038.fdocuments.net/reader038/viewer/2022103016/5552a2efb4c905e8128b53a0/html5/thumbnails/45.jpg)
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/
![Page 46: Jon Arne Sæterås - Give Responsive Design a mobile performance boost](https://reader038.fdocuments.net/reader038/viewer/2022103016/5552a2efb4c905e8128b53a0/html5/thumbnails/46.jpg)
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
![Page 47: Jon Arne Sæterås - Give Responsive Design a mobile performance boost](https://reader038.fdocuments.net/reader038/viewer/2022103016/5552a2efb4c905e8128b53a0/html5/thumbnails/47.jpg)
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
![Page 48: Jon Arne Sæterås - Give Responsive Design a mobile performance boost](https://reader038.fdocuments.net/reader038/viewer/2022103016/5552a2efb4c905e8128b53a0/html5/thumbnails/48.jpg)
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
![Page 49: Jon Arne Sæterås - Give Responsive Design a mobile performance boost](https://reader038.fdocuments.net/reader038/viewer/2022103016/5552a2efb4c905e8128b53a0/html5/thumbnails/49.jpg)
EXAMPLE
if ($type_of_device == ”smartTV”) include(TVnav.php);
else include(nav.php);
![Page 50: Jon Arne Sæterås - Give Responsive Design a mobile performance boost](https://reader038.fdocuments.net/reader038/viewer/2022103016/5552a2efb4c905e8128b53a0/html5/thumbnails/50.jpg)
EXAMPLE
if ($supports_h264) echo ‘<video .../>’;
else echo ‘<a href=”...”>Download</a>’;
![Page 51: Jon Arne Sæterås - Give Responsive Design a mobile performance boost](https://reader038.fdocuments.net/reader038/viewer/2022103016/5552a2efb4c905e8128b53a0/html5/thumbnails/51.jpg)
WHAT WE ENDED UP WITH
![Page 52: Jon Arne Sæterås - Give Responsive Design a mobile performance boost](https://reader038.fdocuments.net/reader038/viewer/2022103016/5552a2efb4c905e8128b53a0/html5/thumbnails/52.jpg)
DEVICE DETECTION
RESTful APIGET http://ddr.demo.wew.io/c/pointing_method
Response{“pointing_method":"touchscreen"}
![Page 53: Jon Arne Sæterås - Give Responsive Design a mobile performance boost](https://reader038.fdocuments.net/reader038/viewer/2022103016/5552a2efb4c905e8128b53a0/html5/thumbnails/53.jpg)
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();
![Page 54: Jon Arne Sæterås - Give Responsive Design a mobile performance boost](https://reader038.fdocuments.net/reader038/viewer/2022103016/5552a2efb4c905e8128b53a0/html5/thumbnails/54.jpg)
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; }
![Page 55: Jon Arne Sæterås - Give Responsive Design a mobile performance boost](https://reader038.fdocuments.net/reader038/viewer/2022103016/5552a2efb4c905e8128b53a0/html5/thumbnails/55.jpg)
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”/>
![Page 56: Jon Arne Sæterås - Give Responsive Design a mobile performance boost](https://reader038.fdocuments.net/reader038/viewer/2022103016/5552a2efb4c905e8128b53a0/html5/thumbnails/56.jpg)
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
![Page 57: Jon Arne Sæterås - Give Responsive Design a mobile performance boost](https://reader038.fdocuments.net/reader038/viewer/2022103016/5552a2efb4c905e8128b53a0/html5/thumbnails/57.jpg)
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
![Page 58: Jon Arne Sæterås - Give Responsive Design a mobile performance boost](https://reader038.fdocuments.net/reader038/viewer/2022103016/5552a2efb4c905e8128b53a0/html5/thumbnails/58.jpg)
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
![Page 59: Jon Arne Sæterås - Give Responsive Design a mobile performance boost](https://reader038.fdocuments.net/reader038/viewer/2022103016/5552a2efb4c905e8128b53a0/html5/thumbnails/59.jpg)
FTW?Does adaptive design have a
positive impact on performance?
![Page 60: Jon Arne Sæterås - Give Responsive Design a mobile performance boost](https://reader038.fdocuments.net/reader038/viewer/2022103016/5552a2efb4c905e8128b53a0/html5/thumbnails/60.jpg)
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
![Page 61: Jon Arne Sæterås - Give Responsive Design a mobile performance boost](https://reader038.fdocuments.net/reader038/viewer/2022103016/5552a2efb4c905e8128b53a0/html5/thumbnails/61.jpg)
BUT...
![Page 62: Jon Arne Sæterås - Give Responsive Design a mobile performance boost](https://reader038.fdocuments.net/reader038/viewer/2022103016/5552a2efb4c905e8128b53a0/html5/thumbnails/62.jpg)
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...
![Page 63: Jon Arne Sæterås - Give Responsive Design a mobile performance boost](https://reader038.fdocuments.net/reader038/viewer/2022103016/5552a2efb4c905e8128b53a0/html5/thumbnails/63.jpg)
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
![Page 64: Jon Arne Sæterås - Give Responsive Design a mobile performance boost](https://reader038.fdocuments.net/reader038/viewer/2022103016/5552a2efb4c905e8128b53a0/html5/thumbnails/64.jpg)
MARSHALLHEADPHONES.COM
• Down from 1.6MB to 432KB
• Load time down from 6,1s to 1,9s
![Page 65: Jon Arne Sæterås - Give Responsive Design a mobile performance boost](https://reader038.fdocuments.net/reader038/viewer/2022103016/5552a2efb4c905e8128b53a0/html5/thumbnails/65.jpg)
WURFL.IO
![Page 66: Jon Arne Sæterås - Give Responsive Design a mobile performance boost](https://reader038.fdocuments.net/reader038/viewer/2022103016/5552a2efb4c905e8128b53a0/html5/thumbnails/66.jpg)
PERFORMANCE FRONT END STARTS WITH THE BACK END
Too much is left to the browser to figure out.
![Page 67: Jon Arne Sæterås - Give Responsive Design a mobile performance boost](https://reader038.fdocuments.net/reader038/viewer/2022103016/5552a2efb4c905e8128b53a0/html5/thumbnails/67.jpg)
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.
![Page 68: Jon Arne Sæterås - Give Responsive Design a mobile performance boost](https://reader038.fdocuments.net/reader038/viewer/2022103016/5552a2efb4c905e8128b53a0/html5/thumbnails/68.jpg)
SUMMING UP
developer server internet telco network device browser
We......must do stuff
here...
...to relieve...
...and......to make life easier for...
...and...
![Page 69: Jon Arne Sæterås - Give Responsive Design a mobile performance boost](https://reader038.fdocuments.net/reader038/viewer/2022103016/5552a2efb4c905e8128b53a0/html5/thumbnails/69.jpg)
THANK YOU
John Arne SæteråsTwitter : @jonarnesVP of innovation at ScientiaMobile.comhttp://www.slideshare.net/jonarnes/