title: Optimize CSS Delivery - by Google
body: <p>Google's suggested the Optimize CSS Delivery method according to the below document link: </p>
  
  <p><a href="https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery#dataURI" rel="nofollow">https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery#dataURI</a></p>
  
  <p>According to the Google document I have divide the CSS into two separate CSS files.
   a) small.css  - Critical CSS
   b) common.css - Other normal CSS</p>
  
  <p>Then I've place the critical CSS end of  code.</p>
  
  <pre><code>eg: &lt;html&gt;
        &lt;head&gt;
         &lt;link href="/css/common.css" rel="stylesheet" type="text/css"&gt;
        &lt;/head&gt;
        &lt;body&gt;
          content
        &lt;/body&gt;
      &lt;html&gt;
      &lt;noscript&gt;&lt;link rel="stylesheet" href="small.css"&gt;&lt;/noscript&gt;
  </code></pre>
  
  <p>However when view the page, that particular critical CSS(small.css) style is not applied to the HTML page. Please help me to solve this Optimize CSS Delivery method issue.</p>