Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Like this? Share it with your network

Share

WPO Israel Meetup - Mobile Web Performance slides by Steve Souders

on

  • 1,502 views

Slides ofthe Steve Souders' mobile web performance presentations at the Israel web performance meetup on January 2012

Slides ofthe Steve Souders' mobile web performance presentations at the Israel web performance meetup on January 2012

Statistics

Views

Total Views
1,502
Views on SlideShare
1,502
Embed Views
0

Actions

Likes
0
Downloads
23
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

WPO Israel Meetup - Mobile Web Performance slides by Steve Souders Presentation Transcript

  • 1. High Performance Mobilestevesouders.com/docs/webperfisrael-hpmobile-20120131.pptxDisclaimer: This content does not necessarily reflect the opinions of my employer.
  • 2. theWPOIndustry is Here
  • 3. 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.”
  • 4. en.oreilly.com/velocity2009/public/schedule/detail/8523
  • 5. en.oreilly.com/velocity2009/public/schedule/detail/7709 blog.mozilla.com/metrics/category/website-optimization/…shaved 2.2 seconds offthe average page load timeand increased downloadconversions by 15.4%!
  • 6. WebWPO Performance Optimizationdrives trafficimproves UXincreases revenuereduces costs
  • 7. theWPO mobileIndustry is Here
  • 8. kpcb.com/internettrends2011
  • 9. kpcb.com/internettrends2011
  • 10. Black Friday Online Sales from Mobile 9.8% 3.2% 1%IBM Benchmark coremetrics.com/downloads/benchmark-2011-black-friday.pdfForbes forbes.com/sites/erikamorphy/2011/11/25/mobile-sales-hit-it-out-of-the-park-on-black-friday/
  • 11. Black Friday Bounce Rate 41.3% 33.1%IBM Benchmark coremetrics.com/downloads/benchmark-2011-black-friday.pdf
  • 12. blog.compete.com/2011/11/29/the-male-vs-female-debate-goes-mobile/
  • 13. the road isn’t clear
  • 14. MobilePerformanceBest Practices
  • 15. 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 BOTTOM14 RULES 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
  • 16. 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 BOTTOM14 RULES 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
  • 17. 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 BOTTOM14 RULES 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
  • 18. 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 Stoyan Stefanov, Nicole Sullivan
  • 19. 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 Stoyan Stefanov, Nicole Sullivan
  • 20. 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 Stoyan Stefanov, Nicole Sullivan
  • 21. reduce HTTP requestsspritesdata: URIsCSS3: border-radius box-shadow linear-gradient transform: rotate, scale, skew, translateCanvas, SVG
  • 22. responsive imagesresize images based on screen sizeexample: Sencha.io Src<img src=„http://src.sencha.io/http ://mydomain.com/logo.gif‟>UA classification: DeviceAtlasdomain sharding: src[1-4].sencha.ioalso: http://adaptive-images.com/http://github.com/filamentgroup/Responsive-Images
  • 23. script async & deferscript src halts parsing, blocks renderingasync execute once script is downloadeddefer execute after page is parsedmissing download & execute last download last, execute on demand
  • 24. GMail Mobile<script type="text/javascript">/*var ...*/</script>get script DOM elements textremove commentseval() when invokedawesome for prefetching JS that might (not) be neededhttp://goo.gl/l5ZLQ
  • 25. app cacheoffline apps, longer cache<!doctype html><html manifest=“myapp.appcache”>myapp.appcache: CACHE MANIFEST # Revision: 1.28 CACHE: /images/logo.gif NETWORK: /login.html FALLBACK: /index.html /offline.html Content-Type: text/cache-manifest
  • 26. app cache gotchashtml docs w/ manifest are cached404 => nothing is cachedsize: 5MB+must rev manifest to update resourcesupdate is served on 2nd reload (?!?!)
  • 27. localStoragewindow.localStorage: setItem() getItem() removeItem() clear()also sessionStorageall popular browsers, 5MB maxhttp://dev.w3.org/html5/webstorage/http://diveintohtml5.org/storage.html
  • 28. localStorage as cache1st 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/
  • 29. Mobile Tools
  • 30. blaze.io/mobile
  • 31. blaze.io/mobile
  • 32. blaze.io/mobile
  • 33. to intr
  • 34. stevesouders.com/mobileperf
  • 35. stevesouders.com/mobileperf
  • 36. mres.-8Y5Dw_nSfQztyYx: <style>a{color:#11c}a:visited{c…mres.-Kx7q38gfNkQMtpx: <script> //<![CDATA[ var Zn={},…
  • 37. http://loadtimer.org/
  • 38. http://loadtimer.org/
  • 39. takeawaysmobile WPO speed matters even more!mobile best practices reduce requests & bytes avoid JS improve cachingmobile tools gain visibility
  • 40. Steve Souders @soudersstevesouders.com/docs/webperfisrael-hpmobile-20120131.pptx