CSS delivery should be optimised by avoiding inline CSS and avoiding the use of @import.

Before the browser can render content it must process all the style and layout information for the current page. As a result, the browser will block rendering until external stylesheets are downloaded and processed, which may require multiple roundtrips and delay the time to first render.

Google, “Optimize CSS Delivery”

Avoid excessive inline CSS

Prefer CSS in external files over inlining large amounts of CSS into pages to improve caching efficiency. CSS can be inlined using style attributes and <style> tags. This can be convenient during development but any CSS that is shared between pages won’t be cached by the browser. However, Google does promote inlining just enough CSS at the start of each page so the top portion of the page renders immediately so browsing feels faster. Google’s AMP project for mobile also promotes inlining where each page should have all the CSS it needs inlined to reduce requests as long as only a modest amount of CSS is involved. We recommend you keep the amount of inlined CSS per page under 50,000 bytes.

Learn more

  1. Optimize CSS Delivery
    developers.google.com
  2. Best Practices for Speeding Up Your Web Site
    developer.yahoo.com
  3. How AMP Works
    www.ampproject.org

Avoid CSS @import

Avoid using @import in CSS files as this prevents parallel loading of CSS. Inside a CSS file, @import can be used to include the contents of another CSS file by specifying a URL. This can be convenient but impacts download times because browsers can only start fetching the imported URL after the CSS file containing the @import has been fetched. To get a page to load CSS files in parallel, you should instead add a <link rel="stylesheet" href="…"> tag for each of the CSS files you need to load to the HTML code of the page.

Learn more

  1. Don’t use @import
    www.stevesouders.com
  2. @import - MDN web docs
    developer.mozilla.org

More articles in this series

➜  This article is from our comprehensive Page Speed Best Practices guide.

➜  Next article in this series: Javascript

➜  Previous article in this series: Caching