For a website, this principle is also applicable. Even if you have rich and valuable content, customers can't get in for a long time, and they will slowly lose patience.

Especially in this era of information explosion, people's pace is always fast. After all, the patience of a website is limited. If the website is not optimized, it will cause a considerable number of customer churn and unnecessary losses. So, what are the common and practical methods to optimize the performance of the web front-end?

CDN (content distribution network) is deployed in the computer rooms of major operators. When a user requests resources through the browser, he can directly feedback to the user, greatly reducing the pressure on the server data center. In essence, CDN is also a cache. If you are close to a CDN node, the website response speed is also very obvious. In addition, the resources cached by CDN are mainly static resources, such as static pages, pictures, CSS and JS files. CDN acceleration is most effective for some websites with wide coverage. For example, Alibaba Cloud CDN products have more than 280 nodes, and the operator coverage is relatively comprehensive.

The loading time of a web page is closely related to HTTP requests, while the loading speed of external resources is related to the host service provider server architecture and distribution location. We can reduce some HTTP requests by checking redundant images, CSS, JavaScript and some components on the website and improving them one by one.

As the name suggests, pre-access is to really require requests to improve the user's browsing experience before obtaining some necessary data and resources. There are three main ways to pre-access: link pre-acquisition, DNS pre-acquisition and pre-rendering. Depending on the prefetch form you want to use, you simply add the following tag to the link properties of the site: rel=prefetch, rel=DNS prefetch, or rel=prerender.

Compress HTML, CSS and JavaScript

There is some extra space when writing code, which will take up bytes. Using some compression tools can effectively solve this problem. It is worth noting that after file compression, readability will become worse and maintenance will become difficult in the future.

A high-definition image has about a few megabytes, and many times we don't need such image quality. Generally speaking, we will choose to save as high-quality pictures, which can effectively reduce the pressure of image loading. Like JPEG images, it contains time, place, camera model format, not to mention what we need.

Post requests cannot be cached in the client. Each request needs to be sent to the server for processing, and a status code 200 will be returned each time. (Data can be cached on the server side to improve processing speed)

Get requests can be cached (by default) on the client. Unless a different address is specified, an AJAX request with the same address will not be executed repeatedly on the server, but will return 304. Therefore, when making an Ajax request, you can choose to use as many get methods as possible, so that the client's cache can be used to increase the request speed.