SlideShare a Scribd company logo
1 of 45
in search of speed http://stevesouders.com/docs/speedgeeks-20091026.pptx &.zip Disclaimer: This content does not necessarily reflect the opinions of my employer.
Google, Bing biz metrics: http://en.oreilly.com/velocity2009/public/schedule/detail/8523  Yahoo! biz metrics: http://www.slideshare.net/stoyan/yslow-20-presentation Shopzilla biz metrics: http://en.oreilly.com/velocity2009/public/schedule/detail/7709 Netflix outbound traffic: http://en.oreilly.com/velocity2008/public/schedule/detail/3632 Google, Bing charts: http://www.watchingwebsites.com/archives/proof-that-speeding-up-websites-improves-online-business Aptimize WAX: http://blogs.msdn.com/sharepoint/archive/2009/09/28/how-we-did-it-speeding-up-sharepoint-microsoft-com.aspx Strangeloop Networks: http://www.watchingwebsites.com/archives/proof-that-speeding-up-websites-improves-online-business SproutCore: http://blog.sproutcore.com/post/196959232/how-sproutcore-makes-your-app-run-faster HTTP Archive Format: http://www.stevesouders.com/blog/2009/10/19/http-archive-specification-firebug-and-httpwatch/ @font-face: http://www.stevesouders.com/blog/2009/10/13/font-face-and-performance/
17% 83% iGoogle, primed cache the importance of frontend performance 9% 91% iGoogle, empty cache
Make fewer HTTP requests Use a CDN Add an Expires header Gzip components Put stylesheets at the top Put scripts at the bottom Avoid CSS expressions Make JS and CSS external Reduce DNS lookups Minify JS Avoid redirects Remove duplicate scripts Configure ETags Make AJAX cacheable 14 Rules
Even Faster Web Sites Splitting the initial payload Loading scripts without blocking Coupling asynchronous scripts Positioning inline scripts Sharding dominant domains Flushing the document early Using iframes sparingly Simplifying CSS Selectors Understanding Ajax performance..........Doug Crockford Creating responsive web apps............Ben Galbraith, Dion Almaer Writing efficient JavaScript.............Nicholas Zakas Scaling with Comet.....................Dylan Schiemann Going beyond gzipping...............Tony Gentilcore Optimizing images...................Stoyan Stefanov, Nicole Sullivan
Google + 0.4 sec searches  0.6%
Yahoo! + 0.4 sec traffic  5-9%
Bing +2 sec revenue  4.3%
Shopzilla -5 sec revenue X% hwY%
Netflix outbound bandwidth         43%
fast performance = better user experience more traffic more revenue reduced costs
so... why don't more people do it?
it's too hard!
if it wasn't hard everyone would do it the hard is what makes it great
this year's theme: Fast by Default
Aptimize WAX concatenate scripts concatenate stylesheets sprites, data: URIs far future Expires minify JS and CSS automatically in real time
WAX on: http://sharepoint.microsoft.com # requests empty: 96  35 # requests primed: 50  9 scripts 7, stylesheets 12, images 25 pages faster: 46-64% empty, 15-53% primed
Strangeloop Networks "typical ecommerce site" pages per visit: 11  16 time on site: 24  30 mins conversions: 16% order value: 5.5%
Rails far future Expires concatenate scripts domain sharding configure ETags pipeline: async scripts, spriting, minification, flushing
SproutCore concatenate scripts concatenate stylesheets versioning (future Expires) stylesheets at the top scripts at the bottom minify JS & CSS remove dupe scripts
WPO
Why do some sites feel slow ?
Google Mail
Google Docs
AOL
Twitter
ESPN
Best Buy
IKEA
CNN
(lack of) Progressive Rendering
Search
WebPagetest.org VA, UK, NZ IE7, IE8 Dial, DSL, FIOS empty, empty & primed quad core Pat Meenan (AOL)
News
Shopping
Sports
Progressive Enhancement deliver HTML defer JS avoid DOM decorate later
Progressive Enhancement  Progressive Rendering
recent news
finds BG images groups into sprites generates sprite recomputes BG pos injects into page http://spriteme.org/
Browserscope
HTTP Archive Format (HAR)

More Related Content

What's hot

CSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. ControlCSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. ControlChristian Heilmann
 
Super speed around the globe - SearchLeeds 2018
Super speed around the globe - SearchLeeds 2018Super speed around the globe - SearchLeeds 2018
Super speed around the globe - SearchLeeds 2018Bastian Grimm
 
SEO AJAX Crawlability in a Responsive Publisher World
SEO AJAX Crawlability in a Responsive Publisher WorldSEO AJAX Crawlability in a Responsive Publisher World
SEO AJAX Crawlability in a Responsive Publisher WorldEric Wu
 
Black Friday Brazil 2013 web performance metrics
Black Friday Brazil 2013 web performance metricsBlack Friday Brazil 2013 web performance metrics
Black Friday Brazil 2013 web performance metricsricardoa99
 
