high performance mobile (sf/sv web perf)
TRANSCRIPT
![Page 1: High Performance Mobile (SF/SV Web Perf)](https://reader035.vdocuments.site/reader035/viewer/2022062703/554f58aab4c905524c8b536a/html5/thumbnails/1.jpg)
High Performance Mobile
stevesouders.com/docs/sfsv-webperf-20110830.pptxDisclaimer: This content does not necessarily reflect the opinions of my employer.
![Page 2: High Performance Mobile (SF/SV Web Perf)](https://reader035.vdocuments.site/reader035/viewer/2022062703/554f58aab4c905524c8b536a/html5/thumbnails/2.jpg)
flickr.com/photos/bekahstargazing/318930460/
Cuzillion SpriteMeYSlow Hammerhead
![Page 3: High Performance Mobile (SF/SV Web Perf)](https://reader035.vdocuments.site/reader035/viewer/2022062703/554f58aab4c905524c8b536a/html5/thumbnails/3.jpg)
![Page 4: High Performance Mobile (SF/SV Web Perf)](https://reader035.vdocuments.site/reader035/viewer/2022062703/554f58aab4c905524c8b536a/html5/thumbnails/4.jpg)
![Page 5: High Performance Mobile (SF/SV Web Perf)](https://reader035.vdocuments.site/reader035/viewer/2022062703/554f58aab4c905524c8b536a/html5/thumbnails/5.jpg)
1. WPO
![Page 6: High Performance Mobile (SF/SV Web Perf)](https://reader035.vdocuments.site/reader035/viewer/2022062703/554f58aab4c905524c8b536a/html5/thumbnails/6.jpg)
2004
![Page 7: High Performance Mobile (SF/SV Web Perf)](https://reader035.vdocuments.site/reader035/viewer/2022062703/554f58aab4c905524c8b536a/html5/thumbnails/7.jpg)
#1. Speed: “First and foremost, we believe that
speed is more than a feature. Speed is the most
important feature.”
carsonified.com/blog/business/fred-wilsons-10-golden-principles-of-successful-web-apps/
![Page 8: High Performance Mobile (SF/SV Web Perf)](https://reader035.vdocuments.site/reader035/viewer/2022062703/554f58aab4c905524c8b536a/html5/thumbnails/8.jpg)
en.oreilly.com/velocity2009/public/schedule/detail/8523
![Page 9: High Performance Mobile (SF/SV Web Perf)](https://reader035.vdocuments.site/reader035/viewer/2022062703/554f58aab4c905524c8b536a/html5/thumbnails/9.jpg)
en.oreilly.com/velocity2009/public/schedule/detail/8523
![Page 10: High Performance Mobile (SF/SV Web Perf)](https://reader035.vdocuments.site/reader035/viewer/2022062703/554f58aab4c905524c8b536a/html5/thumbnails/10.jpg)
Yahoo!
0.4 sec slower
traffic 5-9%
slideshare.net/stoyan/yslow-20-presentationslideshare.net/stoyan/dont-make-me-wait-or-building-highperformance-web-applications
![Page 11: High Performance Mobile (SF/SV Web Perf)](https://reader035.vdocuments.site/reader035/viewer/2022062703/554f58aab4c905524c8b536a/html5/thumbnails/11.jpg)
…shaved 2.2 seconds off the average page load
time and increased download conversions by
15.4%!
blog.mozilla.com/metrics/category/website-optimization/
![Page 12: High Performance Mobile (SF/SV Web Perf)](https://reader035.vdocuments.site/reader035/viewer/2022062703/554f58aab4c905524c8b536a/html5/thumbnails/12.jpg)
blog.mozilla.com/metrics/category/website-optimization/
…shaved 2.2 seconds off the average page load
time and increased download conversions by
15.4%!
en.oreilly.com/velocity2009/public/schedule/detail/7709
![Page 13: High Performance Mobile (SF/SV Web Perf)](https://reader035.vdocuments.site/reader035/viewer/2022062703/554f58aab4c905524c8b536a/html5/thumbnails/13.jpg)
en.oreilly.com/velocity2008/public/schedule/detail/3632
![Page 14: High Performance Mobile (SF/SV Web Perf)](https://reader035.vdocuments.site/reader035/viewer/2022062703/554f58aab4c905524c8b536a/html5/thumbnails/14.jpg)
slideshare.net/EdmundsLabs/how-edmunds-got-in-the-fast-lane-80-reduction-in-page-load-time-in-3-simple-steps-6593377
![Page 15: High Performance Mobile (SF/SV Web Perf)](https://reader035.vdocuments.site/reader035/viewer/2022062703/554f58aab4c905524c8b536a/html5/thumbnails/15.jpg)
Site speed in search rank
Screen shot of blog post…we've decided to take site speed into account in
our search rankings.
googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html
![Page 16: High Performance Mobile (SF/SV Web Perf)](https://reader035.vdocuments.site/reader035/viewer/2022062703/554f58aab4c905524c8b536a/html5/thumbnails/16.jpg)
drives traffic
improves UX
increases revenue
reduces costs flickr.com/photos/pedromourapinheiro/3123885534/
Web
Performance
OptimizationWPO
![Page 17: High Performance Mobile (SF/SV Web Perf)](https://reader035.vdocuments.site/reader035/viewer/2022062703/554f58aab4c905524c8b536a/html5/thumbnails/17.jpg)
2. Why Mobile?
![Page 18: High Performance Mobile (SF/SV Web Perf)](https://reader035.vdocuments.site/reader035/viewer/2022062703/554f58aab4c905524c8b536a/html5/thumbnails/18.jpg)
![Page 19: High Performance Mobile (SF/SV Web Perf)](https://reader035.vdocuments.site/reader035/viewer/2022062703/554f58aab4c905524c8b536a/html5/thumbnails/19.jpg)
slideshare.net/CMSummit/ms-internet-trends060710final
![Page 20: High Performance Mobile (SF/SV Web Perf)](https://reader035.vdocuments.site/reader035/viewer/2022062703/554f58aab4c905524c8b536a/html5/thumbnails/20.jpg)
slideshare.net/CMSummit/ms-internet-trends060710final
![Page 21: High Performance Mobile (SF/SV Web Perf)](https://reader035.vdocuments.site/reader035/viewer/2022062703/554f58aab4c905524c8b536a/html5/thumbnails/21.jpg)
nytimes.com/2011/04/18/technology/18mobile.html
![Page 22: High Performance Mobile (SF/SV Web Perf)](https://reader035.vdocuments.site/reader035/viewer/2022062703/554f58aab4c905524c8b536a/html5/thumbnails/22.jpg)
slideshare.net/CMSummit/ms-internet-trends060710final
![Page 23: High Performance Mobile (SF/SV Web Perf)](https://reader035.vdocuments.site/reader035/viewer/2022062703/554f58aab4c905524c8b536a/html5/thumbnails/23.jpg)
![Page 24: High Performance Mobile (SF/SV Web Perf)](https://reader035.vdocuments.site/reader035/viewer/2022062703/554f58aab4c905524c8b536a/html5/thumbnails/24.jpg)
![Page 25: High Performance Mobile (SF/SV Web Perf)](https://reader035.vdocuments.site/reader035/viewer/2022062703/554f58aab4c905524c8b536a/html5/thumbnails/25.jpg)
![Page 26: High Performance Mobile (SF/SV Web Perf)](https://reader035.vdocuments.site/reader035/viewer/2022062703/554f58aab4c905524c8b536a/html5/thumbnails/26.jpg)
![Page 27: High Performance Mobile (SF/SV Web Perf)](https://reader035.vdocuments.site/reader035/viewer/2022062703/554f58aab4c905524c8b536a/html5/thumbnails/27.jpg)
![Page 28: High Performance Mobile (SF/SV Web Perf)](https://reader035.vdocuments.site/reader035/viewer/2022062703/554f58aab4c905524c8b536a/html5/thumbnails/28.jpg)
![Page 29: High Performance Mobile (SF/SV Web Perf)](https://reader035.vdocuments.site/reader035/viewer/2022062703/554f58aab4c905524c8b536a/html5/thumbnails/29.jpg)
flickr.com/photos/davidandheidi/2320489837/
the road isn’t clear
![Page 30: High Performance Mobile (SF/SV Web Perf)](https://reader035.vdocuments.site/reader035/viewer/2022062703/554f58aab4c905524c8b536a/html5/thumbnails/30.jpg)
3. Mobile Best Practices
![Page 31: High Performance Mobile (SF/SV Web Perf)](https://reader035.vdocuments.site/reader035/viewer/2022062703/554f58aab4c905524c8b536a/html5/thumbnails/31.jpg)
[just a reminder]
![Page 32: High Performance Mobile (SF/SV Web Perf)](https://reader035.vdocuments.site/reader035/viewer/2022062703/554f58aab4c905524c8b536a/html5/thumbnails/32.jpg)
3. Mobile Best Practices
![Page 33: High Performance Mobile (SF/SV Web Perf)](https://reader035.vdocuments.site/reader035/viewer/2022062703/554f58aab4c905524c8b536a/html5/thumbnails/33.jpg)
14 RULES
1. MAKE FEWER HTTP REQUESTS
2. USE A CDN
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 JS AND CSS EXTERNAL
9. REDUCE DNS LOOKUPS
10. MINIFY JS
11. AVOID REDIRECTS
12. REMOVE DUPLICATE SCRIPTS
13. CONFIGURE ETAGS
14. MAKE AJAX CACHEABLE
![Page 34: High Performance Mobile (SF/SV Web Perf)](https://reader035.vdocuments.site/reader035/viewer/2022062703/554f58aab4c905524c8b536a/html5/thumbnails/34.jpg)
14 RULES
1. MAKE FEWER HTTP REQUESTS
2. USE A CDN
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 JS AND CSS EXTERNAL
9. REDUCE DNS LOOKUPS
10. MINIFY JS
11. AVOID REDIRECTS
12. REMOVE DUPLICATE SCRIPTS
13. CONFIGURE ETAGS
14. MAKE AJAX CACHEABLE
![Page 35: High Performance Mobile (SF/SV Web Perf)](https://reader035.vdocuments.site/reader035/viewer/2022062703/554f58aab4c905524c8b536a/html5/thumbnails/35.jpg)
14 RULES
1. MAKE FEWER HTTP REQUESTS
2. USE A CDN
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 JS AND CSS EXTERNAL
9. REDUCE DNS LOOKUPS
10. MINIFY JS
11. AVOID REDIRECTS
12. REMOVE DUPLICATE SCRIPTS
13. CONFIGURE ETAGS
14. MAKE AJAX CACHEABLE
![Page 36: High Performance Mobile (SF/SV Web Perf)](https://reader035.vdocuments.site/reader035/viewer/2022062703/554f58aab4c905524c8b536a/html5/thumbnails/36.jpg)
Splitting the initial payload
Loading scripts without blocking
Coupling asynchronous scripts
Positioning inline scripts
Sharding dominant domains
Flushing the document early
Using iframes sparingly
Simplifying CSS Selectors
Understanding Ajax performance Doug Crockford
Creating responsive web apps Ben Galbraith, Dion Almaer
Writing efficient JavaScript Nicholas Zakas
Scaling with Comet Dylan Schiemann
Going beyond gzipping Tony Gentilcore
Optimizing images Stoyan Stefanov, Nicole Sullivan
![Page 37: High Performance Mobile (SF/SV Web Perf)](https://reader035.vdocuments.site/reader035/viewer/2022062703/554f58aab4c905524c8b536a/html5/thumbnails/37.jpg)
Splitting the initial payload
Loading scripts without blocking
Coupling asynchronous scripts
Positioning inline scripts
Sharding dominant domains
Flushing the document early
Using iframes sparingly
Simplifying CSS Selectors
Understanding Ajax performance Doug Crockford
Creating responsive web apps Ben Galbraith, Dion Almaer
Writing efficient JavaScript Nicholas Zakas
Scaling with Comet Dylan Schiemann
Going beyond gzipping Tony Gentilcore
Optimizing images Stoyan Stefanov, Nicole Sullivan
![Page 38: High Performance Mobile (SF/SV Web Perf)](https://reader035.vdocuments.site/reader035/viewer/2022062703/554f58aab4c905524c8b536a/html5/thumbnails/38.jpg)
Splitting the initial payload
Loading scripts without blocking
Coupling asynchronous scripts
Positioning inline scripts
Sharding dominant domains
Flushing the document early
Using iframes sparingly
Simplifying CSS Selectors
Understanding Ajax performance Doug Crockford
Creating responsive web apps Ben Galbraith, Dion Almaer
Writing efficient JavaScript Nicholas Zakas
Scaling with Comet Dylan Schiemann
Going beyond gzipping Tony Gentilcore
Optimizing images Stoyan Stefanov, Nicole Sullivan
![Page 39: High Performance Mobile (SF/SV Web Perf)](https://reader035.vdocuments.site/reader035/viewer/2022062703/554f58aab4c905524c8b536a/html5/thumbnails/39.jpg)
reduce HTTP requests
flickr.com/photos/mrd00dman/2358726807/
sprites
data: URIs
CSS3:
border-radius
box-shadow
linear-gradient
transform: rotate, scale, skew, translate
Canvas, SVG
![Page 40: High Performance Mobile (SF/SV Web Perf)](https://reader035.vdocuments.site/reader035/viewer/2022062703/554f58aab4c905524c8b536a/html5/thumbnails/40.jpg)
flickr.com/photos/johnkay/3539939004/
responsive images
resize images based on screen size
example: Sencha.io Src
UA classification: DeviceAtlas
domain sharding: src[1-4].sencha.io
also: http://adaptive-images.com/
http://github.com/filamentgroup/Responsive-Images
<img
src=‘http://src.sencha.io/http://mydomain.com/logo.g
if’>
![Page 41: High Performance Mobile (SF/SV Web Perf)](https://reader035.vdocuments.site/reader035/viewer/2022062703/554f58aab4c905524c8b536a/html5/thumbnails/41.jpg)
script async & deferparsing doesn’t wait for script:
• async – executed when available• defer – executed when parsing finished
when is it downloaded?
missing:• defer download AND execution• async/defer download, execute on demand
flickr.com/photos/gevertulley/4771808965/
![Page 42: High Performance Mobile (SF/SV Web Perf)](https://reader035.vdocuments.site/reader035/viewer/2022062703/554f58aab4c905524c8b536a/html5/thumbnails/42.jpg)
GMail Mobile<script type="text/javascript">
/*
var ...
*/
</script>
get script DOM element's text
remove comments
eval() when invoked
awesome for prefetching JS that might (not) be needed
http://goo.gl/l5ZLQ
![Page 43: High Performance Mobile (SF/SV Web Perf)](https://reader035.vdocuments.site/reader035/viewer/2022062703/554f58aab4c905524c8b536a/html5/thumbnails/43.jpg)
ControlJSa JavaScript module for making scripts load faster
just change HTML
inline & external scripts
<script type="text/cjs" data-cjssrc="main.js"></script>
<script type="text/cjs">var name = getName();</script>
![Page 44: High Performance Mobile (SF/SV Web Perf)](https://reader035.vdocuments.site/reader035/viewer/2022062703/554f58aab4c905524c8b536a/html5/thumbnails/44.jpg)
ControlJSa JavaScript module for making scripts load faster
download without executing<script type="text/cjs" data-cjssrc="main.js” data-cjsexec=false><script>
Later if/when needed:CJS.execScript(src);
![Page 45: High Performance Mobile (SF/SV Web Perf)](https://reader035.vdocuments.site/reader035/viewer/2022062703/554f58aab4c905524c8b536a/html5/thumbnails/45.jpg)
app cache
flickr.com/photos/india-nepal-iran/203982474/
![Page 46: High Performance Mobile (SF/SV Web Perf)](https://reader035.vdocuments.site/reader035/viewer/2022062703/554f58aab4c905524c8b536a/html5/thumbnails/46.jpg)
yuiblog.com/blog/2007/01/04/performance-research-part-2/
![Page 47: High Performance Mobile (SF/SV Web Perf)](https://reader035.vdocuments.site/reader035/viewer/2022062703/554f58aab4c905524c8b536a/html5/thumbnails/47.jpg)
blaze.io/mobile/understanding-mobile-cache-sizes/
![Page 48: High Performance Mobile (SF/SV Web Perf)](https://reader035.vdocuments.site/reader035/viewer/2022062703/554f58aab4c905524c8b536a/html5/thumbnails/48.jpg)
app cacheoffline apps, longer cache<!doctype html><html manifest=“myapp.appcache”>
myapp.appcache:
flickr.com/photos/india-nepal-iran/203982474/
CACHE MANIFEST
# Revision: 1.28
CACHE:
/images/logo.gif
NETWORK:
/login.html
FALLBACK:
/index.html /offline.htmlContent-Type: text/cache-manifest
![Page 49: High Performance Mobile (SF/SV Web Perf)](https://reader035.vdocuments.site/reader035/viewer/2022062703/554f58aab4c905524c8b536a/html5/thumbnails/49.jpg)
app cache gotchashtml docs w/ manifest are cached
404 => nothing is cached
size: 5MB+
must rev manifest to update resources
update is served on 2nd reload (?!?!)
flickr.com/photos/97657657@N00/1918688483/
![Page 50: High Performance Mobile (SF/SV Web Perf)](https://reader035.vdocuments.site/reader035/viewer/2022062703/554f58aab4c905524c8b536a/html5/thumbnails/50.jpg)
push app
logo.gif = 1user loads app
app cache is empty
fetch manifest
fetch logo.gif
app cache =
user sees
2
push app
logo.gif =
rev manifest
3user loads app
app cache =
user sees
fetch manifest
fetch logo.gif
app cache =
4user loads app again
app cache =
user sees
fetch manifest (304)
5
app cache
reload
![Page 51: High Performance Mobile (SF/SV Web Perf)](https://reader035.vdocuments.site/reader035/viewer/2022062703/554f58aab4c905524c8b536a/html5/thumbnails/51.jpg)
flickr.com/photos/presley_m/5152304885/
window.applicationCache.addEventListener('updateready',
function(e) {
if ( window.applicationCache.status ==
window.applicationCache.UPDATEREADY) {
if ( confirm(“Load new content?”) ) {
...
http://www.webdirections.org/blog/get-offline/
http://www.html5rocks.com/en/tutorials/appcache/beginner/
load twice workaround
![Page 52: High Performance Mobile (SF/SV Web Perf)](https://reader035.vdocuments.site/reader035/viewer/2022062703/554f58aab4c905524c8b536a/html5/thumbnails/52.jpg)
localStoragewindow.localStorage:
setItem()getItem()removeItem()clear()
also sessionStorage
all popular browsers, 5MB maxhttp://dev.w3.org/html5/webstorage/http://diveintohtml5.org/storage.html
flickr.com/photos/bryanpearson/564703455/
![Page 53: High Performance Mobile (SF/SV Web Perf)](https://reader035.vdocuments.site/reader035/viewer/2022062703/554f58aab4c905524c8b536a/html5/thumbnails/53.jpg)
localStorage as cache
1st doc: write JS & CSS blocks to localStorageJUX.UXBaseControls.252CB7BF: (function(){...JUX.FrameworkCore.A39F6425: (function(){...
set cookie with entries & versionRMSM=JUX.UXBaseControls.252CB7BF~ JUX.FrameworkCore.A39F6425~
later docs: read JS & CSS from localStoragescript.text = localStorage.getItem(JUX.UXBaseControls.252CB7BF)
http://stevesouders.com/blog/2011/03/28/storager-case-study-bing-google/
flickr.com/photos/nelsoncruz/431244400/
![Page 54: High Performance Mobile (SF/SV Web Perf)](https://reader035.vdocuments.site/reader035/viewer/2022062703/554f58aab4c905524c8b536a/html5/thumbnails/54.jpg)
there’s moreaudio & video tags
WebSockets
onTouchEnd instead of onClick
History
<a ping
requestAnimationFrame – not timers
native JSON parse/stringifyflickr.com/photos/dualphoto/2609096047/
![Page 55: High Performance Mobile (SF/SV Web Perf)](https://reader035.vdocuments.site/reader035/viewer/2022062703/554f58aab4c905524c8b536a/html5/thumbnails/55.jpg)
Thanks to…
Max FirtmanTony Gentilcore
Josh FraserKyle ScholzStoyan Stefanov
flickr.com/photos/robertvega/3944132320/
Lindsey Simon
Annie Sullivan
Tim Kadlec
Paul Irish
Brad Neuberg
![Page 56: High Performance Mobile (SF/SV Web Perf)](https://reader035.vdocuments.site/reader035/viewer/2022062703/554f58aab4c905524c8b536a/html5/thumbnails/56.jpg)
4. Mobile Tools
![Page 57: High Performance Mobile (SF/SV Web Perf)](https://reader035.vdocuments.site/reader035/viewer/2022062703/554f58aab4c905524c8b536a/html5/thumbnails/57.jpg)
![Page 58: High Performance Mobile (SF/SV Web Perf)](https://reader035.vdocuments.site/reader035/viewer/2022062703/554f58aab4c905524c8b536a/html5/thumbnails/58.jpg)
![Page 59: High Performance Mobile (SF/SV Web Perf)](https://reader035.vdocuments.site/reader035/viewer/2022062703/554f58aab4c905524c8b536a/html5/thumbnails/59.jpg)
![Page 60: High Performance Mobile (SF/SV Web Perf)](https://reader035.vdocuments.site/reader035/viewer/2022062703/554f58aab4c905524c8b536a/html5/thumbnails/60.jpg)
http://pmuellr.github.com/weinre/
![Page 61: High Performance Mobile (SF/SV Web Perf)](https://reader035.vdocuments.site/reader035/viewer/2022062703/554f58aab4c905524c8b536a/html5/thumbnails/61.jpg)
speed matters - WPO
mobile winners will be fast
mobile performance – reduce reqs, resize images, async JS, app cache, localStorage
mobile tools – pcapperf, Jdrop, Blaze.io, Weinre
takeaways
flickr.com/photos/myklroventine/4062102754/
![Page 62: High Performance Mobile (SF/SV Web Perf)](https://reader035.vdocuments.site/reader035/viewer/2022062703/554f58aab4c905524c8b536a/html5/thumbnails/62.jpg)
![Page 63: High Performance Mobile (SF/SV Web Perf)](https://reader035.vdocuments.site/reader035/viewer/2022062703/554f58aab4c905524c8b536a/html5/thumbnails/63.jpg)
![Page 64: High Performance Mobile (SF/SV Web Perf)](https://reader035.vdocuments.site/reader035/viewer/2022062703/554f58aab4c905524c8b536a/html5/thumbnails/64.jpg)
![Page 65: High Performance Mobile (SF/SV Web Perf)](https://reader035.vdocuments.site/reader035/viewer/2022062703/554f58aab4c905524c8b536a/html5/thumbnails/65.jpg)
Top 100: bytes downloaded
mobile
desktop
![Page 66: High Performance Mobile (SF/SV Web Perf)](https://reader035.vdocuments.site/reader035/viewer/2022062703/554f58aab4c905524c8b536a/html5/thumbnails/66.jpg)
Top 100: size & requests
mobile
desktop
![Page 67: High Performance Mobile (SF/SV Web Perf)](https://reader035.vdocuments.site/reader035/viewer/2022062703/554f58aab4c905524c8b536a/html5/thumbnails/67.jpg)
flickr.com/photos/donnr/3696038262/
the open web
![Page 68: High Performance Mobile (SF/SV Web Perf)](https://reader035.vdocuments.site/reader035/viewer/2022062703/554f58aab4c905524c8b536a/html5/thumbnails/68.jpg)
Steve Souders
@souders
http://stevesouders.com/docs/sfsv-webperf-20110830.pptx