Day 19: Performance Optimization in Frontend System Design - Part 2

Welcome back to my journey in learning frontend system design! Today, we delve into network optimization techniques to enhance performance. But before we get technical, let's start with a story.

The Concert and the Roadies: A Story on Network Optimization

In a small town, there was an annual music festival that everyone eagerly awaited. The festival had multiple stages and bands performing, but there was always a problem: setting up the equipment took a long time, causing delays in performances. One year, a new group of roadies came up with a brilliant idea to optimize the setup process.

Instead of waiting for one band to finish before starting to set up the next, they began preparing the equipment for upcoming performances in advance. They identified the critical instruments needed first and ensured they were ready to go as soon as the previous act finished. They also prioritized the most complex setups, starting them even earlier. With this strategy, the festival ran smoothly, and the crowd enjoyed continuous music without long waits.

Similarly, network optimization in web development ensures that your website's resources — scripts, styles, and other assets — are delivered to users quickly and efficiently.

Network Optimization Techniques

1. Async JavaScript: Async/Defer

When a web page loads, it often encounters JavaScript files. These can be roadblocks, halting the HTML parsing until the JavaScript is fully downloaded and executed. Let's explore the different ways to handle this:

a) <script>:

• Scenario: HTML parsing starts, encounters a <script> tag, and halts
• .Process: The browser downloads and executes the JavaScript, then resumes HTML parsing
• .Impact: This blocks the HTML parsing, delaying the page rendering

b) <script async>:

• Scenario: HTML parsing begins and encounters a <script async> tag
• .Process: The browser downloads the JavaScript in parallel without blocking HTML parsing. Once the JavaScript is fully downloaded, it pauses HTML parsing to execute the script, then resumes
• .Impact: Reduces the blocking time but can still cause a brief interruption

c) <script defer>:

• Scenario: HTML parsing starts and encounters a <script defer> tag
• .Process: The browser downloads the JavaScript in parallel while continuing HTML parsing. The JavaScript is executed only after the entire HTML is parsed
• .Impact: No blocking occurs during HTML parsing, ensuring smooth rendering

2. Resource Hinting

When making requests to a server, several steps are involved: DNS lookup, HTTP connection, SSL handshake, etc. These steps can add latency. Resource hinting techniques can mitigate this:

• Preconnect: Establish connections to servers in advance.

<link rel="preconnect"  crossorigin/>        

• DNS Prefetch: Perform DNS lookups in advance.

<link rel="dns-prefetch"  crossorigin/>        

• Preload: Initiate early requests for critical resources needed for rendering.

<link rel="preload"  as="image"/>        

• Prefetch: Load resources needed for future navigation with low priority.

<link rel="prefetch"  as="style"/>        

• Prerender: Load an entire page and its dependencies in the background.

<link rel="prerender" />        

Advanced Techniques and Tips:

• Use preconnect for servers where multiple resources are fetched.
• DNS prefetch is beneficial for external resources.
• Preload critical assets that impact the initial render.
• Prefetch resources for anticipated navigation to improve user experience.
• Prerender for a seamless experience on highly trafficked links.

3. Resource Hint Priority

To avoid overwhelming the browser with too many hints, prioritize resources:

a) Lower priority for non-critical preloaded scripts:

<link rel="preload" as="script"  fetchpriority="low"/>        

b) Preloaded CSS without blocking other resources:

<link rel="preload" as="style"  fetchpriority="low" onload="this.rel='stylesheet'"/>        

4. Early Hints

The 103 status code allows servers to send preliminary headers to the browser, hinting at critical resources to fetch even before the main response is ready. This can drastically reduce the initial page load time.

5. HTTP Upgrade (HTTP/1.1 vs HTTP/2 vs HTTP/3)

• HTTP/1.1: Each request requires a separate connection, leading to inefficiency.
• HTTP/2: Supports multiplexing, allowing multiple requests over a single connection. This reduces latency and improves performance.
• HTTP/3: Built on QUIC, it further reduces latency and improves connection reliability, especially over unstable networks.

By implementing these network optimization techniques, we can ensure faster, smoother, and more efficient web experiences. Stay tuned for more insights as I continue my journey in frontend system design