Page Speed: Combine external CSS

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

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

Have an idea for this recommendation?

Feel free to contact us with your suggestions, links or ideas!