我如何在Google Page Speed（移动设备）上获得99/100

Question

我一直在使用Google PageSpeed的见解来尝试提高我网站的效果，到目前为止，它已经证明非常成功。推迟脚本之类的工作非常精彩，因为我已经有了jQuery .ready()的内部版本来推迟脚本直到页面完全加载，我所要做的只是内联该特定功能并将完整脚本移动到页面末尾。这很有效。

但是现在我发现自己瞪着核对清单上剩下的一个黄点：“在首映内容中消除渲染阻止CSS”。

我的CSS设置方式是让一个全局_.css文件包含一般适用于页面结构的样式，或者在整个站点的多个或两个位置使用。然后，大多数页面都有一个关联的CSS文件（例如，party.php包含party.css），其中包含特定于该特定页面的样式。所有CSS文件都无限期地缓存，因为我将/t=FILEMTIME附加到文件名（后来用.htaccess删除它们），以保证文件在更改时更新。

因此，无论如何，Google建议内联上层内容所需的关键样式。麻烦是......好吧，看一下这个截图：http://prntscr.com/1qt49e

正如你所看到的...... 所有的内容都是首屈一指的！人们讨厌滚动，尤其是涉及加载许多页面的游戏。因此，我将网站设计为适合一个屏幕（假设分辨率足够好）。这意味着...... ALL 的样式适用于首屏内容！那么......有什么解决方案吗？或者我是否在那个近乎完美的分数上坚持那个黄色标记？

Answer 1

以前曾询问过相关问题：What is “above-the-fold content” in Google Pagespeed?

首先，您必须注意这都是关于“移动页面” 因此，当我正确解释您的问题和截图时，不适合您的网站！

恰恰相反 - 谷歌在他们的指导方针中建议的一些事情会使“正常”网站的情况变得更糟。并非所有来自谷歌的东西都是“圣杯”，因为它来自谷歌。如果你看一下他们的HTML标记，他们自己就不是一个好的榜样。

我能给你的最好建议是：

设置CSS中替换元素的宽度和高度，以便浏览器可以布局元素，而不必等待替换的内容！

另外，为什么要使用不同的CSS文件，而不只是一个？
附加请求比少量数据量更糟糕。在第一次请求之后，无论如何都会缓存CSS文件。

应该经常照顾的事情是：

尽可能减少请求数量
保持整体页面重量尽可能低

不要让你的大脑知道如何获得100％Google的PageSpeed Insights工具......！ ; - ）

增加1：以下是Google向我们展示的页面，以及Optimize CSS Delivery推荐的内容。

如前所述，我不认为这既不现实，也不认为对于“正常”的网站来说是有意义的！因为主要是当你有一个响应式网页设计时，你肯定会使用媒体查询和其他布局样式。因此，如果您不是首先加载CSS并以阻塞的方式加载 FOUT （ Flash of Unstyled Text ）。我真的不相信这比渲染页面至少花费几毫秒“更好”！

Imho Google正在开始新的“炒作”（当我在Stackoverflow上查看有关它的所有问题时）......！

Answer 2

我如何在Google Page Speed（移动设备）上获得99/100

TLDR：在您的<style></style>标记之间压缩并嵌入整个css脚本。

我现在一直在追逐那个难以捉摸的100/100分数。和你一样，剩下的最后一项是消除＆＃34;渲染阻塞css以上的折叠内容。＆＃34;

当然有一个简单的解决方案？不。我尝试了Filament group's loadCSS解决方案。我喜欢太多.js。

css的async属性（如js）怎么样？他们不存在。

我准备放弃了。然后它突然出现在我身上。如果链接脚本阻止了渲染，那么如果我将整个css嵌入到头部中会怎样。那样就没有什么可以阻止了。

在我的样式标记中嵌入1263行CSS似乎绝对错误。但我给了它一个旋转。我首先使用：

压缩它（并加上前缀）

postcss -u autoprefixer --autoprefixer.browsers 'last 2 versions' -u cssnano --cssnano.autoprefixer false *.css -d min/ See the NPM postcss package。

现在它只是一条无空间css的长线。我在我的主页上的<style>your;great-wall-of-china-long;css;here</style>标签中填写了css。然后我重新分析了页面速度的见解。

我在手机上从90/100变为99/100

这违背了我（也许你）的一切。但它解决了这个问题。我现在只是在我的主页上使用它，并通过PHP include编程方式包含压缩的css。

YMMV（您的里程可能会有所不同）等待您的css长度。谷歌可能会为您提供太多的内容。 但不要假设;测试<！/强>

备注

我现在只在我的主页上执行此操作，以便人们在我最重要的页面上获得快速渲染。

你的css不会被缓存。我不是太担心。第二个是他们点击我网站上的另一个页面，.css 将缓存（参见注释1）。