Web 2.0 Expo: Even Faster Web Sites
Web 2.0 Expo: Even Faster Web SitesWeb 2.0 Expo: Even Faster Web Sites
Web 2.0 Expo: Even Faster Web SitesSteve Souders
 
5 single page application principles developers need to know
5 single page application principles developers need to know5 single page application principles developers need to know
5 single page application principles developers need to knowChris Love
 
Web performance optimization for modern web applications
Web performance optimization for modern web applicationsWeb performance optimization for modern web applications
Web performance optimization for modern web applicationsChris Love
 
Migration Best Practices - SMX London 2018
Migration Best Practices - SMX London 2018Migration Best Practices - SMX London 2018
Migration Best Practices - SMX London 2018Bastian Grimm
 
@media - Even Faster Web Sites
@media - Even Faster Web Sites@media - Even Faster Web Sites
@media - Even Faster Web SitesSteve Souders
 
Technical SEO vs. User Experience - Bastian Grimm, Peak Ace AG
Technical SEO vs. User Experience - Bastian Grimm, Peak Ace AGTechnical SEO vs. User Experience - Bastian Grimm, Peak Ace AG
Technical SEO vs. User Experience - Bastian Grimm, Peak Ace AGBastian Grimm
 
That's crazy! how to build single page web apps
That's crazy! how to build single page web appsThat's crazy! how to build single page web apps
That's crazy! how to build single page web appsChris Love
 
HTML5@电子商务.com
HTML5@电子商务.comHTML5@电子商务.com
HTML5@电子商务.comkaven yan
 
Fast and Easy Website Tuneups
Fast and Easy Website TuneupsFast and Easy Website Tuneups
Fast and Easy Website TuneupsJeff Wisniewski
 
Advanced Technical SEO - Index Bloat & Discovery: from Facets to Javascript F...
Advanced Technical SEO - Index Bloat & Discovery: from Facets to Javascript F...Advanced Technical SEO - Index Bloat & Discovery: from Facets to Javascript F...
Advanced Technical SEO - Index Bloat & Discovery: from Facets to Javascript F...Kahena Digital Marketing
 
Make JavaScript Faster
Make JavaScript FasterMake JavaScript Faster
Make JavaScript FasterSteve Souders
 
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)Steve Souders
 
Performance.now() fast but not furious
Performance.now()   fast but not furiousPerformance.now()   fast but not furious
Performance.now() fast but not furiousAnna Migas
 
Getting Started with SharePoint Patterns and Practices Provisioning Engine-SP...
Getting Started with SharePoint Patterns and Practices Provisioning Engine-SP...Getting Started with SharePoint Patterns and Practices Provisioning Engine-SP...
Getting Started with SharePoint Patterns and Practices Provisioning Engine-SP...Prashant G Bhoyar (Microsoft MVP)
 
10 things to make you a Great Mobile Web Developer
10 things to make you a Great Mobile Web Developer10 things to make you a Great Mobile Web Developer
10 things to make you a Great Mobile Web DeveloperChris Love
 

What's hot (20)

CSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. ControlCSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. Control
 
Super speed around the globe - SearchLeeds 2018
Super speed around the globe - SearchLeeds 2018Super speed around the globe - SearchLeeds 2018
Super speed around the globe - SearchLeeds 2018
 
SEO AJAX Crawlability in a Responsive Publisher World
SEO AJAX Crawlability in a Responsive Publisher WorldSEO AJAX Crawlability in a Responsive Publisher World
SEO AJAX Crawlability in a Responsive Publisher World
 
Black Friday Brazil 2013 web performance metrics
Black Friday Brazil 2013 web performance metricsBlack Friday Brazil 2013 web performance metrics
Black Friday Brazil 2013 web performance metrics
 
Web 2.0 Expo: Even Faster Web Sites
Web 2.0 Expo: Even Faster Web SitesWeb 2.0 Expo: Even Faster Web Sites
Web 2.0 Expo: Even Faster Web Sites
 
5 single page application principles developers need to know
5 single page application principles developers need to know5 single page application principles developers need to know
5 single page application principles developers need to know
 
Web performance optimization for modern web applications
Web performance optimization for modern web applicationsWeb performance optimization for modern web applications
Web performance optimization for modern web applications
 
Migration Best Practices - SMX London 2018
Migration Best Practices - SMX London 2018Migration Best Practices - SMX London 2018
Migration Best Practices - SMX London 2018
 
@media - Even Faster Web Sites
@media - Even Faster Web Sites@media - Even Faster Web Sites
@media - Even Faster Web Sites
 
Technical SEO vs. User Experience - Bastian Grimm, Peak Ace AG
Technical SEO vs. User Experience - Bastian Grimm, Peak Ace AGTechnical SEO vs. User Experience - Bastian Grimm, Peak Ace AG
Technical SEO vs. User Experience - Bastian Grimm, Peak Ace AG
 
That's crazy! how to build single page web apps
That's crazy! how to build single page web appsThat's crazy! how to build single page web apps
That's crazy! how to build single page web apps
 
