Handwritten Text Recognition for manuscripts and early printed texts
Give Responsive Design a Mobile Performance Boost
1. John Arne Sæterås
Twitter: @jonarnes
Head of innovation at Mobiletech
http://www.slideshare.net/jonarnes/
August 18, 2010
YEP, WEB ON MOBILE IS SLOW
fredag 20. september 13
2. 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
fredag 20. september 13
3. THE VALUE CHAIN
developer server internet telco
network device
Doesn’t really make things more
difficult, but reveal a few issues
browser
fredag 20. september 13
5. WHY IS MOBILE SLOWER?
• Processing Power
• Browser
• Battery Preserving Strategies
fredag 20. september 13
6. WHY IS MOBILE SLOWER?
• Network Latency
• Available Bandwidth
• Processing Power
• Browser
• Battery Preserving Strategies
fredag 20. september 13
7. WHY IS MOBILE SLOWER?
• Network Latency
• Available Bandwidth
• The Implementation
• Processing Power
• Browser
• Battery Preserving Strategies
fredag 20. september 13
9. 1.6 MB
4%9%
6%
3%
17% 63%
Images Scripts
CSS Flash
Other HTML
in 94 requests on average
http://httparchive.org/
fredag 20. september 13
10. 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/
fredag 20. september 13
11. 1.6 MB
in 94 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
fredag 20. september 13
12. 1.6 MB
in 94 requests on average
• Avg. speed: 2Mbps (cisco)
• 1 Mbps = 0.12 MB/s
• 1.6 / 0.24 = 6,7s
6,7Seconds
download
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
fredag 20. september 13
13. 1.6 MB
in 94 requests on average
•100-200 ms pr roundtrip
•Depends....(DNS, pipelining,
concurrentTCP connections
etc.)
9,4Seconds
latency in
total
fredag 20. september 13
14. 1.6 MB
in 94 requests on average
•100-200 ms pr roundtrip
•Depends....(DNS, pipelining,
concurrentTCP connections
etc.)
9,4Seconds
latency in
total
Hold that thought...
more on this now.
fredag 20. september 13
19. 1.6 MB
in 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,6Seconds
total
+ rendering time in the browser
+ server response time
Disclaimer: lots of assumptions in this calculation!
fredag 20. september 13
24. WHO CARES?
The users care!
Telco Network
53,53 %
Other
46,47 %
How users connect. Page views per
connection type. (Scandinavian Countries).
Source: Mobiletech
fredag 20. september 13
29. 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
fredag 20. september 13
30. RWD IS A TECHNIQUE
Nothing wrong with the technique! It is brilliant!
The famous Iceberg: @brad_frost
fredag 20. september 13
31. RWD IS A TECHNIQUE
Nothing wrong with the technique! It is brilliant!
The famous Iceberg: @brad_frost
fredag 20. september 13
32. RWD != MOBILE FRIENDLY
but an important step in the right direction
fredag 20. september 13
33. 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
fredag 20. september 13
53. PURPOSE OF RESS
• Reduce need for client side
processing
• Eliminate “over downloading”
fredag 20. september 13
54. INGREDIENTS OF RESS
Hello, I know exactly how to
make you shine!
Information about the
requesting device,
network, etc.
Request/Response
fredag 20. september 13
55. 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/
fredag 20. september 13
57. THERE IS A DIFFERENCE
Feature Detection
var
appCache=
function()
{
return
!!window.applicationCache;
};
fredag 20. september 13
58. THERE IS A DIFFERENCE
User-Agent sniffing
var
isiPhone
=
/iPhone/i.test(navigator.userAgent);
Feature Detection
var
appCache=
function()
{
return
!!window.applicationCache;
};
fredag 20. september 13
59. THERE IS A DIFFERENCE
User-Agent sniffing
var
isiPhone
=
/iPhone/i.test(navigator.userAgent);
Feature Detection
var
appCache=
function()
{
return
!!window.applicationCache;
};
Device Detection
GET
http://ddr.demo.wew.io/c/dual_orientation
Using the User-Agent (++) as a key to look up in a data base.
fredag 20. september 13
61. FEATURES OF A DDR
• Nice place to store “tacit knowledge”
• “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
fredag 20. september 13
62. FEATURES OF A DDR
• Nice place to store “tacit knowledge”
• “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 Description
Repository
fredag 20. september 13
63. EXAMPLE
if
($type_of_device
==
”smartTV”)
include(TVnav.php);
else
include(nav.php);
http://www.circleid.com/posts/20120111_analysis_of_server_side_mobile_web_detection/
fredag 20. september 13
66. DEVICE DETECTION
Single Capability
Request
GET
http://ddr.demo.wew.io/c/model_name
Response
{"model_name":"iPhone"}
Capability Sets
Request
GET
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
fredag 20. september 13
67. 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();
fredag 20. september 13
68. 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;
}
fredag 20. september 13
70. 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
fredag 20. september 13
71. 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;}
}
fredag 20. september 13
72. 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 Side rendering
fredag 20. september 13
74. 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
fredag 20. september 13
79. 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 assets
and repaints etc.
Lazy loading good
or bad? Depends...
fredag 20. september 13
81. FUN-FACT
Loading apple.com consume
1.41% of battery life.
http://www2012.wwwconference.org/proceedings/proceedings/p41.pdf
12 - 4% in 8 mins
of web surfing
fredag 20. september 13
82. FUN-FACT
Loading 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
fredag 20. september 13
83. PERFORMANCE FRONT END
STARTS WITH THE BACK END
Too much is left to the browser to figure out.
fredag 20. september 13
84. SUMMING UP
developer server internet telco
network device browser
We...
...must do
stuff here...
...to
relieve...
...and...
...to make life
easier for...
...and...
fredag 20. september 13
85. 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 theTop
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.
fredag 20. september 13
86. 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 theTop
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.
fredag 20. september 13
87. POOR IMPLEMENTATION
SLOWS RENDERING DOWN,
BUT SPEED IS REALLY ABOUT
HOW FASTTHE USER CAN
ACHIEVE HIS GOALS
WHAT IS SPEED, ANYWAY?
fredag 20. september 13
88. John Arne Sæterås
twitter: @jonarnes
http://www.slideshare.net/jonarnes/
THANK YOU
?
fredag 20. september 13