阻止 CSS 资源

Posted 2023-02-22

【中文标题】阻止 CSS 资源

【英文标题】：Blocking CSS Resources

【发布时间】：2017-07-16 19:50:58

【问题描述】：

我已经阅读了大量关于延迟或异步加载 CSS 的教程和“修复”... 3 小时后，我要睡觉了......

google 页面速度测试：您的页面有 3 个阻塞的 CSS 资源。这会导致您的页面呈现延迟。

我已经阅读了 javascript 方法、jquery 方法和网络上的大量答案...感觉有点愚蠢，有人可以在 lamen 中解释如何在不使用内联 css 的情况下进行这些加载...

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

【问题讨论】：

您是否尝试过在页面加载或页面速度测试后应用样式？

你能说得更具体些吗？抱歉，我确实创建了我的网站 www.zachnewberry.com，但无论如何我都不是网站管理员，我是营销预算低的屋顶工：P

如果您关心*oogle页面速​​度测试，您可以在页面加载后加载css资源；这是在发送DOMContentLoaded 和window load 事件之后。为什么 *oogle 页面速度测试对您很重要？

好吧，我假设它会帮助谷歌将我的页面排名更高。我使用站点分析器，我在所有测试中都获得了 90+ 的分数，我很满意。但是页面速度让我从谷歌那里得到了困扰。我的主要目标是在我让自然流量和我的 ppc 帮助之前让 google 对我进行尽可能高的排名

您是否联系过*oogle，询问他们在不购买产品的情况下可以做些什么来实现您的目标？ css 对页面有多重要？您可以在Worker 或ServiceWorker 加载css，当load 在window 调度时，创建一个<style> 元素并将css 文本附加到元素.textContent。跨度>

【参考方案1】：

我有一些渲染阻塞文件的经验。所以我分享它希望对你有所帮助，但你应该知道解决这个问题有点棘手，而且不像你希望的那样直接。首先问自己这三个问题： 第一：您的内容是否优先？ 第二：您使用 WordPress 吗？ 如果你这样做 三：确定没有安装一些干扰插件？

首先：内容优先级的 html5 语义是必不可少的，但也有可能错误地使用它们。例如，像侧边栏这样的元素可能在折叠内容上方可见，但它不被视为折叠上方。你知道渲染阻塞意味着：加载页面需要一些在正确的时间不存在的东西，它应该等待。不需要的元素可能会导致这种情况。 第二：如果您使用 WordPress 并为其购买了一些主题，那么您的主题可能不是标准的。这个问题可以解决但不值得，这需要时间，你应该考虑下一个主题更新。我认为更改主题是最简单的，但是可以进行更正。但是如果你使用一些静态页面，请尽快调用 CSS 文件。 三：最近我的所有 CSS 和 JavaScript 文件都遇到了这样的问题。这是由于使用插件来延迟加载图像。它弄乱了一切，我将其停用并解决了问题。它延迟了图像加载并获得了一些优势，但延迟了总页面加载以下载所有文件，缺点多于优点！浏览您的插件以查找可能会产生影响的内容。我仍然有一个渲染阻止 CSS，但我正在努力。我使用一个插件来合并 CSS 文件并且渲染阻塞是由它引起的。我正在尽可能多地消除插件，并在子主题中构建它们的功能以减少 CSS 文件请求，然后我可以停用此合并插件。

【讨论】：

我不使用wordpress，着陆页的内容不是“优先”的。我相信这是因为文本/代码比率

@zachnewberry 如果您不介意，我可以查看您的页面。那么尽快调用 CSS 文件呢？你可以吗？

当然，zachnewberry.com 是网站。如果您想查看一些来源，请给我发电子邮件 zach (at) zachnewberry.com

@zachnewberry 我浏览了你的页面，你的主页内容没有被优先考虑，因为有几个<header> 标签。只允许一个<header> 标签，删除其他标签。我已经创建了this sample page，只有一个 JavaScript 渲染阻塞，它也可以通过将该文件代码粘贴到主页中来解决，但它会使页面有点沉重。现在我没有更好的主意。 َ还看看我的你的图片版本，它们的重量接近三分之一，看起来还不错。可能压缩图像对页面加载速度有更好的影响。

@zachnewberry 我想到了关于页面性能的另一件事，你使用了三个 font-awesome 图标，那么为什么要加载一个包含数百个图标的 27KB 外部 CSS？