Building High Performance Websites
•Download as PPTX, PDF•
0 likes•464 views
Building High Performance Websites
Recommended
More Related Content
Viewers also liked
Similar to Building High Performance Websites
Similar to Building High Performance Websites (20)
Recently uploaded
Recently uploaded (20)
Building High Performance Websites
- 2. 2May 31, 2014 I. Speed as Feature II. Trend III. 3 Pillars of Performance IV. Network V. Rendering VI. Hacks VII. Questions Agenda
- 3. 3May 31, 2014 Speed as Feature
- 4. 4May 31, 2014 Everybody's got that one thing that makes them happy. For me, it's terrifying blazing speed. ~ Theo [Turbo (2013)]
- 5. 5May 31, 2014 What's the impact of slow sites?
- 6. 6May 31, 2014 Speed Matters
- 8. 8May 31, 2014 Usability Engineering 101
- 10. 10May 31, 2014 Trend Contd..
- 11. 11May 31, 2014
- 12. 12May 31, 2014 3 Pillars of Performance NETWORK RENDER COMPUTE “Good developers know how things work. Great developers know why things work.” ~ Steve Souders, Head Performance Engineer, Google, 2013
- 13. 13May 31, 2014 Latency? Bandwidth? Source: https://www.igvita.com
- 14. 14May 31, 2014 Latency vs. Bandwidth impact on Page Load Time “To speed up the Internet at large, we should look for more ways to bring down RTT. What if we could reduce cross-atlantic RTTs from 150 ms to 100 ms? This would have a larger effect on the speed of the internet than increasing a user’s bandwidth from 3.9 Mbps to 10 Mbps or even 1 Gbps.” - Mike Belshe Single digit % perf improvement after 5 Mbps Linear improvement in page load time! Source: https://www.igvita.com
- 15. 15May 31, 2014 Components of an HTTP request • DNS lookup to resolve the hostname to IP address • New TCP connection requires a handshake round trip to the server • TLS handshake (not shown) with up to two extra server round trips • HTTP request requires minimum of a one round trip to the server o Plus server processing time Source: https://www.igvita.com
- 16. 16May 31, 2014 Minimize HTTP Requests
- 17. 17May 31, 2014 Reduce DNS Lookups
- 18. 18May 31, 2014 Use a Content Delivery Network
- 19. 19May 31, 2014 Add an Expires/a Cache-Control Header, Configure ETags
- 20. 20May 31, 2014 GZip Components, Minify JavaScript and CSS http://www.flickr.com/photos/marcovdz/4520986339/
- 21. 21May 31, 2014 Put Style Sheets at the Top, Put Scripts at the Bottom
- 22. 22May 31, 2014 Make JavaScript & CSS External
- 23. 23May 31, 2014 Optimize Images, Optimize CSS Sprites
- 24. 24May 31, 2014 Split Components Across Domains http://www.flickr.com/photos/autowitch/4271929/
- 25. 25May 31, 2014 Reduce Cookie Size, Use Cookie-free Domains for Components
- 26. 26May 31, 2014 • Avoid CSS Expressions • Avoid Redirects • Remove Duplicate Scripts • Make Ajax Cacheable • Configure Etags • Use GET for AJAX Requests • Post-load Components • Preload Components • Reduce the Number of DOM Elements • Minimize the Number of iframes • Minimize DOM Access • Choose <link> over @import • Avoid Filters • Make favicon.ico Small and Cacheable • Avoid Empty Image src
- 27. 27May 31, 2014 Prioritize your content ..
- 28. 28May 31, 2014
- 29. 29May 31, 2014 Thank You
- 30. 30May 31, 2014 Resources • https://plus.google.com/u/0/communities/113993151878673122189 • http://developer.yahoo.com/yslow/ • http://developer.yahoo.com/performance/rules.html • http://www.sultansofspeed.com • http://browserdiet.com/ • https://github.com/zenorocha/browser-diet/wiki/Impact-of-performance • http://httparchive.org/ • http://www.webperformancetoday.com • http://velocityconf.com/ • https://twitter.com/Satya_Sudheer/lists/speed • https://www.igvita.com
Editor's Notes
- Many of these performance rules deal with how external components are managed. However, before these considerations arise you should ask a more basic question: Should JavaScript and CSS be contained in external files, or inlined in the page itself? Using external files in the real world generally produces faster pages because the JavaScript and CSS files are cached by the browser. JavaScript and CSS that are inlined in HTML documents get downloaded every time the HTML document is requested. This reduces the number of HTTP requests that are needed, but increases the size of the HTML document. On the other hand, if the JavaScript and CSS are in external files cached by the browser, the size of the HTML document is reduced without increasing the number of HTTP requests. The key factor, then, is the frequency with which external JavaScript and CSS components are cached relative to the number of HTML documents requested. This factor, although difficult to quantify, can be gauged using various metrics. If users on your site have multiple page views per session and many of your pages re-use the same scripts and stylesheets, there is a greater potential benefit from cached external files.