Mobile Web Performance - Velocity 2011
0 likes680 views
The document provides tips for improving mobile web performance including reducing page load and weight, optimizing images, using CSS sprites and minified scripts, testing performance on mobile devices, and leveraging tools to debug mobile websites remotely. It also recommends strategies like lazy loading images, reducing HTTP requests, using more performance tests and frameworks, and investigating data URIs and offline storage.
Mobile Web Performance - Velocity 2011
- 2. Reducethe page load /page weight as much as possible
- 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. Use Image sprites, e.g. PG: http://www.cbc.ca/m/touch/pg.html http://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. 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. MobilePerf Bookmarklet: http://p.ad.ag/ YSlowMobile Bookmarklet: http://developer.yahoo.com/yslow/mobile Jdrop Bookmarklet: http://jdrop.org/
- 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. Max Firtman’s Sim/Emulator page: http://www.mobilexweb.com/emulators Remote Labs • http://deviceanywhere.com • http://perfectomobile.com
- 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. Lazy loading: Transfer data when needed and preload where appropriate. Don't 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. 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