high performance mobile -...
TRANSCRIPT
![Page 1: High Performance Mobile - O'Reillyvelocity.oreilly.com.cn/2011/ppts/velocity-mobile-20111206.pdf · push app logo.gif = user loads app app cache is empty fetch manifest fetch logo.gif](https://reader034.vdocument.in/reader034/viewer/2022050719/5eda5972b3745412b57131c7/html5/thumbnails/1.jpg)
High Performance Mobile
stevesouders.com/docs/velocity-mobile-20111206.pptx Disclaimer: This content does not necessarily reflect the opinions of my employer.
![Page 2: High Performance Mobile - O'Reillyvelocity.oreilly.com.cn/2011/ppts/velocity-mobile-20111206.pdf · push app logo.gif = user loads app app cache is empty fetch manifest fetch logo.gif](https://reader034.vdocument.in/reader034/viewer/2022050719/5eda5972b3745412b57131c7/html5/thumbnails/2.jpg)
WPO Industry is Here
the
![Page 3: High Performance Mobile - O'Reillyvelocity.oreilly.com.cn/2011/ppts/velocity-mobile-20111206.pdf · push app logo.gif = user loads app app cache is empty fetch manifest fetch logo.gif](https://reader034.vdocument.in/reader034/viewer/2022050719/5eda5972b3745412b57131c7/html5/thumbnails/3.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 4: High Performance Mobile - O'Reillyvelocity.oreilly.com.cn/2011/ppts/velocity-mobile-20111206.pdf · push app logo.gif = user loads app app cache is empty fetch manifest fetch logo.gif](https://reader034.vdocument.in/reader034/viewer/2022050719/5eda5972b3745412b57131c7/html5/thumbnails/4.jpg)
en.oreilly.com/velocity2009/public/schedule/detail/8523
![Page 5: High Performance Mobile - O'Reillyvelocity.oreilly.com.cn/2011/ppts/velocity-mobile-20111206.pdf · push app logo.gif = user loads app app cache is empty fetch manifest fetch logo.gif](https://reader034.vdocument.in/reader034/viewer/2022050719/5eda5972b3745412b57131c7/html5/thumbnails/5.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 6: High Performance Mobile - O'Reillyvelocity.oreilly.com.cn/2011/ppts/velocity-mobile-20111206.pdf · push app logo.gif = user loads app app cache is empty fetch manifest fetch logo.gif](https://reader034.vdocument.in/reader034/viewer/2022050719/5eda5972b3745412b57131c7/html5/thumbnails/6.jpg)
drives traffic improves UX increases revenue reduces costs
flickr.com/photos/pedromourapinheiro/3123885534/
Web Performance Optimization
WPO
![Page 7: High Performance Mobile - O'Reillyvelocity.oreilly.com.cn/2011/ppts/velocity-mobile-20111206.pdf · push app logo.gif = user loads app app cache is empty fetch manifest fetch logo.gif](https://reader034.vdocument.in/reader034/viewer/2022050719/5eda5972b3745412b57131c7/html5/thumbnails/7.jpg)
WPO mobile Industry is Here
the
![Page 8: High Performance Mobile - O'Reillyvelocity.oreilly.com.cn/2011/ppts/velocity-mobile-20111206.pdf · push app logo.gif = user loads app app cache is empty fetch manifest fetch logo.gif](https://reader034.vdocument.in/reader034/viewer/2022050719/5eda5972b3745412b57131c7/html5/thumbnails/8.jpg)
kpcb.com/internettrends2011
![Page 9: High Performance Mobile - O'Reillyvelocity.oreilly.com.cn/2011/ppts/velocity-mobile-20111206.pdf · push app logo.gif = user loads app app cache is empty fetch manifest fetch logo.gif](https://reader034.vdocument.in/reader034/viewer/2022050719/5eda5972b3745412b57131c7/html5/thumbnails/9.jpg)
kpcb.com/internettrends2011
![Page 10: High Performance Mobile - O'Reillyvelocity.oreilly.com.cn/2011/ppts/velocity-mobile-20111206.pdf · push app logo.gif = user loads app app cache is empty fetch manifest fetch logo.gif](https://reader034.vdocument.in/reader034/viewer/2022050719/5eda5972b3745412b57131c7/html5/thumbnails/10.jpg)
kpcb.com/internettrends2011
![Page 11: High Performance Mobile - O'Reillyvelocity.oreilly.com.cn/2011/ppts/velocity-mobile-20111206.pdf · push app logo.gif = user loads app app cache is empty fetch manifest fetch logo.gif](https://reader034.vdocument.in/reader034/viewer/2022050719/5eda5972b3745412b57131c7/html5/thumbnails/11.jpg)
kpcb.com/internettrends2011
![Page 12: High Performance Mobile - O'Reillyvelocity.oreilly.com.cn/2011/ppts/velocity-mobile-20111206.pdf · push app logo.gif = user loads app app cache is empty fetch manifest fetch logo.gif](https://reader034.vdocument.in/reader034/viewer/2022050719/5eda5972b3745412b57131c7/html5/thumbnails/12.jpg)
kpcb.com/internettrends2011
![Page 13: High Performance Mobile - O'Reillyvelocity.oreilly.com.cn/2011/ppts/velocity-mobile-20111206.pdf · push app logo.gif = user loads app app cache is empty fetch manifest fetch logo.gif](https://reader034.vdocument.in/reader034/viewer/2022050719/5eda5972b3745412b57131c7/html5/thumbnails/13.jpg)
kpcb.com/internettrends2011
![Page 14: High Performance Mobile - O'Reillyvelocity.oreilly.com.cn/2011/ppts/velocity-mobile-20111206.pdf · push app logo.gif = user loads app app cache is empty fetch manifest fetch logo.gif](https://reader034.vdocument.in/reader034/viewer/2022050719/5eda5972b3745412b57131c7/html5/thumbnails/14.jpg)
kpcb.com/internettrends2011
![Page 15: High Performance Mobile - O'Reillyvelocity.oreilly.com.cn/2011/ppts/velocity-mobile-20111206.pdf · push app logo.gif = user loads app app cache is empty fetch manifest fetch logo.gif](https://reader034.vdocument.in/reader034/viewer/2022050719/5eda5972b3745412b57131c7/html5/thumbnails/15.jpg)
kpcb.com/internettrends2011
![Page 16: High Performance Mobile - O'Reillyvelocity.oreilly.com.cn/2011/ppts/velocity-mobile-20111206.pdf · push app logo.gif = user loads app app cache is empty fetch manifest fetch logo.gif](https://reader034.vdocument.in/reader034/viewer/2022050719/5eda5972b3745412b57131c7/html5/thumbnails/16.jpg)
44% of total searches for last minute gifts and store locator terms will be from mobile devices this holiday season
googlemobileads.blogspot.com/2011/09/holiday-retail-mobile-insights.html
![Page 17: High Performance Mobile - O'Reillyvelocity.oreilly.com.cn/2011/ppts/velocity-mobile-20111206.pdf · push app logo.gif = user loads app app cache is empty fetch manifest fetch logo.gif](https://reader034.vdocument.in/reader034/viewer/2022050719/5eda5972b3745412b57131c7/html5/thumbnails/17.jpg)
Black Friday Online Sales from Mobile
1%
3.2%
9.8%
IBM Benchmark coremetrics.com/downloads/benchmark-2011-black-friday.pdf Forbes forbes.com/sites/erikamorphy/2011/11/25/mobile-sales-hit-it-out-of-the-park-on-black-friday/
![Page 18: High Performance Mobile - O'Reillyvelocity.oreilly.com.cn/2011/ppts/velocity-mobile-20111206.pdf · push app logo.gif = user loads app app cache is empty fetch manifest fetch logo.gif](https://reader034.vdocument.in/reader034/viewer/2022050719/5eda5972b3745412b57131c7/html5/thumbnails/18.jpg)
Black Friday Bounce Rate
41.3%
33.1%
IBM Benchmark coremetrics.com/downloads/benchmark-2011-black-friday.pdf
![Page 19: High Performance Mobile - O'Reillyvelocity.oreilly.com.cn/2011/ppts/velocity-mobile-20111206.pdf · push app logo.gif = user loads app app cache is empty fetch manifest fetch logo.gif](https://reader034.vdocument.in/reader034/viewer/2022050719/5eda5972b3745412b57131c7/html5/thumbnails/19.jpg)
![Page 20: High Performance Mobile - O'Reillyvelocity.oreilly.com.cn/2011/ppts/velocity-mobile-20111206.pdf · push app logo.gif = user loads app app cache is empty fetch manifest fetch logo.gif](https://reader034.vdocument.in/reader034/viewer/2022050719/5eda5972b3745412b57131c7/html5/thumbnails/20.jpg)
blog.compete.com/2011/11/29/the-male-vs-female-debate-goes-mobile/
![Page 21: High Performance Mobile - O'Reillyvelocity.oreilly.com.cn/2011/ppts/velocity-mobile-20111206.pdf · push app logo.gif = user loads app app cache is empty fetch manifest fetch logo.gif](https://reader034.vdocument.in/reader034/viewer/2022050719/5eda5972b3745412b57131c7/html5/thumbnails/21.jpg)
![Page 22: High Performance Mobile - O'Reillyvelocity.oreilly.com.cn/2011/ppts/velocity-mobile-20111206.pdf · push app logo.gif = user loads app app cache is empty fetch manifest fetch logo.gif](https://reader034.vdocument.in/reader034/viewer/2022050719/5eda5972b3745412b57131c7/html5/thumbnails/22.jpg)
![Page 23: High Performance Mobile - O'Reillyvelocity.oreilly.com.cn/2011/ppts/velocity-mobile-20111206.pdf · push app logo.gif = user loads app app cache is empty fetch manifest fetch logo.gif](https://reader034.vdocument.in/reader034/viewer/2022050719/5eda5972b3745412b57131c7/html5/thumbnails/23.jpg)
![Page 24: High Performance Mobile - O'Reillyvelocity.oreilly.com.cn/2011/ppts/velocity-mobile-20111206.pdf · push app logo.gif = user loads app app cache is empty fetch manifest fetch logo.gif](https://reader034.vdocument.in/reader034/viewer/2022050719/5eda5972b3745412b57131c7/html5/thumbnails/24.jpg)
![Page 25: High Performance Mobile - O'Reillyvelocity.oreilly.com.cn/2011/ppts/velocity-mobile-20111206.pdf · push app logo.gif = user loads app app cache is empty fetch manifest fetch logo.gif](https://reader034.vdocument.in/reader034/viewer/2022050719/5eda5972b3745412b57131c7/html5/thumbnails/25.jpg)
![Page 26: High Performance Mobile - O'Reillyvelocity.oreilly.com.cn/2011/ppts/velocity-mobile-20111206.pdf · push app logo.gif = user loads app app cache is empty fetch manifest fetch logo.gif](https://reader034.vdocument.in/reader034/viewer/2022050719/5eda5972b3745412b57131c7/html5/thumbnails/26.jpg)
![Page 27: High Performance Mobile - O'Reillyvelocity.oreilly.com.cn/2011/ppts/velocity-mobile-20111206.pdf · push app logo.gif = user loads app app cache is empty fetch manifest fetch logo.gif](https://reader034.vdocument.in/reader034/viewer/2022050719/5eda5972b3745412b57131c7/html5/thumbnails/27.jpg)
flickr.com/photos/davidandheidi/2320489837/
the road isn’t clear
![Page 28: High Performance Mobile - O'Reillyvelocity.oreilly.com.cn/2011/ppts/velocity-mobile-20111206.pdf · push app logo.gif = user loads app app cache is empty fetch manifest fetch logo.gif](https://reader034.vdocument.in/reader034/viewer/2022050719/5eda5972b3745412b57131c7/html5/thumbnails/28.jpg)
Mobile Tools
![Page 29: High Performance Mobile - O'Reillyvelocity.oreilly.com.cn/2011/ppts/velocity-mobile-20111206.pdf · push app logo.gif = user loads app app cache is empty fetch manifest fetch logo.gif](https://reader034.vdocument.in/reader034/viewer/2022050719/5eda5972b3745412b57131c7/html5/thumbnails/29.jpg)
stevesouders.com/mobileperf/mobileperfbkm.php
![Page 30: High Performance Mobile - O'Reillyvelocity.oreilly.com.cn/2011/ppts/velocity-mobile-20111206.pdf · push app logo.gif = user loads app app cache is empty fetch manifest fetch logo.gif](https://reader034.vdocument.in/reader034/viewer/2022050719/5eda5972b3745412b57131c7/html5/thumbnails/30.jpg)
stevesouders.com/mobileperf
![Page 31: High Performance Mobile - O'Reillyvelocity.oreilly.com.cn/2011/ppts/velocity-mobile-20111206.pdf · push app logo.gif = user loads app app cache is empty fetch manifest fetch logo.gif](https://reader034.vdocument.in/reader034/viewer/2022050719/5eda5972b3745412b57131c7/html5/thumbnails/31.jpg)
stevesouders.com/mobileperf
![Page 32: High Performance Mobile - O'Reillyvelocity.oreilly.com.cn/2011/ppts/velocity-mobile-20111206.pdf · push app logo.gif = user loads app app cache is empty fetch manifest fetch logo.gif](https://reader034.vdocument.in/reader034/viewer/2022050719/5eda5972b3745412b57131c7/html5/thumbnails/32.jpg)
![Page 33: High Performance Mobile - O'Reillyvelocity.oreilly.com.cn/2011/ppts/velocity-mobile-20111206.pdf · push app logo.gif = user loads app app cache is empty fetch manifest fetch logo.gif](https://reader034.vdocument.in/reader034/viewer/2022050719/5eda5972b3745412b57131c7/html5/thumbnails/33.jpg)
mres.-8Y5Dw_nSfQztyYx: <style>a{color:#11c}a:visited{c… mres.-Kx7q38gfNkQMtpx: <script> //<![CDATA[ var Zn={},…
![Page 34: High Performance Mobile - O'Reillyvelocity.oreilly.com.cn/2011/ppts/velocity-mobile-20111206.pdf · push app logo.gif = user loads app app cache is empty fetch manifest fetch logo.gif](https://reader034.vdocument.in/reader034/viewer/2022050719/5eda5972b3745412b57131c7/html5/thumbnails/34.jpg)
![Page 35: High Performance Mobile - O'Reillyvelocity.oreilly.com.cn/2011/ppts/velocity-mobile-20111206.pdf · push app logo.gif = user loads app app cache is empty fetch manifest fetch logo.gif](https://reader034.vdocument.in/reader034/viewer/2022050719/5eda5972b3745412b57131c7/html5/thumbnails/35.jpg)
blaze.io/mobile
![Page 36: High Performance Mobile - O'Reillyvelocity.oreilly.com.cn/2011/ppts/velocity-mobile-20111206.pdf · push app logo.gif = user loads app app cache is empty fetch manifest fetch logo.gif](https://reader034.vdocument.in/reader034/viewer/2022050719/5eda5972b3745412b57131c7/html5/thumbnails/36.jpg)
blaze.io/mobile
![Page 37: High Performance Mobile - O'Reillyvelocity.oreilly.com.cn/2011/ppts/velocity-mobile-20111206.pdf · push app logo.gif = user loads app app cache is empty fetch manifest fetch logo.gif](https://reader034.vdocument.in/reader034/viewer/2022050719/5eda5972b3745412b57131c7/html5/thumbnails/37.jpg)
blaze.io/mobile
![Page 38: High Performance Mobile - O'Reillyvelocity.oreilly.com.cn/2011/ppts/velocity-mobile-20111206.pdf · push app logo.gif = user loads app app cache is empty fetch manifest fetch logo.gif](https://reader034.vdocument.in/reader034/viewer/2022050719/5eda5972b3745412b57131c7/html5/thumbnails/38.jpg)
![Page 39: High Performance Mobile - O'Reillyvelocity.oreilly.com.cn/2011/ppts/velocity-mobile-20111206.pdf · push app logo.gif = user loads app app cache is empty fetch manifest fetch logo.gif](https://reader034.vdocument.in/reader034/viewer/2022050719/5eda5972b3745412b57131c7/html5/thumbnails/39.jpg)
![Page 40: High Performance Mobile - O'Reillyvelocity.oreilly.com.cn/2011/ppts/velocity-mobile-20111206.pdf · push app logo.gif = user loads app app cache is empty fetch manifest fetch logo.gif](https://reader034.vdocument.in/reader034/viewer/2022050719/5eda5972b3745412b57131c7/html5/thumbnails/40.jpg)
to intr to intr
![Page 41: High Performance Mobile - O'Reillyvelocity.oreilly.com.cn/2011/ppts/velocity-mobile-20111206.pdf · push app logo.gif = user loads app app cache is empty fetch manifest fetch logo.gif](https://reader034.vdocument.in/reader034/viewer/2022050719/5eda5972b3745412b57131c7/html5/thumbnails/41.jpg)
![Page 42: High Performance Mobile - O'Reillyvelocity.oreilly.com.cn/2011/ppts/velocity-mobile-20111206.pdf · push app logo.gif = user loads app app cache is empty fetch manifest fetch logo.gif](https://reader034.vdocument.in/reader034/viewer/2022050719/5eda5972b3745412b57131c7/html5/thumbnails/42.jpg)
http://pmuellr.github.com/weinre/
![Page 43: High Performance Mobile - O'Reillyvelocity.oreilly.com.cn/2011/ppts/velocity-mobile-20111206.pdf · push app logo.gif = user loads app app cache is empty fetch manifest fetch logo.gif](https://reader034.vdocument.in/reader034/viewer/2022050719/5eda5972b3745412b57131c7/html5/thumbnails/43.jpg)
http://loadtimer.org/
![Page 44: High Performance Mobile - O'Reillyvelocity.oreilly.com.cn/2011/ppts/velocity-mobile-20111206.pdf · push app logo.gif = user loads app app cache is empty fetch manifest fetch logo.gif](https://reader034.vdocument.in/reader034/viewer/2022050719/5eda5972b3745412b57131c7/html5/thumbnails/44.jpg)
http://loadtimer.org/
![Page 45: High Performance Mobile - O'Reillyvelocity.oreilly.com.cn/2011/ppts/velocity-mobile-20111206.pdf · push app logo.gif = user loads app app cache is empty fetch manifest fetch logo.gif](https://reader034.vdocument.in/reader034/viewer/2022050719/5eda5972b3745412b57131c7/html5/thumbnails/45.jpg)
Mobile Performance Best Practices
![Page 46: High Performance Mobile - O'Reillyvelocity.oreilly.com.cn/2011/ppts/velocity-mobile-20111206.pdf · push app logo.gif = user loads app app cache is empty fetch manifest fetch logo.gif](https://reader034.vdocument.in/reader034/viewer/2022050719/5eda5972b3745412b57131c7/html5/thumbnails/46.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 47: High Performance Mobile - O'Reillyvelocity.oreilly.com.cn/2011/ppts/velocity-mobile-20111206.pdf · push app logo.gif = user loads app app cache is empty fetch manifest fetch logo.gif](https://reader034.vdocument.in/reader034/viewer/2022050719/5eda5972b3745412b57131c7/html5/thumbnails/47.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 48: High Performance Mobile - O'Reillyvelocity.oreilly.com.cn/2011/ppts/velocity-mobile-20111206.pdf · push app logo.gif = user loads app app cache is empty fetch manifest fetch logo.gif](https://reader034.vdocument.in/reader034/viewer/2022050719/5eda5972b3745412b57131c7/html5/thumbnails/48.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 49: High Performance Mobile - O'Reillyvelocity.oreilly.com.cn/2011/ppts/velocity-mobile-20111206.pdf · push app logo.gif = user loads app app cache is empty fetch manifest fetch logo.gif](https://reader034.vdocument.in/reader034/viewer/2022050719/5eda5972b3745412b57131c7/html5/thumbnails/49.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 50: High Performance Mobile - O'Reillyvelocity.oreilly.com.cn/2011/ppts/velocity-mobile-20111206.pdf · push app logo.gif = user loads app app cache is empty fetch manifest fetch logo.gif](https://reader034.vdocument.in/reader034/viewer/2022050719/5eda5972b3745412b57131c7/html5/thumbnails/50.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 51: High Performance Mobile - O'Reillyvelocity.oreilly.com.cn/2011/ppts/velocity-mobile-20111206.pdf · push app logo.gif = user loads app app cache is empty fetch manifest fetch logo.gif](https://reader034.vdocument.in/reader034/viewer/2022050719/5eda5972b3745412b57131c7/html5/thumbnails/51.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 52: High Performance Mobile - O'Reillyvelocity.oreilly.com.cn/2011/ppts/velocity-mobile-20111206.pdf · push app logo.gif = user loads app app cache is empty fetch manifest fetch logo.gif](https://reader034.vdocument.in/reader034/viewer/2022050719/5eda5972b3745412b57131c7/html5/thumbnails/52.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 53: High Performance Mobile - O'Reillyvelocity.oreilly.com.cn/2011/ppts/velocity-mobile-20111206.pdf · push app logo.gif = user loads app app cache is empty fetch manifest fetch logo.gif](https://reader034.vdocument.in/reader034/viewer/2022050719/5eda5972b3745412b57131c7/html5/thumbnails/53.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.gif’>
![Page 54: High Performance Mobile - O'Reillyvelocity.oreilly.com.cn/2011/ppts/velocity-mobile-20111206.pdf · push app logo.gif = user loads app app cache is empty fetch manifest fetch logo.gif](https://reader034.vdocument.in/reader034/viewer/2022050719/5eda5972b3745412b57131c7/html5/thumbnails/54.jpg)
script async & defer script src
halts parsing, blocks rendering
async execute once script is downloaded
defer execute after page is parsed
missing download & execute last download last, execute on demand
flickr.com/photos/gevertulley/4771808965/
![Page 55: High Performance Mobile - O'Reillyvelocity.oreilly.com.cn/2011/ppts/velocity-mobile-20111206.pdf · push app logo.gif = user loads app app cache is empty fetch manifest fetch logo.gif](https://reader034.vdocument.in/reader034/viewer/2022050719/5eda5972b3745412b57131c7/html5/thumbnails/55.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 56: High Performance Mobile - O'Reillyvelocity.oreilly.com.cn/2011/ppts/velocity-mobile-20111206.pdf · push app logo.gif = user loads app app cache is empty fetch manifest fetch logo.gif](https://reader034.vdocument.in/reader034/viewer/2022050719/5eda5972b3745412b57131c7/html5/thumbnails/56.jpg)
app cache offline 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.html Content-Type: text/cache-manifest
![Page 57: High Performance Mobile - O'Reillyvelocity.oreilly.com.cn/2011/ppts/velocity-mobile-20111206.pdf · push app logo.gif = user loads app app cache is empty fetch manifest fetch logo.gif](https://reader034.vdocument.in/reader034/viewer/2022050719/5eda5972b3745412b57131c7/html5/thumbnails/57.jpg)
app cache gotchas html 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 58: High Performance Mobile - O'Reillyvelocity.oreilly.com.cn/2011/ppts/velocity-mobile-20111206.pdf · push app logo.gif = user loads app app cache is empty fetch manifest fetch logo.gif](https://reader034.vdocument.in/reader034/viewer/2022050719/5eda5972b3745412b57131c7/html5/thumbnails/58.jpg)
push app logo.gif =
user loads app app cache is empty
fetch manifest
fetch logo.gif
app cache =
user sees
push app logo.gif =
rev manifest
user loads app app cache =
user sees
fetch manifest
fetch logo.gif
app cache =
user loads app again app cache =
user sees
fetch manifest (304)
app cache reload
![Page 59: High Performance Mobile - O'Reillyvelocity.oreilly.com.cn/2011/ppts/velocity-mobile-20111206.pdf · push app logo.gif = user loads app app cache is empty fetch manifest fetch logo.gif](https://reader034.vdocument.in/reader034/viewer/2022050719/5eda5972b3745412b57131c7/html5/thumbnails/59.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 60: High Performance Mobile - O'Reillyvelocity.oreilly.com.cn/2011/ppts/velocity-mobile-20111206.pdf · push app logo.gif = user loads app app cache is empty fetch manifest fetch logo.gif](https://reader034.vdocument.in/reader034/viewer/2022050719/5eda5972b3745412b57131c7/html5/thumbnails/60.jpg)
localStorage window.localStorage:
setItem() getItem() removeItem() clear()
also sessionStorage
all popular browsers, 5MB max http://dev.w3.org/html5/webstorage/ http://diveintohtml5.org/storage.html
flickr.com/photos/bryanpearson/564703455/
![Page 61: High Performance Mobile - O'Reillyvelocity.oreilly.com.cn/2011/ppts/velocity-mobile-20111206.pdf · push app logo.gif = user loads app app cache is empty fetch manifest fetch logo.gif](https://reader034.vdocument.in/reader034/viewer/2022050719/5eda5972b3745412b57131c7/html5/thumbnails/61.jpg)
localStorage as cache 1st doc: write JS & CSS blocks to localStorage
mres.-0yDUQJ03U8Hjija: <script>(function(){...
set cookie with entries & version MRES=-0yDUQJ03U8Hjija:-4EaJoFuDoX0iloI:...
later docs: read JS & CSS from localStorage document.write( localStorage.getItem(mres.-0yDUQJ03U8Hjija) );
http://stevesouders.com/blog/2011/03/28/storager-case-study-bing-google/
flickr.com/photos/nelsoncruz/431244400/
![Page 62: High Performance Mobile - O'Reillyvelocity.oreilly.com.cn/2011/ppts/velocity-mobile-20111206.pdf · push app logo.gif = user loads app app cache is empty fetch manifest fetch logo.gif](https://reader034.vdocument.in/reader034/viewer/2022050719/5eda5972b3745412b57131c7/html5/thumbnails/62.jpg)
there’s more audio & video tags
WebSockets
onTouchEnd instead of onClick
History
<a ping
requestAnimationFrame – not timers
native JSON parse/stringify flickr.com/photos/dualphoto/2609096047/
![Page 63: High Performance Mobile - O'Reillyvelocity.oreilly.com.cn/2011/ppts/velocity-mobile-20111206.pdf · push app logo.gif = user loads app app cache is empty fetch manifest fetch logo.gif](https://reader034.vdocument.in/reader034/viewer/2022050719/5eda5972b3745412b57131c7/html5/thumbnails/63.jpg)
Thanks to…
Max Firtman Tony Gentilcore Josh Fraser Kyle Scholz Stoyan Stefanov James Pearce
flickr.com/photos/robertvega/3944132320/
Lindsey Simon Annie Sullivan Tim Kadlec Paul Irish Jason Grigsby Brad Neuberg
![Page 64: High Performance Mobile - O'Reillyvelocity.oreilly.com.cn/2011/ppts/velocity-mobile-20111206.pdf · push app logo.gif = user loads app app cache is empty fetch manifest fetch logo.gif](https://reader034.vdocument.in/reader034/viewer/2022050719/5eda5972b3745412b57131c7/html5/thumbnails/64.jpg)
mobile WPO speed matters
mobile tools gaining visibility
mobile best practices reduce requests & bytes improve caching
takeaways
flickr.com/photos/myklroventine/4062102754/
![Page 65: High Performance Mobile - O'Reillyvelocity.oreilly.com.cn/2011/ppts/velocity-mobile-20111206.pdf · push app logo.gif = user loads app app cache is empty fetch manifest fetch logo.gif](https://reader034.vdocument.in/reader034/viewer/2022050719/5eda5972b3745412b57131c7/html5/thumbnails/65.jpg)
Steve Souders @souders
stevesouders.com/docs/velocity-mobile-20111206.pptx