Reduce HTTP Requests 관련

The Front-End Performance Optimization Handbook – Tips and Strategies for Devs

---

When you’re building a website, you’ll want it to be responsive, fast, and efficient. This means making sure the site loads quickly, runs smoothly, and provides a seamless experience for your users, among other things. So as you build, you’ll want to...

• How to combine multiple files
  • 1. Bundle JavaScript files with Webpack
  • 2. Combine CSS files

---

The Front-End Performance Optimization Handbook – Tips and Strategies for Devs

When you’re building a website, you’ll want it to be responsive, fast, and efficient. This means making sure the site loads quickly, runs smoothly, and provides a seamless experience for your users, among other things. So as you build, you’ll want to...

A complete HTTP request needs to go through DNS lookup, TCP handshake, browser sending the HTTP request, server receiving the request, server processing the request and sending back a response, browser receiving the response, and other processes. Let's look at a specific example to understand how HTTP works:

HTTP request waterfall showing timing breakdown

This is an HTTP request, and the file size is 28.4KB.

Terminology explained:

• Queueing: Time spent in the request queue.
• Stalled: The time difference between when the TCP connection is established and when data can actually be transmitted, including proxy negotiation time.
• Proxy negotiation: Time spent negotiating with the proxy server.
• DNS Lookup: Time spent performing DNS lookup. Each different domain on a page requires a DNS lookup.
• Initial Connection / Connecting: Time spent establishing a connection, including TCP handshake/retry and SSL negotiation.
• SSL: Time spent completing the SSL handshake.
• Request sent: Time spent sending the network request, usually a millisecond.
• Waiting (TFFB): TFFB is the time from when the page request is made until the first byte of response data is received.
• Content Download: Time spent receiving the response data.

From this example, we can see that the actual data download time accounts for only 13.05 / 204.16 = 6.39% of the total. The smaller the file, the smaller this ratio – and the larger the file, the higher the ratio. This is why it's recommended to combine multiple small files into one large file, which reduces the number of HTTP requests.

---

How to combine multiple files

There are several techniques to reduce the number of HTTP requests by combining files:

1. Bundle JavaScript files with Webpack

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

This will combine all JavaScript files imported in your entry point into a single bundle.

2. Combine CSS files

Using CSS preprocessors like Sass:

@import 'reset';
@import 'variables';
@import 'typography';
@import 'layout';
@import 'components';

Then compile to a single CSS file:

sass main.scss:main.css

Reference:

Resource timing - Web APIs | MDN

Resource Timing is part of the Performance API and enables retrieving and analyzing detailed network timing data for the loading of an application's resources. An application can use the timing metrics to determine, for example, the length of time it takes to load a specific resource (such as an image or a script) either implicitly as part of page load or explicitly from JavaScript, for example using the fetch() API.