About website performance optimization guidelines

In the past few days, I have read Steve Souders' "Guide to High-Performance Website Construction". Although this book may be a bit old, the guidelines for website performance optimization put forward in this thin booklet are still very valuable. . These rules all have one thing in common, which is that they can achieve obvious performance improvements with very little work and are extremely cost-effective. Without further ado, let’s summarize some performance optimization rules in the book.

The first thing that needs to be explained is the golden rule of performance written in the book: only 10%~20% of the response time is spent downloading the HTML document, and the remaining 80%~90% of the time is spent on the download page for all components.
This is also the core of the origin of the following performance rules.

　 Rule 1: Reduce HTTP requests. The order of rules in this book is ranked according to their importance. Reducing HTTP requests is the first rule, which shows its importance. According to the golden rule, reducing the number of components and thereby reducing HTTP requests is the most effective way to optimize performance. There are several techniques worth mentioning:

CSS Sprites. Front-end people should be familiar with integrating images into a large image and using background-position to position them.

data:URL. It is worth mentioning that turning the image into inline reduces image requests. If the image in webpack is less than 8kb, it will be converted to base64 data:URL.

Merge script and CSS.

　 Rule 2: Use CDN. This rule goes without saying, distribute content closer to end users, reducing request times.

　 Rule 3: Add Expires header. Make good use of caching and set Expires headers with longer validity periods for content components that remain unchanged for a long time.

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

　 Rule 5: Put the style sheet at the top. The page is gradually presented when the project is opened. The user will feel that the page is faster, and it also gives the user a good feedback while waiting. Placing CSS at the bottom may cause a white screen.

　 Rule 6: Put the script at the bottom. When the page downloads the script, it will prevent other content from being downloaded and rendered to prevent the browser from redrawing and reflowing. Therefore, placing the script at the bottom of the page will not prevent the rendering of the page content, and some visual components of the page can be downloaded as early as possible without being blocked.

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

　 Rule 8: Use external JavaScript and CSS. Purely speaking, inlining is faster because it meets Rule 1 of reducing HTTP requests. However, on this issue, the performance optimization brought by caching must be considered. External files are likely to be cached, thus improving performance.

　 Rule 9: Reduce DNS lookups. Make good use of DNS caching, such as persistent connections.

　 Rule 10: Streamline JavaScript. Remove unnecessary character spaces, as is the case with our common .min.js.

　 Rule 11: Avoid redirects. The 3xx response status code represents a redirected response. The redirection caused by the lack of a slash at the end of the URL requires special attention. Do not damage performance due to this mistake.

　 Rule 12: Delete duplicate scripts.

　 Rule 13: Configure ETag. Speaking of this, I have to say that the conditional requests If-Modified-Since and If-None-Match are both used for cache re-verification. The problem with ETag is that when the server constructs the ETag, even though the two files are exactly the same, there will still be different ETags if they are on different servers, which increases the number of HTTP download requests, which greatly damages the performance of websites with server clusters in the background. big.

　 Rule 14: Make Ajax cacheable. Although Ajax is asynchronous, it cannot wait for a long time for a response. For optimization guidelines, please refer to the performance guidelines above. Among them, making good use of cache is still our focus.

　At the end of the book, I used these rules to analyze the top ten websites in the United States and found that there is a lot of room for improvement in performance by effectively using these rules. I also looked at my internship projects and found that there are many places that can be optimized. You should keep these guidelines in mind during future development so that users of your products can have a better experience.