By Shad Super in Questions —

What Are the Best Practices for Critical CSS Extraction to Improve First Contentful Paint (FCP) and Largest Contentful Paint (LCP)?

Summary

The process of critical CSS extraction directly influences the First Contentful Paint (FCP) and Largest Contentful Paint (LCP). To improve these metrics, you can apply strategies like CSS extraction, inlining critical CSS, and deferring non-critical CSS. For optimal performance, ensure proper configuration of HTTP/2 Server Push and incorporate tooling into your critical CSS extraction process.

Extraction of Critical CSS

Critical CSS refers to the minimum CSS required to render the above-the-fold content of a webpage. By extracting and loading the critical CSS first, we can speed up FCP and LCP. The entire CSS for a webpage typically isn't needed immediately, and loading it all up front can be inefficient and slow.[Extract Critical CSS, 2021].

Inlining Critical CSS

When we talk about inlining critical CSS, we mean placing the critical CSS directly into the HTML document rather than linking it externally. This eliminates the need for additional HTTP requests at the start of the page load [Adding Interactivity with JavaScript, 2020].

Deferring Non-Critical CSS

Non-critical CSS should be deferred, meaning it should be loaded after the critical CSS and HTML content has been loaded. Techniques for this include moving non-critical CSS into external stylesheets that are loaded after page content and using media types and queries to avoid blocking rendering. [Analyzing the Critical Rendering Path, 2018].

Using HTTP/2 Server Push

HTTP/2 Server Push allows the server to send resources the browser hasn't yet requested. This can be beneficial in delivering the critical CSS to the client without waiting for the browser to parse the HTML and find the CSS link. However, it must be set up to handle this correctly, without pushing unnecessary resources [HTTP/2: Server Push, 2019].

Tooling for Critical CSS Extraction

Tools like critical (a popular npm package), Penthouse, and CriticalCSS can be used to automate the process of critical CSS extraction. These tools work by rendering a webpage, finding out which CSS rules were applied, and then producing a minimal amount of CSS needed to maintain the layout during the page load [Detecting Critical CSS, 2019].

Conclusion

To improve FCP and LCP, best practices involve extracting and inlining critical CSS, deferring non-critical CSS, implementing HTTP/2 Server Push correctly, and effectively using tooling in your critical CSS extraction process.

References