Recommendations

PageSpeed
YSlow

PageSpeed: Combine external CSS (deprecated)

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 recommendation?

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 the sidebar 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.

Summary

CSS
High
Easy

PageSpeed 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