HTML5@电子商务.com
HTML5@电子商务.comHTML5@电子商务.com
HTML5@电子商务.com
 
Fast and Easy Website Tuneups
Fast and Easy Website TuneupsFast and Easy Website Tuneups
Fast and Easy Website Tuneups
 
Advanced Technical SEO - Index Bloat & Discovery: from Facets to Javascript F...
Advanced Technical SEO - Index Bloat & Discovery: from Facets to Javascript F...Advanced Technical SEO - Index Bloat & Discovery: from Facets to Javascript F...
Advanced Technical SEO - Index Bloat & Discovery: from Facets to Javascript F...
 
do u webview?
do u webview?do u webview?
do u webview?
 
Make JavaScript Faster
Make JavaScript FasterMake JavaScript Faster
Make JavaScript Faster
 
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)
 
Performance.now() fast but not furious
Performance.now()   fast but not furiousPerformance.now()   fast but not furious
Performance.now() fast but not furious
 
Getting Started with SharePoint Patterns and Practices Provisioning Engine-SP...
Getting Started with SharePoint Patterns and Practices Provisioning Engine-SP...Getting Started with SharePoint Patterns and Practices Provisioning Engine-SP...
Getting Started with SharePoint Patterns and Practices Provisioning Engine-SP...
 
10 things to make you a Great Mobile Web Developer
10 things to make you a Great Mobile Web Developer10 things to make you a Great Mobile Web Developer
10 things to make you a Great Mobile Web Developer
 

Viewers also liked

openid-pres
openid-presopenid-pres
openid-presxlight
 
Capacity Management from Flickr
Capacity Management from FlickrCapacity Management from Flickr
Capacity Management from Flickrxlight
 
Optimizing Drupal Performance Zend Acquia Whitepaper Feb2010
Optimizing Drupal Performance Zend Acquia Whitepaper Feb2010Optimizing Drupal Performance Zend Acquia Whitepaper Feb2010
Optimizing Drupal Performance Zend Acquia Whitepaper Feb2010xlight
 
淘宝无线电子商务数据报告
淘宝无线电子商务数据报告淘宝无线电子商务数据报告
淘宝无线电子商务数据报告xlight
 
usenix
usenixusenix
usenixxlight
 
Oracle ha
Oracle haOracle ha
Oracle haxlight
 
http://www.hfadeel.com/Blog/?p=151
http://www.hfadeel.com/Blog/?p=151http://www.hfadeel.com/Blog/?p=151
http://www.hfadeel.com/Blog/?p=151xlight
 
Google: The Chubby Lock Service for Loosely-Coupled Distributed Systems
Google: The Chubby Lock Service for Loosely-Coupled Distributed SystemsGoogle: The Chubby Lock Service for Loosely-Coupled Distributed Systems
Google: The Chubby Lock Service for Loosely-Coupled Distributed Systemsxlight
 
What does it take to make google work at scale
What does it take to make google work at scale What does it take to make google work at scale
What does it take to make google work at scale xlight
 

Viewers also liked (9)

openid-pres
openid-presopenid-pres
openid-pres
 
Capacity Management from Flickr
Capacity Management from FlickrCapacity Management from Flickr
Capacity Management from Flickr
 
Optimizing Drupal Performance Zend Acquia Whitepaper Feb2010
Optimizing Drupal Performance Zend Acquia Whitepaper Feb2010Optimizing Drupal Performance Zend Acquia Whitepaper Feb2010
Optimizing Drupal Performance Zend Acquia Whitepaper Feb2010
 
淘宝无线电子商务数据报告
淘宝无线电子商务数据报告淘宝无线电子商务数据报告
淘宝无线电子商务数据报告
 
usenix
usenixusenix
usenix
 
Oracle ha
Oracle haOracle ha
Oracle ha
 
http://www.hfadeel.com/Blog/?p=151
http://www.hfadeel.com/Blog/?p=151http://www.hfadeel.com/Blog/?p=151
http://www.hfadeel.com/Blog/?p=151
 
Google: The Chubby Lock Service for Loosely-Coupled Distributed Systems
Google: The Chubby Lock Service for Loosely-Coupled Distributed SystemsGoogle: The Chubby Lock Service for Loosely-Coupled Distributed Systems
Google: The Chubby Lock Service for Loosely-Coupled Distributed Systems
 
What does it take to make google work at scale
What does it take to make google work at scale What does it take to make google work at scale
What does it take to make google work at scale
 

Similar to Importance of Frontend Performance

NYC WebPerf Meetup Feb 2020 - Measuring the Adoption of Web Performance Techn...
NYC WebPerf Meetup Feb 2020 - Measuring the Adoption of Web Performance Techn...NYC WebPerf Meetup Feb 2020 - Measuring the Adoption of Web Performance Techn...
NYC WebPerf Meetup Feb 2020 - Measuring the Adoption of Web Performance Techn...Paul Calvano
 
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
 
Technical SEO: Crawl Space Management - SEOZone Istanbul 2014
Technical SEO: Crawl Space Management - SEOZone Istanbul 2014Technical SEO: Crawl Space Management - SEOZone Istanbul 2014
Technical SEO: Crawl Space Management - SEOZone Istanbul 2014Bastian Grimm
 
