Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
Building High Performance
Websites
2May 31, 2014
I. Speed as Feature
II. Trend
III. 3 Pillars of Performance
IV. Network
V. Rendering
VI. Hacks
VII. Question...
3May 31, 2014
Speed as Feature
4May 31, 2014
Everybody's got that one thing that makes them happy. For
me, it's terrifying blazing speed. ~ Theo [Turbo (...
5May 31, 2014
What's the impact of slow sites?
6May 31, 2014
Speed Matters
7May 31, 2014
8May 31, 2014
Usability Engineering 101
9May 31, 2014
Trend
10May 31, 2014
Trend Contd..
11May 31, 2014
12May 31, 2014
3 Pillars of Performance
NETWORK RENDER COMPUTE
“Good developers know how things work. Great developers kno...
13May 31, 2014
Latency? Bandwidth?
Source: https://www.igvita.com
14May 31, 2014
Latency vs. Bandwidth impact on Page Load Time
“To speed up the Internet at large, we should look for more ...
15May 31, 2014
Components of an HTTP request
• DNS lookup to resolve the hostname to IP address
• New TCP connection requi...
16May 31, 2014
Minimize HTTP Requests
17May 31, 2014
Reduce DNS Lookups
18May 31, 2014
Use a Content Delivery Network
19May 31, 2014
Add an Expires/a Cache-Control Header,
Configure ETags
20May 31, 2014
GZip Components,
Minify JavaScript and CSS
http://www.flickr.com/photos/marcovdz/4520986339/
21May 31, 2014
Put Style Sheets at the Top,
Put Scripts at the Bottom
22May 31, 2014
Make JavaScript &
CSS External
23May 31, 2014
Optimize Images, Optimize CSS Sprites
24May 31, 2014
Split Components Across Domains
http://www.flickr.com/photos/autowitch/4271929/
25May 31, 2014
Reduce Cookie Size,
Use Cookie-free Domains for
Components
26May 31, 2014
• Avoid CSS Expressions
• Avoid Redirects
• Remove Duplicate Scripts
• Make Ajax Cacheable
• Configure Etag...
27May 31, 2014
Prioritize your content ..
28May 31, 2014
29May 31, 2014
Thank You
30May 31, 2014
Resources
• https://plus.google.com/u/0/communities/113993151878673122189
• http://developer.yahoo.com/yslo...
31May 31, 2014
Books..
Próxima SlideShare
Cargando en…5
×

Building High Performance Websites

294 visualizaciones

Publicado el

Building High Performance Websites

Publicado en: Internet
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Building High Performance Websites

  1. 1. Building High Performance Websites
  2. 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. 3. 3May 31, 2014 Speed as Feature
  4. 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. 5. 5May 31, 2014 What's the impact of slow sites?
  6. 6. 6May 31, 2014 Speed Matters
  7. 7. 7May 31, 2014
  8. 8. 8May 31, 2014 Usability Engineering 101
  9. 9. 9May 31, 2014 Trend
  10. 10. 10May 31, 2014 Trend Contd..
  11. 11. 11May 31, 2014
  12. 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. 13. 13May 31, 2014 Latency? Bandwidth? Source: https://www.igvita.com
  14. 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. 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. 16. 16May 31, 2014 Minimize HTTP Requests
  17. 17. 17May 31, 2014 Reduce DNS Lookups
  18. 18. 18May 31, 2014 Use a Content Delivery Network
  19. 19. 19May 31, 2014 Add an Expires/a Cache-Control Header, Configure ETags
  20. 20. 20May 31, 2014 GZip Components, Minify JavaScript and CSS http://www.flickr.com/photos/marcovdz/4520986339/
  21. 21. 21May 31, 2014 Put Style Sheets at the Top, Put Scripts at the Bottom
  22. 22. 22May 31, 2014 Make JavaScript & CSS External
  23. 23. 23May 31, 2014 Optimize Images, Optimize CSS Sprites
  24. 24. 24May 31, 2014 Split Components Across Domains http://www.flickr.com/photos/autowitch/4271929/
  25. 25. 25May 31, 2014 Reduce Cookie Size, Use Cookie-free Domains for Components
  26. 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. 27. 27May 31, 2014 Prioritize your content ..
  28. 28. 28May 31, 2014
  29. 29. 29May 31, 2014 Thank You
  30. 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
  31. 31. 31May 31, 2014 Books..

×