Css优化谷歌页面速度洞察

Css optimization for google pagespeed insight

本文关键字：速度 洞察 优化 谷歌 Css      更新时间：2023-09-26

第一个测试运行结果：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交付优化：如何推迟CSS加载？（拉法萨希的回答）。PagespeedInsight开始正常显示（使用CSS），但同样的建议出现了——"CSS没有正确优化。"

如何正确加载CSS，以便在没有修复建议的情况下在Insights中加载？

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

我的页脚：

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

Inlinecs.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在页面源代码中输出。这对页面加载不是很好。。。CSS include有403响应头，页面加载速度会更快。有什么建议吗？

我终于弄明白了。

你只需要

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

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

  1. Rest CSS你需要放在javascript代码中，你可以在这里找到：https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery
相关文章：