Beyaz eşya yetkili servis -www.ikinox.com-yetkili servisi - beyaz eşya tamir ...
Beyaz eşya yetkili servis -www.ikinox.com-yetkili servisi - beyaz eşya tamir ...Beyaz eşya yetkili servis -www.ikinox.com-yetkili servisi - beyaz eşya tamir ...
Beyaz eşya yetkili servis -www.ikinox.com-yetkili servisi - beyaz eşya tamir ...haber atv
 
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
 
Raiders of the Fast Start: Frontend Performance Archaeology PerfmattersConf 2018
Raiders of the Fast Start: Frontend Performance Archaeology PerfmattersConf 2018Raiders of the Fast Start: Frontend Performance Archaeology PerfmattersConf 2018
Raiders of the Fast Start: Frontend Performance Archaeology PerfmattersConf 2018Katie Sylor-Miller
 
Deep crawl the chaotic landscape of JavaScript
Deep crawl the chaotic landscape of JavaScript Deep crawl the chaotic landscape of JavaScript
Deep crawl the chaotic landscape of JavaScript Onely
 
A Lap Around Internet Explorer 8
A Lap Around Internet Explorer 8A Lap Around Internet Explorer 8
A Lap Around Internet Explorer 8rsnarayanan
 
High Performance Web Design
High Performance Web DesignHigh Performance Web Design
High Performance Web DesignKoji Ishimoto
 
Fronted development trends - past, present and the future
Fronted development trends - past, present and the futureFronted development trends - past, present and the future
Fronted development trends - past, present and the futureHarijs Deksnis
 
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
 
Web Performance Optimization
Web Performance OptimizationWeb Performance Optimization
Web Performance OptimizationPatrick Meenan
 
Optimization 2020 | Using Edge SEO For Technical Issues ft. Dan Taylor
Optimization 2020 | Using Edge SEO For Technical Issues ft. Dan TaylorOptimization 2020 | Using Edge SEO For Technical Issues ft. Dan Taylor
Optimization 2020 | Using Edge SEO For Technical Issues ft. Dan TaylorDan Taylor
 
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Nicholas Zakas
 
Why Game Developers Should Care About HTML5
Why Game Developers Should Care About HTML5Why Game Developers Should Care About HTML5
Why Game Developers Should Care About HTML5Bramus Van Damme
 
SMX Advanced 2018 SEO for Javascript Frameworks by Patrick Stox
SMX Advanced 2018 SEO for Javascript Frameworks by Patrick StoxSMX Advanced 2018 SEO for Javascript Frameworks by Patrick Stox
SMX Advanced 2018 SEO for Javascript Frameworks by Patrick Stoxpatrickstox
 
Five Pound App talk: hereit.is, Web app architecture, REST, CSS3
Five Pound App talk: hereit.is, Web app architecture, REST, CSS3Five Pound App talk: hereit.is, Web app architecture, REST, CSS3
Five Pound App talk: hereit.is, Web app architecture, REST, CSS3Jamie Matthews
 
The Web Becomes Graceful
The Web Becomes GracefulThe Web Becomes Graceful
The Web Becomes Gracefulcolorhook
 
HTML5 Bootcamp: Essential HTML, CSS, & JavaScript
HTML5 Bootcamp: Essential HTML, CSS, & JavaScriptHTML5 Bootcamp: Essential HTML, CSS, & JavaScript
HTML5 Bootcamp: Essential HTML, CSS, & JavaScriptTodd Anglin
 

Similar to Importance of Frontend Performance (20)

NYC WebPerf Meetup Feb 2020 - Measuring the Adoption of Web Performance Techn...
NYC WebPerf Meetup Feb 2020 - Measuring the Adoption of Web Performance Techn...NYC WebPerf Meetup Feb 2020 - Measuring the Adoption of Web Performance Techn...
NYC WebPerf Meetup Feb 2020 - Measuring the Adoption of Web Performance Techn...
 
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
 
Technical SEO: Crawl Space Management - SEOZone Istanbul 2014
Technical SEO: Crawl Space Management - SEOZone Istanbul 2014Technical SEO: Crawl Space Management - SEOZone Istanbul 2014
Technical SEO: Crawl Space Management - SEOZone Istanbul 2014
 
Beyaz eşya yetkili servis -www.ikinox.com-yetkili servisi - beyaz eşya tamir ...
Beyaz eşya yetkili servis -www.ikinox.com-yetkili servisi - beyaz eşya tamir ...Beyaz eşya yetkili servis -www.ikinox.com-yetkili servisi - beyaz eşya tamir ...
Beyaz eşya yetkili servis -www.ikinox.com-yetkili servisi - beyaz eşya tamir ...
 
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
 
Raiders of the Fast Start: Frontend Performance Archaeology PerfmattersConf 2018
Raiders of the Fast Start: Frontend Performance Archaeology PerfmattersConf 2018Raiders of the Fast Start: Frontend Performance Archaeology PerfmattersConf 2018
Raiders of the Fast Start: Frontend Performance Archaeology PerfmattersConf 2018
 
Deep crawl the chaotic landscape of JavaScript
Deep crawl the chaotic landscape of JavaScript Deep crawl the chaotic landscape of JavaScript
Deep crawl the chaotic landscape of JavaScript
 
A Lap Around Internet Explorer 8
A Lap Around Internet Explorer 8A Lap Around Internet Explorer 8
A Lap Around Internet Explorer 8
 
High Performance Web Design
High Performance Web DesignHigh Performance Web Design
High Performance Web Design
 
Fronted development trends - past, present and the future
Fronted development trends - past, present and the futureFronted development trends - past, present and the future
Fronted development trends - past, present and the future
 
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?"
 
Web Performance Optimization
Web Performance OptimizationWeb Performance Optimization
Web Performance Optimization
 
Optimization 2020 | Using Edge SEO For Technical Issues ft. Dan Taylor
Optimization 2020 | Using Edge SEO For Technical Issues ft. Dan TaylorOptimization 2020 | Using Edge SEO For Technical Issues ft. Dan Taylor
Optimization 2020 | Using Edge SEO For Technical Issues ft. Dan Taylor
 
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
 
Why Game Developers Should Care About HTML5
Why Game Developers Should Care About HTML5Why Game Developers Should Care About HTML5
Why Game Developers Should Care About HTML5
 
SMX Advanced 2018 SEO for Javascript Frameworks by Patrick Stox
SMX Advanced 2018 SEO for Javascript Frameworks by Patrick StoxSMX Advanced 2018 SEO for Javascript Frameworks by Patrick Stox
SMX Advanced 2018 SEO for Javascript Frameworks by Patrick Stox
 
24 SEO Audit Points
24 SEO Audit Points 24 SEO Audit Points
24 SEO Audit Points
 
Five Pound App talk: hereit.is, Web app architecture, REST, CSS3
Five Pound App talk: hereit.is, Web app architecture, REST, CSS3Five Pound App talk: hereit.is, Web app architecture, REST, CSS3
Five Pound App talk: hereit.is, Web app architecture, REST, CSS3
 
The Web Becomes Graceful
The Web Becomes GracefulThe Web Becomes Graceful
The Web Becomes Graceful
 
HTML5 Bootcamp: Essential HTML, CSS, & JavaScript
HTML5 Bootcamp: Essential HTML, CSS, & JavaScriptHTML5 Bootcamp: Essential HTML, CSS, & JavaScript
HTML5 Bootcamp: Essential HTML, CSS, & JavaScript
 

More from xlight

New zealand bloom filter
New zealand bloom filterNew zealand bloom filter
New zealand bloom filterxlight
 
Product manager-chrissyuan v1.0
Product manager-chrissyuan v1.0Product manager-chrissyuan v1.0
Product manager-chrissyuan v1.0xlight
 
Oracle 高可用概述
Oracle 高可用概述Oracle 高可用概述
Oracle 高可用概述xlight
 
Stats partitioned table
Stats partitioned tableStats partitioned table
Stats partitioned tablexlight
 
C/C++与Lua混合编程
C/C++与Lua混合编程C/C++与Lua混合编程
C/C++与Lua混合编程xlight
 
Google: The Chubby Lock Service for Loosely-Coupled Distributed Systems
Google: The Chubby Lock Service for Loosely-Coupled Distributed SystemsGoogle: The Chubby Lock Service for Loosely-Coupled Distributed Systems
Google: The Chubby Lock Service for Loosely-Coupled Distributed Systemsxlight
 
High Availability MySQL with DRBD and Heartbeat MTV Japan Mobile Service
High Availability MySQL with DRBD and Heartbeat MTV Japan Mobile ServiceHigh Availability MySQL with DRBD and Heartbeat MTV Japan Mobile Service
High Availability MySQL with DRBD and Heartbeat MTV Japan Mobile Servicexlight
 
PgSQL vs MySQL
PgSQL vs MySQLPgSQL vs MySQL
PgSQL vs MySQLxlight
 
GOOGLE: Designs, Lessons and Advice from Building Large Distributed Systems
GOOGLE: Designs, Lessons and Advice from Building Large   Distributed Systems GOOGLE: Designs, Lessons and Advice from Building Large   Distributed Systems
GOOGLE: Designs, Lessons and Advice from Building Large Distributed Systems xlight
 
sector-sphere
sector-spheresector-sphere
sector-spherexlight
 
Fixing Twitter Improving The Performance And Scalability Of The Worlds Most ...
Fixing Twitter  Improving The Performance And Scalability Of The Worlds Most ...Fixing Twitter  Improving The Performance And Scalability Of The Worlds Most ...
Fixing Twitter Improving The Performance And Scalability Of The Worlds Most ...xlight
 
Gfarm Fs Tatebe Tip2004
Gfarm Fs Tatebe Tip2004Gfarm Fs Tatebe Tip2004
Gfarm Fs Tatebe Tip2004xlight
 
