使用head.js优化CSS交付以实现Google Page Speed失败

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 Page Speed表示“ 优化 my.css CSS投放 ”

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

我究竟做错了什么？

Answer 1

优化CSS交付不一定意味着要单独异步加载它们。 这也可能意味着CSS可能过时，并且其类可能无法用于折叠显示或不在给定页面本身上呈现。

当开发人员使用工具最小化CSS时，会发生这种情况，即跨页面的所有CSS都捆绑在一起并膨胀了！

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