Guidelines for website performance optimization

In the past few days, I read SteveSouders's high-performance website construction guide book. Although this book may be somewhat old, however, the guidelines for website performance optimization proposed in a thin booklet are still very valuable. In the past few days, I read Steve Souders's high-performance website construction guide book. although this book may be somewhat old, the guidelines for website performance optimization proposed in a thin booklet are still very valuable. These rules all share one thing in common, that is, they can achieve significant performance improvement with a very small amount of work, with extremely high cost performance. I will not talk much about it. I will summarize some performance optimization rules in the book.

This is also the core of these performance rules.

Rule 1: Reduce HTTP requests. The rule order of this book is ranked by its importance. Reducing HTTP requests as the first rule shows its importance. According to the golden rule, reducing the number of components to reduce HTTP requests is the most effective method for performance optimization. Several technologies are worth mentioning:

CSS Sprites. The front-end users should be familiar with it. They should integrate the images into a large image and use background-position to locate the image.

Data: URL. It is worth mentioning that the image is changed to inline, reducing image requests. If the image size in webpack is smaller than 8 KB, it will be converted to base64 data: URL.

Merge scripts and CSS.

Rule 2: Use CDN. This rule is needless to say. distributing content is closer to end users, reducing the request time.

Rule 3: add the Expires header. Make good use of the cache to set an Expires header with a longer validity period for long-lasting content components.

Rule 4: compress components. Using gzip and other content encoding to compress documents or components can usually reduce the corresponding data volume by about 70%.

Rule 5: place the style sheet on the top. The page is gradually displayed in the open project, and users will feel that the page is faster and there is a good feedback during the waiting process. If CSS is placed at the bottom, white screen may occur.

Rule 6: place the script at the bottom. When the script is downloaded from the page, other content will be blocked from being downloaded and rendered to prevent re-painting and re-arrangement of the browser. Therefore, placing the script at the bottom of the page does not prevent the presentation of the page content, and some visual components on the page can be downloaded as soon as possible without being blocked.

Rule 7: Avoid using CSS expressions. CSS expressions are frequently evaluated, resulting in low performance.

Rule 8: use external JavaScript and CSS. Purely speaking, inline is faster because it satisfies Rule 1 to reduce HTTP requests. However, in this case, the performance optimization brought about by caching must be taken into consideration, and external files may be cached, this improves the performance.

Rule 9: Reduce DNS lookup. Make good use of DNS cache, such as persistent connections.

Rule 10: streamline JavaScript. Remove unnecessary characters and spaces, as is common in. min. js.

Rule 11: Avoid redirection. The 3xx response status code represents a redirection response. Note that the redirection caused by a slash is missing at the end of the URL. do not damage the performance because of this mistake.

Rule 12: delete duplicate scripts.

Rule 13: Configure ETag. Speaking of this, we have to say that the conditional request If-Modified-Since and If-None-Match are both used for cache and verification. The problem with ETag is that when the server constructs ETag, although the two files are identical, there will still be different ETag if they are on different servers, increasing the number of HTTP request downloads, this causes great damage to the website performance of the backend server cluster.

Rule 14: Make Ajax cacheable. Although Ajax is asynchronous, it cannot take too long to wait for a response. For the optimization criterion, see the above performance criterion. The best use of cache remains a key concern for us.

The book used these criteria to analyze the top ten websites in the United States and found that there is a lot of room to improve the performance of these rules. I also looked at my project during my internship, many optimizations are found. In the future development process, we should keep these principles in mind so that users of our products can have a better experience.