Do a good job in front-end web page optimization to make your website full of pageviews

For a website, this principle also applies, even if you have rich and valuable content, but customers can't come in for a long time, they will slowly lose patience.

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

CDNs (Content Delivery Networks) are deployed in the computer rooms of major operators. When the user requests resources through the browser, it can be directly fed back to the user, which greatly reduces the pressure on the server data center. Essentially, CDN is also a kind of cache. If your location is close to the CDN node, the website responsiveness is also very noticeable. In addition, the resources cached by the CDN are mainly static resources, such as static pages, images, CSS and JS files. CDN acceleration is most effective for some websites with a wide reach. For example, Alibaba Cloud CDN products have more than 280 nodes, and the coverage of operators is relatively comprehensive.

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

As the name suggests, pre-visiting is the real need to request before getting some necessary data and resources to improve the user's browsing experience. There are three main ways to pre-visit: link pre-capture, DNS pre-capture, and pre-rendering. Depending on the form of prefetching you want to use, all you need to do is add the following tags to your site's link properties: rel=prefetch, rel=DNS prefetch, or rel=prerender.

Compress HTML, CSS and JavaScript

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

A high-definition image is about several megabytes, and many times we don't need such image quality. Under normal circumstances, we will choose to save as high-quality images, which can effectively reduce the pressure of image loading. Like a JPEG image, it contains time, location, 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, each time returning a status code of 200. (Data can be cached on the server side to improve processing speed)

Get requests can (by default) be cached on the client. AJAX requests with the same address will not be repeated on the server and will return 304 unless a different address is specified. Therefore, when making Ajax requests, you can choose to use the get method as much as possible, so that the client's cache can be used to improve the request speed.