![[just a reminder]](https://image.slidesharecdn.com/sfsv-webperf-20110830-110831135935-phpapp02/85/High-Performance-Mobile-SF-SV-Web-Perf-31-320.jpg)
![responsive imagesresize images based on screen sizeexample: Sencha.ioSrcUA classification: DeviceAtlasdomain sharding: src[1-4].sencha.ioalso: http://adaptive-images.com/http://github.com/filamentgroup/Responsive-Images<imgsrc=‘http://src.sencha.io/http://mydomain.com/logo.gif’>flickr.com/photos/johnkay/3539939004/](https://image.slidesharecdn.com/sfsv-webperf-20110830-110831135935-phpapp02/85/High-Performance-Mobile-SF-SV-Web-Perf-40-320.jpg)
High Performance Mobile (SF/SV Web Perf)
- 1. High Performance Mobilestevesouders.com/docs/sfsv-webperf-20110830.pptxDisclaimer: This content does not necessarily reflect the opinions of my employer.
- 5. 1. WPO
- 6. 2004
- 7. carsonified.com/blog/business/fred-wilsons-10-golden-principles-of-successful-web-apps/#1. Speed: “First and foremost, we believe that speed is more than a feature. Speed is the most important feature.”
- 10. Yahoo! 0.4 sec slower traffic 5-9%slideshare.net/stoyan/dont-make-me-wait-or-building-highperformance-web-applicationsslideshare.net/stoyan/yslow-20-presentation
- 11. blog.mozilla.com/metrics/category/website-optimization/…shaved 2.2 seconds off the average page load time and increased download conversions by 15.4%!
- 12. en.oreilly.com/velocity2009/public/schedule/detail/7709blog.mozilla.com/metrics/category/website-optimization/…shaved 2.2 seconds off the average page load time and increased download conversions by 15.4%!
- 15. Site speed in search rankScreen 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
- 16. WebPerformanceOptimizationWPOdrives trafficimproves UXincreases revenuereduces costsflickr.com/photos/pedromourapinheiro/3123885534/
- 17. 2. Why Mobile?
- 29. the road isn’t clearflickr.com/photos/davidandheidi/2320489837/
- 30. 3. Mobile Best Practices
- 32. 3. Mobile Best Practices
- 33. 1. Make fewer HTTP requests2. Use a CDN3. Add an Expires header4. Gzipcomponents5. Put stylesheets at the top6. Put scripts at the bottom7. Avoid CSS expressions8. Make JS and CSS external9. Reduce DNS lookups10. Minify JS11. Avoid redirects12. Remove duplicate scripts13. Configure ETags14. Make AJAX cacheable14 Rules
- 34. 1. Make fewer HTTP requests2. Use a CDN3. Add an Expires header4. Gzipcomponents5. Put stylesheets at the top6. Put scripts at the bottom7. Avoid CSS expressions8. Make JS and CSS external9. Reduce DNS lookups10. Minify JS11. Avoid redirects12. Remove duplicate scripts13. Configure ETags14. Make AJAX cacheable14 Rules
- 35. 1. Make fewer HTTP requests2. Use a CDN3. Add an Expires header4. Gzipcomponents5. Put stylesheets at the top6. Put scripts at the bottom7. Avoid CSS expressions8. Make JS and CSS external9. Reduce DNS lookups10. Minify JS11. Avoid redirects12. Remove duplicate scripts13. Configure ETags14. Make AJAX cacheable14 Rules
- 36. Splitting the initial payloadLoading scripts without blockingCoupling asynchronous scriptsPositioning inline scriptsSharding dominant domainsFlushing the document earlyUsing iframes sparinglySimplifying CSS SelectorsUnderstanding Ajax performance Doug CrockfordCreating responsive web apps Ben Galbraith, Dion AlmaerWriting efficient JavaScript Nicholas ZakasScaling with Comet Dylan SchiemannGoing beyond gzipping Tony GentilcoreOptimizing images StoyanStefanov, Nicole Sullivan
- 37. Splitting the initial payloadLoading scripts without blockingCoupling asynchronous scriptsPositioning inline scriptsSharding dominant domainsFlushing the document earlyUsing iframes sparinglySimplifying CSS SelectorsUnderstanding Ajax performance Doug CrockfordCreating responsive web apps Ben Galbraith, Dion AlmaerWriting efficient JavaScript Nicholas ZakasScaling with Comet Dylan SchiemannGoing beyond gzipping Tony GentilcoreOptimizing images StoyanStefanov, Nicole Sullivan
- 38. Splitting the initial payloadLoading scripts without blockingCoupling asynchronous scriptsPositioning inline scriptsSharding dominant domainsFlushing the document earlyUsing iframes sparinglySimplifying CSS SelectorsUnderstanding Ajax performance Doug CrockfordCreating responsive web appsBen Galbraith, Dion AlmaerWriting efficient JavaScript Nicholas ZakasScaling with Comet Dylan SchiemannGoing beyond gzipping Tony GentilcoreOptimizing images StoyanStefanov, Nicole Sullivan
- 39. reduce HTTP requestsspritesdata: URIsCSS3:border-radiusbox-shadowlinear-gradienttransform: rotate, scale, skew, translateCanvas, SVGflickr.com/photos/mrd00dman/2358726807/
- 40. responsive imagesresize images based on screen sizeexample: Sencha.ioSrcUA classification: DeviceAtlasdomain sharding: src[1-4].sencha.ioalso: http://adaptive-images.com/http://github.com/filamentgroup/Responsive-Images<imgsrc=‘http://src.sencha.io/http://mydomain.com/logo.gif’>flickr.com/photos/johnkay/3539939004/
- 41. script async & deferparsing doesn’t wait for script:async– executed when available
- 42. defer – executed when parsing finishedwhen is it downloaded?missing:defer download AND execution
- 43. async/defer download, execute on demandflickr.com/photos/gevertulley/4771808965/
- 44. GMail Mobile<script type="text/javascript">/*var ... */</script>get script DOM element's textremove commentseval() when invokedawesome for prefetching JS that might (not) be neededhttp://goo.gl/l5ZLQ
- 45. ControlJSa JavaScript module for making scripts load fasterjust change HTMLinline & external scripts<script type="text/cjs" data-cjssrc="main.js"></script><script type="text/cjs">var name = getName();</script>
- 46. ControlJSa JavaScript module for making scripts load fasterdownload without executing<script type="text/cjs" data-cjssrc="main.js” data-cjsexec=false><script>Later if/when needed:CJS.execScript(src);
- 50. app cacheoffline apps, longer cache<!doctype html><html manifest=“myapp.appcache”>myapp.appcache:CACHE MANIFEST# Revision: 1.28CACHE:/images/logo.gifNETWORK:/login.htmlFALLBACK:/index.html /offline.htmlContent-Type: text/cache-manifestflickr.com/photos/india-nepal-iran/203982474/
- 51. app cache gotchashtml docs w/ manifest are cached404 => nothing is cachedsize: 5MB+must rev manifest to update resourcesupdate is served on 2nd reload (?!?!)flickr.com/photos/97657657@N00/1918688483/
- 52. app cachereload12push app logo.gif = user loads appapp cache is empty fetch manifestfetch logo.gifapp cache =user sees345push app logo.gif =rev manifest user loads appapp cache = user seesfetch manifestfetch logo.gifapp cache =user loads app againapp cache = user seesfetch manifest (304)
- 53. load twice workaroundwindow.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/flickr.com/photos/presley_m/5152304885/
- 54. localStoragewindow.localStorage: setItem()getItem()removeItem()clear()also sessionStorageall popular browsers, 5MB maxhttp://dev.w3.org/html5/webstorage/http://diveintohtml5.org/storage.htmlflickr.com/photos/bryanpearson/564703455/
- 55. localStorage as cache1st 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/
- 56. there’s moreaudio & video tagsWebSocketsonTouchEnd instead of onClickHistory <a ping requestAnimationFrame– not timers native JSON parse/stringifyflickr.com/photos/dualphoto/2609096047/
- 57. Thanks to…Max FirtmanTony GentilcoreJosh FraserKyle ScholzStoyanStefanovLindsey SimonAnnie SullivanTim KadlecPaul IrishBrad Neubergflickr.com/photos/robertvega/3944132320/
- 58. 4. Mobile Tools
- 63. speed matters - WPOmobile winners will be fastmobile performance – reduce reqs, resize images, async JS, app cache, localStoragemobile tools – pcapperf, Jdrop, Blaze.io, Weinretakeawaysflickr.com/photos/myklroventine/4062102754/
- 67. Top 100: bytes downloadeddesktopmobile
- 68. Top 100: size & requestsdesktopmobile
Editor's Notes
- #8: Fred Wilson is Managing Partner of two venture capital firms, Flatiron Partners (Yoyodyne, Geocities) and Union Square Ventures (Twitter, delicious,Etsy, Feedburner).SpeedInstant utilitySoftware is mediaLess is moreMake it programmableMake it personalRESTfulDiscoverabilityCleanPlayful
- #12: “if we’re able to achieve a similar performance boost across ourothertoplanding pages, we’ll drive in excess of 60 million yearly Firefox downloads.”
- #13: This was a ~5 second speed up.
- #16: Time measurements from real users.
- #22: http://www.nytimes.com/2011/04/18/technology/18mobile.html
- #42: Generallyasync & defer scripts start downloading immediately. I wish they’d wait, esp. defer scripts, so they don’t hog connections from the limited pool.
- #43: GMail Mobile: http://googlecode.blogspot.com/2009/09/gmail-for-mobile-html5-series-reducing.htmlSproutCore: http://blog.sproutcore.com/post/225219087/faster-loading-through-eval