80% of the response time on the Web front end is spent downloading images, styles, scripts, and other resources. We can’t reduce page request resources, so we can optimize by consolidating resources into one file to reduce HTTP requests.

Merge JS/CSS files

The server (CDN) automatically merges.

Node.js based file merge tool that puts all scripts in one file.

The front end can use the packaging tool:

  • webpack
  • gulp

Disadvantages:

  • All JS/CSS files are packaged to generate one or two files. If any changes are made, the files need to be generated again, which is not conducive to caching
  • Requires 1% of resources and may introduce all resources, resulting in wasted bandwidth.

Inline image (Base64 encoding)

Embed images into HTML/CSS using the Data Url scheme.

Advantages:

  • Reduce HTTP requests.
  • The size of the image is too small to be worth occupying an HTTP session.
  • There are no image updates to re-upload and the problem of clearing the cache.

Question:

  • The Base64 encoded data volume is larger than the original data volume.

  • Images in the form of Data URLS are not cached by the browser and are downloaded every time a page is visited.

  • Not suitable for lazy loading. Because there is no request.

  • Not good for maintenance.

The fonts icon

  • Font ICONS can reduce the use of many images, thus reducing HTTP requests.

  • Principle:

  • Draw the shape according to Unicode.

Image lazy loading (preloading)

Do not need to see the image to load out, the concrete implementation:

  • Load the images of the visual area first. For example, load 10 images first.
  • Load by scrolling to a specific location.

HTTP cache

  • Force caching and negotiate caching
HTTP1.0

  • Expires.

  • Force cache, cache the expiration time on the server.

  • Problem: Limited by local time, if the user changes the local time, it is useless.

  • Last-modified:

  • Negotiate the cache, the last time the resource was modified on the server.

  • Problem: a resource that has been modified but the actual content has not changed returns the entire entity to the client.

HTTP1.1

  • Cache-control:

  • Force the cache, you can set the expiration time, the URL changes will be requested again.

  • Use with Webpack’s hash file name.

  • Code: 200.

  • ETag:

  • Negotiate the cache, setting a value that will be used if the resource in response has not changed.

  • If it changes, it will respond again and give a new value.

  • Code: 304.

Conclusion:

There are many ways to reduce HTTP requests, but I won’t go into them here. If you are interested, you can read other articles or books on the Internet, most of which are about yahoo’s 35 Catch rules. I am a simplified summary of them.