CSS Performance Optimizations

Performance optimization has a lot of blocks, and what we're going to share here is CSS optimization. CSS performance Optimization We're talking about the following 4 points:

1. Inline first screen key css (Critical CSS)

An important indicator in performance optimization-the first meaningful paint, or FMP, refers to the time that the top content of the page (primary contents) appears on the screen. This metric affects the time users need to wait before they see the page, while the inline first screen key CSS (the critical CSS, which can be called the first screen key CSS) * * can reduce this time.

Everyone should be used to referencing external CSS files via the link tag. But what you need to know is that CSS can be downloaded more quickly by inline it directly into an HTML document. When using an external CSS file, you need to know the CSS file you want to refer to when the HTML document is downloaded, and then download them. So, inline CSS allows the browser to start rendering the page in advance , because it can be rendered after the HTML download is complete.     since inline CSS enables page rendering to start in advance, can you inline all of the CSS? The answer is obviously no, and this does not apply to inline larger CSS files. Because of the limitations of the initial Congestion window (TCP-related concepts, usually 14.6kB, compressed size), if the file after the 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 only inline the key CSS needed to render the first screen content into the HTML . now that the inline first screen key CSS has been known to optimize performance, the next step is how to determine the first screen key CSS. Obviously, we don't need to manually determine what is the first-screen key CSS. On GitHub There is a project critical CSS that can be extracted from the key styles that belong to the first screen, and you can take a look at the project and use it in conjunction with your own build tools. Of course, in order to ensure the correct, we'd better personally confirm that the extracted content is missing. 2. Loading CSS AsynchronouslyCSS blocks rendering, and the browser will not render any processed content until the CSS file is requested, downloaded, and parsed. Sometimes, this blocking is necessary because we don't want the browser to start rendering the page before the required CSS is loaded. Then the first screen key CSS inline, the remaining CSS content blocking rendering is not necessary, you can use external CSS, and asynchronous loading. The first is to use JavaScript to dynamically create the style sheet link element and insert it into the DOM.

 //  Create link tag   Const  MYCSS = document.createelement ( "  Link    = "  stylesheet   "" Span style= "COLOR: #000000" >;mycss.href  =  " mystyles.css   "  //  insert to the last position of the header  Document.head.insertBefore (MYCSS, document.head.childnodes[ Document.head.childNodes.length-1 ].nextsibling); 

The second way is to set the link element's media properties to a media type (or media query) that the user's browser does not match, such as media="print" , or even a type that does not exist at all media="noexist" . For browsers, if the style sheet is not available for the current media type, its priority will be lowered and downloaded without blocking the page rendering.

<link rel="stylesheet" href="mystyles.css " media= "  noexist" onload="this.media= ' all '">

Similar to the second approach, we can also rel link enable the browser to load asynchronously by marking the element as alternate an optional style sheet through attributes. Also do not forget that after loading is complete, it will be rel changed back.

<link rel="alternate stylesheet" href="mystyles.css " onload="this.rel= ' stylesheet '">

The above three methods are more ancient. Now, the Web Standard rel= "preload" indicates how to load resources asynchronously, including CSS class resources.

<link rel="preload" href="mystyles.css"as =  "style" onload="this.rel= ' stylesheet '">

Note that as it is necessary. Ignoring as the attribute, or the wrong as property, makes the preload same XHR request, and the browser does not know what content is loaded, so the load priority for such resources is very low. asoptional values can refer to the above standard documentation.

It seems that rel="preload" the usage is no different from the above two by changing certain properties so that the browser loads the CSS file asynchronously but does not parse until the load is complete and the modifications are restored, and then the parsing begins.

But there is a very important difference between them, that is, using preload, you media can start loading CSS earlier than using mismatched methods. Therefore, although the support of this standard is still imperfect, it is recommended to use this method preferentially.

Attention:

This method in the current browser support is not optimistic, but we can polyfill through the LOADCSS, so support is not supported, this is not a thing.

3. File compression

One of the most easily thought-out and often used methods of performance optimization is file compression, which tends to have significant results.

The size of the file directly affects the browser's loading speed, which is especially noticeable when the network is poor. I believe everyone has long been accustomed to the compression of CSS, and now the building tools, such as Webpack, Gulp/grunt, rollup, etc. also support the CSS compression function. Compressed files can be significantly reduced, which can greatly reduce the load time of the browser.

4. Remove Unused CSS

Although file compression can reduce file size. However, CSS file compression usually only removes useless spaces, which limits the compression ratio of CSS files. Is there any other way to streamline CSS? The answer is obviously yes, and if the compressed file still exceeds the expected size, we can try to find and delete the useless CSS in the code.

In general, there are two kinds of useless CSS code: one is a different element or another case of duplicate code, one is the entire page is not in effect CSS code. For the former, when writing code, we should extract the public classes as much as possible, reducing duplication. For the latter, in the process of code maintenance for different developers, there will always be no longer use of CSS code, of course, a person can also be written when the problem arises. These useless CSS code will not only increase the amount of browser download, but also increase the browser parsing time, which is a great performance of consumption. So we need to find and remove these useless code.

Of course, it is inefficient to manually delete these useless CSS. We can do that with the UNCSS library. Uncss can be used to remove useless CSS from a style sheet and to support multiple files and JavaScript-injected CSS.

CSS Performance Optimizations