SlideShare a Scribd company logo
1 of 50
Even Faster Web Sites stevesouders.com/docs/atmedia-20100611.pptx Disclaimer: This content does not necessarily reflect the opinions of my employer. flickr.com/photos/ddfic/722634166/
flickr.com/photos/bekahstargazing/318930460/
the importance of        frontend performance 9% 91% 17% 83% iGoogle, primed cache iGoogle, empty cache http://www.flickr.com/photos/minami/2458184654/
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 flickr.com/photos/motionblur/3049984012/
carsonified.com/blog/business/fred-wilsons-10-golden-principles-of-successful-web-apps/ #1. Speed:        “First and foremost, we believe that speed is more than a feature. Speed is the most important feature.”
en.oreilly.com/velocity2009/public/schedule/detail/8523
en.oreilly.com/velocity2009/public/schedule/detail/8523
Yahoo! 	0.4 sec slower 	traffic  5-9% slideshare.net/stoyan/dont-make-me-wait-or-building-highperformance-web-applications slideshare.net/stoyan/yslow-20-presentation
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 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/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
Web Performance Optimization WPO drives traffic improves UX increases revenue reduces costs flickr.com/photos/pedromourapinheiro/3123885534/
What makes sites feel slow? http://www.flickr.com/photos/kevincollins/234678305/
(lack of) Progressive Rendering [next page being loaded] http://www.flickr.com/photos/kevincollins/234678305/
Search
Sports
News
Shopping
Progressive Enhancement deliver HTML defer JS avoid DOM decorate later
Progressive Enhancement  Progressive Rendering
<script src="A.js"> blocks parallel downloads and rendering 9 secs: IE 6-7, FF 3.0, Chr 1, Op 9-10, Saf 3 7 secs: IE 8, FF 3.5, Chr3, Saf 4 Why focus on JavaScript?
29% avg 229 K avg initial payload and execution
split the initial payload split your JavaScript between what's needed to render the page and everything else defer "everything else" split manually (Page Speed), automatically (Microsoft Doloto) load scripts without blocking http://www.flickr.com/photos/devcentre/108032900/
Loading Scripts Without Blocking XHR Eval XHR Injection Script in Iframe Script DOM Element Script Defer document.write Script Tag
XHR Eval varxhrObj = getXHRObject(); xhrObj.onreadystatechange =    function() {      if ( xhrObj.readyState != 4 ) return; eval(xhrObj.responseText);   }; xhrObj.open('GET', 'A.js', true); xhrObj.send(''); script & page must be same domain massage script?
Script DOM Element var se = document.createElement('script'); se.src = 'http://anydomain.com/A.js'; document.getElementsByTagName('head') [0].appendChild(se);  script & page domains can differ no need to massage JavaScript may not preserve execution order
GMail Mobile <script type="text/javascript"> /* var ...  */ </script> get script DOM element's text remove comments eval() when invoked inline or iframe awesome for prefetching JS that might (not) be needed
window.setTimeout( function(){ var a=document.createElement("script");  a.src="/extern_js/f/CgJlbhz8US8_w.js";  (document.getElementById("xjsd")|| document.body).appendChild(a);}, 0); Google Search
Bootloader.setResourceMap( {"CDYbm":  {"name":"js32kskxvl4c8w0848.pkg.js",   "type":"js",   "src":"http:...1fakc64i.js"},...}); var c=a ? document.body : document.getElementsByTagName('head')[0]; var d=document.createElement('script'); d.type='text/javascript'; d.src=f; c.appendChild(d); Facebook
YUI.presentation.lazyScriptList =  	["http://l.yimg.com/a/combo?arc/yui/substitute_0.1.9.js&arc/yui/oop_0.1.10.js&[...58 more!...]"]; d = w.document;  h = d.getElementsByTagName("head")[0]; n = d.createElement("script"), n.src = url; h.appendChild(n); Yahoo! FP
<script src="http://bits.wikimedia.org/skins-1.5/common/wikibits.js?281c" type="text/javascript"></script> <script src="http://bits.wikimedia.org/skins-1.5/common/jquery.min.js?281c" type="text/javascript"></script> <script src="http://bits.wikimedia.org/skins-1.5/common/ajax.js?281c" type="text/javascript"></script> <script src="http://bits.wikimedia.org/skins-1.5/common/mwsuggest.js?281c" type="text/javascript"></script> <script src="http://bits.wikimedia.org/w/extensions/UsabilityInitiative/js/plugins.combined.min.js?281c" type="text/javascript"></script> <script src="http://bits.wikimedia.org/w/extensions/UsabilityInitiative/Vector/Vector.combined.min.js?281c" type="text/javascript"></script> <script src="http://upload.wikimedia.org/centralnotice/wikipedia/en/centralnotice.js?281c" type="text/javascript"></script> <script src="/w/index.php?title=-&amp;action=raw&amp;gen=js&amp;useskin=vector&amp;281c" type="text/javascript"></script> </head> Wikipedia
<script src="/js/jquery-1.4.2.js"></script> </body> </html> subsequent page: <script src="/js/jquery-1.4.2.js"></script> <script src="/js/toChecklist.js"></script> <script src="/js/tocs.js"></script> </body> </html> Craigslist
<script src="http://include.ebaystatic.com/v4js/en_US/e673/SYS-RA_vjo_e67311309442_1_en_US.js"></script> <script src="http://include.ebaystatic.com/v4js/en_US/e673/GH-RA_ReskinEbay_e67311309442_1_en_US.js"></script> <script src="http://include.ebaystatic.com/v4js/en_US/e673/SYS-RA_vjo_e67311252543_opta_en_US.js"> <script src="http://include.ebaystatic.com/v4js/en_US/e673/CCHP_HomepageV4_SLDR_e67311252543_6_en_US.js"></script> eBay
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js" type="text/javascript"></script> <script src="http://a3.twimg.com/a/1276018586/javascripts/twitter.js?1276019402" type="text/javascript"></script> <script src="http://a1.twimg.com/a/1276018586/javascripts/lib/jquery.tipsy.min.js?1276019402" type="text/javascript"></script> <script src='http://maps.google.com/maps/api/js?sensor=false' type="text/javascript"></script> <script src="http://a1.twimg.com/a/1276018586/javascripts/lib/gears_init.js?1276019402" type="text/javascript"></script> <script src="http://a3.twimg.com/a/1276018586/javascripts/geov1.js?1276019402" type="text/javascript"></script> <script src="http://a1.twimg.com/a/1276018586/javascripts/api.js?1276019402" type="text/javascript"></script> <script src="http://a2.twimg.com/a/1276018586/javascripts/lib/mustache.js?1276019402" type="text/javascript"></script> <script src="http://a3.twimg.com/a/1276018586/javascripts/dismissable.js?1276019402" type="text/javascript"></script> <script src="http://a1.twimg.com/a/1276018586/javascripts/api.js?1276019402" type="text/javascript"></script> <script src="http://a0.twimg.com/a/1276018586/javascripts/controls.js?1276019402" type="text/javascript"></script> <script src="http://a1.twimg.com/a/1276018586/javascripts/hover_cards.js?1276019402" type="text/javascript"></script> </body> </html> Twitter
var a=_d.createElement("script"); a.type="text/javascript"; a.src=b; _d.getElementsByTagName("head")[0].appendChild(a); Bing onload
Ray Morgan Zappos.com MakindeAdeagbo Facebook Jenn Lukas Happy Cog http://www.flickr.com/photos/waltzaround/4041024134/

