Day 18 of Learning Frontend System Design: Performance - Part 1: Network Optimization

Welcome to Day 18 of my frontend system design journey! Today, we'll be diving into the world of performance optimization, focusing specifically on network optimization techniques. Let’s start with a brief story to introduce the concept.

The Magic Library

Once upon a time, in a bustling village, there was a magical library. This library was special because it could fetch any book from anywhere in the world. Villagers loved visiting the library to request books, but there was one small problem: the books didn’t always arrive quickly.

One day, a wise librarian noticed that the books often came in pieces. First, a cover would arrive, then a few pages, sometimes out of order. The librarian realized that waiting for the entire book to arrive before handing it to the villagers made them impatient.

To solve this, the librarian devised a clever plan. He instructed his helpers to deliver the first few pages of the book as soon as they arrived, even if the rest of the book was still on its way. This way, the villagers could start reading something while waiting for the rest of the book, keeping them engaged and happy.

This is akin to network optimization in web performance. When you request data from a server, it doesn't all come at once, and it’s not necessarily in sequence. Let's explore how we can optimize this process to make sure our web applications load quickly and efficiently.

Network Optimization Techniques

1. Critical Rendering Path:

When we request data from the server, it is transferred in packets. These packets don't always arrive in sequence. When the first packet arrives, the browser checks if it has any meaningful data to display. If not, it waits for the subsequent packets. Once it has enough data to render something useful, it starts building and displaying the DOM tree.

Key Points:

• CSS is Render Blocking: The browser won't render any part of the page until it finishes parsing the CSS.
• JavaScript is Parsing Blocking: When the HTML parser encounters a <script> tag, it stops parsing HTML and executes the JavaScript. Only after the script is executed does the HTML parsing resume

Example: If a webpage has external CSS and JavaScript files, the browser will wait to render the page until it has fully downloaded and parsed these files, which can delay the First Contentful Paint (FCP).

Jugaad (Hack): To ensure something is visible as soon as possible, we can optimize the first packet of 14KB to include the minimum necessary content for the FCP. This might involve critical CSS and inline HTML that allows the browser to display something meaningful to the user immediately.

Day 18 of Learning Frontend System Design: Performance - Part 1: Network Optimization

Welcome to Day 18 of my frontend system design journey! Today, we'll be diving into the world of performance optimization, focusing specifically on network optimization techniques. Let’s start with a brief story to introduce the concept.

The Magic Library

Once upon a time, in a bustling village, there was a magical library. This library was special because it could fetch any book from anywhere in the world. Villagers loved visiting the library to request books, but there was one small problem: the books didn’t always arrive quickly.

One day, a wise librarian noticed that the books often came in pieces. First, a cover would arrive, then a few pages, sometimes out of order. The librarian realized that waiting for the entire book to arrive before handing it to the villagers made them impatient.

To solve this, the librarian devised a clever plan. He instructed his helpers to deliver the first few pages of the book as soon as they arrived, even if the rest of the book was still on its way. This way, the villagers could start reading something while waiting for the rest of the book, keeping them engaged and happy.

This is akin to network optimization in web performance. When you request data from a server, it doesn't all come at once, and it’s not necessarily in sequence. Let's explore how we can optimize this process to make sure our web applications load quickly and efficiently.

Network Optimization Techniques

1. Critical Rendering Path

When we request data from the server, it is transferred in packets. These packets don't always arrive in sequence. When the first packet arrives, the browser checks if it has any meaningful data to display. If not, it waits for the subsequent packets. Once it has enough data to render something useful, it starts building and displaying the DOM tree.

Key Points:

• CSS is Render Blocking: The browser won't render any part of the page until it finishes parsing the CSS.
• JavaScript is Parsing Blocking: When the HTML parser encounters a <script> tag, it stops parsing HTML and executes the JavaScript. Only after the script is executed does the HTML parsing resume

Example: If a webpage has external CSS and JavaScript files, the browser will wait to render the page until it has fully downloaded and parsed these files, which can delay the First Contentful Paint (FCP).

Jugaad (Hack): To ensure something is visible as soon as possible, we can optimize the first packet of 14KB to include the minimum necessary content for the FCP. This might involve critical CSS and inline HTML that allows the browser to display something meaningful to the user immediately.

2. Minimize Network Requests

Challenges:

