Remove unused CSS
Published on • Updated on
The Opportunities section of your Lighthouse report lists all stylesheets with unused CSS with a potential savings of 2 KiB or more. Remove the unused CSS to reduce unnecessary bytes consumed by network activity:
How unused CSS slows down performance
Using a <link> tag is a common way to add styles to a page:
<!DOCTYPE html>
<html>
<head>
<link href="main.css" rel="stylesheet" />
...
</head>
</html>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.
How to detect unused 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.
Inline critical CSS and defer non-critical CSS
Similar to inlining code in a <script> tag, inline critical styles required for the first paint inside a <style> block at the head of the HTML page. Then load the rest of the styles asynchronously using the preload link.
Consider automating the process of extracting and inlining "Above the Fold" CSS using the Critical tool.
Learn more in Defer non-critical CSS.
Stack-specific guidance
Drupal
Consider removing unused CSS rules. Only attach the needed Drupal libraries to the relevant page or component in a page. See the Defining a library for details.
Joomla
Consider reducing, or switching, the number of Joomla extensions loading unused CSS in your page.
WordPress
Consider reducing, or switching, the number of WordPress plugins loading unused CSS in your page.
Resources
Updated on • Improve article