project_path: /web/tools/_project.yaml book_path: /web/tools/_book.yaml description: Reference documentation for the "Defer unused CSS" Lighthouse audit.
{# wf_updated_on: 2018-07-19 #} {# wf_published_on: 2018-07-17 #} {# wf_blink_components: Platform>DevTools #}
Using a <link>{: .external } 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.
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.
The Coverage tab of Chrome DevTools can help you discover critical and uncritical CSS. See View used and unused CSS with the Coverage tab.
You can also extract this information from Puppeteer.
See page.coverage{: .external }.
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{:.external}.
Caution: None of these tools have been vetted. Make sure to do your own due diligence.
Node:
- penthouse{: .external }
- critical{: .external }
- inline-critical{: .external }
Apache:
- mod_pagespeed{: .external }
Nginx:
- ngx_pagespeed{: .external }
Webpack:
- isomorphic-style-loader{: .external }
Rollup:
- rollup-plugin-purgecss{: .external }
Gulp:
- gulp-inline-source{: .external }
Grunt:
- grunt-penthouse{: .external }
- grunt-critical{: .external }
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{:.external}.
Caution: None of these tools have been vetted. Make sure to do your own due diligence.
- loadCSS{: .external }
Lighthouse ignores any file with less than 2 kilobytes of potential savings.
Sources:
{% include "web/_shared/helpful.html" %}