gpt4 book ai didi

css - 根据 Google 优化 CSS 交付

转载 作者:技术小花猫 更新时间:2023-10-29 11:03:14 26 4
gpt4 key购买 nike

所以我通过 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 的 documentation on delivery speed 时,我找到了两种不同的解决方案。

在我的母语(荷兰语;您可以在右下角更改文档的语言)中,文档指出我应该将非必要的 css 放在结束的 html 标记中。这对我来说似乎非常奇怪。 尝试通过 JS 访问文件时,这不会使事情复杂化吗? 为什么不将它放在结束 body 标记之前?

  ...
</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?这不是有点过头了吗?

我的方法有什么问题?为什么不能在结束 body 标记之前加载非关键 CSS?

最佳答案

外部样式表将阻止页面呈现,直到它完全加载。 Google 建议将文档的最初可见(关键,首屏)部分所需的样式放在 <style> 中。头部中的标签( 唯一可以定义非内联样式的地方 )以避免这种渲染阻塞。阅读 HTML 后,非关键样式(您登陆页面时不会直接看到的样式)作为外部样式表添加到头部内。。这样它会首先呈现,然后才会加载所有其他样式。所有这些都是为了尽快向访问者展示内容,而不是让她/他等待超过必要的时间。

它认为在大多数情况下,它超出了 Google 推荐的范围,他们只是在几毫秒内变得怪异——他们的方法只有在 CSS 很大的情况下才有意义。但我认为很难,如果不是几乎不可能的话,用当前可用的工具进行维护。例如,如果它是一个回访者,他在较早的时候向下滚动了页面并会自动再次登陆那里(Opera 是一个对此非常顽固的浏览器)?仅此一项,您就需要更多的 JS,并且可能需要处理样式。那不是一个好方法。即使是初始显示,您也必须直接在头部填充一些媒体查询,以便在不诉诸全屏部分的情况下尝试正确处理。这一切都适得其反,而且过于复杂。

<style><link> head 部分之外的标签可能有效,但这是不正确的。我敢肯定谷歌不再站在那个立场上了,而且英文版是唯一有效的文件。编辑 - 请参阅评论了解这方面的细微差别。

即使按照 Google 的方式进行操作并在 PageSpeed Insights 上获得“好”分数,也没有太大意义。您仍然可以隐藏整个页面,并且仅在一切 已加载(这并不罕见)时才显示它,而不会影响分数。

我个人决定忽略它,直到他们实现了一个功能,您可以在该功能中异步加载 CSS(就像您可以使用 JavaScript 和 async 一样),就像文档中宣布的那样。它仍然需要一个特殊的用例,但至少你可以为它构建一个框架。我自己不喜欢插件。

Google 文档中缺少一件重要的事情——在禁用 JavaScript 时提供回退。幸运的是,有了 HTML5,<noscript>标签可用于此:

<head>

/* other stuff */

<noscript><link rel="stylesheet" href="small.css"></noscript>
</head>

旁注 - Google 自己的分析脚本将阻止完美的 PageSpeed 得分,因为他们在其上设置了(逻辑上)快速缓存过期。算了吧。

关于css - 根据 Google 优化 CSS 交付,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32423767/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com