Bra*_*roy 8 css performance pagespeed
所以我通过Google的PageSpeed Insights运行我的网站,它告诉我,我可以通过延迟加载非关键资源来改善CSS交付.特别是它引用了包含字体真棒:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
我想我可以通过简单地将它放在关闭body标签之前的脚本之前来延迟它的负载,如下所示:
...
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/min/scripts.min.js"></script>
</body>
</html>
然而!在查看Google 关于交付速度的文档时,我发现了两种不同的解决方案.
用我的母语(荷兰语;你可以在右下角更改文档的语言)文档声明我应该将非必要的CSS 放在结束的html标记之下.这对我来说似乎很奇怪.在尝试通过JS访问文件时,这会不会复杂化？ 你为什么不把它放在关闭身体标签之前？
...
</body>
</html>
<link rel="stylesheet" href="small.css">
但是,在英文文档中,事情变得更复杂并需要JavaScript:
...
<script>
var cb = function() {
var l = document.createElement('link'); l.rel = 'stylesheet';
l.href = 'small.css';
var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
};
var raf = requestAnimationFrame || mozRequestAnimationFrame ||
webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf) raf(cb);
else window.addEventListener('load', cb);
</script>
</body>
</html>
为什么需要JS？是不是有点超过顶部？
我的做法有什么问题？为什么不能在关闭正文标记之前加载非关键CSS？
外部样式表将阻止页面的呈现，直到页面完全加载。Google 建议将文档最初可见（关键，折叠上方）部分所需的样式放置在<style>头部标记内（唯一可以定义非内联样式的地方），以避免这种渲染阻塞。读取 HTML后，非关键样式（当您登陆页面时不会直接看到的样式）将作为外部样式表添加到 head 内。这样它会首先渲染，然后才会加载所有其他样式。一切都是为了尽快向访问者展示内容，并且不让她/他等待超过必要的时间。
它认为在大多数情况下，谷歌推荐的内容都超出了上限，他们只是在几毫秒内感到奇怪——他们的方法只有在 CSS 很大的情况下才有意义。但我认为使用当前可用的工具进行维护即使不是几乎不可能，也是很困难的。例如，如果回访者之前已向下滚动页面并会自动再次登陆该页面（Opera 是一个对此非常顽固的浏览器），该怎么办？仅此而已，您就需要更多的 JS，并且可能需要处理样式。这可不是什么好办法。即使对于初始显示，您也必须直接在头部中填充一些媒体查询，以便尝试在不诉诸全屏部分的情况下使事情正确。这一切都适得其反并且过于复杂。
将<style>或<link>标签放在头部之外可能有效，但这是不正确的。我确信谷歌不再站在这个立场上，并且英文版本是唯一有效的文档。编辑 - 请参阅评论以了解对此的细微差别。
即使人们确实按照谷歌的方式进行了操作并在 PageSpeed Insights 上获得了“良好”的分数，但这并没有多大意义。您仍然可以隐藏整个页面，仅在所有内容都已加载时才显示它（这并不罕见），而不会影响分数。
我个人决定忽略它，直到他们实现了一个可以异步加载 CSS 的功能（就像使用 JavaScript 一样async），就像文档中宣布的那样。它仍然需要一个特殊的用例，但至少你可以为它构建一个框架。我自己不喜欢用插件来处理一些琐碎的事情。
Google 文档中缺少一件重要的事情 - 在 JavaScript 被禁用时提供后备。幸运的是，使用 HTML5，<noscript>可以使用标签来实现此目的：
<head>
/* other stuff */
<noscript><link rel="stylesheet" href="small.css"></noscript>
</head>
旁注 - Google 自己的分析脚本将阻止完美的 PageSpeed 分数，因为他们在其上设置了（逻辑上）快速缓存过期。想想看。
| 归档时间： |
|
| 查看次数： |
608 次 |
| 最近记录： |