Make Your web Work
Make Your web WorkMake Your web Work
Make Your web Workxlight
 
mogpres
mogpresmogpres
mogpresxlight
 
moscow_developer_day
moscow_developer_daymoscow_developer_day
moscow_developer_dayxlight
 

More from xlight (17)

New zealand bloom filter
New zealand bloom filterNew zealand bloom filter
New zealand bloom filter
 
Product manager-chrissyuan v1.0
Product manager-chrissyuan v1.0Product manager-chrissyuan v1.0
Product manager-chrissyuan v1.0
 
Oracle 高可用概述
Oracle 高可用概述Oracle 高可用概述
Oracle 高可用概述
 
Stats partitioned table
Stats partitioned tableStats partitioned table
Stats partitioned table
 
C/C++与Lua混合编程
C/C++与Lua混合编程C/C++与Lua混合编程
C/C++与Lua混合编程
 
Google: The Chubby Lock Service for Loosely-Coupled Distributed Systems
Google: The Chubby Lock Service for Loosely-Coupled Distributed SystemsGoogle: The Chubby Lock Service for Loosely-Coupled Distributed Systems
Google: The Chubby Lock Service for Loosely-Coupled Distributed Systems
 
High Availability MySQL with DRBD and Heartbeat MTV Japan Mobile Service
High Availability MySQL with DRBD and Heartbeat MTV Japan Mobile ServiceHigh Availability MySQL with DRBD and Heartbeat MTV Japan Mobile Service
High Availability MySQL with DRBD and Heartbeat MTV Japan Mobile Service
 
PgSQL vs MySQL
PgSQL vs MySQLPgSQL vs MySQL
PgSQL vs MySQL
 
GOOGLE: Designs, Lessons and Advice from Building Large Distributed Systems
GOOGLE: Designs, Lessons and Advice from Building Large   Distributed Systems GOOGLE: Designs, Lessons and Advice from Building Large   Distributed Systems
GOOGLE: Designs, Lessons and Advice from Building Large Distributed Systems
 
UDT
UDTUDT
UDT
 
sector-sphere
sector-spheresector-sphere
sector-sphere
 
Fixing Twitter Improving The Performance And Scalability Of The Worlds Most ...
Fixing Twitter  Improving The Performance And Scalability Of The Worlds Most ...Fixing Twitter  Improving The Performance And Scalability Of The Worlds Most ...
Fixing Twitter Improving The Performance And Scalability Of The Worlds Most ...
 
Gfarm Fs Tatebe Tip2004
Gfarm Fs Tatebe Tip2004Gfarm Fs Tatebe Tip2004
Gfarm Fs Tatebe Tip2004
 
Make Your web Work
Make Your web WorkMake Your web Work
Make Your web Work
 
mogpres
mogpresmogpres
mogpres
 
moscow_developer_day
moscow_developer_daymoscow_developer_day
moscow_developer_day
 
OSGi
OSGiOSGi
OSGi
 

Recently uploaded

Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited
 
Story boards and shot lists for my a level piece
Story boards and shot lists for my a level pieceStory boards and shot lists for my a level piece
Story boards and shot lists for my a level piececharlottematthew16
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek SchlawackFwdays
 
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024The Digital Insurer
 
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...Fwdays
 
SAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxSAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxNavinnSomaal
 
costume and set research powerpoint presentation
costume and set research powerpoint presentationcostume and set research powerpoint presentation
costume and set research powerpoint presentationphoebematthew05
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsSergiu Bodiu
 
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 3652toLead Limited
 
Powerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time ClashPowerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time Clashcharlottematthew16
 
APIForce Zurich 5 April Automation LPDG
APIForce Zurich 5 April  Automation LPDGAPIForce Zurich 5 April  Automation LPDG
APIForce Zurich 5 April Automation LPDGMarianaLemus7
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsMiki Katsuragi
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationSafe Software
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii SoldatenkoFwdays
 
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr LapshynFwdays
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubKalema Edgar
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machinePadma Pradeep
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfAlex Barbosa Coqueiro
 

Recently uploaded (20)

Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
 
Story boards and shot lists for my a level piece
Story boards and shot lists for my a level pieceStory boards and shot lists for my a level piece
Story boards and shot lists for my a level piece
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
 
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024
 
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
 
SAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxSAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptx
 
costume and set research powerpoint presentation
costume and set research powerpoint presentationcostume and set research powerpoint presentation
costume and set research powerpoint presentation
 
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special EditionDMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
 
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
 
Powerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time ClashPowerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time Clash
 
APIForce Zurich 5 April Automation LPDG
APIForce Zurich 5 April  Automation LPDGAPIForce Zurich 5 April  Automation LPDG
APIForce Zurich 5 April Automation LPDG
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering Tips
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko
 
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
 
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptxE-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machine
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
 

