velocity eu: give responsive design a mobile performance boost
DESCRIPTION
With RWD as the base, a story about how to still utilize the server for what the server is great at.TRANSCRIPT
![Page 1: Velocity EU: Give Responsive Design a Mobile Performance Boost](https://reader038.vdocuments.us/reader038/viewer/2022103110/5482b61db4af9f6d148b46a7/html5/thumbnails/1.jpg)
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
![Page 2: Velocity EU: Give Responsive Design a Mobile Performance Boost](https://reader038.vdocuments.us/reader038/viewer/2022103110/5482b61db4af9f6d148b46a7/html5/thumbnails/2.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
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
![Page 3: Velocity EU: Give Responsive Design a Mobile Performance Boost](https://reader038.vdocuments.us/reader038/viewer/2022103110/5482b61db4af9f6d148b46a7/html5/thumbnails/3.jpg)
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
![Page 4: Velocity EU: Give Responsive Design a Mobile Performance Boost](https://reader038.vdocuments.us/reader038/viewer/2022103110/5482b61db4af9f6d148b46a7/html5/thumbnails/4.jpg)
WHY IS MOBILE SLOWER?
• Network Latency • Available Bandwidth
• The Implementation
• Processing Power • Browser • Battery Preserving Strategies
@jonarnes - Velocity conf 2013
![Page 5: Velocity EU: Give Responsive Design a Mobile Performance Boost](https://reader038.vdocuments.us/reader038/viewer/2022103110/5482b61db4af9f6d148b46a7/html5/thumbnails/5.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
@jonarnes - Velocity conf 2013
![Page 6: Velocity EU: Give Responsive Design a Mobile Performance Boost](https://reader038.vdocuments.us/reader038/viewer/2022103110/5482b61db4af9f6d148b46a7/html5/thumbnails/6.jpg)
“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
![Page 8: Velocity EU: Give Responsive Design a Mobile Performance Boost](https://reader038.vdocuments.us/reader038/viewer/2022103110/5482b61db4af9f6d148b46a7/html5/thumbnails/8.jpg)
1.6 MB4 %9 %
5 %3 %
17 % 63 %
Images ScriptsCSS FlashOther HTML
in 95 requests on average
http://httparchive.org/
@jonarnes - Velocity conf 2013
![Page 9: Velocity EU: Give Responsive Design a Mobile Performance Boost](https://reader038.vdocuments.us/reader038/viewer/2022103110/5482b61db4af9f6d148b46a7/html5/thumbnails/9.jpg)
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
![Page 10: Velocity EU: Give Responsive Design a Mobile Performance Boost](https://reader038.vdocuments.us/reader038/viewer/2022103110/5482b61db4af9f6d148b46a7/html5/thumbnails/10.jpg)
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
![Page 11: Velocity EU: Give Responsive Design a Mobile Performance Boost](https://reader038.vdocuments.us/reader038/viewer/2022103110/5482b61db4af9f6d148b46a7/html5/thumbnails/11.jpg)
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
![Page 12: Velocity EU: Give Responsive Design a Mobile Performance Boost](https://reader038.vdocuments.us/reader038/viewer/2022103110/5482b61db4af9f6d148b46a7/html5/thumbnails/12.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 13: Velocity EU: Give Responsive Design a Mobile Performance Boost](https://reader038.vdocuments.us/reader038/viewer/2022103110/5482b61db4af9f6d148b46a7/html5/thumbnails/13.jpg)
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
![Page 14: Velocity EU: Give Responsive Design a Mobile Performance Boost](https://reader038.vdocuments.us/reader038/viewer/2022103110/5482b61db4af9f6d148b46a7/html5/thumbnails/14.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
@jonarnes - Velocity conf 2013
![Page 15: Velocity EU: Give Responsive Design a Mobile Performance Boost](https://reader038.vdocuments.us/reader038/viewer/2022103110/5482b61db4af9f6d148b46a7/html5/thumbnails/15.jpg)
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
![Page 16: Velocity EU: Give Responsive Design a Mobile Performance Boost](https://reader038.vdocuments.us/reader038/viewer/2022103110/5482b61db4af9f6d148b46a7/html5/thumbnails/16.jpg)
SO, WHAT IS OUR CURRENT APPROACH TO THIS?
@jonarnes - Velocity conf 2013
![Page 18: Velocity EU: Give Responsive Design a Mobile Performance Boost](https://reader038.vdocuments.us/reader038/viewer/2022103110/5482b61db4af9f6d148b46a7/html5/thumbnails/18.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
@jonarnes - Velocity conf 2013
![Page 19: Velocity EU: Give Responsive Design a Mobile Performance Boost](https://reader038.vdocuments.us/reader038/viewer/2022103110/5482b61db4af9f6d148b46a7/html5/thumbnails/19.jpg)
RWD IS A TECHNIQUENothing wrong with the technique! It is brilliant!
The famous Iceberg: @brad_frost@jonarnes - Velocity conf 2013
![Page 20: Velocity EU: Give Responsive Design a Mobile Performance Boost](https://reader038.vdocuments.us/reader038/viewer/2022103110/5482b61db4af9f6d148b46a7/html5/thumbnails/20.jpg)
RWD != MOBILE FRIENDLYbut an important step in the right direction
@jonarnes - Velocity conf 2013
![Page 21: Velocity EU: Give Responsive Design a Mobile Performance Boost](https://reader038.vdocuments.us/reader038/viewer/2022103110/5482b61db4af9f6d148b46a7/html5/thumbnails/21.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 @jonarnes - Velocity conf 2013
![Page 23: Velocity EU: Give Responsive Design a Mobile Performance Boost](https://reader038.vdocuments.us/reader038/viewer/2022103110/5482b61db4af9f6d148b46a7/html5/thumbnails/23.jpg)
http://www.bbc.co.uk/blogs/bbcinternet/2012/03/bbc_news_mobile_site_refresh.html
![Page 24: Velocity EU: Give Responsive Design a Mobile Performance Boost](https://reader038.vdocuments.us/reader038/viewer/2022103110/5482b61db4af9f6d148b46a7/html5/thumbnails/24.jpg)
IT’S MORE TO MOBILE THAN JUST “GOING RESPONSIVE”
![Page 25: Velocity EU: Give Responsive Design a Mobile Performance Boost](https://reader038.vdocuments.us/reader038/viewer/2022103110/5482b61db4af9f6d148b46a7/html5/thumbnails/25.jpg)
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
![Page 26: Velocity EU: Give Responsive Design a Mobile Performance Boost](https://reader038.vdocuments.us/reader038/viewer/2022103110/5482b61db4af9f6d148b46a7/html5/thumbnails/26.jpg)
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
![Page 27: Velocity EU: Give Responsive Design a Mobile Performance Boost](https://reader038.vdocuments.us/reader038/viewer/2022103110/5482b61db4af9f6d148b46a7/html5/thumbnails/27.jpg)
When all you have is a hammer, every problem looks like a nail
RWD
device or browser
@jonarnes - Velocity conf 2013
![Page 28: Velocity EU: Give Responsive Design a Mobile Performance Boost](https://reader038.vdocuments.us/reader038/viewer/2022103110/5482b61db4af9f6d148b46a7/html5/thumbnails/28.jpg)
HOW CAN WE FIX THIS?
What can we do to help front end developers make
use of server side stuff?
@jonarnes - Velocity conf 2013
![Page 29: Velocity EU: Give Responsive Design a Mobile Performance Boost](https://reader038.vdocuments.us/reader038/viewer/2022103110/5482b61db4af9f6d148b46a7/html5/thumbnails/29.jpg)
THE VALUE CHAIN
Adaptive Responsive
developer server internet telco network device browser
@jonarnes - Velocity conf 2013
![Page 30: Velocity EU: Give Responsive Design a Mobile Performance Boost](https://reader038.vdocuments.us/reader038/viewer/2022103110/5482b61db4af9f6d148b46a7/html5/thumbnails/30.jpg)
RANTThere is a web server. A very capable one, too.
Use it!@jonarnes - Velocity conf 2013
![Page 31: Velocity EU: Give Responsive Design a Mobile Performance Boost](https://reader038.vdocuments.us/reader038/viewer/2022103110/5482b61db4af9f6d148b46a7/html5/thumbnails/31.jpg)
RESSREsponsive design with Server
Side components
@jonarnes - Velocity conf 2013
![Page 33: Velocity EU: Give Responsive Design a Mobile Performance Boost](https://reader038.vdocuments.us/reader038/viewer/2022103110/5482b61db4af9f6d148b46a7/html5/thumbnails/33.jpg)
PURPOSE OF RESS
• Eliminate “over downloading”
• Let the server do the work instead of the browser
@jonarnes - Velocity conf 2013
![Page 34: Velocity EU: Give Responsive Design a Mobile Performance Boost](https://reader038.vdocuments.us/reader038/viewer/2022103110/5482b61db4af9f6d148b46a7/html5/thumbnails/34.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.
@jonarnes - Velocity conf 2013
![Page 35: Velocity EU: Give Responsive Design a Mobile Performance Boost](https://reader038.vdocuments.us/reader038/viewer/2022103110/5482b61db4af9f6d148b46a7/html5/thumbnails/35.jpg)
SOMETIMES IT MAKES SENSE TO MULTI-SERVE...or at least do layout adjustments to components on the page
@jonarnes - Velocity conf 2013
![Page 36: Velocity EU: Give Responsive Design a Mobile Performance Boost](https://reader038.vdocuments.us/reader038/viewer/2022103110/5482b61db4af9f6d148b46a7/html5/thumbnails/36.jpg)
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
![Page 37: Velocity EU: Give Responsive Design a Mobile Performance Boost](https://reader038.vdocuments.us/reader038/viewer/2022103110/5482b61db4af9f6d148b46a7/html5/thumbnails/37.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/
@jonarnes - Velocity conf 2013
![Page 38: Velocity EU: Give Responsive Design a Mobile Performance Boost](https://reader038.vdocuments.us/reader038/viewer/2022103110/5482b61db4af9f6d148b46a7/html5/thumbnails/38.jpg)
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
![Page 39: Velocity EU: Give Responsive Design a Mobile Performance Boost](https://reader038.vdocuments.us/reader038/viewer/2022103110/5482b61db4af9f6d148b46a7/html5/thumbnails/39.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";!}
http://mpulp.mobi/2013/05/user-agent-sniffing-on-the-new-nyt-mobile-site/
http://mobile.nytimes.com
@jonarnes - Velocity conf 2013
![Page 40: Velocity EU: Give Responsive Design a Mobile Performance Boost](https://reader038.vdocuments.us/reader038/viewer/2022103110/5482b61db4af9f6d148b46a7/html5/thumbnails/40.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
@jonarnes - Velocity conf 2013
![Page 41: Velocity EU: Give Responsive Design a Mobile Performance Boost](https://reader038.vdocuments.us/reader038/viewer/2022103110/5482b61db4af9f6d148b46a7/html5/thumbnails/41.jpg)
EXAMPLE
if ($type_of_device == ”smartTV”) include(TVnav.php);
else include(nav.php);
@jonarnes - Velocity conf 2013
![Page 42: Velocity EU: Give Responsive Design a Mobile Performance Boost](https://reader038.vdocuments.us/reader038/viewer/2022103110/5482b61db4af9f6d148b46a7/html5/thumbnails/42.jpg)
EXAMPLE
if ($supports_h264) echo ‘<video .../>’;
else echo ‘<a href=”...”>Download</a>’;
@jonarnes - Velocity conf 2013
![Page 43: Velocity EU: Give Responsive Design a Mobile Performance Boost](https://reader038.vdocuments.us/reader038/viewer/2022103110/5482b61db4af9f6d148b46a7/html5/thumbnails/43.jpg)
EXAMPLE
if ($your_property == “Z”) //ad network X …
else //ad network Y
@jonarnes - Velocity conf 2013
![Page 45: Velocity EU: Give Responsive Design a Mobile Performance Boost](https://reader038.vdocuments.us/reader038/viewer/2022103110/5482b61db4af9f6d148b46a7/html5/thumbnails/45.jpg)
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
![Page 46: Velocity EU: Give Responsive Design a Mobile Performance Boost](https://reader038.vdocuments.us/reader038/viewer/2022103110/5482b61db4af9f6d148b46a7/html5/thumbnails/46.jpg)
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
![Page 47: Velocity EU: Give Responsive Design a Mobile Performance Boost](https://reader038.vdocuments.us/reader038/viewer/2022103110/5482b61db4af9f6d148b46a7/html5/thumbnails/47.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; }
@jonarnes - Velocity conf 2013
![Page 48: Velocity EU: Give Responsive Design a Mobile Performance Boost](https://reader038.vdocuments.us/reader038/viewer/2022103110/5482b61db4af9f6d148b46a7/html5/thumbnails/48.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”/>
Examples and documentation: https://github.com/whateverweb/Image-Server@jonarnes - Velocity conf 2013
![Page 49: Velocity EU: Give Responsive Design a Mobile Performance Boost](https://reader038.vdocuments.us/reader038/viewer/2022103110/5482b61db4af9f6d148b46a7/html5/thumbnails/49.jpg)
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
![Page 50: Velocity EU: Give Responsive Design a Mobile Performance Boost](https://reader038.vdocuments.us/reader038/viewer/2022103110/5482b61db4af9f6d148b46a7/html5/thumbnails/50.jpg)
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
![Page 51: Velocity EU: Give Responsive Design a Mobile Performance Boost](https://reader038.vdocuments.us/reader038/viewer/2022103110/5482b61db4af9f6d148b46a7/html5/thumbnails/51.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
@jonarnes - Velocity conf 2013
![Page 52: Velocity EU: Give Responsive Design a Mobile Performance Boost](https://reader038.vdocuments.us/reader038/viewer/2022103110/5482b61db4af9f6d148b46a7/html5/thumbnails/52.jpg)
FTW?Does adaptive design have a
positive impact on performance?
@jonarnes - Velocity conf 2013
![Page 53: Velocity EU: Give Responsive Design a Mobile Performance Boost](https://reader038.vdocuments.us/reader038/viewer/2022103110/5482b61db4af9f6d148b46a7/html5/thumbnails/53.jpg)
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
![Page 54: Velocity EU: Give Responsive Design a Mobile Performance Boost](https://reader038.vdocuments.us/reader038/viewer/2022103110/5482b61db4af9f6d148b46a7/html5/thumbnails/54.jpg)
MARSHALLHEADPHONES.COM
• Down from 1.6MB to 432KB
• Load time down from 6,1s to 1,9s
@jonarnes - Velocity conf 2013
![Page 55: Velocity EU: Give Responsive Design a Mobile Performance Boost](https://reader038.vdocuments.us/reader038/viewer/2022103110/5482b61db4af9f6d148b46a7/html5/thumbnails/55.jpg)
@jonarnes - Velocity conf 2013
![Page 56: Velocity EU: Give Responsive Design a Mobile Performance Boost](https://reader038.vdocuments.us/reader038/viewer/2022103110/5482b61db4af9f6d148b46a7/html5/thumbnails/56.jpg)
http://mobile.smashingmagazine.com/2013/04/09/improve-mobile-support-with-server-side-enhanced-responsive-design/@jonarnes - Velocity conf 2013
![Page 57: Velocity EU: Give Responsive Design a Mobile Performance Boost](https://reader038.vdocuments.us/reader038/viewer/2022103110/5482b61db4af9f6d148b46a7/html5/thumbnails/57.jpg)
PERFORMANCE FRONT END STARTS WITH THE BACK END
Too much is left to the browser to figure out.
@jonarnes - Velocity conf 2013
![Page 58: Velocity EU: Give Responsive Design a Mobile Performance Boost](https://reader038.vdocuments.us/reader038/viewer/2022103110/5482b61db4af9f6d148b46a7/html5/thumbnails/58.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.
@jonarnes - Velocity conf 2013
![Page 59: Velocity EU: Give Responsive Design a Mobile Performance Boost](https://reader038.vdocuments.us/reader038/viewer/2022103110/5482b61db4af9f6d148b46a7/html5/thumbnails/59.jpg)
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
![Page 60: Velocity EU: Give Responsive Design a Mobile Performance Boost](https://reader038.vdocuments.us/reader038/viewer/2022103110/5482b61db4af9f6d148b46a7/html5/thumbnails/60.jpg)
John Arne Sæteråstwitter : @jonarnes
http://www.slideshare.net/jonarnes/
THANK YOU
?
@jonarnes - Velocity conf 2013