问题标签 [deferred-loading]

我想知道将我的 CSS 分成两部分是否是个好主意，一个内联关键部分和一个延迟外部部分。

我的整个 CSS 是 15kb（缩小）。在线“Critical Path CSS Generator”分析器给我的关键 CSS 是 1kb，但是当我检查我的代码时，我真的相信需要 5kb 的 CSS 才能在 1920x1080 的屏幕上渲染所有折叠内容。所以，我首先关心的是，当需要三分之一的 CSS 作为关键 CSS 时，是否值得拆分 CSS，或者我应该内联整个 CSS，因为它不是那么大（15kb）？

另一方面，我在这里关注的是我们整个网站的一部分，它鼓励用户采取行动，而行动是转到网站的另一部分，那里有另一个 CMS。所以，对于我说的这一部分，每个用户的页面浏览量并没有那么高：大约 70% 的人在这里只打开一个页面，而 92% 的人打开不到 4 个页面。因此，我猜在我们的情况下，拥有一个缓存的外部 CSS 可能不太重要。最后，我感觉第一页浏览量是最重要的；如果我们可以稍微提高它的速度，即使它降低了下一页的速度，那也是值得的。但是，我不知道当使用 HTTP/2 时，使用内联 CSS 而不是外部 CSS 是否真的会影响速度。

那么，你有什么建议？拆分我的 CSS 并仅内联关键部分更好，还是简单地内联整个文件？谢谢您的帮助。

我已经推迟了我所有的 CSS 使用

和使用yall.min.js的图像

但是 PageSpeed Insights 继续声称它（并且图像也是可见的）

我该如何优化呢？

谢谢，阿里

我试图用一个简单的例子来理解延迟。我有下面的 JS 代码，它需要 5 秒才能运行。

主页.js

我在home.html中使用它，如下所示：

我发现如果使用 defer 或将我的脚本放在正文标签的末尾（在我的理解中两者是等效的），hello world 仅在 5 秒后出现。但是如果我使用 asnyc 'hello world' 会立即出现。为什么是这样？

我每天都在测试我的页面速度好几次。我的页面经常收到 94 到 98 之间的评分，主要问题是：

消除渲染阻塞资源 - 节省 0.33

推迟未使用的 CSS - 节省 0.15 秒

在 Lab 数据中，所有值都是绿色的。

从昨天开始，页面速度突然下降到大约 80-91 范围，问题是：

消除渲染阻塞资源 - 节省 ~0.33

推迟未使用的 CSS - 节省 ~0.60 秒

它也说我First CPU idle的很慢~4,5ms

也是如此time to interactive，~4.7

有时也speed index很慢。

它也开始显示Minimize main-thread work建议，而之前没有显示。

问题是，我没有更改页面中的任何内容。仍然是相同的 HTML、CSS 和 JS。这也不是服务器问题，我没有 CPU 过度使用问题。

在 Gtmetrix 上，我仍然获得相同的 100% 分数和相同的 87% Yslow 分数，页面在 1.1s 到 1.7s 之间完全加载，发出 22 个 HTTP 请求，总大小为 259kb，就像以前一样。

在 Pingdom 上，我也获得了与以前相同的 91 级，页面加载速度约为 622 毫秒到 750 毫秒。

因此，我无法理解 Google 分析我页面的方式的这种突然变化。我当然担心这会影响我的排名。

知道是什么原因造成的吗？

我为一家小公司工作，该公司出于自身原因在使用 Wordpress 上的重主题网页时不灵活。他们还使用了大量插件，加载时间超过 10 秒。所以，在我运行分析告诉我js只是一场灾难之后，我想我应该尝试一下并检查生成的主页源代码。 他们选择的主题是 Unero，因为我想它适用于 woocommerce。该网站是一个小型电子商店和一个博客，没有什么太花哨的东西，我们也使用 yoast SEO，但这可能无关紧要。我意识到这里和那里运行着大量的 js 脚本。我读到您可以将所有内容设置为使用 async set true 运行。

还读到这可能会导致脚本之间出现中断，因为我认为未定义的变量和其他问题。请注意，我对 js 技术有点陌生，我可能不知道我真正应该问什么或搜索什么。我尽我所能解释我需要发生的事情。