Importance of Frontend Performance

  • 1. in search of speed http://stevesouders.com/docs/speedgeeks-20091026.pptx &.zip Disclaimer: This content does not necessarily reflect the opinions of my employer.
  • 2. Google, Bing biz metrics: http://en.oreilly.com/velocity2009/public/schedule/detail/8523 Yahoo! biz metrics: http://www.slideshare.net/stoyan/yslow-20-presentation Shopzilla biz metrics: http://en.oreilly.com/velocity2009/public/schedule/detail/7709 Netflix outbound traffic: http://en.oreilly.com/velocity2008/public/schedule/detail/3632 Google, Bing charts: http://www.watchingwebsites.com/archives/proof-that-speeding-up-websites-improves-online-business Aptimize WAX: http://blogs.msdn.com/sharepoint/archive/2009/09/28/how-we-did-it-speeding-up-sharepoint-microsoft-com.aspx Strangeloop Networks: http://www.watchingwebsites.com/archives/proof-that-speeding-up-websites-improves-online-business SproutCore: http://blog.sproutcore.com/post/196959232/how-sproutcore-makes-your-app-run-faster HTTP Archive Format: http://www.stevesouders.com/blog/2009/10/19/http-archive-specification-firebug-and-httpwatch/ @font-face: http://www.stevesouders.com/blog/2009/10/13/font-face-and-performance/
  • 3.
  • 4. 17% 83% iGoogle, primed cache the importance of frontend performance 9% 91% iGoogle, empty cache
  • 5. Make fewer HTTP requests Use a CDN Add an Expires header Gzip components Put stylesheets at the top Put scripts at the bottom Avoid CSS expressions Make JS and CSS external Reduce DNS lookups Minify JS Avoid redirects Remove duplicate scripts Configure ETags Make AJAX cacheable 14 Rules
  • 6. Even Faster Web Sites Splitting the initial payload Loading scripts without blocking Coupling asynchronous scripts Positioning inline scripts Sharding dominant domains Flushing the document early Using iframes sparingly Simplifying CSS Selectors Understanding Ajax performance..........Doug Crockford Creating responsive web apps............Ben Galbraith, Dion Almaer Writing efficient JavaScript.............Nicholas Zakas Scaling with Comet.....................Dylan Schiemann Going beyond gzipping...............Tony Gentilcore Optimizing images...................Stoyan Stefanov, Nicole Sullivan
  • 7. Google + 0.4 sec searches  0.6%
  • 8. Yahoo! + 0.4 sec traffic  5-9%
  • 9. Bing +2 sec revenue  4.3%
  • 10. Shopzilla -5 sec revenue X% hwY%
  • 12.
  • 13. fast performance = better user experience more traffic more revenue reduced costs
  • 14. so... why don't more people do it?
  • 16.
  • 17. if it wasn't hard everyone would do it the hard is what makes it great
  • 18. this year's theme: Fast by Default
  • 19. Aptimize WAX concatenate scripts concatenate stylesheets sprites, data: URIs far future Expires minify JS and CSS automatically in real time
  • 20. WAX on: http://sharepoint.microsoft.com # requests empty: 96  35 # requests primed: 50  9 scripts 7, stylesheets 12, images 25 pages faster: 46-64% empty, 15-53% primed
  • 21. Strangeloop Networks "typical ecommerce site" pages per visit: 11  16 time on site: 24  30 mins conversions: 16% order value: 5.5%
  • 22. Rails far future Expires concatenate scripts domain sharding configure ETags pipeline: async scripts, spriting, minification, flushing
  • 23. SproutCore concatenate scripts concatenate stylesheets versioning (future Expires) stylesheets at the top scripts at the bottom minify JS & CSS remove dupe scripts
  • 24. WPO
  • 25. Why do some sites feel slow ?
  • 28. AOL
  • 30. ESPN
  • 32. IKEA
  • 33. CNN
  • 36. WebPagetest.org VA, UK, NZ IE7, IE8 Dial, DSL, FIOS empty, empty & primed quad core Pat Meenan (AOL)
  • 37. News
  • 40. Progressive Enhancement deliver HTML defer JS avoid DOM decorate later
  • 41. Progressive Enhancement  Progressive Rendering
  • 43. finds BG images groups into sprites generates sprite recomputes BG pos injects into page http://spriteme.org/
  • 46. @font-face blocks rendering in IE if below SCRIPT tag declare above all SCRIPTs
  • 50. focus on the frontend run YSlow and Page Speed! progressive enhancement  progressive rendering takeaways
  • 51. SPEED is the next competitive advantage use it ...before someone else does
  • 52. Steve Souders souders@google.com http://stevesouders.com/docs/speedgeeks-20091026.pptx & .zip
  • 53. Google, Bing biz metrics: http://en.oreilly.com/velocity2009/public/schedule/detail/8523 Yahoo! biz metrics: http://www.slideshare.net/stoyan/yslow-20-presentation Shopzilla biz metrics: http://en.oreilly.com/velocity2009/public/schedule/detail/7709 Netflix outbound traffic: http://en.oreilly.com/velocity2008/public/schedule/detail/3632 Google, Bing charts: http://www.watchingwebsites.com/archives/proof-that-speeding-up-websites-improves-online-business Aptimize WAX: http://blogs.msdn.com/sharepoint/archive/2009/09/28/how-we-did-it-speeding-up-sharepoint-microsoft-com.aspx Strangeloop Networks: http://www.watchingwebsites.com/archives/proof-that-speeding-up-websites-improves-online-business SproutCore: http://blog.sproutcore.com/post/196959232/how-sproutcore-makes-your-app-run-faster HTTP Archive Format: http://www.stevesouders.com/blog/2009/10/19/http-archive-specification-firebug-and-httpwatch/ @font-face: http://www.stevesouders.com/blog/2009/10/13/font-face-and-performance/

