Shulou(Shulou.com)06/02 Report--

This article mainly introduces "what are the skills of CSS performance optimization". In daily operation, I believe that many people have doubts about the skills of CSS performance optimization. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts of "what are the skills of CSS performance optimization?" Next, please follow the editor to study!

There is an important indicator in performance optimization-the first effective drawing (FirstMeaningfulPaint, referred to as FMP) refers to the time when the primary content of the page (primarycontent) appears on the screen. This indicator affects the waiting time for users to see the page, and * * inline the first screen key CSS (CriticalCSS, which can be called the first screen key CSS) * * can reduce this time.

1. Inline first screen key CSS (CriticalCSS)

Everyone should be used to referencing external CSS files through link tags. What you need to know, however, is that inlining CSS directly into an HTML document makes CSS download faster. When using external CSS files, you don't know the CSS files you want to reference until the HTML documents have been downloaded before downloading them. So, inline CSS allows browsers to start page rendering earlier, because it can be rendered after the HTML download is complete.

Since inline CSS can advance the start time of page rendering, is it possible to inline all CSS? The answer is obviously no, and this approach does not apply to larger inline CSS files. Because of the limitations of the initial congestion window 3 (TCP-related concepts, usually 14.6kB, compressed size), if the file after inline CSS exceeds this limit, the system needs to make more round trips between the server and the browser, which does not advance the page rendering time. Therefore, we should inline only the key CSS needed to render the first screen content into the HTML.

Now that we know that the inline first screen key CSS can optimize performance, the next step is how to determine the first screen key CSS. Obviously, we don't need to manually determine which content is the key CSS on the first screen. There is a project CriticalCSS4 on Github that can extract the key styles that belong to the first screen. You can take a look at the project and use it with your own build tools. Of course, in order to make sure that it is correct, you had better personally confirm whether the extracted content is missing.

However, inline CSS has a drawback. The inline CSS will not be cached and will be downloaded again every time. However, as mentioned above, if we keep the inline file size within 14.6kb, this does not seem to be a big problem.

As above, we have explained why and how to inline the key CSS, so what are we going to do with the rest of the CSS? It is recommended that you use an external CSS to introduce the remaining CSS so that caching can be enabled and that they can be loaded asynchronously.

two。 Load CSS asynchronously

CSS blocks rendering, and the browser will not render any processed content until the request, download, and parsing of the CSS file is complete. Sometimes this blocking is necessary because we don't want the browser to start rendering the page before the required CSS loads. Then after inlining the key CSS of the first screen, the blocking rendering of the remaining CSS content is not necessary, you can use external CSS and load asynchronously.

At this point, the study of "what are the skills of CSS performance optimization" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.