1. 有没有一种方法可以覆盖（或重载，这里的术语是什么？）页脚上的一些js，在它们的位置（在 HEAD 和 BODY 中）定义之后，通过在页脚上使用片段将其设置为异步模式？这真的会奏效吗？
2. 我不想涉及任何插件通用解决方案，因为我担心它们会破坏上面提到的东西。如果我错了，请纠正我，请给我一些建议。除非解决方案是制作自定义插件，否则我猜我将拥有完全控制权。
3. 我对任何建议持开放态度，只要它不会破坏网站。

我在这里而不是在 Wordpress 开发或任何其他 Stack Exchange 论坛上问，因为我正在寻找一个手工完成的解决方案，以及它为什么会起作用的解释。我真的是一个手工编写代码的人，我不怕深入研究某些事情，如果事情会做对的话。

我正在使用 Chrome DevTools 来审核我的网站。在其中一个网页中，它说“资源正在阻止您页面的第一次绘制。考虑内联交付关键的 JS/CSS 并推迟所有非关键的 JS/样式。了解更多。”。我尝试单击“了解更多”并转到这篇文章https://developers.google.com/web/tools/lighthouse/audits/blocking-resources，其中说对于 javascript，可以使用 defer/async，对于 css，可以定义媒体类型。

但是，如果我的 css 不是关键的，但它是所有媒体类型所必需的怎么办。那么如何推迟这样的css呢？

谢谢

我刚刚启动了我的网站，目前正在解决页面速度问题。

最明显的问题是特定 .js 文件的延迟

此文件包含在“ Twitch for Wordpress ”插件中。

我通过 Cloudflare CDN 运行我的网站，它正在缩小 JS，我启用了 AMP Real URL，启用了 Brotli。Gzip 在 W3 Total Cache 插件中启用（我应该禁用 Cloudflare 插件吗？）我启用了 Rocket Loader。

我正在为 Primer 运行 Escapade Child 主题的略微修改版本。

我已经尝试过 W3 Total Cache Defer JS（非阻塞）和所有其他非阻塞，我已经换成使用 Cloudflare 提供的 minify（它可以处理大多数，只有一个插件仍然阻塞，我非常喜欢不要摆脱插件，除非有更好的选择）。

我尝试.htaccess了 GTMetrix 中概述的修改：

我尝试过的一切似乎都没有任何效果。它仍然处于阻塞状态，并且某些方法在主题本身中以其他方式破坏了功能。

我很茫然，非常感谢任何和所有的帮助。

一个有很多讨论的老话题……我读了很多，但仍然不确定……

找到最佳性能的 bootstrap-4 JS 脚本的最佳位置和最佳脚本标签（延迟/异步）是什么？

在 Bootstrap 文档中：“将以下 s 放在页面末尾附近，就在正文结束标记之前

他们不使用任何脚本标签（延迟/异步）

我阅读了有关脚本标签的内容，有人写道，在正文结束标签之前定位脚本就像用“延迟”标签定位标题一样。（旧浏览器除外）有人说“如果脚本还在最后，性能会更好，因为它们稍后会下载”

那么以下是最佳实践吗？？？

在正文结束标记之前定位 jquery/popper/bootstrap，首先使用 jquery 并使用 defer to popper.min.js 和 bootstrap.min.js？

或者只是在没有“defer”标签的引导文档中做？

我有一个网站，通过延迟的 JavaScript 小部件将内容拉到页面中，以使其非阻塞并确保页脚中的依赖脚本在小部件之前加载：

该小部件还将Google 结构化数据(JSON-LD) 的标记注入页面，但我在 Google 搜索结果页面中没有看到这些结果。当我使用页面的 URL 检查丰富的测试结果工具时，我可以看到 JSON-LD 标记未填充到呈现的页面标记中。

谷歌自己的文档说：

当 JSON-LD 数据动态注入页面内容时，Google 可以读取它，例如通过 JavaScript 代码或内容管理系统中的嵌入式小部件。

但是，它没有指定这是否仍然适用于具有defer或async属性的脚本。我无法让它工作，但我需要小部件异步执行，否则我会在 PageSpeed Insights 中因阻止脚本而受到惩罚。有没有人找到解决方案？

I'm trying to defer a very simple jQuery test, in order to optimize the speed of my website:

This is the jQuery test:

It works correctly. However, if I change the call to the jQuery libraries:

it won't work.

Am I doing something wrong? Thank you.