More Related Content

What's hot

Souders WPO Web2.0Expo
Souders WPO Web2.0ExpoSouders WPO Web2.0Expo
Souders WPO Web2.0Expoguest0b3d92d
 
JavaScript Performance (at SFJS)
JavaScript Performance (at SFJS)JavaScript Performance (at SFJS)
JavaScript Performance (at SFJS)Steve Souders
 
How fast are we going now?
How fast are we going now?How fast are we going now?
How fast are we going now?Steve Souders
 
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
 
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
 
Mobile Web Speed Bumps
Mobile Web Speed BumpsMobile Web Speed Bumps
Mobile Web Speed BumpsNicholas Zakas
 
Preconnect, prefetch, prerender...
Preconnect, prefetch, prerender...Preconnect, prefetch, prerender...
Preconnect, prefetch, prerender...MilanAryal
 
Web Performance Optimierung - DWX13
Web Performance Optimierung - DWX13Web Performance Optimierung - DWX13
Web Performance Optimierung - DWX13Walter Ebert
 
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
 
Web20expo 20080425
Web20expo 20080425Web20expo 20080425
Web20expo 20080425Media Gorod
 
WordPress common SEO issues by Olesia Korobka
WordPress common SEO issues by Olesia KorobkaWordPress common SEO issues by Olesia Korobka
WordPress common SEO issues by Olesia KorobkaAnton Shulke
 
[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
 
High Performance Websites
High Performance WebsitesHigh Performance Websites
High Performance WebsitesParham
 
What does the browser pre-loader do?
What does the browser pre-loader do?What does the browser pre-loader do?
What does the browser pre-loader do?Andy Davies
 
High Performance JavaScript (YUIConf 2010)
High Performance JavaScript (YUIConf 2010)High Performance JavaScript (YUIConf 2010)
High Performance JavaScript (YUIConf 2010)Nicholas Zakas
 

What's hot (20)

Souders WPO Web2.0Expo
Souders WPO Web2.0ExpoSouders WPO Web2.0Expo
Souders WPO Web2.0Expo
 
JavaScript Performance (at SFJS)
JavaScript Performance (at SFJS)JavaScript Performance (at SFJS)
JavaScript Performance (at SFJS)
 
How fast are we going now?
How fast are we going now?How fast are we going now?
How fast are we going now?
 
do u webview?
do u webview?do u webview?
do u webview?
 
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
 
High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)
 
Mobile Web Speed Bumps
Mobile Web Speed BumpsMobile Web Speed Bumps
Mobile Web Speed Bumps
 
Preconnect, prefetch, prerender...
Preconnect, prefetch, prerender...Preconnect, prefetch, prerender...
Preconnect, prefetch, prerender...
 
Web Performance Optimierung - DWX13
Web Performance Optimierung - DWX13Web Performance Optimierung - DWX13
Web Performance Optimierung - DWX13
 
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
 
Oscon 20080724
Oscon 20080724Oscon 20080724
Oscon 20080724
 
Web20expo 20080425
Web20expo 20080425Web20expo 20080425
Web20expo 20080425
 
Frontend SPOF
Frontend SPOFFrontend SPOF
Frontend SPOF
 
WordPress common SEO issues by Olesia Korobka
WordPress common SEO issues by Olesia KorobkaWordPress common SEO issues by Olesia Korobka
WordPress common SEO issues by Olesia Korobka
 
[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
 
High Performance Websites
High Performance WebsitesHigh Performance Websites
High Performance Websites
 
What does the browser pre-loader do?
What does the browser pre-loader do?What does the browser pre-loader do?
What does the browser pre-loader do?
 
High Performance JavaScript (YUIConf 2010)
High Performance JavaScript (YUIConf 2010)High Performance JavaScript (YUIConf 2010)
High Performance JavaScript (YUIConf 2010)
 
Page Speed
Page SpeedPage Speed
Page Speed
 

Similar to @media - Even Faster Web Sites

Drupal Frontend Performance and Scalability
Drupal Frontend Performance and ScalabilityDrupal Frontend Performance and Scalability
Drupal Frontend Performance and ScalabilityAshok Modi
 
Front-end optimisation & jQuery Internals
Front-end optimisation & jQuery InternalsFront-end optimisation & jQuery Internals
Front-end optimisation & jQuery InternalsArtur Cistov
 
Optimising Web Application Frontend
Optimising Web Application FrontendOptimising Web Application Frontend
Optimising Web Application Frontendtkramar
 
JavaScript Perfomance
JavaScript PerfomanceJavaScript Perfomance
JavaScript PerfomanceAnatol Alizar
 
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)Artur Cistov
 
Developing High Performance Web Apps
Developing High Performance Web AppsDeveloping High Performance Web Apps
Developing High Performance Web AppsTimothy Fisher
 
Frontend performance
Frontend performanceFrontend performance
Frontend performancesacred 8
 
Front end optimization
Front end optimizationFront end optimization
Front end optimizationAbhishek Anand
 
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
 
Widget Summit 2008
Widget Summit 2008Widget Summit 2008
Widget Summit 2008Volkan Unsal
 
Building high performing web pages
Building high performing web pagesBuilding high performing web pages
Building high performing web pagesNilesh Bafna
 
PrairieDevCon 2014 - Web Doesn't Mean Slow
PrairieDevCon 2014 -  Web Doesn't Mean SlowPrairieDevCon 2014 -  Web Doesn't Mean Slow
PrairieDevCon 2014 - Web Doesn't Mean Slowdmethvin
 
Faster Frontends
Faster FrontendsFaster Frontends
Faster FrontendsAndy Davies
 
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
 
SearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital Marketers
SearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital MarketersSearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital Marketers
SearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital MarketersDistilled
 
Open-source website performance tools
Open-source website performance toolsOpen-source website performance tools
Open-source website performance toolsArtur Cistov
 
Performace optimization (increase website speed)
Performace optimization (increase website speed)Performace optimization (increase website speed)
Performace optimization (increase website speed)clickramanm
 
Optimizing your WordPress website
Optimizing your WordPress websiteOptimizing your WordPress website
Optimizing your WordPress websitemwfordesigns
 
Optimizing web performance (Fronteers edition)
Optimizing web performance (Fronteers edition)Optimizing web performance (Fronteers edition)
Optimizing web performance (Fronteers edition)Dave Olsen
 

Similar to @media - Even Faster Web Sites (20)

Drupal Frontend Performance and Scalability
Drupal Frontend Performance and ScalabilityDrupal Frontend Performance and Scalability
Drupal Frontend Performance and Scalability
 
Front-end optimisation & jQuery Internals
Front-end optimisation & jQuery InternalsFront-end optimisation & jQuery Internals
Front-end optimisation & jQuery Internals
 
Optimising Web Application Frontend
Optimising Web Application FrontendOptimising Web Application Frontend
Optimising Web Application Frontend
 
JavaScript Perfomance
JavaScript PerfomanceJavaScript Perfomance
JavaScript Perfomance
 
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
 
Developing High Performance Web Apps
Developing High Performance Web AppsDeveloping High Performance Web Apps
Developing High Performance Web Apps
 
Frontend performance
Frontend performanceFrontend performance
Frontend performance
 
Front end optimization
Front end optimizationFront end optimization
Front end optimization
 
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ć
 
Widget Summit 2008
Widget Summit 2008Widget Summit 2008
Widget Summit 2008
 
Building high performing web pages
Building high performing web pagesBuilding high performing web pages
Building high performing web pages
 
PrairieDevCon 2014 - Web Doesn't Mean Slow
PrairieDevCon 2014 -  Web Doesn't Mean SlowPrairieDevCon 2014 -  Web Doesn't Mean Slow
PrairieDevCon 2014 - Web Doesn't Mean Slow
 
Faster Frontends
Faster FrontendsFaster Frontends
Faster Frontends
 
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...
 
SearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital Marketers
SearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital MarketersSearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital Marketers
SearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital Marketers
 
Open-source website performance tools
Open-source website performance toolsOpen-source website performance tools
Open-source website performance tools
 
