Downloaded 40 times
![_gaq.push(['_setSiteSpeedSampleRate', 10]);](https://image.slidesharecdn.com/wpo-roundtable-111206190522-phpapp02/85/Web-Performance-Optimization-24-320.jpg)
![Frontend Single Point of Failure
Browser will stop processing for 20s (windows) – 90s (Mac)
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
vs.
<script type="text/javascript">
(function() {
var tw = document.createElement('script');
tw.type = 'text/javascript';
tw.src = 'http://platform.twitter.com/widgets.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(tw, s);
})();
</script>
Browser will continue processing and not wait](https://image.slidesharecdn.com/wpo-roundtable-111206190522-phpapp02/85/Web-Performance-Optimization-29-320.jpg)
![_gaq.push(['_setSiteSpeedSampleRate', 10]);](https://image.slidesharecdn.com/wpo-roundtable-111206190522-phpapp02/75/Web-Performance-Optimization-24-2048.jpg)
![Frontend Single Point of Failure
Browser will stop processing for 20s (windows) – 90s (Mac)
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
vs.
<script type="text/javascript">
(function() {
var tw = document.createElement('script');
tw.type = 'text/javascript';
tw.src = 'http://platform.twitter.com/widgets.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(tw, s);
})();
</script>
Browser will continue processing and not wait](https://image.slidesharecdn.com/wpo-roundtable-111206190522-phpapp02/75/Web-Performance-Optimization-29-2048.jpg)
Uploaded byPatrick Meenan
Web Performance Optimization
The document discusses web performance optimization, emphasizing its importance for user experience and its impact on metrics like page load times and conversion rates. It covers methods of measuring performance, including active and synthetic testing, as well as real user monitoring. Additionally, it highlights the role of front-end and back-end components in web performance, with examples of companies that improved their metrics through optimization efforts.
More Related Content
![Client-side Web Performance Optimization [paper]](https://cdn.slidesharecdn.com/ss_thumbnails/2011-01-18jakob-schroeterclient-side-optimization-110125033543-phpapp02-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Similar to Web Performance Optimization
Web Performance Optimization
- 1. Web Performance Optimization PatrickMeenan Google @patmeenan www.slideshare.net/patrickmeenan
- 2. What is it? •Optimizing the performance of web sites and applications for the best user experience
- 3.
- 4. Bing Search en.oreilly.com/velocity2009/public/schedule/detail/8523
- 5. Google Search en.oreilly.com/velocity2009/public/schedule/detail/8523
- 6. Yahoo 400ms slower = 5-9% drop in full-page traffic slideshare.net/stoyan/dont-make-me-wait-or-building-highperformance-web-applications
- 7. Firefox Downloads …shaved 2.2 seconds off the average page load time and increased download conversions by 15.4%! blog.mozilla.com/metrics/2010/04/05/firefox-page-load-speed-%E2%80%93-part-ii/
- 8.
- 9.
- 10. MSN Delayed loading ofthe Big Upper Right Ad by 1s Time to Page Time to Page Page Ad Click Thru Bottom Onload Clicks Views Rate 80ms gain 500ms gain +0.5% +0.4% -15% velocityconf.com/velocity2011/public/schedule/detail/18039
- 11. AutoAnything …cut AutoAnything’s web page load times in half, which resulted in a 9% increase in conversion rate, an 11% increase in average ticket size, and a 12-13% increase in sales. www.strangeloopnetworks.com/customers/autoanything-cuts-page-load-time-in-half-and-revs-up-sales-by-13/
- 12.
- 13. SEO …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. “Front End” vs “Back End”
- 16. Back-End This is theHTML that largely contains the content of the page and defines the structure.
- 17. Front-End CSS : Layout and style Graphical Elements Images
- 18. Waterfall Diagram Base Page CSS Javascript Images and Graphical Elements Start Render Document Complete (onLoad)
- 19.
- 20.
- 21. Active Testing • Consistentresults • Good for detecting and diagnosing issues that are 100% repeatable and on pages you are monitoring • Lots of detail • Availability monitoring • Not representative of actual end-user performance • Usually tested from data centers • Sometimes co-located with CDN provider equipment
- 22. Synthetic Browsers • KnowHOW your active testing is done • Some only test the base page • Synthetic browsers usually not reflective of real browser • Real browser testing • www.engadget.com • Synthetic Browser: 447 requests • IE 8: 241 requests
- 23. Real User Monitoring(RUM) • Full coverage on all pages visited by users • Real performance information for end-user experience • No availability monitoring • Fluctuates Significantly • Limited detail • … but getting better
- 24.
- 27.
- 28. Async Javascript It’s notjust good for performance….
- 29. Frontend Single Pointof Failure Browser will stop processing for 20s (windows) – 90s (Mac) <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> vs. <script type="text/javascript"> (function() { var tw = document.createElement('script'); tw.type = 'text/javascript'; tw.src = 'http://platform.twitter.com/widgets.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(tw, s); })(); </script> Browser will continue processing and not wait
- 30. What it feelslike http://www.webpagetest.org/video/embed/111011_bf3554f35b6e71a77f59e3719ee4e810b7226402
- 31. Testing for FrontendSPOF • blackhole.webpagetest.org (aka 72.66.115.13) • Hosts file: 72.66.115.13 ajax.googleapis.com 31 72.66.115.13 apis.google.com 72.66.115.13 www.google-analytics.com 72.66.115.13 connect.facebook.net 72.66.115.13 platform.twitter.com … • WebPagetest.org: setDnsName platform.twitter.com blackhole.webpagetest.org navigate your.url.com blog.patrickmeenan.com/2011/10/testing-for-frontend-spof.html
- 32. www.aarp.org • If AddThisor Ensighten have issues
- 33. www.learningtree.com • If Google’sAPIs have issues
- 34. www.nationalgeographic.com • If Doubleclickhas issues First 20 seconds 20-40 seconds
- 35. www.washingtonpost.com • If Doubleclickhas issues
- 36. Other Resources • VelocityConference videos and presentations: • http://velocityconf.com/velocityeu • http://velocityconf.com/velocity2011 • http://velocityconf.com/velocity2010 • Perf Planet (rollup of industry blogs) • http://www.perfplanet.com/ • http://calendar.perfplanet.com • @perfplanet