Souders WPO Web2.0Expo
-
Upload
guest0b3d92d -
Category
Documents
-
view
1.058 -
download
1
Transcript of Souders WPO Web2.0Expo
![Page 1: Souders WPO Web2.0Expo](https://reader035.fdocuments.in/reader035/viewer/2022062512/554a517fb4c905572f8b48dc/html5/thumbnails/1.jpg)
stevesouders.com/docs/web20expo-20100505.pptx
slideshare.net/souders/souders-wpo-web20expo
Disclaimer: This content does not necessarily reflect the opinions of my employer.
flickr.com/photos/mubashir/2616724942/
Web
Performance
OptimizationWPO
![Page 2: Souders WPO Web2.0Expo](https://reader035.fdocuments.in/reader035/viewer/2022062512/554a517fb4c905572f8b48dc/html5/thumbnails/2.jpg)
flickr.com/photos/bekahstargazing/318930460/
![Page 3: Souders WPO Web2.0Expo](https://reader035.fdocuments.in/reader035/viewer/2022062512/554a517fb4c905572f8b48dc/html5/thumbnails/3.jpg)
1. Speed - First and foremost, we believe that speed
is more than a feature. Speed is the most important
feature.
carsonified.com/blog/business/fred-wilsons-10-golden-principles-of-successful-web-apps/
![Page 4: Souders WPO Web2.0Expo](https://reader035.fdocuments.in/reader035/viewer/2022062512/554a517fb4c905572f8b48dc/html5/thumbnails/4.jpg)
Yahoo!
0.4 sec slower
traffic 5-9%
slideshare.net/stoyan/yslow-20-presentationslideshare.net/stoyan/dont-make-me-wait-or-building-highperformance-web-applications
![Page 5: Souders WPO Web2.0Expo](https://reader035.fdocuments.in/reader035/viewer/2022062512/554a517fb4c905572f8b48dc/html5/thumbnails/5.jpg)
en.oreilly.com/velocity2009/public/schedule/detail/8523
![Page 6: Souders WPO Web2.0Expo](https://reader035.fdocuments.in/reader035/viewer/2022062512/554a517fb4c905572f8b48dc/html5/thumbnails/6.jpg)
en.oreilly.com/velocity2009/public/schedule/detail/8523
![Page 7: Souders WPO Web2.0Expo](https://reader035.fdocuments.in/reader035/viewer/2022062512/554a517fb4c905572f8b48dc/html5/thumbnails/7.jpg)
blog.mozilla.com/metrics/category/website-optimization/
…shaved 2.2 seconds off the average page load
time and increased download conversions by
15.4%!
![Page 8: Souders WPO Web2.0Expo](https://reader035.fdocuments.in/reader035/viewer/2022062512/554a517fb4c905572f8b48dc/html5/thumbnails/8.jpg)
blog.mozilla.com/metrics/category/website-optimization/
…shaved 2.2 seconds off the average page load
time and increased download conversions by
15.4%!
en.oreilly.com/velocity2009/public/schedule/detail/7709
![Page 9: Souders WPO Web2.0Expo](https://reader035.fdocuments.in/reader035/viewer/2022062512/554a517fb4c905572f8b48dc/html5/thumbnails/9.jpg)
en.oreilly.com/velocity2008/public/schedule/detail/3632
![Page 10: Souders WPO Web2.0Expo](https://reader035.fdocuments.in/reader035/viewer/2022062512/554a517fb4c905572f8b48dc/html5/thumbnails/10.jpg)
Site speed in search rank
Screen shot of blog post
googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html
…we've decided to take site speed into account in
our search rankings.
![Page 11: Souders WPO Web2.0Expo](https://reader035.fdocuments.in/reader035/viewer/2022062512/554a517fb4c905572f8b48dc/html5/thumbnails/11.jpg)
drives traffic
improves UX
increases revenue
reduces costs flickr.com/photos/pedromourapinheiro/3123885534/
Web
Performance
OptimizationWPO
![Page 12: Souders WPO Web2.0Expo](https://reader035.fdocuments.in/reader035/viewer/2022062512/554a517fb4c905572f8b48dc/html5/thumbnails/12.jpg)
top 10 WPO predictions
flickr.com/photos/eole/380316678/
#10: fast-by-default
• CMSs
• PHP, Rails, Python
• cloud – AWS, GAE
• JS libraries
• browsers, servers, proxies
![Page 13: Souders WPO Web2.0Expo](https://reader035.fdocuments.in/reader035/viewer/2022062512/554a517fb4c905572f8b48dc/html5/thumbnails/13.jpg)
top 10 WPO predictions
flickr.com/photos/eole/380316678/
#9: visibility into the browser
• JS, CSS, paint, DOM
• dynaTrace
• Speed Tracer
![Page 14: Souders WPO Web2.0Expo](https://reader035.fdocuments.in/reader035/viewer/2022062512/554a517fb4c905572f8b48dc/html5/thumbnails/14.jpg)
top 10 WPO predictions
flickr.com/photos/eole/380316678/
#8: consolidation
• tools
• metrics
• services
![Page 15: Souders WPO Web2.0Expo](https://reader035.fdocuments.in/reader035/viewer/2022062512/554a517fb4c905572f8b48dc/html5/thumbnails/15.jpg)
top 10 WPO predictions
flickr.com/photos/eole/380316678/
#7: TCP, HTTP
• SPDY
• pipelining
• resource packages
![Page 16: Souders WPO Web2.0Expo](https://reader035.fdocuments.in/reader035/viewer/2022062512/554a517fb4c905572f8b48dc/html5/thumbnails/16.jpg)
top 10 WPO predictions
flickr.com/photos/eole/380316678/
#6: standards
• terminology
• timing
• benchmarks
• testing
![Page 17: Souders WPO Web2.0Expo](https://reader035.fdocuments.in/reader035/viewer/2022062512/554a517fb4c905572f8b48dc/html5/thumbnails/17.jpg)
top 10 WPO predictions
flickr.com/photos/eole/380316678/
#5: industry organizations
• professional groups
• training, certification
• standards bodies
• cooperatives
![Page 18: Souders WPO Web2.0Expo](https://reader035.fdocuments.in/reader035/viewer/2022062512/554a517fb4c905572f8b48dc/html5/thumbnails/18.jpg)
top 10 WPO predictions
flickr.com/photos/eole/380316678/
#4: data
• Internet Performance Archive
• network parameters
• DNS
• cache
![Page 19: Souders WPO Web2.0Expo](https://reader035.fdocuments.in/reader035/viewer/2022062512/554a517fb4c905572f8b48dc/html5/thumbnails/19.jpg)
top 10 WPO predictions
flickr.com/photos/eole/380316678/
#3: green
• Shopzilla – half the servers
• Netflix – half the bandwidth
• power consumption
• carbon footprint
![Page 20: Souders WPO Web2.0Expo](https://reader035.fdocuments.in/reader035/viewer/2022062512/554a517fb4c905572f8b48dc/html5/thumbnails/20.jpg)
top 10 WPO predictions
flickr.com/photos/eole/380316678/
#2: mobile
• metrics
• long poles
• root causes
• solutions, best practices
• tools, automation
• evangelism, case studies
![Page 21: Souders WPO Web2.0Expo](https://reader035.fdocuments.in/reader035/viewer/2022062512/554a517fb4c905572f8b48dc/html5/thumbnails/21.jpg)
top 10 WPO predictions
flickr.com/photos/eole/380316678/
#1: speed’s a differentiator
• devices
• vendor selection
• reviews
• user loyalty
![Page 22: Souders WPO Web2.0Expo](https://reader035.fdocuments.in/reader035/viewer/2022062512/554a517fb4c905572f8b48dc/html5/thumbnails/22.jpg)
P3PCPerformance of 3rd Party Content
AdsWidgetsAnalytics
flickr.com/photos/ntr23/729463293/
![Page 23: Souders WPO Web2.0Expo](https://reader035.fdocuments.in/reader035/viewer/2022062512/554a517fb4c905572f8b48dc/html5/thumbnails/23.jpg)
main page
3rd
party content
2005 2010
performance badnessopportunities
![Page 24: Souders WPO Web2.0Expo](https://reader035.fdocuments.in/reader035/viewer/2022062512/554a517fb4c905572f8b48dc/html5/thumbnails/24.jpg)
stevesouders.com/p3pc/
![Page 25: Souders WPO Web2.0Expo](https://reader035.fdocuments.in/reader035/viewer/2022062512/554a517fb4c905572f8b48dc/html5/thumbnails/25.jpg)
document.getElementsByTagName('head‘)[0] .appendChild(domscript);
document.documentElement.firstChild .appendChild(ga);
s = document.getElementsByTagName ('script')[0];
s.parentNode.insertBefore(ga, s);
flickr.com/photos/amodiovalerioverde/425333516/
appendChild or insertBefore?
- Google Analytics (Dec 2009)
- Souders (May 2008)
- Google Analytics (Feb 2010)
![Page 26: Souders WPO Web2.0Expo](https://reader035.fdocuments.in/reader035/viewer/2022062512/554a517fb4c905572f8b48dc/html5/thumbnails/26.jpg)
if (q.insertBefore) {
var s = _get(q.insertBefore, id);
if (s) {
s.parentNode.insertBefore(n, s);
}
} else {
h.appendChild(n);
}
flickr.com/photos/amodiovalerioverde/425333516/
appendChild or insertBefore?
- YUI Loader 2.6.0 (2008)
![Page 27: Souders WPO Web2.0Expo](https://reader035.fdocuments.in/reader035/viewer/2022062512/554a517fb4c905572f8b48dc/html5/thumbnails/27.jpg)
b = this.getHardpoint(); f = document.createElement('script');f.src = g;f.type = 'text/javascript';f.async = true;b.appendChild(f);
getHardpoint: function() { var c, b = document.getElementsByTagName('head'); if (b.length) { c = b[0]; } else c = document.body; this._hardpoint = c;}
flickr.com/photos/amodiovalerioverde/425333516/
appendChild or insertBefore?
- Facebook (April 18, 2010)
![Page 28: Souders WPO Web2.0Expo](https://reader035.fdocuments.in/reader035/viewer/2022062512/554a517fb4c905572f8b48dc/html5/thumbnails/28.jpg)
head = document.getElementsByTagName ("head")[0] || document.documentElement;
// Use insertBefore instead of appendChild to circumvent an IE6 bug.
// This arises when a base node is used (#2709 and #4378).
head.insertBefore(script, head.firstChild);
flickr.com/photos/amodiovalerioverde/425333516/
appendChild or insertBefore?
- jQuery
![Page 29: Souders WPO Web2.0Expo](https://reader035.fdocuments.in/reader035/viewer/2022062512/554a517fb4c905572f8b48dc/html5/thumbnails/29.jpg)
var f=document.getElementsByTagName("script");var b=f[f.length-1]; // b is last script tagif(b==null){ return; }var i=document.createElement("script");i.language="javascript"; // i is a script elementi.setAttribute("type","text/javascript");var j=""; // j is a stringj+="document.write('<scr'+'ipt language=\"javascript\"
src=\""+c+"\"></scr'+'ipt>');";var g=document.createTextNode(j); // not usedb.parentNode.insertBefore(i,b);appendChild(i,j);
function appendChild(a,b){ if(null==a.canHaveChildren||a.canHaveChildren){ a.appendChild(document.createTextNode(b)); } else{ a.text=b;}}
flickr.com/photos/amodiovalerioverde/425333516/
appendChild or insertBefore?
- Collective Media
![Page 30: Souders WPO Web2.0Expo](https://reader035.fdocuments.in/reader035/viewer/2022062512/554a517fb4c905572f8b48dc/html5/thumbnails/30.jpg)
“Frag Tag”<FRAG><script src=“snippet.js”></script></FRAG>
doesn’t block renderingasync document.writeJavaScript sandboxingjust a twinkle in my eye
Alex Russell
flickr.com/photos/bestrated1/2141687384/
snippet
frag tag
![Page 31: Souders WPO Web2.0Expo](https://reader035.fdocuments.in/reader035/viewer/2022062512/554a517fb4c905572f8b48dc/html5/thumbnails/31.jpg)
browser wishlistFrag tagSPDYnon-blocking scriptsSCRIPT attributesresource packagesborder-radiuscache redirectslink prefetchWeb Timing specremote JS debuggingweb sockets
flickr.com/photos/eole/380316678/
History
progressive XHR
anchor ping
stylesheet, inline js
inline script defer
@import
@font-face
stylesheets,iframes
paint events
missing schema
stevesouders.com/blog/2010/02/15/browser-performance-wishlist/
![Page 32: Souders WPO Web2.0Expo](https://reader035.fdocuments.in/reader035/viewer/2022062512/554a517fb4c905572f8b48dc/html5/thumbnails/32.jpg)
browser disk cache
default size is too small• IE: 8-50M• Firefox: 50M• Chrome: < 80M• Opera: 20M
eviction algorithm improvements• content-type: script > image• past impact: 1000 ms > 100 ms• preferred sites
stevesouders.com/cache.phpflickr.com/photos/minami/2458184654/
![Page 33: Souders WPO Web2.0Expo](https://reader035.fdocuments.in/reader035/viewer/2022062512/554a517fb4c905572f8b48dc/html5/thumbnails/33.jpg)
news
flickr.com/photos/motionblur/3049984012/
![Page 34: Souders WPO Web2.0Expo](https://reader035.fdocuments.in/reader035/viewer/2022062512/554a517fb4c905572f8b48dc/html5/thumbnails/34.jpg)
Browserscope
![Page 35: Souders WPO Web2.0Expo](https://reader035.fdocuments.in/reader035/viewer/2022062512/554a517fb4c905572f8b48dc/html5/thumbnails/35.jpg)
HTTP Archive Format
(HAR)
flickr.com/photos/duncanfawkes/2585929403/
![Page 36: Souders WPO Web2.0Expo](https://reader035.fdocuments.in/reader035/viewer/2022062512/554a517fb4c905572f8b48dc/html5/thumbnails/36.jpg)
stevesouders.com/flint/
![Page 37: Souders WPO Web2.0Expo](https://reader035.fdocuments.in/reader035/viewer/2022062512/554a517fb4c905572f8b48dc/html5/thumbnails/37.jpg)
![Page 38: Souders WPO Web2.0Expo](https://reader035.fdocuments.in/reader035/viewer/2022062512/554a517fb4c905572f8b48dc/html5/thumbnails/38.jpg)
speed matters
a lot is coming in WPO
guard against 3rd party content
stevesouders.com/cache.php
takeaways
flickr.com/photos/34771728@N00/361526991/
![Page 39: Souders WPO Web2.0Expo](https://reader035.fdocuments.in/reader035/viewer/2022062512/554a517fb4c905572f8b48dc/html5/thumbnails/39.jpg)
Steve Souders
@souders, [email protected]
stevesouders.com/docs/web20expo-20100505.pptx
flickr.com/photos/nj_dodge/187190601/