谷歌页面速度洞察的CSS优化答案

【问题标题】：Css optimization for google pagespeed insight谷歌页面速度洞察的CSS优化
【发布时间】：2015-06-07 10:46:17
【问题描述】：

第一次测试运行结果：CSS 没有正确优化。 https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.tdb.lt%2F

根据谷歌优化建议，我替换了我的 CSS 加载方法 https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

在那之后，Insights 开始根本不加载 CSS（显示屏幕截图）。

用这个替换 CSS 加载方法：CSS delivery optimization: How to defer css loading?（RafaSashi 的回答）。 Pagespeed Insight 开始正常显示（使用 CSS），但出现了相同的建议 - “CSS 未正确优化”。

如何正确加载 CSS 以便在 Insights 中加载且无需修复建议？

【问题讨论】：

标签： javascript css optimization

【解决方案1】：

通过简单的 CSS 文件请求解决了我的问题

我的页脚：

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);
}

在没有 CSS 优化建议的情况下，我获得了 99/100 的页面速度洞察。目前我面临其他问题：

整个 CSS 在页面源代码中输出。这对于页面加载来说并不是很好......使用具有 403 响应标头的 CSS 包含可以更快地加载页面。有什么建议？

【讨论】：

【解决方案2】：

我终于想通了。

你只需要

创建core.css（较小的，包含主站点的布局骨架部分）并以head inline形式输出，如下所示：

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

您需要使用 javascript 代码放置其余 CSS，您可以在此处找到：https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

【讨论】：