javascript - 针对 google pagespeed insight 的 CSS 优化

Question

第一次测试运行结果: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 中加载且没有修复建议？

Answer 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 pagespeed 洞察力。目前我面临其他问题:

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