building high performance websites
DESCRIPTION
Building High Performance WebsitesTRANSCRIPT
![Page 1: Building High Performance Websites](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b7458f4a795955768b45d9/html5/thumbnails/1.jpg)
Building High Performance Websites
![Page 2: Building High Performance Websites](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b7458f4a795955768b45d9/html5/thumbnails/2.jpg)
2 April 10, 2023
I. Speed as Feature
II. Trend
III. 3 Pillars of Performance
IV. Network
V. Rendering
VI. Hacks
VII. Questions
Agenda
![Page 3: Building High Performance Websites](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b7458f4a795955768b45d9/html5/thumbnails/3.jpg)
3 April 10, 2023
Speed as Feature
![Page 4: Building High Performance Websites](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b7458f4a795955768b45d9/html5/thumbnails/4.jpg)
4 April 10, 2023
Everybody's got that one thing that makes them happy. For me, it's terrifying blazing speed. ~ Theo [Turbo (2013)]
![Page 5: Building High Performance Websites](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b7458f4a795955768b45d9/html5/thumbnails/5.jpg)
5 April 10, 2023
What's the impact of slow sites?
![Page 6: Building High Performance Websites](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b7458f4a795955768b45d9/html5/thumbnails/6.jpg)
6 April 10, 2023
Speed Matters
![Page 7: Building High Performance Websites](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b7458f4a795955768b45d9/html5/thumbnails/7.jpg)
7 April 10, 2023
![Page 8: Building High Performance Websites](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b7458f4a795955768b45d9/html5/thumbnails/8.jpg)
8 April 10, 2023
Usability Engineering 101
![Page 9: Building High Performance Websites](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b7458f4a795955768b45d9/html5/thumbnails/9.jpg)
9 April 10, 2023
Trend
![Page 10: Building High Performance Websites](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b7458f4a795955768b45d9/html5/thumbnails/10.jpg)
10 April 10, 2023
Trend Contd..
![Page 11: Building High Performance Websites](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b7458f4a795955768b45d9/html5/thumbnails/11.jpg)
11 April 10, 2023
![Page 12: Building High Performance Websites](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b7458f4a795955768b45d9/html5/thumbnails/12.jpg)
12 April 10, 2023
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
![Page 13: Building High Performance Websites](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b7458f4a795955768b45d9/html5/thumbnails/13.jpg)
13 April 10, 2023
Latency? Bandwidth?
Source: https://www.igvita.com
![Page 14: Building High Performance Websites](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b7458f4a795955768b45d9/html5/thumbnails/14.jpg)
14 April 10, 2023
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
![Page 15: Building High Performance Websites](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b7458f4a795955768b45d9/html5/thumbnails/15.jpg)
15 April 10, 2023
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 servero Plus server processing time
Source: https://www.igvita.com
![Page 16: Building High Performance Websites](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b7458f4a795955768b45d9/html5/thumbnails/16.jpg)
16 April 10, 2023
Minimize HTTP Requests
![Page 17: Building High Performance Websites](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b7458f4a795955768b45d9/html5/thumbnails/17.jpg)
17 April 10, 2023
Reduce DNS Lookups
![Page 18: Building High Performance Websites](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b7458f4a795955768b45d9/html5/thumbnails/18.jpg)
18 April 10, 2023
Use a Content Delivery Network
![Page 19: Building High Performance Websites](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b7458f4a795955768b45d9/html5/thumbnails/19.jpg)
19 April 10, 2023
Add an Expires/a Cache-Control Header, Configure ETags
![Page 20: Building High Performance Websites](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b7458f4a795955768b45d9/html5/thumbnails/20.jpg)
20 April 10, 2023
GZip Components, Minify JavaScript and CSS
http://www.flickr.com/photos/marcovdz/4520986339/
![Page 21: Building High Performance Websites](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b7458f4a795955768b45d9/html5/thumbnails/21.jpg)
21 April 10, 2023
Put Style Sheets at the Top, Put Scripts at the Bottom
![Page 22: Building High Performance Websites](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b7458f4a795955768b45d9/html5/thumbnails/22.jpg)
22 April 10, 2023
Make JavaScript &
CSS External
![Page 23: Building High Performance Websites](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b7458f4a795955768b45d9/html5/thumbnails/23.jpg)
23 April 10, 2023
Optimize Images, Optimize CSS Sprites
![Page 24: Building High Performance Websites](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b7458f4a795955768b45d9/html5/thumbnails/24.jpg)
24 April 10, 2023
Split Components Across Domains
http://www.flickr.com/photos/autowitch/4271929/
![Page 25: Building High Performance Websites](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b7458f4a795955768b45d9/html5/thumbnails/25.jpg)
25 April 10, 2023
Reduce Cookie Size, Use Cookie-free Domains for Components
![Page 26: Building High Performance Websites](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b7458f4a795955768b45d9/html5/thumbnails/26.jpg)
26 April 10, 2023
• 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
![Page 27: Building High Performance Websites](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b7458f4a795955768b45d9/html5/thumbnails/27.jpg)
27 April 10, 2023
Prioritize your content ..
![Page 28: Building High Performance Websites](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b7458f4a795955768b45d9/html5/thumbnails/28.jpg)
28 April 10, 2023
![Page 29: Building High Performance Websites](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b7458f4a795955768b45d9/html5/thumbnails/29.jpg)
29 April 10, 2023
Thank You
![Page 30: Building High Performance Websites](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b7458f4a795955768b45d9/html5/thumbnails/30.jpg)
30 April 10, 2023
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
![Page 31: Building High Performance Websites](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b7458f4a795955768b45d9/html5/thumbnails/31.jpg)
31 April 10, 2023
Books..