SlideShare ist ein Scribd-Unternehmen logo
1 von 45
Web Performance Optimization stevesouders.com/docs/webstock-20110217.pptx Disclaimer: This content does not necessarily reflect the opinions of my employer. flickr.com/photos/ddfic/722634166/
flickr.com/photos/bekahstargazing/318930460/
2004
 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
slideshare.net/EdmundsLabs/how-edmunds-got-in-the-fast-lane-80-reduction-in-page-load-time-in-3-simple-steps-6593377
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
Web Performance Optimization WPO drives traffic improves UX increases revenue reduces costs flickr.com/photos/pedromourapinheiro/3123885534/
What makes sites feel slow? flickr.com/photos/kevincollins/234678305/
(lack of) Progressive Rendering [next page being loaded] flickr.com/photos/kevincollins/234678305/
Google Yahoo Bing Ask does this matter?
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-9, FF 3.6, Chr6, Saf 4 Why focus on JavaScript?
Loading Scripts Without Blocking XHR Eval XHR Injection Script in Iframe Script DOM Element Script Defer document.write Script Tag
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 may not preserve execution order
MeeboIframed JS var iframe = document.createElement('iframe'); document.body.appendChild(iframe); var doc = iframe.contentWindow.document; doc.open().write('<body onload="insertJS()">'); doc.close(); loads asynchronously delays parent’s load event: FF, Chr, Saf great for 3rd party scripts better for sandboxing & security avoids iframe src roundtrip
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
ControlJSa JavaScript module for making scripts load faster control.js loads async varcjsscript = document.createElement('script'); cjsscript.src = "control.js"; varcjssib = document.getElementsByTagName('script')[0]; cjssib.parentNode.insertBefore(cjsscript, cjssib);
ControlJSa JavaScript module for making scripts load faster just change HTML inline & external scripts <script type="text/cjs" data-cjssrc="main.js"> </script> <script type="text/cjs"> var name = getName(); </script>
ControlJSa JavaScript module for making scripts load faster async downloads delays execution 1st pass: if (IE || Opera) { new Image(); } else { document.createElement(‘object’); } 2nd pass: external: document.createElement(‘script’); inline: window.execScript(sCode) or window.eval.call(window, sCode)
ControlJSa JavaScript module for making scripts load faster downloads without executing <script type="text/cjs" data-cjssrc="main.js” data-cjsexec=false> <script> later (if needed): CJS.execScript(src);
ControlJSa JavaScript module for making scripts load faster handles (some) document.write ,[object Object]
set SPAN innerHTML if there’s a write
parse out SCRIPT tags & add SCRIPT elembetter solutions: ,[object Object]
GhostWriter – http://digital-fulcrum.com/solutions /ghostwriter-complete-control/,[object Object]
ControlJSa JavaScript module for making scripts load faster http://stevesouders.com/controljs/ http://code.google.com/p/controljs/ http://groups.google.com/group/controljs
slideshare.net/CMSummit/ms-internet-trends060710final
slideshare.net/CMSummit/ms-internet-trends060710final
slideshare.net/CMSummit/ms-internet-trends060710final
to intr to intr Twitter iPhone app open timeline
Twitter iPhone app execute search
Twitter iPhone app open timeline
just released this morning 1am

Weitere ähnliche Inhalte

Was ist angesagt?

Souders WPO Web2.0Expo
Souders WPO Web2.0ExpoSouders WPO Web2.0Expo
Souders WPO Web2.0Expo
guest0b3d92d
 
Øredev 2014
Øredev 2014Øredev 2014
Øredev 2014
olataube
 
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
Chris Love
 
Unobtrusive javascript
Unobtrusive javascriptUnobtrusive javascript
Unobtrusive javascript
Lee Jordan
 

Was ist angesagt? (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)
 
Web Performance Optimierung - DWX13
Web Performance Optimierung - DWX13Web Performance Optimierung - DWX13
Web Performance Optimierung - DWX13
 