Answer 3

可能有所帮助的一些提示：

昨天我在CSS优化中遇到过这篇文章： CSS profiling for ... optimization
关于CSS的许多有用信息以及CSS导致性能最高的问题。
我在Googe Chrome（Canary）开发工具中看到了关于jQueryUK关于“隐藏秘密”的以下演示： DevTools Can do that。查看Time to First Paint，重绘和昂贵的CSS部分。
此外，如果你使用像requireJS这样的加载器，你可以查看一个名为require-CSS的CSS加载器插件，它使用CSSO - 一个优化器这也做结构优化，例如。合并具有相同属性的块。我使用了几次，它可以在不同情况下节省大量的CSS。

关闭问题：我为你正在加载的所有小图标创建精灵的第二个@Enzino。文件大小非常小，并不能保证每个图标的服务器往返。还要记住浏览器可以执行的并发http请求总数。因此，对大量小图标的请求也是“渲染阻止”。虽然与您的空页相比较，但我喜欢duckduckgo加载的方式。

Answer 4

请查看以下页面https://varvy.com/pagespeed/render-blocking-css.html。这有助于我摆脱＆＃34;渲染阻止CSS＆＃34; 。我使用以下代码删除＆＃34; 渲染阻止CSS ＆＃34;。现在，在google页面速度洞察力方面，我没有遇到与渲染阻止css相关的问题。

<!-- loadCSS -->
<script src="https://cdn.rawgit.com/filamentgroup/loadCSS/6b637fe0/src/cssrelpreload.js"></script>
<script src="https://cdn.rawgit.com/filamentgroup/loadCSS/6b637fe0/src/loadCSS.js"></script>
<script src="https://cdn.rawgit.com/filamentgroup/loadCSS/6b637fe0/src/onloadCSS.js"></script>
<script>
      /*!
      loadCSS: load a CSS file asynchronously.
      */
      function loadCSS(href){
        var ss = window.document.createElement('link'),
            ref = window.document.getElementsByTagName('head')[0];

        ss.rel = 'stylesheet';
        ss.href = href;

        // temporarily, set media to something non-matching to ensure it'll
        // fetch without blocking render
        ss.media = 'only x';

        ref.parentNode.insertBefore(ss, ref);

        setTimeout( function(){
          // set media back to `all` so that the stylesheet applies once it loads
          ss.media = 'all';
        },0);
      }
      loadCSS('styles.css');
    </script>
    <noscript>
      <!-- Let's not assume anything -->
      <link rel="stylesheet" href="styles.css">
    </noscript>

Answer 5

我也一直在努力使用这个新的pagespeed指标。

虽然我发现没有切实可行的方法让我的分数回升到％100但我发现有一些有用的东西。

将所有css合并到一个文件中有很多帮助。我的所有网站都恢复到％95 - ％98。

我能想到的另一件事就是在第一页上内联所有必要的css（看起来大部分都是 - 至少对我的页面而言）以获得甜蜜的高分。虽然它可能有助于你的速度得分，但这可能会使你的页面加载速度变慢。

Answer 6

为此的2019年最佳解决方案是 HTTP / 2服务器推送。

您不需要任何骇客的javascript解决方案或内联样式。但是，您确实需要一台支持HTTP 2.0的服务器（任何现代服务器版本都支持），该服务器本身要求您的服务器运行SSL。但是，有了“让我们加密”，就没有理由不使用SSL。

我的网站https://r.je/在移动和台式机上的得分均为100/100。

这些错误的原因是浏览器获取HTML，然后必须等待CSS下载后才能呈现页面。使用HTTP2，您可以同时发送HTML和CSS。

您可以通过设置Link标头来使用HTTP / 2推送。

Apache示例（.htaccess）：

Header add Link "</style.css>; as=style; rel=preload, </font.css>; as=style; rel=preload"

对于NGINX，您可以将标头添加到服务器配置中的位置标签中：

location = / {
    add_header Link "</style.css>; as=style; rel=preload, </font.css>; as=style; rel=preload";
}

设置了此标头后，浏览器将同时接收HTML和CSS，这将阻止CSS阻止呈现。

您将希望对其进行调整，以便仅在第一个请求上发送CSS，但是Link标头是“消除渲染阻止Javascript和CSS”的最完整，最不容易破解的解决方案

要进行详细讨论，请在这里查看我的帖子：Eliminate Render Blocking CSS using HTTP/2 Push

Answer 7

考虑使用包从css文件自动生成内联样式。一个好的是Grunt Critical或Critical css for Laravel。

Answer 8

您好，对于jQuery您只能这样使用

使用异步并仅输入=“ text / javascript”

“在首映内容中消除渲染阻止CSS”

8 个答案:

我如何在Google Page Speed（移动设备）上获得99/100

备注