使用 head.js 优化 CSS 交付 Google 页面速度失败

Question

我的页面模板有一个 assets javascript 数组，其中资产列表 css，要在该页面中使用的 js，例如：

<!DOCTYPE html>
<html>
..........
..........
<script type="text/javascript">
var assets= ["/css/my.css", "/js/my.js", "/js/other.js"];
</script>
<script type="text/javascript" src="/js/head.js" async="async"></script>
</body>
</html>

与head.js（异步加载），加载页面资源列表：

// head.core code - v1.0.2 
// head.css3 code - v1.0.0 
// head.load code - v1.0.3
head.load(assets);

现在，Google 移动选项卡（而非桌面）上的页面速度显示 Optimize CSS Delivery 的 my.css

但是 my.css 是从 head.js 异步加载的异步加载。

我做错了什么？

Answer 1

优化CSS 交付不一定意味着单独异步加载它们。这也可能意味着 CSS 可能会膨胀，并且它有 class 可能无法用于在给定页面本身上呈现首屏或不呈现。

当开发人员使用工具缩小他们的 CSS 时，会发生这种情况，所有 CSS 跨页面捆绑在一起并且变得臃肿！

一种处理方法是使用 CSS 内联，它需要呈现首屏并将 CSS 的其余部分移动到页面底部。如果没有，您可以尝试使用 Google Apache 或 Ngnix 页面速度插件。 https://developers.google.com/speed/pagespeed/module/

使用 head.js 优化 CSS 交付 Google 页面速度失败

Optimize CSS Delivery with head.js for Google Page Speed fail

javascript

css

head.js

google-pagespeed