Performace optimization (increase website speed)
Performace optimization (increase website speed)Performace optimization (increase website speed)
Performace optimization (increase website speed)
 
Optimizing your WordPress website
Optimizing your WordPress websiteOptimizing your WordPress website
Optimizing your WordPress website
 
Optimizing web performance (Fronteers edition)
Optimizing web performance (Fronteers edition)Optimizing web performance (Fronteers edition)
Optimizing web performance (Fronteers edition)
 
Speed!
Speed!Speed!
Speed!
 

More from 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
 

More from 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
 

Recently uploaded

Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo
 
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024The Digital Insurer
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxRustici Software
 
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot ModelNavi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot ModelDeepika Singh
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsNanddeep Nachan
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024The Digital Insurer
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...Martijn de Jong
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobeapidays
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...apidays
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyKhushali Kathiriya
 
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024The Digital Insurer
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Drew Madelung
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Jeffrey Haguewood
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProduct Anonymous
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businesspanagenda
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...Zilliz
 
A Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source MilvusA Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source MilvusZilliz
 

Recently uploaded (20)

Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot ModelNavi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
A Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source MilvusA Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source Milvus
 

@media - Even Faster Web Sites

  • 1. Even Faster Web Sites stevesouders.com/docs/atmedia-20100611.pptx Disclaimer: This content does not necessarily reflect the opinions of my employer. flickr.com/photos/ddfic/722634166/
  • 3. the importance of frontend performance 9% 91% 17% 83% iGoogle, primed cache iGoogle, empty cache http://www.flickr.com/photos/minami/2458184654/
  • 4. 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
  • 5. 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 flickr.com/photos/motionblur/3049984012/
  • 6. carsonified.com/blog/business/fred-wilsons-10-golden-principles-of-successful-web-apps/ #1. Speed: “First and foremost, we believe that speed is more than a feature. Speed is the most important feature.”
  • 9. Yahoo! 0.4 sec slower traffic  5-9% slideshare.net/stoyan/dont-make-me-wait-or-building-highperformance-web-applications slideshare.net/stoyan/yslow-20-presentation
  • 10. blog.mozilla.com/metrics/category/website-optimization/ …shaved 2.2 seconds off the average page load time and increased download conversions by 15.4%!
  • 11. en.oreilly.com/velocity2009/public/schedule/detail/7709 blog.mozilla.com/metrics/category/website-optimization/ …shaved 2.2 seconds off the average page load time and increased download conversions by 15.4%!
  • 13. 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
  • 14.
  • 15. 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
  • 16.
  • 17.
  • 18.
  • 19.
  • 20. Web Performance Optimization WPO drives traffic improves UX increases revenue reduces costs flickr.com/photos/pedromourapinheiro/3123885534/
  • 21. What makes sites feel slow? http://www.flickr.com/photos/kevincollins/234678305/
  • 22. (lack of) Progressive Rendering [next page being loaded] http://www.flickr.com/photos/kevincollins/234678305/
  • 25. News
  • 27.
  • 28.
  • 29.
  • 30.
  • 31. Progressive Enhancement deliver HTML defer JS avoid DOM decorate later
  • 32. Progressive Enhancement  Progressive Rendering
  • 33. <script src="A.js"> blocks parallel downloads and rendering 9 secs: IE 6-7, FF 3.0, Chr 1, Op 9-10, Saf 3 7 secs: IE 8, FF 3.5, Chr3, Saf 4 Why focus on JavaScript?
  • 34. 29% avg 229 K avg initial payload and execution
  • 35. split the initial payload split your JavaScript between what's needed to render the page and everything else defer "everything else" split manually (Page Speed), automatically (Microsoft Doloto) load scripts without blocking http://www.flickr.com/photos/devcentre/108032900/
  • 36. Loading Scripts Without Blocking XHR Eval XHR Injection Script in Iframe Script DOM Element Script Defer document.write Script Tag
  • 37. XHR Eval varxhrObj = getXHRObject(); xhrObj.onreadystatechange = function() { if ( xhrObj.readyState != 4 ) return; eval(xhrObj.responseText); }; xhrObj.open('GET', 'A.js', true); xhrObj.send(''); script & page must be same domain massage script?
  • 38. Script DOM Element var se = document.createElement('script'); se.src = 'http://anydomain.com/A.js'; document.getElementsByTagName('head') [0].appendChild(se); script & page domains can differ no need to massage JavaScript may not preserve execution order
  • 39. GMail Mobile <script type="text/javascript"> /* var ... */ </script> get script DOM element's text remove comments eval() when invoked inline or iframe awesome for prefetching JS that might (not) be needed
  • 40.
  • 41. window.setTimeout( function(){ var a=document.createElement("script"); a.src="/extern_js/f/CgJlbhz8US8_w.js"; (document.getElementById("xjsd")|| document.body).appendChild(a);}, 0); Google Search
  • 42. Bootloader.setResourceMap( {"CDYbm": {"name":"js32kskxvl4c8w0848.pkg.js", "type":"js", "src":"http:...1fakc64i.js"},...}); var c=a ? document.body : document.getElementsByTagName('head')[0]; var d=document.createElement('script'); d.type='text/javascript'; d.src=f; c.appendChild(d); Facebook
  • 43. YUI.presentation.lazyScriptList = ["http://l.yimg.com/a/combo?arc/yui/substitute_0.1.9.js&arc/yui/oop_0.1.10.js&[...58 more!...]"]; d = w.document; h = d.getElementsByTagName("head")[0]; n = d.createElement("script"), n.src = url; h.appendChild(n); Yahoo! FP
  • 44. <script src="http://bits.wikimedia.org/skins-1.5/common/wikibits.js?281c" type="text/javascript"></script> <script src="http://bits.wikimedia.org/skins-1.5/common/jquery.min.js?281c" type="text/javascript"></script> <script src="http://bits.wikimedia.org/skins-1.5/common/ajax.js?281c" type="text/javascript"></script> <script src="http://bits.wikimedia.org/skins-1.5/common/mwsuggest.js?281c" type="text/javascript"></script> <script src="http://bits.wikimedia.org/w/extensions/UsabilityInitiative/js/plugins.combined.min.js?281c" type="text/javascript"></script> <script src="http://bits.wikimedia.org/w/extensions/UsabilityInitiative/Vector/Vector.combined.min.js?281c" type="text/javascript"></script> <script src="http://upload.wikimedia.org/centralnotice/wikipedia/en/centralnotice.js?281c" type="text/javascript"></script> <script src="/w/index.php?title=-&amp;action=raw&amp;gen=js&amp;useskin=vector&amp;281c" type="text/javascript"></script> </head> Wikipedia
  • 45. <script src="/js/jquery-1.4.2.js"></script> </body> </html> subsequent page: <script src="/js/jquery-1.4.2.js"></script> <script src="/js/toChecklist.js"></script> <script src="/js/tocs.js"></script> </body> </html> Craigslist
  • 46. <script src="http://include.ebaystatic.com/v4js/en_US/e673/SYS-RA_vjo_e67311309442_1_en_US.js"></script> <script src="http://include.ebaystatic.com/v4js/en_US/e673/GH-RA_ReskinEbay_e67311309442_1_en_US.js"></script> <script src="http://include.ebaystatic.com/v4js/en_US/e673/SYS-RA_vjo_e67311252543_opta_en_US.js"> <script src="http://include.ebaystatic.com/v4js/en_US/e673/CCHP_HomepageV4_SLDR_e67311252543_6_en_US.js"></script> eBay
  • 47. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js" type="text/javascript"></script> <script src="http://a3.twimg.com/a/1276018586/javascripts/twitter.js?1276019402" type="text/javascript"></script> <script src="http://a1.twimg.com/a/1276018586/javascripts/lib/jquery.tipsy.min.js?1276019402" type="text/javascript"></script> <script src='http://maps.google.com/maps/api/js?sensor=false' type="text/javascript"></script> <script src="http://a1.twimg.com/a/1276018586/javascripts/lib/gears_init.js?1276019402" type="text/javascript"></script> <script src="http://a3.twimg.com/a/1276018586/javascripts/geov1.js?1276019402" type="text/javascript"></script> <script src="http://a1.twimg.com/a/1276018586/javascripts/api.js?1276019402" type="text/javascript"></script> <script src="http://a2.twimg.com/a/1276018586/javascripts/lib/mustache.js?1276019402" type="text/javascript"></script> <script src="http://a3.twimg.com/a/1276018586/javascripts/dismissable.js?1276019402" type="text/javascript"></script> <script src="http://a1.twimg.com/a/1276018586/javascripts/api.js?1276019402" type="text/javascript"></script> <script src="http://a0.twimg.com/a/1276018586/javascripts/controls.js?1276019402" type="text/javascript"></script> <script src="http://a1.twimg.com/a/1276018586/javascripts/hover_cards.js?1276019402" type="text/javascript"></script> </body> </html> Twitter
  • 48. var a=_d.createElement("script"); a.type="text/javascript"; a.src=b; _d.getElementsByTagName("head")[0].appendChild(a); Bing onload
  • 49.
  • 50. Ray Morgan Zappos.com MakindeAdeagbo Facebook Jenn Lukas Happy Cog http://www.flickr.com/photos/waltzaround/4041024134/
  • 51.
  • 52. speed matters focus on the frontend run Page Speed and YSlow progressive enhancement  progressive rendering takeaways http://www.flickr.com/photos/34771728@N00/361526991/
  • 53. Steve Souders @souders, souders@google.com stevesouders.com/docs/atmedia-20100611.pptx flickr.com/photos/nj_dodge/187190601/

