Mobile Web Performance - Velocity 2011
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Mobile Web Performance - Velocity 2011

  • 954 views
Uploaded on

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

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

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
954
On Slideshare
954
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
6
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. (Mobile) Web Performance
  • 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.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.  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. 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.  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