velocity wpo 20101207 steve souders
DESCRIPTION
5年前只有开发人员关心网站的性能。而今天认识到快速网站重要性的群体已经扩展至更广泛的范围，包括销售团队、市场部门、商业开发人员以及更高的管理层。这就导致一个新产业的出现──WPO（Web Performance Optimization ，网站性能优化）。现有的厂商在增加网站性能服务。创业公司则提供提高用户体验的新技术。主流网站在购买这些服务的同时自己也开发更多的服务和技术。采用WPO技术的网站能吸引更多的用户，提供更好的用户体验，增加收入，并且降低成本。5年来我们走了很长的一段路，让我们共同回顾一下在让网站变得更快的道路上的一些成就。TRANSCRIPT
stevesouders.com/docs/velocity-wpo-20101207.pptx Disclaimer: This content does not necessarily reflect the opinions of my employer.
WPO Industry is Here
the
2004
#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/
en.oreilly.com/velocity2009/public/schedule/detail/8523
en.oreilly.com/velocity2009/public/schedule/detail/8523
slideshare.net/stoyan/yslow-20-presentation slideshare.net/stoyan/dont-make-me-wait-or-building-highperformance-web-applications
…shaved 2.2 seconds off the average page load time and increased download conversions by 15.4%!
blog.mozilla.com/metrics/category/website-optimization/
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
en.oreilly.com/velocity2008/public/schedule/detail/3632
Site speed in search rank
Screen shot of blog post …we've decided to take site speed into account in our search rankings.
googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html
Both combine scripts combine stylesheets add an Expires header gzip responses put stylesheets at the top put scripts at the bottom avoid CSS expressions make JS and CSS external reduce DNS lookups minify JS and CSS avoid redirects remove duplicate scripts make Ajax cacheable reduce cookie size use cookie-free domains don't scale images
YSlow use CSS sprites use a CDN configure ETags use GET for Ajax requests reduce # of DOM elements no 404s avoid image filters optimize favicon
Page Speed defer loading JS remove unused CSS use efficient CSS selectors optimize images optimize order of CSS & JS shard domains leverage proxy caching
drives traffic improves UX increases revenue reduces costs
flickr.com/photos/pedromourapinheiro/3123885534/
Web Performance Optimization
WPO
2004
#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/
Response Time, Page Weight, YSlow Grade
Strong Correlation
total page weight response time
inverse YSlow grade
correlation(resp time, page weight) = 0.94 correlation(inverse YSlow, resp time) = 0.76
correlation(inverse YSlow, page weight) = 0.59
WPO evolution
WPO evolution Yahoo! Boomerang
stevesouders.com/episodes
Jiffy
WebPagetest.org
ShowSlow.com
measure
WPO evolution Firebug
Fiddler
HttpWatch
Speed Tracer
Web Inspector
dynaTrace
measure profile
WPO evolution domain sharding
concatenation
sprites vs. MHTML
WebP
prefetch
SPDY, cwnd=10
measure profile research
WPO evolution
High Performance & Even Faster Web Sites
High Performance JS code.google.com/speed/
developer.yahoo.com/performance/
stevesouders.com/blog
perfplanet.com/
measure profile research best practices
WPO evolution
Velocity China!
workshops
university
case studies
blogs
measure profile research best practices evangelize
WPO evolution
Page Speed
YSlow
measure profile research best practices evangelize lint
WPO evolution measure profile research best practices evangelize lint automate
Search
Shopping
flickr.com/photos/waltzaround/4041024134/
Ray Morgan Zappos.com
Makinde Adeagbo Facebook
Jenn Lukas Happy Cog
WPO evolution measure profile research best practices evangelize lint automate
for mobile
WPO evolution measure profile research best practices evangelize lint automate
for mobile
Steve Souders @souders
stevesouders.com/docs/velocity-wpo-20101207.pptx flickr.com/photos/myklroventine/4062102754/