Editor's Notes

  1. YtseJam Photography, "Going nowhere fast", http://www.flickr.com/photos/thatguyfromcchs08/2300190277/
  2. Google, Bing: http://en.oreilly.com/velocity2009/public/schedule/detail/8523 Yahoo!: http://www.slideshare.net/stoyan/yslow-20-presentationShopzilla: http://en.oreilly.com/velocity2009/public/schedule/detail/7709Netflix: http://en.oreilly.com/velocity2008/public/schedule/detail/3632
  3. Google, Bing: http://en.oreilly.com/velocity2009/public/schedule/detail/8523 Yahoo!: http://www.slideshare.net/stoyan/yslow-20-presentationShopzilla: http://en.oreilly.com/velocity2009/public/schedule/detail/7709Netflix: http://en.oreilly.com/velocity2008/public/schedule/detail/3632
  4. Google, Bing: http://en.oreilly.com/velocity2009/public/schedule/detail/8523 Yahoo!: http://www.slideshare.net/stoyan/yslow-20-presentationShopzilla: http://en.oreilly.com/velocity2009/public/schedule/detail/7709Netflix: http://en.oreilly.com/velocity2008/public/schedule/detail/3632
  5. Google, Bing: http://en.oreilly.com/velocity2009/public/schedule/detail/8523 Yahoo!: http://www.slideshare.net/stoyan/yslow-20-presentationShopzilla: http://en.oreilly.com/velocity2009/public/schedule/detail/7709Netflix: http://en.oreilly.com/velocity2008/public/schedule/detail/3632
  6. Google, Bing: http://en.oreilly.com/velocity2009/public/schedule/detail/8523 Yahoo!: http://www.slideshare.net/stoyan/yslow-20-presentationShopzilla: http://en.oreilly.com/velocity2009/public/schedule/detail/7709Netflix: http://en.oreilly.com/velocity2008/public/schedule/detail/3632
  7. http://www.watchingwebsites.com/archives/proof-that-speeding-up-websites-improves-online-business0.21% decrease even 5 weeks after the delay was removed – users perception of a site is learnedNetflix: http://en.oreilly.com/velocity2008/public/schedule/detail/3632
  8. http://www.youtube.com/watch?v=m888nlVxZu8
  9. http://blogs.msdn.com/sharepoint/archive/2009/09/28/how-we-did-it-speeding-up-sharepoint-microsoft-com.aspx
  10. http://blogs.msdn.com/sharepoint/archive/2009/09/28/how-we-did-it-speeding-up-sharepoint-microsoft-com.aspx
  11. http://www.watchingwebsites.com/archives/proof-that-speeding-up-websites-improves-online-business
  12. http://blog.sproutcore.com/post/196959232/how-sproutcore-makes-your-app-run-faster
  13. 3000 kbps up, 600kbps downsingle CPU Thinkpad X61Windows XPIE 7
  14. 3000 kbps up, 600kbps downsingle CPU Thinkpad X61Windows XPIE 7
  15. 3000 kbps up, 600kbps downsingle CPU Thinkpad X61Windows XPIE 7
  16. 3000 kbps up, 600kbps downsingle CPU Thinkpad X61Windows XPIE 7
  17. 3000 kbps up, 600kbps downsingle CPU Thinkpad X61Windows XPIE 7
  18. 3000 kbps up, 600kbps downsingle CPU Thinkpad X61Windows XPIE 7
  19. 3000 kbps up, 600kbps downsingle CPU Thinkpad X61Windows XPIE 7
  20. 3000 kbps up, 600kbps downsingle CPU Thinkpad X61Windows XPIE 7
  21. http://stevesouders.com/p3/index.php?sites=google-search,yahoo-search,bing,ask,aol-search&ival=500
  22. http://stevesouders.com/p3/index.php?sites=yahoo-news,cnn,cnet,google-news,nytimes,msnbc,foxnews&ival=1000
  23. http://stevesouders.com/p3/index.php?sites=ebay,amazon,netflix,target,bestbuy,ikea&ival=2000
  24. http://stevesouders.com/p3/index.php?sites=ebay,amazon,netflix,target,bestbuy,ikea&ival=2000
  25. http://www.stevesouders.com/blog/2009/10/19/http-archive-specification-firebug-and-httpwatch/
  26. http://www.stevesouders.com/blog/2009/10/13/font-face-and-performance/