Editor's Notes

  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.webpagetest.org/video/compare.php?tests=100607_SN,100607_SM,100607_SK,100607_SJ,100607_S6http://www.google.com/search?q=flowershttp://search.yahoo.com/search?p=flowershttp://www.bing.com/search?q=flowershttp://www.ask.com/web?q=flowershttp://search.aol.com/aol/search?q=flowersIE7, Dulles VA, DSL
  6. http://www.webpagetest.org/video/compare.php?tests=100608_e6e0257fd833ca1eb5669cd42e49570c%2C100608_7b873ad39b553f0dec08b2ec9fb14db0%2C100608_be6ad18d17fdcbd0ad4d5e5430db4815%2C100608_b8b544a8cf71bf02171a2bf473b56a03&amp;thumbSize=150&amp;ival=1000
  7. http://www.webpagetest.org/video/compare.php?tests=100608_1F9%2C100608_1FA%2C100608_1FB%2C100608_1FC%2C100608_1FD&amp;thumbSize=150&amp;ival=1000
  8. http://www.webpagetest.org/video/compare.php?tests=100608_1GG%2C100608_1GF%2C100608_1GD%2C100608_1GC%2C100608_1GB&amp;thumbSize=150&amp;ival=2000
  9. http://www.webpagetest.org/video/view.php?id=100607_5f1b00006d82a016a64b37502ebb0d0ebc73df00
  10. http://www.webpagetest.org/video/view.php?id=100608_9111958456564ddc3b2e49fbfda200112dee9fd2
  11. http://www.webpagetest.org/video/view.php?id=100608_ab0ebdaa528ad2c480ff16fb4e59e50a52bdd71f
  12. http://www.webpagetest.org/video/view.php?id=100608_ecbc76305fba361cafb31c0abd27d46617e65c24
  13. Data source: Steve Souders, updated April 2010
  14. All of these allow for parallel downloads, but none of them allow for parallel JS execution – that&apos;s not possible (currently, WebKit is doing some stuff on that).
  15. 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