Mobile is slow - Over the Air 2013
-
Upload
jon-arne-saeteras -
Category
Technology
-
view
539 -
download
0
description
Transcript of Mobile is slow - Over the Air 2013
![Page 1: Mobile is slow - Over the Air 2013](https://reader035.fdocuments.us/reader035/viewer/2022062319/55646aecd8b42a951e8b5722/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
![Page 2: Mobile is slow - Over the Air 2013](https://reader035.fdocuments.us/reader035/viewer/2022062319/55646aecd8b42a951e8b5722/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-presentationhttp://slideshare.net/markstanton/speed-matters
SLOW IS NOT COOL...even less cool on mobile
![Page 3: Mobile is slow - Over the Air 2013](https://reader035.fdocuments.us/reader035/viewer/2022062319/55646aecd8b42a951e8b5722/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
![Page 4: Mobile is slow - Over the Air 2013](https://reader035.fdocuments.us/reader035/viewer/2022062319/55646aecd8b42a951e8b5722/html5/thumbnails/4.jpg)
WHY IS MOBILE SLOWER?
• Network Latency• Available Bandwidth
• The Implementation
• Processing Power• Browser • Battery Preserving Strategies
![Page 5: Mobile is slow - Over the Air 2013](https://reader035.fdocuments.us/reader035/viewer/2022062319/55646aecd8b42a951e8b5722/html5/thumbnails/5.jpg)
CURRENT STATE OF THE WEB AND MOBILE
![Page 6: Mobile is slow - Over the Air 2013](https://reader035.fdocuments.us/reader035/viewer/2022062319/55646aecd8b42a951e8b5722/html5/thumbnails/6.jpg)
1.6 MB4%9%
6%3%
17% 63%
Images ScriptsCSS FlashOther HTML
in 94 requests on average
http://httparchive.org/
![Page 7: Mobile is slow - Over the Air 2013](https://reader035.fdocuments.us/reader035/viewer/2022062319/55646aecd8b42a951e8b5722/html5/thumbnails/7.jpg)
ASIDE...
• In 2030• Average web site is
320MB
• Average (mobile) bandwidth is 93Mbps
http://mpulp.mobi/2013/06/page-weight-and-mobile-bandwidth-in-year-2030/
![Page 8: Mobile is slow - Over the Air 2013](https://reader035.fdocuments.us/reader035/viewer/2022062319/55646aecd8b42a951e8b5722/html5/thumbnails/8.jpg)
1.6 MBin 94 requests on average
• Avg. speed: 2Mbps (cisco)• 1 Mbps = 0.12 MB/s• 1.6 / 0.24 = 6,7s
6,7Secondsdownload
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
![Page 9: Mobile is slow - Over the Air 2013](https://reader035.fdocuments.us/reader035/viewer/2022062319/55646aecd8b42a951e8b5722/html5/thumbnails/9.jpg)
1.6 MBin 94 requests on average
• 100-200 ms pr roundtrip• Depends....(DNS, pipelining,
concurrent TCP connections etc.)
9,4Secondslatency in
total
Hold that thought...
![Page 10: Mobile is slow - Over the Air 2013](https://reader035.fdocuments.us/reader035/viewer/2022062319/55646aecd8b42a951e8b5722/html5/thumbnails/10.jpg)
MOBILE NETWORKS ARE
FREAKING MAGIC!
a quick look on how they work
![Page 11: Mobile is slow - Over the Air 2013](https://reader035.fdocuments.us/reader035/viewer/2022062319/55646aecd8b42a951e8b5722/html5/thumbnails/11.jpg)
2.1 s to connect.
Latency, anything from 100 - >500ms
![Page 12: Mobile is slow - Over the Air 2013](https://reader035.fdocuments.us/reader035/viewer/2022062319/55646aecd8b42a951e8b5722/html5/thumbnails/12.jpg)
2.40 s, html page loaded
TCP stuff
![Page 13: Mobile is slow - Over the Air 2013](https://reader035.fdocuments.us/reader035/viewer/2022062319/55646aecd8b42a951e8b5722/html5/thumbnails/13.jpg)
3-60 seconds....
Infographic: http://www.research.att.com/articles/featured_stories/2011_03/201102_Energy_efficient?fbid=YmB5ErqPR7b
Now download assets
![Page 14: Mobile is slow - Over the Air 2013](https://reader035.fdocuments.us/reader035/viewer/2022062319/55646aecd8b42a951e8b5722/html5/thumbnails/14.jpg)
1.6 MBin 94 requests on average
• Wake up radio (one time)• TCP and DNS (one time)• 94 round trips (6 req pr conn.)• Downloading 1.6 mb over 2Mbps
10,6Secondstotal
+ rendering time in the browser+ server response time
Disclaimer: lots of assumptions in this calculation!
![Page 15: Mobile is slow - Over the Air 2013](https://reader035.fdocuments.us/reader035/viewer/2022062319/55646aecd8b42a951e8b5722/html5/thumbnails/15.jpg)
GOOGLE: 10.2 S.
http://analytics.blogspot.nl/2012/04/global-site-speed-overview-how-fast-are.html
![Page 16: Mobile is slow - Over the Air 2013](https://reader035.fdocuments.us/reader035/viewer/2022062319/55646aecd8b42a951e8b5722/html5/thumbnails/16.jpg)
SERVE A PAGE TO A MOBILE DEVICE IN
LESS THAN 1 SECOND?
A great overview by Ilya Grigorik bit.ly/mobile-barrier
![Page 17: Mobile is slow - Over the Air 2013](https://reader035.fdocuments.us/reader035/viewer/2022062319/55646aecd8b42a951e8b5722/html5/thumbnails/17.jpg)
WHO CARES?The users care!
Telco Network53,53 %
Other46,47 %
How users connect. Page views per connection type. (Scandinavian Countries).
Source: Mobiletech
![Page 18: Mobile is slow - Over the Air 2013](https://reader035.fdocuments.us/reader035/viewer/2022062319/55646aecd8b42a951e8b5722/html5/thumbnails/18.jpg)
WHY USERS CARE?
http://mobiforge.com/designing/blog/performance-money-part-1-end-users-wallet
➜European Vodafone
account roaming in US
![Page 19: Mobile is slow - Over the Air 2013](https://reader035.fdocuments.us/reader035/viewer/2022062319/55646aecd8b42a951e8b5722/html5/thumbnails/19.jpg)
SO, WHAT IS OUR CURRENT APPROACH TO THIS?
![Page 20: Mobile is slow - Over the Air 2013](https://reader035.fdocuments.us/reader035/viewer/2022062319/55646aecd8b42a951e8b5722/html5/thumbnails/20.jpg)
ENTER RESPONSIVE WEB DESIGN
Yay!
![Page 21: Mobile is slow - Over the Air 2013](https://reader035.fdocuments.us/reader035/viewer/2022062319/55646aecd8b42a951e8b5722/html5/thumbnails/21.jpg)
RESPONSIVE WEB DESIGN
Doh...Much smaller
6%
Same size72%
Smaller22%
http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/
Also about the same
number of
HTTP requests
![Page 22: Mobile is slow - Over the Air 2013](https://reader035.fdocuments.us/reader035/viewer/2022062319/55646aecd8b42a951e8b5722/html5/thumbnails/22.jpg)
RWD IS A TECHNIQUENothing wrong with the technique! It is brilliant!
The famous Iceberg: @brad_frost
![Page 23: Mobile is slow - Over the Air 2013](https://reader035.fdocuments.us/reader035/viewer/2022062319/55646aecd8b42a951e8b5722/html5/thumbnails/23.jpg)
RWD != MOBILE FRIENDLYbut an important step in the right direction
![Page 24: Mobile is slow - Over the Air 2013](https://reader035.fdocuments.us/reader035/viewer/2022062319/55646aecd8b42a951e8b5722/html5/thumbnails/24.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 25: Mobile is slow - Over the Air 2013](https://reader035.fdocuments.us/reader035/viewer/2022062319/55646aecd8b42a951e8b5722/html5/thumbnails/25.jpg)
http://www.bbc.co.uk/blogs/bbcinternet/2012/03/bbc_news_mobile_site_refresh.html
![Page 26: Mobile is slow - Over the Air 2013](https://reader035.fdocuments.us/reader035/viewer/2022062319/55646aecd8b42a951e8b5722/html5/thumbnails/26.jpg)
PRIMARY ISSUES
• Over downloading
• Unused assets
• Large images
• Stuff...
• Network issues
• High Latency
• Bandwidth
• Flaky connection
![Page 27: Mobile is slow - Over the Air 2013](https://reader035.fdocuments.us/reader035/viewer/2022062319/55646aecd8b42a951e8b5722/html5/thumbnails/27.jpg)
PARET0 PRINCIPLE
Responsive Design is 20% of the work, and might get you 80% of the way
the “80/20 rule”
![Page 28: Mobile is slow - Over the Air 2013](https://reader035.fdocuments.us/reader035/viewer/2022062319/55646aecd8b42a951e8b5722/html5/thumbnails/28.jpg)
THE LAST 20%will improve performance by 80%
Our example: Shaving
80%off 10,6 s. gives a
load time of 2,1s
![Page 29: Mobile is slow - Over the Air 2013](https://reader035.fdocuments.us/reader035/viewer/2022062319/55646aecd8b42a951e8b5722/html5/thumbnails/29.jpg)
SOMETIMES IT MAKES SENSE TO MULTISERVE
![Page 30: Mobile is slow - Over the Air 2013](https://reader035.fdocuments.us/reader035/viewer/2022062319/55646aecd8b42a951e8b5722/html5/thumbnails/30.jpg)
When all you have is a hammer,every problem looks like a nail
RWD
device or browser
![Page 31: Mobile is slow - Over the Air 2013](https://reader035.fdocuments.us/reader035/viewer/2022062319/55646aecd8b42a951e8b5722/html5/thumbnails/31.jpg)
HOW CAN WE FIX THIS?
Adaptive Design
![Page 32: Mobile is slow - Over the Air 2013](https://reader035.fdocuments.us/reader035/viewer/2022062319/55646aecd8b42a951e8b5722/html5/thumbnails/32.jpg)
THE VALUE CHAIN
Adaptive Responsive
developer server internet telco network device browser
![Page 33: Mobile is slow - Over the Air 2013](https://reader035.fdocuments.us/reader035/viewer/2022062319/55646aecd8b42a951e8b5722/html5/thumbnails/33.jpg)
RANTThere is a web server. A very capable one, too.
Use it!
![Page 34: Mobile is slow - Over the Air 2013](https://reader035.fdocuments.us/reader035/viewer/2022062319/55646aecd8b42a951e8b5722/html5/thumbnails/34.jpg)
SERVER?How to make the server side
available to front end devs
![Page 35: Mobile is slow - Over the Air 2013](https://reader035.fdocuments.us/reader035/viewer/2022062319/55646aecd8b42a951e8b5722/html5/thumbnails/35.jpg)
![Page 36: Mobile is slow - Over the Air 2013](https://reader035.fdocuments.us/reader035/viewer/2022062319/55646aecd8b42a951e8b5722/html5/thumbnails/36.jpg)
http://mobile.smashingmagazine.com/2013/04/09/improve-mobile-support-with-server-side-enhanced-responsive-design/
![Page 37: Mobile is slow - Over the Air 2013](https://reader035.fdocuments.us/reader035/viewer/2022062319/55646aecd8b42a951e8b5722/html5/thumbnails/37.jpg)
RESSREsponsive design with Server
Side components
![Page 38: Mobile is slow - Over the Air 2013](https://reader035.fdocuments.us/reader035/viewer/2022062319/55646aecd8b42a951e8b5722/html5/thumbnails/38.jpg)
A BALANCING ACTno right answer
![Page 39: Mobile is slow - Over the Air 2013](https://reader035.fdocuments.us/reader035/viewer/2022062319/55646aecd8b42a951e8b5722/html5/thumbnails/39.jpg)
PURPOSE OF RESS
• Reduce need for client side processing
• Eliminate “over downloading”
• Let the server do the work instead of the browser
![Page 40: Mobile is slow - Over the Air 2013](https://reader035.fdocuments.us/reader035/viewer/2022062319/55646aecd8b42a951e8b5722/html5/thumbnails/40.jpg)
INGREDIENTS OF RESS
Hello, I know exactly how to make you shine!
Information about the requesting device, network, etc.
Request/Response
![Page 41: Mobile is slow - Over the Air 2013](https://reader035.fdocuments.us/reader035/viewer/2022062319/55646aecd8b42a951e8b5722/html5/thumbnails/41.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 42: Mobile is slow - Over the Air 2013](https://reader035.fdocuments.us/reader035/viewer/2022062319/55646aecd8b42a951e8b5722/html5/thumbnails/42.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.
![Page 43: Mobile is slow - Over the Air 2013](https://reader035.fdocuments.us/reader035/viewer/2022062319/55646aecd8b42a951e8b5722/html5/thumbnails/43.jpg)
NYTIMESvar 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
![Page 44: Mobile is slow - Over the Air 2013](https://reader035.fdocuments.us/reader035/viewer/2022062319/55646aecd8b42a951e8b5722/html5/thumbnails/44.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 45: Mobile is slow - Over the Air 2013](https://reader035.fdocuments.us/reader035/viewer/2022062319/55646aecd8b42a951e8b5722/html5/thumbnails/45.jpg)
EXAMPLE
if ($type_of_device == ”smartTV”)include(TVnav.php);
elseinclude(nav.php);
http://www.circleid.com/posts/20120111_analysis_of_server_side_mobile_web_detection/
![Page 46: Mobile is slow - Over the Air 2013](https://reader035.fdocuments.us/reader035/viewer/2022062319/55646aecd8b42a951e8b5722/html5/thumbnails/46.jpg)
EXAMPLE
if ($supports_h264)echo ‘<video .../>’;
elseecho ‘<a href=”...”>Download</a>’;
![Page 47: Mobile is slow - Over the Air 2013](https://reader035.fdocuments.us/reader035/viewer/2022062319/55646aecd8b42a951e8b5722/html5/thumbnails/47.jpg)
OUR APPROACH
![Page 48: Mobile is slow - Over the Air 2013](https://reader035.fdocuments.us/reader035/viewer/2022062319/55646aecd8b42a951e8b5722/html5/thumbnails/48.jpg)
DEVICE DETECTIONSingle Capability
RequestGET http://ddr.demo.wew.io/c/model_name
Response{"model_name":"iPhone"}
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
![Page 49: Mobile is slow - Over the Air 2013](https://reader035.fdocuments.us/reader035/viewer/2022062319/55646aecd8b42a951e8b5722/html5/thumbnails/49.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 50: Mobile is slow - Over the Air 2013](https://reader035.fdocuments.us/reader035/viewer/2022062319/55646aecd8b42a951e8b5722/html5/thumbnails/50.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 51: Mobile is slow - Over the Air 2013](https://reader035.fdocuments.us/reader035/viewer/2022062319/55646aecd8b42a951e8b5722/html5/thumbnails/51.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
![Page 52: Mobile is slow - Over the Air 2013](https://reader035.fdocuments.us/reader035/viewer/2022062319/55646aecd8b42a951e8b5722/html5/thumbnails/52.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. Full example: https://github.com/whateverweb/Image-Server/blob/master/examples/picturefill/index.html
Using Picturefill
![Page 53: Mobile is slow - Over the Air 2013](https://reader035.fdocuments.us/reader035/viewer/2022062319/55646aecd8b42a951e8b5722/html5/thumbnails/53.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
![Page 54: Mobile is slow - Over the Air 2013](https://reader035.fdocuments.us/reader035/viewer/2022062319/55646aecd8b42a951e8b5722/html5/thumbnails/54.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);
![Page 55: Mobile is slow - Over the Air 2013](https://reader035.fdocuments.us/reader035/viewer/2022062319/55646aecd8b42a951e8b5722/html5/thumbnails/55.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 56: Mobile is slow - Over the Air 2013](https://reader035.fdocuments.us/reader035/viewer/2022062319/55646aecd8b42a951e8b5722/html5/thumbnails/56.jpg)
FTW?Does adaptive design have a
positive impact on performance?
![Page 57: Mobile is slow - Over the Air 2013](https://reader035.fdocuments.us/reader035/viewer/2022062319/55646aecd8b42a951e8b5722/html5/thumbnails/57.jpg)
EFFECT
0108215323430
Size
No WeW With WeW
01 0002 0003 0004 000
Time0
5751 1501 7252 300
Latency
20% less data transfer
50% faster download
73% reduced latency
![Page 58: Mobile is slow - Over the Air 2013](https://reader035.fdocuments.us/reader035/viewer/2022062319/55646aecd8b42a951e8b5722/html5/thumbnails/58.jpg)
BUT...
![Page 59: Mobile is slow - Over the Air 2013](https://reader035.fdocuments.us/reader035/viewer/2022062319/55646aecd8b42a951e8b5722/html5/thumbnails/59.jpg)
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 assetsand repaints etc.
Lazy loading good
or bad? Depends...
![Page 60: Mobile is slow - Over the Air 2013](https://reader035.fdocuments.us/reader035/viewer/2022062319/55646aecd8b42a951e8b5722/html5/thumbnails/60.jpg)
MARSHALLHEADPHONES.COM
• Down from 1.6MB to 432KB
• Load time down from 6,1s to 1,9s
![Page 61: Mobile is slow - Over the Air 2013](https://reader035.fdocuments.us/reader035/viewer/2022062319/55646aecd8b42a951e8b5722/html5/thumbnails/61.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 62: Mobile is slow - Over the Air 2013](https://reader035.fdocuments.us/reader035/viewer/2022062319/55646aecd8b42a951e8b5722/html5/thumbnails/62.jpg)
PERFORMANCE FRONT END STARTS WITH THE BACK END
Too much is left to the browser to figure out.
![Page 63: Mobile is slow - Over the Air 2013](https://reader035.fdocuments.us/reader035/viewer/2022062319/55646aecd8b42a951e8b5722/html5/thumbnails/63.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 64: Mobile is slow - Over the Air 2013](https://reader035.fdocuments.us/reader035/viewer/2022062319/55646aecd8b42a951e8b5722/html5/thumbnails/64.jpg)
THE RULES
1. Make Fewer HTTP Requests2. Use a Content Delivery Network3. Add an Expires Header4. Gzip Components5. Put Stylesheets at the Top6. Put Scripts at the Bottom7. Avoid CSS Expressions8. Make JavaScript and CSS External9. Reduce DNS Lookups10.Minify JavaScript11.Avoid Redirects12.Remove Duplicate Scripts13.Configure ETags14.Make AJAX Cacheable
By Steve Souders: http://stevesouders.com/hpws/rules.php
Most of these are implemented server side.
![Page 65: Mobile is slow - Over the Air 2013](https://reader035.fdocuments.us/reader035/viewer/2022062319/55646aecd8b42a951e8b5722/html5/thumbnails/65.jpg)
POOR IMPLEMENTATION SLOWS RENDERING DOWN, BUT SPEED IS REALLY ABOUT HOW FAST THE USER CAN
ACHIEVE HIS GOALS
WHAT IS SPEED, ANYWAY?
![Page 66: Mobile is slow - Over the Air 2013](https://reader035.fdocuments.us/reader035/viewer/2022062319/55646aecd8b42a951e8b5722/html5/thumbnails/66.jpg)
John Arne Sæteråstwitter : @jonarnes
http://www.slideshare.net/jonarnes/
THANK YOU
?