Css Optimization For Google Pagespeed Insight

First test run result: that CSS not optimized properly. https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.tdb.lt%2F From google optization suggestion I r

Solution 1:

Solved my problem by simple request of CSS files

My footer:

require_once("pub/css/inlinecss.php");

Inlinecss.php

$files = array("clean.css","pr.css", "steps.css", "default.css","screen.css","tablet.css","mobile.css");
$path = 'pub/css/';
foreach( $files as $f ) 
{
    include($path . $f);
}

With the fix I got 99/100 pagespeed insights without CSS optimization suggestion. At the moment I facing other problem:

Whole CSS is outputted in page source code. Which is not really good for a page load... Page would load faster with CSS include which has 403 response header. Any suggestions?

Solution 2:

Finally I have figured it out.

All you need is

1. To create core.css ( small one, which contains main site's layout skeleton parts ) and output it in head inline form, like this:

<style>body{border: 0px} footer{background-color:#c0c0c0;}</style>

2. Rest CSS you need to put with javascript code which you can find here: https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery