Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
High Performance Mobile<br />stevesouders.com/docs/sfsv-webperf-20110830.pptx<br />Disclaimer: This content does not neces...
Cuzillion<br />SpriteMe<br />YSlow<br />Hammerhead<br />flickr.com/photos/bekahstargazing/318930460/<br />
1. WPO<br />
2004<br />
 carsonified.com/blog/business/fred-wilsons-10-golden-principles-of-successful-web-apps/<br />#1. Speed:        “First and...
en.oreilly.com/velocity2009/public/schedule/detail/8523<br />
en.oreilly.com/velocity2009/public/schedule/detail/8523<br />
Yahoo!<br />	0.4 sec slower<br />	traffic  5-9%<br />slideshare.net/stoyan/dont-make-me-wait-or-building-highperformance-...
blog.mozilla.com/metrics/category/website-optimization/<br />…shaved 2.2 seconds off the average page load time and increa...
en.oreilly.com/velocity2009/public/schedule/detail/7709<br />blog.mozilla.com/metrics/category/website-optimization/<br />...
en.oreilly.com/velocity2008/public/schedule/detail/3632<br />
slideshare.net/EdmundsLabs/how-edmunds-got-in-the-fast-lane-80-reduction-in-page-load-time-in-3-simple-steps-6593377<br />
Site speed in search rank<br />Screen shot of blog post<br />…we've decided to take site speed into account in our search ...
Web<br />Performance<br />Optimization<br />WPO<br />drives traffic<br />improves UX<br />increases revenue<br />reduces c...
2. Why Mobile?<br />
slideshare.net/CMSummit/ms-internet-trends060710final<br />
slideshare.net/CMSummit/ms-internet-trends060710final<br />
nytimes.com/2011/04/18/technology/18mobile.html<br />
slideshare.net/CMSummit/ms-internet-trends060710final<br />
the road isn’t clear<br />flickr.com/photos/davidandheidi/2320489837/<br />
3. Mobile Best Practices<br />
[just a reminder]<br />
3. Mobile Best Practices<br />
1. Make fewer HTTP requests<br />2. Use a CDN<br />3. Add an Expires header<br />4. Gzipcomponents<br />5. Put stylesheets...
1. Make fewer HTTP requests<br />2. Use a CDN<br />3. Add an Expires header<br />4. Gzipcomponents<br />5. Put stylesheets...
1. Make fewer HTTP requests<br />2. Use a CDN<br />3. Add an Expires header<br />4. Gzipcomponents<br />5. Put stylesheets...
Splitting the initial payload<br />Loading scripts without blocking<br />Coupling asynchronous scripts<br />Positioning in...
Splitting the initial payload<br />Loading scripts without blocking<br />Coupling asynchronous scripts<br />Positioning in...
Splitting the initial payload<br />Loading scripts without blocking<br />Coupling asynchronous scripts<br />Positioning in...
reduce HTTP requests<br />sprites<br />data: URIs<br />CSS3:<br />border-radius<br />box-shadow<br />linear-gradient<br />...
responsive images<br />resize images based on screen size<br />example: Sencha.ioSrc<br />UA classification: DeviceAtlas<b...
script async & defer<br />parsing doesn’t wait for script:<br /><ul><li>async– executed when available
defer – executed when parsing finished</li></ul>when is it downloaded?<br />missing:<br /><ul><li>defer download AND execu...
async/defer download, execute on demand</li></ul>flickr.com/photos/gevertulley/4771808965/<br />
GMail Mobile<br /><script type="text/javascript"><br />/*<br />var ... <br />*/<br /></script><br />get script DOM element...
ControlJSa JavaScript module for making scripts load faster<br />just change HTML<br />inline & external scripts<br /><scr...
ControlJSa JavaScript module for making scripts load faster<br />download without executing<br /><script type="text/cjs" <...
app cache<br />flickr.com/photos/india-nepal-iran/203982474/<br />
yuiblog.com/blog/2007/01/04/performance-research-part-2/<br />
blaze.io/mobile/understanding-mobile-cache-sizes/<br />
app cache<br />offline apps, longer cache<br /><!doctype html><br /><html manifest=“myapp.appcache”><br />myapp.appcache:<...
app cache gotchas<br />html docs w/ manifest are cached<br />404 => nothing is cached<br />size: 5MB+<br />must rev manife...
app cache<br />reload<br />1<br />2<br />push app <br />logo.gif = <br />user loads app<br />app cache is empty <br />fetc...
load twice workaround<br />window.applicationCache.addEventListener('updateready', <br />function(e) {   if ( window.appli...
localStorage<br />window.localStorage: <br />setItem()<br />getItem()<br />removeItem()<br />clear()<br />also sessionStor...
localStorage as cache<br />1st doc: write JS & CSS blocks to localStorage<br />JUX.UXBaseControls.252CB7BF: (function(){.....
there’s more<br />audio & video tags<br />WebSockets<br />onTouchEnd instead of onClick<br />History  <br /><a ping <br />...
Thanks to…<br />Max Firtman<br />Tony Gentilcore<br />Josh Fraser<br />Kyle Scholz<br />StoyanStefanov<br />Lindsey Simon<...
4. Mobile Tools<br />
http://pmuellr.github.com/weinre/<br />
speed matters - WPO<br />mobile winners will be fast<br />mobile performance – reduce reqs, resize images, async JS, app c...
Top 100: bytes downloaded<br />desktop<br />mobile<br />
Top 100: size & requests<br />desktop<br />mobile<br />
Upcoming SlideShare
Loading in …5
×

localStorage as cache<br />1st doc: High Performance Mobile (SF/SV Web Perf)

40,926 views

Published on

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/

Published in: Technology, Design
  • Be the first to comment

×