Page Speed: Combine external CSS More Recommendations

Rule Summary

CSS
High
Easy
83%

Overview

Combining external stylesheets into as few files as possible cuts down on RTTs and delays in downloading other resources.

How does your site score on this rule?

Details from Google

As with external JavaScript, multiple external CSS files incurs additional RTT overhead. If your site contains many CSS files, combining them into fewer output files can reduce latency. We recommend a maximum of 3, but preferably 2, CSS files.

It often makes sense to use many different CSS files during the development cycle, and then bundle those CSS files together as part of your deployment process. See below for recommended ways of partitioning your files. You would also need to update all of your pages to refer to the bundled files as part of the deployment process.

recommends:

Partition files optimally

Here are some rules of thumb for combining your CSS files in production:

  • Partition the CSS into 2 files each: one CSS file containing the minimal code needed to render the page at startup; and one CSS file containing the code that isn't needed until the page load has completed
  • Serve CSS of a rarely visited component in its own file. Serve the file only when that component is requested by a user
  • For CSS that shouldn't be cached, consider inlining it.
  • Don't use the CSS @import rule from a CSS file. If possible, inline the imported CSS content in the main CSS file, or load the imported CSS from the main HTML document instead.
Position stylesheets correctly in the document head

It's beneficial to position references to external CSS in the correct order with respect to scripts, to enable parallel downloads.

Read More

Related YSlow Recommendations

Contribute to this recommendation

Have an opinion, link, or other contribution to share regarding this recommendation? Share it with us and help make the web a faster place!