0

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 replaced my CSS loading method https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

After that Insights started not to load CSS at all ( Shows screenshot ).

Replaced CSS loading method with this one: CSS delivery optimization: How to defer css loading? ( RafaSashi's answer ). Pagespeed Insight started to show normally ( with CSS ) but same suggestion appeared - "CSS not optimized properly."

How to load CSS properly so it be loaded in Insights and without the Fixing suggestion?

Community
  • 1
  • 1
Roman Losev
  • 1,911
  • 19
  • 26

2 Answers2

0

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?

Roman Losev
  • 1,911
  • 19
  • 26
0

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>

  1. Rest CSS you need to put with javascript code which you can find here: https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery
Roman Losev
  • 1,911
  • 19
  • 26