CSS delivery should be optimised by avoiding inline CSS and avoiding the use of
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.
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.
Avoid CSS @import
@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.
More articles in this series
➜ This article is from our comprehensive Page Speed Best Practices guide.
➜ Previous article in this series: Caching