do u webview?
do u webview?do u webview?
do u webview?
 
Webworks
WebworksWebworks
Webworks
 
Mobile Web Speed Bumps
Mobile Web Speed BumpsMobile Web Speed Bumps
Mobile Web Speed Bumps
 
Øredev 2014
Øredev 2014Øredev 2014
Øredev 2014
 
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
 
Five things I learned building s Saas App with Vue.js
Five things I learned building s Saas App with Vue.jsFive things I learned building s Saas App with Vue.js
Five things I learned building s Saas App with Vue.js
 
Faster Frontends
Faster FrontendsFaster Frontends
Faster Frontends
 
Introduction à AngularJS
Introduction à AngularJSIntroduction à AngularJS
Introduction à AngularJS
 
Preconnect, prefetch, prerender...
Preconnect, prefetch, prerender...Preconnect, prefetch, prerender...
Preconnect, prefetch, prerender...
 
Web Performance - A Whistlestop Tour
Web Performance - A Whistlestop TourWeb Performance - A Whistlestop Tour
Web Performance - A Whistlestop Tour
 
Joomla wireframing Template - Joomladay Netherlands 2014 #jd14nl
Joomla wireframing Template - Joomladay Netherlands 2014 #jd14nlJoomla wireframing Template - Joomladay Netherlands 2014 #jd14nl
Joomla wireframing Template - Joomladay Netherlands 2014 #jd14nl
 
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
 
8 Most Common Joomla! Hacks and How to Avoid Them
8 Most Common Joomla! Hacks and How to Avoid Them8 Most Common Joomla! Hacks and How to Avoid Them
8 Most Common Joomla! Hacks and How to Avoid Them
 
Sniffing the Mobile Context
Sniffing the Mobile ContextSniffing the Mobile Context
Sniffing the Mobile Context
 
Progressive Enhancement
Progressive EnhancementProgressive Enhancement
Progressive Enhancement
 
Unobtrusive javascript
Unobtrusive javascriptUnobtrusive javascript
Unobtrusive javascript
 
The Case for HTTP/2 - Internetdagarna 2015 - Stockholm
The Case for HTTP/2  - Internetdagarna 2015 - StockholmThe Case for HTTP/2  - Internetdagarna 2015 - Stockholm
The Case for HTTP/2 - Internetdagarna 2015 - Stockholm
 

Ähnlich wie Website performance optimisation

Web Directions South - Even Faster Web Sites
Web Directions South - Even Faster Web SitesWeb Directions South - Even Faster Web Sites
Web Directions South - Even Faster Web Sites
Steve Souders
 
Widget Summit 2008
Widget Summit 2008Widget Summit 2008
Widget Summit 2008
Volkan Unsal
 
Souders WPO Web 2.0 Expo
Souders WPO Web 2.0 ExpoSouders WPO Web 2.0 Expo
Souders WPO Web 2.0 Expo
Steve Souders
 
Single Page WebApp Architecture
Single Page WebApp ArchitectureSingle Page WebApp Architecture
Single Page WebApp Architecture
Morgan Cheng
 
Optimising Web Application Frontend
Optimising Web Application FrontendOptimising Web Application Frontend
Optimising Web Application Frontend
tkramar
 

Ähnlich wie Website performance optimisation (20)

Web Directions South - Even Faster Web Sites
Web Directions South - Even Faster Web SitesWeb Directions South - Even Faster Web Sites
Web Directions South - Even Faster Web Sites
 
JavaScript Perfomance
JavaScript PerfomanceJavaScript Perfomance
JavaScript Perfomance
 
Widget Summit 2008
Widget Summit 2008Widget Summit 2008
Widget Summit 2008
 
Oscon 20080724
Oscon 20080724Oscon 20080724
Oscon 20080724
 
Souders WPO Web 2.0 Expo
Souders WPO Web 2.0 ExpoSouders WPO Web 2.0 Expo
Souders WPO Web 2.0 Expo
 
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
 
