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的{{3}}

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

我做错了什么？

Answer 1

优化CSS交付不一定意味着单独异步加载它们。它也可能意味着CSS可能会变得臃肿，并且它的类可能不会用于渲染上面或不在此给定页面上。

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

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

使用head.js针对Google Page Speed优化CSS交付失败

1 个答案: