The mobile-web-at-a-snails-pace
-
Upload
marcel-kalveram -
Category
Technology
-
view
4.758 -
download
0
description
Transcript of The mobile-web-at-a-snails-pace
![Page 1: The mobile-web-at-a-snails-pace](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bd215b4c905ac708b4b80/html5/thumbnails/1.jpg)
The mobile web:At a snail‘s pace
@marcelkalveram
marcelkalveram.com
![Page 2: The mobile-web-at-a-snails-pace](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bd215b4c905ac708b4b80/html5/thumbnails/2.jpg)
3 Performance Traits
Network Download Rendering
![Page 3: The mobile-web-at-a-snails-pace](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bd215b4c905ac708b4b80/html5/thumbnails/3.jpg)
The latency problem
SYN
ACK
ACK����������� ������������������ +����������� ������������������ SYN
GET
ACK����������� ������������������ +����������� ������������������ Data
„RTT is the length of time it takes for a signal to be sent plus the length of time it takes for an acknowledgment of that signal to be received“ (Source: Wikipedia)
![Page 4: The mobile-web-at-a-snails-pace](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bd215b4c905ac708b4b80/html5/thumbnails/4.jpg)
0.32s 3.2s
16����������� ������������������ requests
![Page 5: The mobile-web-at-a-snails-pace](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bd215b4c905ac708b4b80/html5/thumbnails/5.jpg)
... a performance bottleneck
0
1000
2000
3000
4000
1Mbps 5Mbps 10Mbps
Page load time vs. increasing bandwidth
Page load time (ms)
Source: www.igvita.com/2012/07/19/latency-the-new-web-performance-bottleneck
![Page 6: The mobile-web-at-a-snails-pace](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bd215b4c905ac708b4b80/html5/thumbnails/6.jpg)
3 Performance Traits
Network Download Rendering
![Page 7: The mobile-web-at-a-snails-pace](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bd215b4c905ac708b4b80/html5/thumbnails/7.jpg)
The web is getting heavier
550
740
930
1.120
1.310
1.500M
AY 20
11
MAY
2012
MAY
2013
Average download size of a website
kilobytes
Source: httparchive.org/trends.php
![Page 8: The mobile-web-at-a-snails-pace](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bd215b4c905ac708b4b80/html5/thumbnails/8.jpg)
0.61s 3.2s
![Page 9: The mobile-web-at-a-snails-pace](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bd215b4c905ac708b4b80/html5/thumbnails/9.jpg)
3 Performance Traits
Network Download Rendering
![Page 10: The mobile-web-at-a-snails-pace](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bd215b4c905ac708b4b80/html5/thumbnails/10.jpg)
A speed benchmark
vs.
iPhone����������� ������������������ 52012
Intel����������� ������������������ Celeron����������� ������������������ 4402006
Source: browser.primatelabs.com/processor-benchmarks
![Page 11: The mobile-web-at-a-snails-pace](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bd215b4c905ac708b4b80/html5/thumbnails/11.jpg)
Rendering����������� ������������������ is����������� ������������������ very����������� ������������������ expensive����������� ������������������ in����������� ������������������ terms����������� ������������������ of����������� ������������������ performance,����������� ������������������ and����������� ������������������ is����������� ������������������ one����������� ������������������ of����������� ������������������ the����������� ������������������ main����������� ������������������ causes����������� ������������������ of����������� ������������������ slow����������� ������������������ DOM����������� ������������������ scripts,����������� ������������������ especially����������� ������������������ on����������� ������������������ devices����������� ������������������ with����������� ������������������ low����������� ������������������ processing����������� ������������������ power,����������� ������������������ such����������� ������������������ as����������� ������������������ phones.
![Page 12: The mobile-web-at-a-snails-pace](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bd215b4c905ac708b4b80/html5/thumbnails/12.jpg)
3 Performance Traits
Network Download Rendering
![Page 13: The mobile-web-at-a-snails-pace](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bd215b4c905ac708b4b80/html5/thumbnails/13.jpg)
A common request
25%����������� ������������������ of����������� ������������������ the����������� ������������������ Users����������� ������������������ abandon����������� ������������������
the����������� ������������������ page
4����������� ������������������ secSource: blog.kissmetrics.com/loading-time
2013����������� ������������������ averagefor����������� ������������������ mobile
7.5����������� ������������������ sec
![Page 14: The mobile-web-at-a-snails-pace](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bd215b4c905ac708b4b80/html5/thumbnails/14.jpg)
7 Performance Tips
Image Source:dorrys.com/moving-snails-pace
![Page 15: The mobile-web-at-a-snails-pace](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bd215b4c905ac708b4b80/html5/thumbnails/15.jpg)
1Avoid redirects
![Page 16: The mobile-web-at-a-snails-pace](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bd215b4c905ac708b4b80/html5/thumbnails/16.jpg)
window.location.href����������� ������������������ =m.interesting-website.com
www.interesting-website.com
Hi!����������� ������������������ Do����������� ������������������ you����������� ������������������ want����������� ������������������ to����������� ������������������ download����������� ������������������ our����������� ������������������ app?
...
Image source: www.ragecollection.com/guide
![Page 17: The mobile-web-at-a-snails-pace](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bd215b4c905ac708b4b80/html5/thumbnails/17.jpg)
2Reduce requests
![Page 18: The mobile-web-at-a-snails-pace](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bd215b4c905ac708b4b80/html5/thumbnails/18.jpg)
}42
Average����������� ������������������ number����������� ������������������ of����������� ������������������ resources����������� ������������������ per����������� ������������������ page.
Modern����������� ������������������ browserscan����������� ������������������ download����������� ������������������
4����������� ������������������ files����������� ������������������ in����������� ������������������ parallel
Concatenate assets
Source: developers.google.com/speed/articles/web-metrics
![Page 19: The mobile-web-at-a-snails-pace](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bd215b4c905ac708b4b80/html5/thumbnails/19.jpg)
Combine CSS with preprocessorscompass --watch sass/style.scss:css/style.css
Inline JavaScript and CSS files smaller than 4kb<script> ... </script> and <style> ... </style>
Use sprite images with similar color paletteswearekiss.com/spritepad, spritecow.com
General rules
![Page 20: The mobile-web-at-a-snails-pace](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bd215b4c905ac708b4b80/html5/thumbnails/20.jpg)
3Optimize images
![Page 21: The mobile-web-at-a-snails-pace](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bd215b4c905ac708b4b80/html5/thumbnails/21.jpg)
Images62 % Other
10 %
Flash6 %
JS16 %
CSS3 %
Html4 %
Oh����������� ������������������ god����������� ������������������ JPG...
Source: www.lukew.com/ff/entry.asp?1684
![Page 22: The mobile-web-at-a-snails-pace](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bd215b4c905ac708b4b80/html5/thumbnails/22.jpg)
Choose wisely...
![Page 23: The mobile-web-at-a-snails-pace](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bd215b4c905ac708b4b80/html5/thumbnails/23.jpg)
Image optimization
kraken.io smush.itImageOptimWeb-based Mac-only Uploads/URLs
15% 10% 5%
![Page 24: The mobile-web-at-a-snails-pace](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bd215b4c905ac708b4b80/html5/thumbnails/24.jpg)
4Shrink page weight
![Page 25: The mobile-web-at-a-snails-pace](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bd215b4c905ac708b4b80/html5/thumbnails/25.jpg)
Drop big frameworks
jQuery93kB
zepto27kB
MooTools90kB
sizzle18kB
~80%
~70%
![Page 26: The mobile-web-at-a-snails-pace](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bd215b4c905ac708b4b80/html5/thumbnails/26.jpg)
microjs.com
![Page 27: The mobile-web-at-a-snails-pace](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bd215b4c905ac708b4b80/html5/thumbnails/27.jpg)
5Use Caching
![Page 28: The mobile-web-at-a-snails-pace](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bd215b4c905ac708b4b80/html5/thumbnails/28.jpg)
Caching
Expires
<IfModule mod_expires.c>
ExpiresActive on ExpiresByType text/html „access plus 5 minutes“ ExpiresByType image/jpg „access plus 6 months“ ExpiresByType image/gif „access plus 6 months“ ExpiresByType image/png „access plus 6 months“ ExpiresByType image/jpg „access plus 6 months“ ExpiresByType text/css „access plus 6 months“ ExpiresByType text/javascript „access plus 6 months“ ExpiresByType text/x-javascript „access plus 6 months“ ExpiresByType text/x-icon „access plus 1 year“
</IfModule>
Source: The Smashing Mobile Book - Optimizing For Mobile (Page 192)
up����������� ������������������ to����������� ������������������ 90%����������� ������������������ faster����������� ������������������ page����������� ������������������ load����������� ������������������ time
![Page 29: The mobile-web-at-a-snails-pace](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bd215b4c905ac708b4b80/html5/thumbnails/29.jpg)
localStorage cache
key-value storedownload code
Asset loaded?
YESNO
![Page 30: The mobile-web-at-a-snails-pace](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bd215b4c905ac708b4b80/html5/thumbnails/30.jpg)
Example<script id=“jQuery“></script>
var jQfile;
if (‘jqFile’ in window.localStorage) { jqFile = window.localStorage.getItem(‘jqFile’);}
else { jqFile = getJQFile(); window.localStorage.setItem(‘jqFile’, jqFile);}
document.getElementById(‘jQuery’).text = jqFile;
Source: The Smashing Mobile Book - Optimizing For Mobile (Page 201)
![Page 31: The mobile-web-at-a-snails-pace](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bd215b4c905ac708b4b80/html5/thumbnails/31.jpg)
uncached200kB
cached30kb
Microsoft has reduced its footprint from 200kB on the first file request to 30kB for subsequent requests by using localStorage.
![Page 32: The mobile-web-at-a-snails-pace](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bd215b4c905ac708b4b80/html5/thumbnails/32.jpg)
6Improve startup time
![Page 33: The mobile-web-at-a-snails-pace](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bd215b4c905ac708b4b80/html5/thumbnails/33.jpg)
Browser����������� ������������������ waits����������� ������������������ for����������� ������������������ JavaScript����������� ������������������ to����������� ������������������ be����������� ������������������ parsed
![Page 34: The mobile-web-at-a-snails-pace](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bd215b4c905ac708b4b80/html5/thumbnails/34.jpg)
Correct CSS/JS order<html>
<head>
// CSS goes here<link rel=“stylehseet“ href=“iCanLoadFirst.css” />
</head>
<body>
...
<img src=”iCanDownloadBeforeTheJavaScript.jpg” />
...
<script src=”require.js”></script>
</body>
Doesn‘t����������� ������������������ block
![Page 35: The mobile-web-at-a-snails-pace](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bd215b4c905ac708b4b80/html5/thumbnails/35.jpg)
7Avoid reflows
![Page 36: The mobile-web-at-a-snails-pace](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bd215b4c905ac708b4b80/html5/thumbnails/36.jpg)
Applying styles
var el = document.getElementById(‘foo’);
el.style.color = ’#fff’;el.style.backgroundColor = ’#000’;el.style.borderColor = ’#fe0’;
var el = document.getElementById(‘foo’);
el.className = ‘bar’;
Bad Good3����������� ������������������ reflows 1����������� ������������������ reflow
![Page 37: The mobile-web-at-a-snails-pace](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bd215b4c905ac708b4b80/html5/thumbnails/37.jpg)
Dynamic addition
Bad Good
var ul = document.getElementsByTagName("ul")[0];
var elems = [ document.createElement("li"), document.createElement("li"), document.createElement("li"), ... ];
var ul = document.getElementsByTagName("ul")[0];
ul.appendChild( fragment.cloneNode() );
var elems = [ document.createElement("li"), document.createElement("li"), document.createElement("li"), ... ];
for ( var e = 0; e < elems.length; e++ ) { ul.appendChild( elems[e].cloneNode() );}
var fragment = document.createDocumentFragment();
n����������� ������������������ reflows 1����������� ������������������ reflow
for ( var e = 0; e < elems.length; e++ ) { fragment.appendChild( elems[e] );}
![Page 38: The mobile-web-at-a-snails-pace](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bd215b4c905ac708b4b80/html5/thumbnails/38.jpg)
Recap
![Page 39: The mobile-web-at-a-snails-pace](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bd215b4c905ac708b4b80/html5/thumbnails/39.jpg)
3 Performance Traits
Network Download Rendering
![Page 40: The mobile-web-at-a-snails-pace](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bd215b4c905ac708b4b80/html5/thumbnails/40.jpg)
The next time you feelthat your site is going at
a snail‘s pace...
![Page 41: The mobile-web-at-a-snails-pace](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bd215b4c905ac708b4b80/html5/thumbnails/41.jpg)
![Page 42: The mobile-web-at-a-snails-pace](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bd215b4c905ac708b4b80/html5/thumbnails/42.jpg)
Reduce requests
Avoid reflows
Optimize images
Avoid redirects
Shrink page weight
Improve startup timeUse caching
![Page 43: The mobile-web-at-a-snails-pace](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bd215b4c905ac708b4b80/html5/thumbnails/43.jpg)
If you can‘t remember...
![Page 44: The mobile-web-at-a-snails-pace](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bd215b4c905ac708b4b80/html5/thumbnails/44.jpg)
KEEP CALM
AND
SNAILS-PACE.COM
![Page 45: The mobile-web-at-a-snails-pace](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bd215b4c905ac708b4b80/html5/thumbnails/45.jpg)
Thanks foryour attention!
Ask����������� ������������������ a����������� ������������������ question
...or����������� ������������������ have����������� ������������������ a����������� ������������������ beer!