Missed the action at the 2018 Chrome Dev Summit? Catch up with our playlist on the Google Chrome Developers channel on YouTube. Watch now.

Defer unused CSS

Overview

Using a <link> tag is a common way to add styles to a page:

<!doctype html>
<html>
  <head>
    <link href="main.css" rel="stylesheet">
    ...

The main.css file that the browser downloads is known as an external stylesheet, because it's stored separately from the HTML that uses it.

By default, a browser must download, parse, and process all external stylesheets that it encounters before it can display, or render, any content to a user's screen. It wouldn't make sense for a browser to attempt to display content before the stylesheets have been processed, because the stylesheets may contain rules that affect the styling of the page.

Each external stylesheet must be downloaded from the network. These extra network trips can significantly increase the time that users must wait before they see any content on their screens.

Unused CSS also slows down a browser's construction of the render tree. The render tree is like the DOM tree, except that it also includes the styles for each node. To construct the render tree, a browser must walk the entire DOM tree, and check which CSS rules apply to each node. The more unused CSS there is, the more time that a browser might potentially need to spend calculating the styles for each node.

Recommendations

The CSS that is needed in order to load a page is called the critical CSS. In general, a page load should only be blocked on critical CSS. See Detecting critical CSS.

Theoretically, the most optimal approach is to inline critical CSS into the <head> of the HTML. Once the HTML is downloaded, a browser has everything that it needs in order to display the page. It doesn't need to make any more network requests. See Inlining CSS.

<!doctype html>
<html>
  <head>
    <style>
      /* Critical CSS here. */
    </style>
    ...

Uncritical CSS is CSS that the page might need later. For example, suppose clicking a button causes a modal to appear. The modal only appears after clicking the button. The modal's style rules are uncritical, because the modal will never be displayed when the page is first loaded. See Deferring uncritical CSS.

Detecting critical CSS

The Coverage tab of Chrome DevTools can help you discover critical and uncritical CSS. See View used and unused CSS with the Coverage tab.

The Coverage tab.
Figure 1. The Coverage tab

You can also extract this information from Puppeteer. See page.coverage.

Inlining critical CSS

This is a list of up-to-date tools that can automate the process of inlining critical CSS. You are welcome to add your own tool to this list.

Node:

Apache:

Nginx:

Webpack:

Rollup:

Gulp:

Grunt:

Deferring uncritical CSS

This is a list of up-to-date tools that can automate the process of deferring uncritical CSS. You are welcome to add your own tool to this list.

More information

Lighthouse ignores any file with less than 2 kilobytes of potential savings.

Sources:

Feedback

Was this page helpful?