Build Better Responsive websites. Hrvoje Jurišić
Build Better Responsive websites. Hrvoje JurišićBuild Better Responsive websites. Hrvoje Jurišić
Build Better Responsive websites. Hrvoje Jurišić
 
Developing High Performance Web Apps
Developing High Performance Web AppsDeveloping High Performance Web Apps
Developing High Performance Web Apps
 
Testable client side_mvc_apps_in_javascript
Testable client side_mvc_apps_in_javascriptTestable client side_mvc_apps_in_javascript
Testable client side_mvc_apps_in_javascript
 
Web performance tuning
Web performance tuning Web performance tuning
Web performance tuning
 
Single Page WebApp Architecture
Single Page WebApp ArchitectureSingle Page WebApp Architecture
Single Page WebApp Architecture
 
Web20expo 20080425
Web20expo 20080425Web20expo 20080425
Web20expo 20080425
 
Web Performance Optimization
Web Performance OptimizationWeb Performance Optimization
Web Performance Optimization
 
The Structure of Web Code: A Case For Polymer, November 1, 2014
The Structure of Web Code: A Case For Polymer, November 1, 2014The Structure of Web Code: A Case For Polymer, November 1, 2014
The Structure of Web Code: A Case For Polymer, November 1, 2014
 
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
 
High Performance Snippets
High Performance SnippetsHigh Performance Snippets
High Performance Snippets
 
Speed is Essential for a Great Web Experience (Canvas Conf Version)
Speed is Essential for a Great Web Experience (Canvas Conf Version)Speed is Essential for a Great Web Experience (Canvas Conf Version)
Speed is Essential for a Great Web Experience (Canvas Conf Version)
 
JavaScript Performance Patterns
JavaScript Performance PatternsJavaScript Performance Patterns
JavaScript Performance Patterns
 
Optimising Web Application Frontend
Optimising Web Application FrontendOptimising Web Application Frontend
Optimising Web Application Frontend
 
Google I/O 2012 - Protecting your user experience while integrating 3rd party...
Google I/O 2012 - Protecting your user experience while integrating 3rd party...Google I/O 2012 - Protecting your user experience while integrating 3rd party...
Google I/O 2012 - Protecting your user experience while integrating 3rd party...
 

Mehr von Webstock

Mehr von Webstock (7)

A geek sifts through the bullshit
A geek sifts through the bullshitA geek sifts through the bullshit
A geek sifts through the bullshit
 
Curtailing Crustaceans with Geeky Enthusiasm - Rob Coup
Curtailing Crustaceans with Geeky Enthusiasm - Rob CoupCurtailing Crustaceans with Geeky Enthusiasm - Rob Coup
Curtailing Crustaceans with Geeky Enthusiasm - Rob Coup
 
Open Data Everywhere - Get Inspired - Glen Barnes
Open Data Everywhere - Get Inspired - Glen BarnesOpen Data Everywhere - Get Inspired - Glen Barnes
Open Data Everywhere - Get Inspired - Glen Barnes
 
My ID, Your Intrepretations - Annabel Youens
My ID, Your Intrepretations - Annabel YouensMy ID, Your Intrepretations - Annabel Youens
My ID, Your Intrepretations - Annabel Youens
 
Webstock10 opening
Webstock10 openingWebstock10 opening
Webstock10 opening
 
Webstock 09 opening
Webstock 09 openingWebstock 09 opening
Webstock 09 opening
 
Your Business Plan
Your Business Plan Your Business Plan
Your Business Plan
 

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

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...
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
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...
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
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
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Evaluating the top large language models.pdf
Evaluating the top large language models.pdfEvaluating the top large language models.pdf
Evaluating the top large language models.pdf
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
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...
 

Website performance optimisation

Hinweis der Redaktion

  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. 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).
  6. 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
  7. GMail Mobile: http://googlecode.blogspot.com/2009/09/gmail-for-mobile-html5-series-reducing.htmlSproutCore: http://blog.sproutcore.com/post/225219087/faster-loading-through-eval