10 Web Performance Audit Tips for Your Next Billion Users in 2019: Render-Blocking Styles

Celý článek

CSS files are rendered while rendering the actual document, not after. For this reason, the document has to wait for the CSS to be parsed and interpreted before anything is shown on the screen. The implication therefore, is that if a CSS takes long or longer than expected to be ready, then the entire document will take that much time to show anything.

Consider this image from Varvy:

The page visibility time is relative to the CSS files processed. This is why larger amount of style files take more time than when you have just a single file.

Considerations

HTTP Requesuts

Reduce the number of HTTP requests you need to make (especially for HTTP v1) to fetch CSS files. Bundling CSS files into a single file is preferred unless you’re supporting HTTP v2.

Bundle Spliting

When bundling as bundle.css or main.css, remember that some CSS files are never going to be used in some pages in your app. When possible, split the CSS to only be contained in pages they are used and you can then have a bundled global CSS that every page needs.

Inline CSS

Inline CSS or use components. This two strategies promotes composition when done well. Therefore, you end up using a chunk of CSS only when it’s component is rendered.

Generally, you just want to keep an eye on the Critical Rendering Path I mentioned earlier.

Tools and Resources

• webpack
• Varvy: Render blocking CSS