1

我使用延迟代码消除了 Google 推荐的渲染阻塞资源，但出于某种原因，该建议仍然出现在 Google 建议中。知道为什么吗？

我清除了缓存*

延迟代码

这是我用于延迟的代码

延迟代码 2

4

2 回答 2

2

如果您使用缓存插件，通常可以删除或改进这些内容。有时它也可以通过使用此插件将脚本从页眉移动到页脚来工作：https ://wordpress.org/plugins/scripts-to-footerphp/

于 2019-09-22T15:45:58.133 回答
1

首先，您发现的任何方法都不是一个好主意。如果您的访问者浏览器中的 JavaScript 被关闭了怎么办？他们会看到一个没有样式的页面。

我发现谷歌会推荐这篇文章令人惊讶（我猜这是你发现的一篇非常古老的文章）？？？请参阅下面的“奖励”以获得更好的延迟 CSS 的方法

无论如何，渲染阻塞资源是绘制“首屏”内容所需的资源。（首次加载页面时无需滚动即可看到的所有内容。）

您的网站失败的原因是您仍然需要下载这些资源来呈现初始内容（如果您所做的任何事情都会减慢它的速度，恐怕！）。

要解决这个问题很困难，因为您必须在文档正文中为首屏上的每个项目内联样式标签中的 CSS。

这样就可以呈现页面，而无需等待任何外部 CSS 文件下载。 -> 这就是“渲染阻塞资源”的意义所在

有些插件应该能够做到这一点，但根据我的经验，它们都不起作用，因为这是一个需要解决的复杂问题。

做到这一点的唯一方法是自己设计主题时考虑到这一点（有点晚了）或者......

使用 Google Developer Tools 覆盖率检查器（或覆盖率检查工具 - 如果你可以使用 Node，NPM 上有一些不错的工具），加载页面，无需滚动即可找到所有使用的 CSS。

然后将使用的 CSS 的每一项添加到<style>页面主体内的块中，然后从外部 CSS 中删除所有使用的样式（为了避免重复，此步骤实际上不需要修复此问题）。

您很快就会发现，这对于逆向工程来说是一场噩梦，但只要有一点耐心，它是可能的。

例子

查看klu.io的源代码（这是我的透明网站）以了解这是如何完成的，您会看到<style>页面顶部有 2 个块，其中的每个项目都需要呈现“首屏”内容。（有 2 个块，一个是站点范围的，一个是特定于页面的）

以我的网站上的“首屏”为例

在我的网站上，“首屏”是页面加载时的实际可见内容，因为主页在首次加载时不可滚动。

如果您单击“查看我们能为您做什么”按钮，您将看到大量内容从右侧滑入，该内容不可见，因此其样式位于 main.css 中。

奖金

此外，对于如何正确延迟 CSS，使其在没有 JS 的情况下仍然有效，请尝试以下操作（您可能需要针对多个 CSS 文件进行调整，但是一旦您了解了这个概念，这很容易）：-

<noscript id="ds">
                <link rel="stylesheet" href="your-css.css" media="all">                
</noscript>

JS

    var dfr = function () {
        var n1 = document.getElementById("ds");
        var r1 = document.createElement("div");
        r1.innerHTML = n1.textContent;
        document.body.appendChild(r1);
        n1.parentElement.removeChild(n1);
    };
    var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
            window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
    if (raf)
        raf(function () {
            window.setTimeout(dfr, 0);
        });
    else
        window.addEventListener("load", dfr);

CSS 位于<noscript>块内作为后备。

然后 JS 将此 CSS 移动到一个 div 中，它会在页面加载后创建第二个。

于 2019-09-22T19:29:28.607 回答