SlideShare une entreprise Scribd logo
1  sur  68
Télécharger pour lire hors ligne
High Performance Mobile,[object Object],stevesouders.com/docs/sfsv-webperf-20110830.pptx,[object Object],Disclaimer: This content does not necessarily reflect the opinions of my employer.,[object Object]
Cuzillion,[object Object],SpriteMe,[object Object],YSlow,[object Object],Hammerhead,[object Object],flickr.com/photos/bekahstargazing/318930460/,[object Object]
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
1. WPO,[object Object]
2004,[object Object]
 carsonified.com/blog/business/fred-wilsons-10-golden-principles-of-successful-web-apps/,[object Object],#1. Speed:        “First and foremost, we believe that speed is more than a feature. Speed is the most important feature.”,[object Object]
en.oreilly.com/velocity2009/public/schedule/detail/8523,[object Object]
en.oreilly.com/velocity2009/public/schedule/detail/8523,[object Object]
Yahoo!,[object Object],	0.4 sec slower,[object Object],	traffic  5-9%,[object Object],slideshare.net/stoyan/dont-make-me-wait-or-building-highperformance-web-applications,[object Object],slideshare.net/stoyan/yslow-20-presentation,[object Object]
blog.mozilla.com/metrics/category/website-optimization/,[object Object],…shaved 2.2 seconds off the average page load time and increased download conversions by 15.4%!,[object Object]
en.oreilly.com/velocity2009/public/schedule/detail/7709,[object Object],blog.mozilla.com/metrics/category/website-optimization/,[object Object],…shaved 2.2 seconds off the average page load time and increased download conversions by 15.4%!,[object Object]
en.oreilly.com/velocity2008/public/schedule/detail/3632,[object Object]
slideshare.net/EdmundsLabs/how-edmunds-got-in-the-fast-lane-80-reduction-in-page-load-time-in-3-simple-steps-6593377,[object Object]
Site speed in search rank,[object Object],Screen shot of blog post,[object Object],…we've decided to take site speed into account in our search rankings.,[object Object],googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html,[object Object]
Web,[object Object],Performance,[object Object],Optimization,[object Object],WPO,[object Object],drives traffic,[object Object],improves UX,[object Object],increases revenue,[object Object],reduces costs,[object Object],flickr.com/photos/pedromourapinheiro/3123885534/,[object Object]
2. Why Mobile?,[object Object]
High Performance Mobile (SF/SV Web Perf)
slideshare.net/CMSummit/ms-internet-trends060710final,[object Object]
slideshare.net/CMSummit/ms-internet-trends060710final,[object Object]
nytimes.com/2011/04/18/technology/18mobile.html,[object Object]
slideshare.net/CMSummit/ms-internet-trends060710final,[object Object]
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
the road isn’t clear,[object Object],flickr.com/photos/davidandheidi/2320489837/,[object Object]
3. Mobile Best Practices,[object Object]
[just a reminder],[object Object]
3. Mobile Best Practices,[object Object]
1. Make fewer HTTP requests,[object Object],2. Use a CDN,[object Object],3. Add an Expires header,[object Object],4. Gzipcomponents,[object Object],5. Put stylesheets at the top,[object Object],6. Put scripts at the bottom,[object Object],7. Avoid CSS expressions,[object Object],8. Make JS and CSS external,[object Object],9. Reduce DNS lookups,[object Object],10. Minify JS,[object Object],11. Avoid redirects,[object Object],12. Remove duplicate scripts,[object Object],13. Configure ETags,[object Object],14. Make AJAX cacheable,[object Object],14 Rules,[object Object]
1. Make fewer HTTP requests,[object Object],2. Use a CDN,[object Object],3. Add an Expires header,[object Object],4. Gzipcomponents,[object Object],5. Put stylesheets at the top,[object Object],6. Put scripts at the bottom,[object Object],7. Avoid CSS expressions,[object Object],8. Make JS and CSS external,[object Object],9. Reduce DNS lookups,[object Object],10. Minify JS,[object Object],11. Avoid redirects,[object Object],12. Remove duplicate scripts,[object Object],13. Configure ETags,[object Object],14. Make AJAX cacheable,[object Object],14 Rules,[object Object]
1. Make fewer HTTP requests,[object Object],2. Use a CDN,[object Object],3. Add an Expires header,[object Object],4. Gzipcomponents,[object Object],5. Put stylesheets at the top,[object Object],6. Put scripts at the bottom,[object Object],7. Avoid CSS expressions,[object Object],8. Make JS and CSS external,[object Object],9. Reduce DNS lookups,[object Object],10. Minify JS,[object Object],11. Avoid redirects,[object Object],12. Remove duplicate scripts,[object Object],13. Configure ETags,[object Object],14. Make AJAX cacheable,[object Object],14 Rules,[object Object]
Splitting the initial payload,[object Object],Loading scripts without blocking,[object Object],Coupling asynchronous scripts,[object Object],Positioning inline scripts,[object Object],Sharding dominant domains,[object Object],Flushing the document early,[object Object],Using iframes sparingly,[object Object],Simplifying CSS Selectors,[object Object],Understanding Ajax performance Doug Crockford,[object Object],Creating responsive web apps Ben Galbraith, Dion Almaer,[object Object],Writing efficient JavaScript Nicholas Zakas,[object Object],Scaling with Comet Dylan Schiemann,[object Object],Going beyond gzipping Tony Gentilcore,[object Object],Optimizing images StoyanStefanov, Nicole Sullivan,[object Object]
Splitting the initial payload,[object Object],Loading scripts without blocking,[object Object],Coupling asynchronous scripts,[object Object],Positioning inline scripts,[object Object],Sharding dominant domains,[object Object],Flushing the document early,[object Object],Using iframes sparingly,[object Object],Simplifying CSS Selectors,[object Object],Understanding Ajax performance Doug Crockford,[object Object],Creating responsive web apps Ben Galbraith, Dion Almaer,[object Object],Writing efficient JavaScript Nicholas Zakas,[object Object],Scaling with Comet Dylan Schiemann,[object Object],Going beyond gzipping Tony Gentilcore,[object Object],Optimizing images StoyanStefanov, Nicole Sullivan,[object Object]
Splitting the initial payload,[object Object],Loading scripts without blocking,[object Object],Coupling asynchronous scripts,[object Object],Positioning inline scripts,[object Object],Sharding dominant domains,[object Object],Flushing the document early,[object Object],Using iframes sparingly,[object Object],Simplifying CSS Selectors,[object Object],Understanding Ajax performance Doug Crockford,[object Object],Creating responsive web appsBen Galbraith, Dion Almaer,[object Object],Writing efficient JavaScript Nicholas Zakas,[object Object],Scaling with Comet Dylan Schiemann,[object Object],Going beyond gzipping Tony Gentilcore,[object Object],Optimizing images StoyanStefanov, Nicole Sullivan,[object Object]
reduce HTTP requests,[object Object],sprites,[object Object],data: URIs,[object Object],CSS3:,[object Object],border-radius,[object Object],box-shadow,[object Object],linear-gradient,[object Object],transform: rotate, scale, skew, translate,[object Object],Canvas, SVG,[object Object],flickr.com/photos/mrd00dman/2358726807/,[object Object]
responsive images,[object Object],resize images based on screen size,[object Object],example: Sencha.ioSrc,[object Object],UA classification: DeviceAtlas,[object Object],domain sharding: src[1-4].sencha.io,[object Object],also: http://adaptive-images.com/,[object Object],http://github.com/filamentgroup/Responsive-Images,[object Object],<imgsrc=‘http://src.sencha.io/http://mydomain.com/logo.gif’>,[object Object],flickr.com/photos/johnkay/3539939004/,[object Object]
script async & defer,[object Object],parsing doesn’t wait for script:,[object Object],[object Object]
defer – executed when parsing finishedwhen is it downloaded?,[object Object],missing:,[object Object],[object Object]
async/defer download, execute on demandflickr.com/photos/gevertulley/4771808965/,[object Object]
GMail Mobile,[object Object],<script type="text/javascript">,[object Object],/*,[object Object],var ... ,[object Object],*/,[object Object],</script>,[object Object],get script DOM element's text,[object Object],remove comments,[object Object],eval() when invoked,[object Object],awesome for prefetching JS that might (not) be needed,[object Object],http://goo.gl/l5ZLQ,[object Object]
ControlJSa JavaScript module for making scripts load faster,[object Object],just change HTML,[object Object],inline & external scripts,[object Object],<script type="text/cjs" ,[object Object],data-cjssrc="main.js">,[object Object],</script>,[object Object],<script type="text/cjs">,[object Object],var name = getName();,[object Object],</script>,[object Object]
ControlJSa JavaScript module for making scripts load faster,[object Object],download without executing,[object Object],<script type="text/cjs" ,[object Object],       data-cjssrc="main.js” ,[object Object],       data-cjsexec=false>,[object Object],<script>,[object Object],Later if/when needed:,[object Object],CJS.execScript(src);,[object Object]
app cache,[object Object],flickr.com/photos/india-nepal-iran/203982474/,[object Object]
yuiblog.com/blog/2007/01/04/performance-research-part-2/,[object Object]
blaze.io/mobile/understanding-mobile-cache-sizes/,[object Object]
app cache,[object Object],offline apps, longer cache,[object Object],<!doctype html>,[object Object],<html manifest=“myapp.appcache”>,[object Object],myapp.appcache:,[object Object],CACHE MANIFEST,[object Object],# Revision: 1.28,[object Object],CACHE:,[object Object],/images/logo.gif,[object Object],NETWORK:,[object Object],/login.html,[object Object],FALLBACK:,[object Object],/index.html /offline.html,[object Object],Content-Type: text/cache-manifest,[object Object],flickr.com/photos/india-nepal-iran/203982474/,[object Object]
app cache gotchas,[object Object],html docs w/ manifest are cached,[object Object],404 => nothing is cached,[object Object],size: 5MB+,[object Object],must rev manifest to update resources,[object Object],update is served on 2nd reload (?!?!),[object Object],flickr.com/photos/97657657@N00/1918688483/,[object Object]
app cache,[object Object],reload,[object Object],1,[object Object],2,[object Object],push app ,[object Object],logo.gif = ,[object Object],user loads app,[object Object],app cache is empty ,[object Object],fetch manifest,[object Object],fetch logo.gif,[object Object],app cache =,[object Object],user sees,[object Object],3,[object Object],4,[object Object],5,[object Object],push app ,[object Object],logo.gif =,[object Object],rev manifest ,[object Object],user loads app,[object Object],app cache = ,[object Object],user sees,[object Object],fetch manifest,[object Object],fetch logo.gif,[object Object],app cache =,[object Object],user loads app again,[object Object],app cache = ,[object Object],user sees,[object Object],fetch manifest (304),[object Object]
load twice workaround,[object Object],window.applicationCache.addEventListener('updateready', ,[object Object],function(e) {   if ( window.applicationCache.status== ,[object Object],window.applicationCache.UPDATEREADY) {,[object Object],    if ( confirm(“Load new content?”) ) {,[object Object],      ...,[object Object],http://www.webdirections.org/blog/get-offline/,[object Object],http://www.html5rocks.com/en/tutorials/appcache/beginner/,[object Object],flickr.com/photos/presley_m/5152304885/,[object Object]
localStorage,[object Object],window.localStorage: ,[object Object],setItem(),[object Object],getItem(),[object Object],removeItem(),[object Object],clear(),[object Object],also sessionStorage,[object Object],all popular browsers, 5MB max,[object Object],http://dev.w3.org/html5/webstorage/,[object Object],http://diveintohtml5.org/storage.html,[object Object],flickr.com/photos/bryanpearson/564703455/,[object Object]
localStorage as cache,[object Object],1st doc: write JS & CSS blocks to localStorage,[object Object],JUX.UXBaseControls.252CB7BF: (function(){...,[object Object],JUX.FrameworkCore.A39F6425: (function(){...,[object Object],set cookie with entries & version,[object Object],RMSM=JUX.UXBaseControls.252CB7BF~ JUX.FrameworkCore.A39F6425~,[object Object],later docs: read JS & CSS from localStorage,[object Object],script.text = localStorage.getItem(JUX.UXBaseControls.252CB7BF),[object Object],http://stevesouders.com/blog/2011/03/28/storager-case-study-bing-google/,[object Object],flickr.com/photos/nelsoncruz/431244400/,[object Object]
there’s more,[object Object],audio & video tags,[object Object],WebSockets,[object Object],onTouchEnd instead of onClick,[object Object],History  ,[object Object],<a ping ,[object Object],requestAnimationFrame– not timers ,[object Object],native JSON parse/stringify,[object Object],flickr.com/photos/dualphoto/2609096047/,[object Object]
Thanks to…,[object Object],Max Firtman,[object Object],Tony Gentilcore,[object Object],Josh Fraser,[object Object],Kyle Scholz,[object Object],StoyanStefanov,[object Object],Lindsey Simon,[object Object],Annie Sullivan,[object Object],Tim Kadlec,[object Object],Paul Irish,[object Object],Brad Neuberg,[object Object],flickr.com/photos/robertvega/3944132320/,[object Object]
4. Mobile Tools,[object Object]
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
http://pmuellr.github.com/weinre/,[object Object]
speed matters - WPO,[object Object],mobile winners will be fast,[object Object],mobile performance – reduce reqs, resize images, async JS, app cache, localStorage,[object Object],mobile tools – pcapperf, Jdrop, Blaze.io, Weinre,[object Object],takeaways,[object Object],flickr.com/photos/myklroventine/4062102754/,[object Object]
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
Top 100: bytes downloaded,[object Object],desktop,[object Object],mobile,[object Object]
Top 100: size & requests,[object Object],desktop,[object Object],mobile,[object Object]

Contenu connexe

Tendances

High Performance Web Components
High Performance Web ComponentsHigh Performance Web Components
High Performance Web ComponentsSteve Souders
 
Preconnect, prefetch, prerender...
Preconnect, prefetch, prerender...Preconnect, prefetch, prerender...
Preconnect, prefetch, prerender...MilanAryal
 
State of the resource timing api
State of the resource timing apiState of the resource timing api
State of the resource timing apiAaron Peters
 
Website performance optimisation
Website performance optimisationWebsite performance optimisation
Website performance optimisationWebstock
 
Web Performance Optimierung - DWX13
Web Performance Optimierung - DWX13Web Performance Optimierung - DWX13
Web Performance Optimierung - DWX13Walter Ebert
 
[jqconatx] Adaptive Images for Responsive Web Design
[jqconatx] Adaptive Images for Responsive Web Design[jqconatx] Adaptive Images for Responsive Web Design
[jqconatx] Adaptive Images for Responsive Web DesignChristopher Schmitt
 
Mobile Web Speed Bumps
Mobile Web Speed BumpsMobile Web Speed Bumps
Mobile Web Speed BumpsNicholas Zakas
 
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Nicholas Zakas
 
High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)Nicholas Zakas
 
Stefan Judis "Did we(b development) lose the right direction?"
Stefan Judis "Did we(b development) lose the right direction?"Stefan Judis "Did we(b development) lose the right direction?"
Stefan Judis "Did we(b development) lose the right direction?"Fwdays
 
The Future Of Web Frameworks
The Future Of Web FrameworksThe Future Of Web Frameworks
The Future Of Web FrameworksMatt Raible
 
Real World Web Standards
Real World Web StandardsReal World Web Standards
Real World Web Standardsgleddy
 
Web20expo 20080425
Web20expo 20080425Web20expo 20080425
Web20expo 20080425Media Gorod
 
[wvbcn] Adaptive Images in Responsive Web Design
[wvbcn] Adaptive Images in Responsive Web Design[wvbcn] Adaptive Images in Responsive Web Design
[wvbcn] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
Building a PWA - For Everyone Who Is Scared To
Building a PWA - For Everyone Who Is Scared ToBuilding a PWA - For Everyone Who Is Scared To
Building a PWA - For Everyone Who Is Scared ToRaymond Camden
 
Speed is Essential for a Great Web Experience
Speed is Essential for a Great Web ExperienceSpeed is Essential for a Great Web Experience
Speed is Essential for a Great Web ExperienceAndy Davies
 
HTML5: Markup Evolved
HTML5: Markup EvolvedHTML5: Markup Evolved
HTML5: Markup EvolvedBilly Hylton
 

Tendances (20)

do u webview?
do u webview?do u webview?
do u webview?
 
High Performance Web Components
High Performance Web ComponentsHigh Performance Web Components
High Performance Web Components
 
Preconnect, prefetch, prerender...
Preconnect, prefetch, prerender...Preconnect, prefetch, prerender...
Preconnect, prefetch, prerender...
 
State of the resource timing api
State of the resource timing apiState of the resource timing api
State of the resource timing api
 
Website performance optimisation
Website performance optimisationWebsite performance optimisation
Website performance optimisation
 
Web Performance Optimierung - DWX13
Web Performance Optimierung - DWX13Web Performance Optimierung - DWX13
Web Performance Optimierung - DWX13
 
[jqconatx] Adaptive Images for Responsive Web Design
[jqconatx] Adaptive Images for Responsive Web Design[jqconatx] Adaptive Images for Responsive Web Design
[jqconatx] Adaptive Images for Responsive Web Design
 
Mobile Web Speed Bumps
Mobile Web Speed BumpsMobile Web Speed Bumps
Mobile Web Speed Bumps
 
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
 
High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)
 
Frontend SPOF
Frontend SPOFFrontend SPOF
Frontend SPOF
 
Stefan Judis "Did we(b development) lose the right direction?"
Stefan Judis "Did we(b development) lose the right direction?"Stefan Judis "Did we(b development) lose the right direction?"
Stefan Judis "Did we(b development) lose the right direction?"
 
The Future Of Web Frameworks
The Future Of Web FrameworksThe Future Of Web Frameworks
The Future Of Web Frameworks
 
Taking your Web App for a walk
Taking your Web App for a walkTaking your Web App for a walk
Taking your Web App for a walk
 
Real World Web Standards
Real World Web StandardsReal World Web Standards
Real World Web Standards
 
Web20expo 20080425
Web20expo 20080425Web20expo 20080425
Web20expo 20080425
 
[wvbcn] Adaptive Images in Responsive Web Design
[wvbcn] Adaptive Images in Responsive Web Design[wvbcn] Adaptive Images in Responsive Web Design
[wvbcn] Adaptive Images in Responsive Web Design
 
Building a PWA - For Everyone Who Is Scared To
Building a PWA - For Everyone Who Is Scared ToBuilding a PWA - For Everyone Who Is Scared To
Building a PWA - For Everyone Who Is Scared To
 
Speed is Essential for a Great Web Experience
Speed is Essential for a Great Web ExperienceSpeed is Essential for a Great Web Experience
Speed is Essential for a Great Web Experience
 
HTML5: Markup Evolved
HTML5: Markup EvolvedHTML5: Markup Evolved
HTML5: Markup Evolved
 

Similaire à High Performance Mobile (SF/SV Web Perf)

JavaScript Performance (at SFJS)
JavaScript Performance (at SFJS)JavaScript Performance (at SFJS)
JavaScript Performance (at SFJS)Steve Souders
 
JavaScript Perfomance
JavaScript PerfomanceJavaScript Perfomance
JavaScript PerfomanceAnatol Alizar
 
Web Directions South - Even Faster Web Sites
Web Directions South - Even Faster Web SitesWeb Directions South - Even Faster Web Sites
Web Directions South - Even Faster Web SitesSteve Souders
 
WPO Israel Meetup - Mobile Web Performance slides by Steve Souders
WPO Israel Meetup - Mobile Web Performance slides by Steve SoudersWPO Israel Meetup - Mobile Web Performance slides by Steve Souders
WPO Israel Meetup - Mobile Web Performance slides by Steve SoudersGil Givati
 
Build Better Responsive websites. Hrvoje Jurišić
Build Better Responsive websites. Hrvoje JurišićBuild Better Responsive websites. Hrvoje Jurišić
Build Better Responsive websites. Hrvoje JurišićMeetMagentoNY2014
 
Developing High Performance Web Apps
Developing High Performance Web AppsDeveloping High Performance Web Apps
Developing High Performance Web AppsTimothy Fisher
 
Velocity WPO 20101207 steve souders
Velocity WPO 20101207 steve soudersVelocity WPO 20101207 steve souders
Velocity WPO 20101207 steve soudersMichael Zhang
 
Velocity wpo-20101207 stevesouders
Velocity wpo-20101207 stevesoudersVelocity wpo-20101207 stevesouders
Velocity wpo-20101207 stevesouders传贵 谢
 
Building performance into the new yahoo homepage presentation
Building performance into the new yahoo  homepage presentationBuilding performance into the new yahoo  homepage presentation
Building performance into the new yahoo homepage presentationmasudakram
 
Testable client side_mvc_apps_in_javascript
Testable client side_mvc_apps_in_javascriptTestable client side_mvc_apps_in_javascript
Testable client side_mvc_apps_in_javascriptTimothy Oxley
 
The Server Side of Responsive Web Design
The Server Side of Responsive Web DesignThe Server Side of Responsive Web Design
The Server Side of Responsive Web DesignDave Olsen
 
Performance on the Yahoo! Homepage
Performance on the Yahoo! HomepagePerformance on the Yahoo! Homepage
Performance on the Yahoo! HomepageNicholas Zakas
 
Csdn Drdobbs Tenni Theurer Yahoo
Csdn Drdobbs Tenni Theurer YahooCsdn Drdobbs Tenni Theurer Yahoo
Csdn Drdobbs Tenni Theurer Yahooguestb1b95b
 
Web Apps and more
Web Apps and moreWeb Apps and more
Web Apps and moreYan Shi
 
Web app and more
Web app and moreWeb app and more
Web app and morefaming su
 
Faster Frontends
Faster FrontendsFaster Frontends
Faster FrontendsAndy Davies
 
Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011Timothy Fisher
 
Widget Summit 2008
Widget Summit 2008Widget Summit 2008
Widget Summit 2008Volkan Unsal
 
Mobile Apps with PhoneGap and jQuery Mobile
Mobile Apps with PhoneGap and jQuery MobileMobile Apps with PhoneGap and jQuery Mobile
Mobile Apps with PhoneGap and jQuery MobileTerry Ryan
 

Similaire à High Performance Mobile (SF/SV Web Perf) (20)

JavaScript Performance (at SFJS)
JavaScript Performance (at SFJS)JavaScript Performance (at SFJS)
JavaScript Performance (at SFJS)
 
JavaScript Perfomance
JavaScript PerfomanceJavaScript Perfomance
JavaScript Perfomance
 
Web Directions South - Even Faster Web Sites
Web Directions South - Even Faster Web SitesWeb Directions South - Even Faster Web Sites
Web Directions South - Even Faster Web Sites
 
WPO Israel Meetup - Mobile Web Performance slides by Steve Souders
WPO Israel Meetup - Mobile Web Performance slides by Steve SoudersWPO Israel Meetup - Mobile Web Performance slides by Steve Souders
WPO Israel Meetup - Mobile Web Performance slides by Steve Souders
 
Oscon 20080724
Oscon 20080724Oscon 20080724
Oscon 20080724
 
Build Better Responsive websites. Hrvoje Jurišić
Build Better Responsive websites. Hrvoje JurišićBuild Better Responsive websites. Hrvoje Jurišić
Build Better Responsive websites. Hrvoje Jurišić
 
Developing High Performance Web Apps
Developing High Performance Web AppsDeveloping High Performance Web Apps
Developing High Performance Web Apps
 
Velocity WPO 20101207 steve souders
Velocity WPO 20101207 steve soudersVelocity WPO 20101207 steve souders
Velocity WPO 20101207 steve souders
 
Velocity wpo-20101207 stevesouders
Velocity wpo-20101207 stevesoudersVelocity wpo-20101207 stevesouders
Velocity wpo-20101207 stevesouders
 
Building performance into the new yahoo homepage presentation
Building performance into the new yahoo  homepage presentationBuilding performance into the new yahoo  homepage presentation
Building performance into the new yahoo homepage presentation
 
Testable client side_mvc_apps_in_javascript
Testable client side_mvc_apps_in_javascriptTestable client side_mvc_apps_in_javascript
Testable client side_mvc_apps_in_javascript
 
The Server Side of Responsive Web Design
The Server Side of Responsive Web DesignThe Server Side of Responsive Web Design
The Server Side of Responsive Web Design
 
Performance on the Yahoo! Homepage
Performance on the Yahoo! HomepagePerformance on the Yahoo! Homepage
Performance on the Yahoo! Homepage
 
Csdn Drdobbs Tenni Theurer Yahoo
Csdn Drdobbs Tenni Theurer YahooCsdn Drdobbs Tenni Theurer Yahoo
Csdn Drdobbs Tenni Theurer Yahoo
 
Web Apps and more
Web Apps and moreWeb Apps and more
Web Apps and more
 
Web app and more
Web app and moreWeb app and more
Web app and more
 
Faster Frontends
Faster FrontendsFaster Frontends
Faster Frontends
 
Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011
 
Widget Summit 2008
Widget Summit 2008Widget Summit 2008
Widget Summit 2008
 
Mobile Apps with PhoneGap and jQuery Mobile
Mobile Apps with PhoneGap and jQuery MobileMobile Apps with PhoneGap and jQuery Mobile
Mobile Apps with PhoneGap and jQuery Mobile
 

Plus de Steve Souders

Make JavaScript Faster
Make JavaScript FasterMake JavaScript Faster
Make JavaScript FasterSteve Souders
 
The Perception of Speed
The Perception of SpeedThe Perception of Speed
The Perception of SpeedSteve Souders
 
High Performance Web Components
High Performance Web ComponentsHigh Performance Web Components
High Performance Web ComponentsSteve Souders
 
High Performance Snippets
High Performance SnippetsHigh Performance Snippets
High Performance SnippetsSteve Souders
 
Your Script Just Killed My Site
Your Script Just Killed My SiteYour Script Just Killed My Site
Your Script Just Killed My SiteSteve Souders
 
Souders WPO Web 2.0 Expo
Souders WPO Web 2.0 ExpoSouders WPO Web 2.0 Expo
Souders WPO Web 2.0 ExpoSteve Souders
 
Even Faster Web Sites at jQuery Conference '09
Even Faster Web Sites at jQuery Conference '09Even Faster Web Sites at jQuery Conference '09
Even Faster Web Sites at jQuery Conference '09Steve Souders
 
Browserscope Launch at TAE
Browserscope Launch at TAEBrowserscope Launch at TAE
Browserscope Launch at TAESteve Souders
 
Even Faster Web Sites at The Ajax Experience
Even Faster Web Sites at The Ajax ExperienceEven Faster Web Sites at The Ajax Experience
Even Faster Web Sites at The Ajax ExperienceSteve Souders
 
SXSW: Even Faster Web Sites
SXSW: Even Faster Web SitesSXSW: Even Faster Web Sites
SXSW: Even Faster Web SitesSteve Souders
 

Plus de Steve Souders (14)

Make JavaScript Faster
Make JavaScript FasterMake JavaScript Faster
Make JavaScript Faster
 
Metrics of Joy
Metrics of JoyMetrics of Joy
Metrics of Joy
 
The Perception of Speed
The Perception of SpeedThe Perception of Speed
The Perception of Speed
 
High Performance Web Components
High Performance Web ComponentsHigh Performance Web Components
High Performance Web Components
 
Cache is King
Cache is KingCache is King
Cache is King
 
High Performance Snippets
High Performance SnippetsHigh Performance Snippets
High Performance Snippets
 
Your Script Just Killed My Site
Your Script Just Killed My SiteYour Script Just Killed My Site
Your Script Just Killed My Site
 
Souders WPO Web 2.0 Expo
Souders WPO Web 2.0 ExpoSouders WPO Web 2.0 Expo
Souders WPO Web 2.0 Expo
 
JSConf US 2010
JSConf US 2010JSConf US 2010
JSConf US 2010
 
CouchDB Google
CouchDB GoogleCouchDB Google
CouchDB Google
 
Even Faster Web Sites at jQuery Conference '09
Even Faster Web Sites at jQuery Conference '09Even Faster Web Sites at jQuery Conference '09
Even Faster Web Sites at jQuery Conference '09
 
Browserscope Launch at TAE
Browserscope Launch at TAEBrowserscope Launch at TAE
Browserscope Launch at TAE
 
Even Faster Web Sites at The Ajax Experience
Even Faster Web Sites at The Ajax ExperienceEven Faster Web Sites at The Ajax Experience
Even Faster Web Sites at The Ajax Experience
 
SXSW: Even Faster Web Sites
SXSW: Even Faster Web SitesSXSW: Even Faster Web Sites
SXSW: Even Faster Web Sites
 

Dernier

Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 

Dernier (20)

Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 

High Performance Mobile (SF/SV Web Perf)

  • 1.
  • 2.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 19.
  • 20.
  • 21.
  • 22.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 62.
  • 63.
  • 67.
  • 68.
  • 69.
  • 70.

Notes de l'éditeur

  1. Fred Wilson is Managing Partner of two venture capital firms, Flatiron Partners (Yoyodyne, Geocities) and Union Square Ventures (Twitter, delicious,Etsy, Feedburner).SpeedInstant utilitySoftware is mediaLess is moreMake it programmableMake it personalRESTfulDiscoverabilityCleanPlayful
  2. “if we’re able to achieve a similar performance boost across ourothertoplanding pages, we’ll drive in excess of 60 million yearly Firefox downloads.”
  3. This was a ~5 second speed up.
  4. Time measurements from real users.
  5. http://www.nytimes.com/2011/04/18/technology/18mobile.html
  6. Generallyasync &amp; defer scripts start downloading immediately. I wish they’d wait, esp. defer scripts, so they don’t hog connections from the limited pool.
  7. GMail Mobile: http://googlecode.blogspot.com/2009/09/gmail-for-mobile-html5-series-reducing.htmlSproutCore: http://blog.sproutcore.com/post/225219087/faster-loading-through-eval