Mobile Web Performance - Velocity 2011

870 views
768 views

Published on

Summary of links and tools presented at the Velocity Conference 2011 in San Jose, CA

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
870
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Mobile Web Performance - Velocity 2011

  1. 1. (Mobile) Web Performance
  2. 2.  Reducethe page load /page weight as much as possible
  3. 3.  http://developer.yahoo.com/performance/ru les.html • Minimize HTTP requests • Put CSS at top of page • Put JavaScript scripts at bottom of page • Avoid images where possible and/or optimize images: FIFA Scoreboard, use gradient tr.game{ background: #434343; /* IE default */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#434343, endColorstr=#171717); background: -webkit-gradient(linear, left top, left bottom, from(#434343), to(#171717)); /* for webkit browsers */ background: -moz-linear-gradient(top, #434343, #171717); }
  4. 4.  Use Image sprites, e.g. PG: http://www.cbc.ca/m/touch/pg.htmlhttp://www.cbc.ca/m/touch//img/sprite_pg.pn g Use minified scripts, i.e. js, css (YSlow), e.g. http://cbc.ca/m/touch/js/core.js
  5. 5.  Test Web Performance on your mobile device: http://www.blaze.io/mobile/ Web Site Performance: http://www.webpagetest.org/ Show Slow: Chrome App: http://bit.ly/leaBX0 Web Inspector Remote (weinre), very nice way to debug your mobile device remotely (Demo: http://bit.ly/flvhDk), Velocity Demo, 00:15min http://bit.ly/is9sDo HTTP Archive http://httparchive.org/about.php CSSLint: http://csslint.net/
  6. 6.  MobilePerf Bookmarklet: http://p.ad.ag/ YSlowMobile Bookmarklet: http://developer.yahoo.com/yslow/mobile Jdrop Bookmarklet: http://jdrop.org/
  7. 7.  DataURIs: http://css-tricks.com/5970- data-uris/ CSS: Use hex for icons http://pukupi.com/post/1964 PhantomJS: Command-line JS Tool, http://www.phantomjs.org/
  8. 8.  Max Firtman’s Sim/Emulator page: http://www.mobilexweb.com/emulators Remote Labs • http://deviceanywhere.com • http://perfectomobile.com
  9. 9.  Google Chrome Instant: http://www.google.com/support/chrome/bin/answ er.py?answer=177873 Video, 04:18min, http://bit.ly/mNnqu8 Alexa 100: http://www.alexa.com/topsites • For Canada: http://www.alexa.com/topsites/countries/CA SPDY vs. HTTP: http://www.chromium.org/spdy/spdy-whitepaper
  10. 10.  Lazy loading: Transfer data when needed and preload where appropriate. Dont load images that will never be seen by the end user Reduce HTTP requests, more CSS sprites Use more web performance tests More mobile web frameworks Investigate usage of data URI for images Offline storage/local cache Evaluate metrics code (see WebPagetest.org results)
  11. 11.  All slides & videos from Velocityconf 2011 • http://velocityconf.com/velocity2011/public/schedule/proceedings YouTube: http://www.youtube.com/user/OreillyMedia John Resig on JS performance: http://www.youtube.com/watch?feature=player_embedde d&v=WuMEQN7aph0 Facebook, Infrastructure http://www.youtube.com/watch?v=urG0dQ7kc3w&feature =player_embedded Most of those projects are open source and can be found on github

×