• Connection Time: Establishing a connection involves TCP and SSL handshakes, which can add to the load time.
• Browser Limits: Browsers can only make a limited number of parallel requests to a single domain (usually 6-10).

Solutions:

• Inline CSS and JS: By embedding CSS and JavaScript directly in the HTML, we reduce the number of separate files the browser needs to download.
• Base64 Encoding for Images: Small images can be encoded in Base64 and included directly in the HTML or CSS.
• Use SVG for Images: SVG files are often smaller and can be inlined directly in the HTML, reducing the number of requests.

3. Avoid Redirections

Redirections add extra HTTP requests, which increase load time. By minimizing or eliminating redirects, we can speed up the page load process.

4. Compression

Using compression algorithms like Brotli or Gzip reduces the size of files transferred over the network. Instead of compressing files on each network request, it’s more efficient to compress them during the build process.

Day 18 of Learning Frontend System Design: Performance - Part 1: Network Optimization

Welcome to Day 18 of my frontend system design journey! Today, we'll be diving into the world of performance optimization, focusing specifically on network optimization techniques. Let’s start with a brief story to introduce the concept.

The Magic Library

Once upon a time, in a bustling village, there was a magical library. This library was special because it could fetch any book from anywhere in the world. Villagers loved visiting the library to request books, but there was one small problem: the books didn’t always arrive quickly.

One day, a wise librarian noticed that the books often came in pieces. First, a cover would arrive, then a few pages, sometimes out of order. The librarian realized that waiting for the entire book to arrive before handing it to the villagers made them impatient.

To solve this, the librarian devised a clever plan. He instructed his helpers to deliver the first few pages of the book as soon as they arrived, even if the rest of the book was still on its way. This way, the villagers could start reading something while waiting for the rest of the book, keeping them engaged and happy.

This is akin to network optimization in web performance. When you request data from a server, it doesn't all come at once, and it’s not necessarily in sequence. Let's explore how we can optimize this process to make sure our web applications load quickly and efficiently.

Network Optimization Techniques

1. Critical Rendering Path

When we request data from the server, it is transferred in packets. These packets don't always arrive in sequence. When the first packet arrives, the browser checks if it has any meaningful data to display. If not, it waits for the subsequent packets. Once it has enough data to render something useful, it starts building and displaying the DOM tree.

Key Points:

• CSS is Render Blocking: The browser won't render any part of the page until it finishes parsing the CSS.
• JavaScript is Parsing Blocking: When the HTML parser encounters a <script> tag, it stops parsing HTML and executes the JavaScript. Only after the script is executed does the HTML parsing resume

Example: If a webpage has external CSS and JavaScript files, the browser will wait to render the page until it has fully downloaded and parsed these files, which can delay the First Contentful Paint (FCP).

Jugaad (Hack): To ensure something is visible as soon as possible, we can optimize the first packet of 14KB to include the minimum necessary content for the FCP. This might involve critical CSS and inline HTML that allows the browser to display something meaningful to the user immediately.

2. Minimize Network Requests

Challenges:

• Connection Time: Establishing a connection involves TCP and SSL handshakes, which can add to the load time.
• Browser Limits: Browsers can only make a limited number of parallel requests to a single domain (usually 6-10).

Solutions:

• Inline CSS and JS: By embedding CSS and JavaScript directly in the HTML, we reduce the number of separate files the browser needs to download.
• Base64 Encoding for Images: Small images can be encoded in Base64 and included directly in the HTML or CSS.
• Use SVG for Images: SVG files are often smaller and can be inlined directly in the HTML, reducing the number of requests.

3. Avoid Redirections

Redirections add extra HTTP requests, which increase load time. By minimizing or eliminating redirects, we can speed up the page load process.

4. Compression

Using compression algorithms like Brotli or Gzip reduces the size of files transferred over the network. Instead of compressing files on each network request, it’s more efficient to compress them during the build process.

5. Caching

Implementing a strong caching strategy ensures that repeat requests for the same resources don’t have to go back to the server, speeding up load times.

Cache Policy Techniques:

• Cache-Control
• ETag
• Expires
• Last-Modified
• Service Workers: These can cache assets and serve them quickly on repeat visits, even offline

By implementing these network optimization techniques, we can significantly improve the performance of our web applications, providing a faster and smoother experience for users.

Stay tuned for the next part where we'll continue exploring more performance optimization strategies!