# Optimize CSS Delivery

> [!CAUTION]
> **Deprecated** . This page was written for version 4 of the PageSpeed Insights API, which is deprecated and will be shut down in May 2019. [Version 5](https://developers.google.com/speed/docs/insights/v5/get-started) is the latest and provides both real-world data from the Chrome User Experience Report and lab data from Lighthouse.

This rule triggers when PageSpeed Insights detects that a page includes render blocking external stylesheets, which delay the time to first render.

### Overview

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. See [render-tree construction, layout, and paint](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction) to learn more about the critical rendering path, and [render
blocking CSS](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css) for tips on how to unblock rendering and improve CSS delivery.

### Recommendations

If the external CSS resources are small, you can insert those directly into the HTML document, which is called inlining. Inlining small CSS in this way allows the browser to proceed with rendering the page. Keep in mind if the CSS file is large, completely inlining the CSS may cause PageSpeed Insights to warn that the above-the-fold portion of your page is too large via [Prioritize Visible Content](https://developers.google.com/speed/docs/insights/PrioritizeVisibleContent). In the case of a large CSS file, you will need to identify and inline the CSS necessary for rendering the above-the-fold content and defer loading the remaining styles until after the above-the-fold content.

- [Example of inlining a small css file](https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery#example)
- [Don't inline large data URIs](https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery#dataURI)
- [Don't inline CSS attributes](https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery#CSSattributes)

### Example of inlining a small CSS file

If the HTML document looks like this:

```css
<html>
  <head>
    <link rel="stylesheet" href="small.css">
  </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>
```
And the resource `small.css` is like this:

```css
  .yellow {background-color: yellow;}
  .blue {color: blue;}
  .big { font-size: 8em; }
  .bold { font-weight: bold; }
```
Then you can inline critical CSS as follows:

```css
<html>
  <head>
    <style>
      .blue{color:blue;}
    </style>
    </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
    <noscript id="deferred-styles">
      <link rel="stylesheet" type="text/css" href="small.css"/>
    </noscript>
    <script>
      var loadDeferredStyles = function() {
        var addStylesNode = document.getElementById("deferred-styles");
        var replacement = document.createElement("div");
        replacement.innerHTML = addStylesNode.textContent;
        document.body.appendChild(replacement)
        addStylesNode.parentElement.removeChild(addStylesNode);
      };
      var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
          window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
      if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
      else window.addEventListener('load', loadDeferredStyles);
    </script>
  </body>
</html>
```


This transformation, including the determination of critical/non-critical CSS,
inlining of the critical CSS, and deferred loading of the non-critical CSS,
can be made automatically by the
[PageSpeed Optimization modules](https://developers.google.com/speed/pagespeed/module) for
nginx, apache, IIS, ATS, and Open Lightspeed, when you enable the
[prioritize_critical_css](https://developers.google.com/speed/pagespeed/module/filter-prioritize-critical-css) filter.


See also the
[loadCSS](https://github.com/filamentgroup/loadCSS/blob/master/README.md)
function to help load CSS asynchronously, which can work with
[Critical](https://github.com/addyosmani/critical/blob/master/README.md),
a tool to extract the critical CSS from a web page.


The critical styles needed to style the above-the-fold content are inlined and applied to the document immediately. The full small.css is loaded after initial painting of the page. Its styles are applied to the page once it finishes loading, without blocking the initial render of the critical content.


Note that the web platform will soon support loading stylesheets in a non-render-blocking manner, without having to resort to using JavaScript, using [HTML Imports](http://w3c.github.io/webcomponents/spec/imports/#link-type-import).

### Don't inline large data URIs


Be careful when inlining data URIs in CSS files. While selective use of small data URIs in your CSS may make sense, inlining
large data URIs can cause the size of your above-the-fold CSS to be larger, which will slow down page render time.

### Don't inline CSS attributes


Inlining CSS attributes on HTML elements
(e.g., `<p style=...>`) should be avoided where possible, as this often leads to unnecessary code duplication.
Further, inline CSS on HTML elements is blocked by default with
[Content Security Policy](http://www.w3.org/TR/CSP/) (CSP).

## Feedback

Was this page helpful?
<button class="button button-primary expand-control gc-analytics-event" data-category="Helpful" data-value="1" data-label="/speed/docs/insights/OptimizeCSSDelivery" style="background-color:#f44336;"> Yes </button>

> [!TIP]
> Great! Thank you for the feedback. If you have a specific, answerable question about using PageSpeed Insights, ask the question in English on [Stack
> Overflow](https://stackoverflow.com/questions/tagged/pagespeed-insights). For general questions, feedback, and discussion, start a thread in the [mailing list](https://groups.google.com/forum/#!forum/pagespeed-insights-discuss).

<button class="button button-primary expand-control gc-analytics-event" data-category="Helpful" data-value="0" data-label="/speed/docs/insights/OptimizeCSSDelivery" style="position:absolute;top:0;left:70px;background-color:#f44336;"> No </button>

> [!WARNING]
> Sorry to hear that. If you have a specific, answerable question about using PageSpeed Insights, ask the question in English on [Stack
> Overflow](https://stackoverflow.com/questions/tagged/pagespeed-insights). For general questions, feedback, and discussion, start a thread in the [mailing list](https://groups.google.com/forum/#!forum/pagespeed-insights-discuss).