Building High Performance Websites

2 April 10, 2023

I. Speed as Feature

II. Trend

III. 3 Pillars of Performance

IV. Network

V. Rendering

VI. Hacks

VII. Questions

Agenda

3 April 10, 2023

Speed as Feature

4 April 10, 2023

Everybody's got that one thing that makes them happy. For me, it's terrifying blazing speed. ~ Theo [Turbo (2013)]

5 April 10, 2023

What's the impact of slow sites?

6 April 10, 2023

Speed Matters

7 April 10, 2023

8 April 10, 2023

Usability Engineering 101

9 April 10, 2023

Trend

10 April 10, 2023

Trend Contd..

11 April 10, 2023

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

13 April 10, 2023

Latency? Bandwidth?

Source: https://www.igvita.com

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

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

16 April 10, 2023

Minimize HTTP Requests

17 April 10, 2023

Reduce DNS Lookups

18 April 10, 2023

Use a Content Delivery Network

19 April 10, 2023

Add an Expires/a Cache-Control Header, Configure ETags

20 April 10, 2023

GZip Components, Minify JavaScript and CSS

http://www.flickr.com/photos/marcovdz/4520986339/

21 April 10, 2023

Put Style Sheets at the Top, Put Scripts at the Bottom

22 April 10, 2023

Make JavaScript &

CSS External

23 April 10, 2023

Optimize Images, Optimize CSS Sprites

24 April 10, 2023

Split Components Across Domains

http://www.flickr.com/photos/autowitch/4271929/

25 April 10, 2023

Reduce Cookie Size, Use Cookie-free Domains for Components

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

27 April 10, 2023

Prioritize your content ..

28 April 10, 2023

29 April 10, 2023

Thank You

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

31 April 10, 2023

Books..