我一直在使用Google PageSpeed见解来尝试改善网站的性能，到目前为止，事实证明它非常成功。诸如推迟脚本之类的事情可以很好地工作，因为我已经拥有一个内部版本的jQuery，.ready()可以将脚本推迟到页面完全加载之前，我要做的就是内联该特定函数并将完整的脚本移到页面末尾。效果很好。

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

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

因此，无论如何，Google建议内嵌折叠内容所需的关键样式。问题是...好吧，请看以下屏幕截图：http : //prntscr.com/1qt49e

如您所见... 所有内容都在首位！人们讨厌滚动，特别是在涉及加载许多页面的游戏上。因此，我将网站设计为适合一个屏幕（假定分辨率足够好）。因此，这意味着... 所有样式都适用于首屏内容！那么...有什么解决办法吗？还是我在那个接近完美的得分上留下了那个黄色标记？

之前有人问过一个相关的问题：Google Pagespeed中的“首屏内容”是什么？

首先，您必须注意，这全都与“ 移动页面 ”有关。
因此，当我正确解释了您的问题和屏幕截图时，这并不适合您的网站！

相反，按照Google指南中的建议进行某些操作，会使“正常”网站的情况变得更糟。
并非所有来自Google的东西都是“圣杯”，仅仅是因为它来自Google。而且，如果您查看它们的HTML标记，它们本身并不是一个好的榜样。

我能给您的最好建议是：

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

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

人们应该始终注意的事情是：

• 尽可能减少请求数量
• 保持页面总重量尽可能低

并且不要为如何获得Google的PageSpeed Insights工具的100％而困惑...！;-)

补充1：这是Google向我们展示的页面，他们对“ 优化CSS交付”的建议。

如前所述，我认为这既不现实，也不适合“正常”网站！因为主要是在您具有响应式Web设计时，最确定的是您使用媒体查询和其他布局样式。因此，如果您不打算首先以阻塞的方式加载CSS，则会得到FOUT（无样式文本的Flash）。我真的不认为这比渲染页面至少要好几毫秒！

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

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

TLDR：压缩并在<style></style>标签之间嵌入整个CSS脚本。

我一直在追逐那个难以捉摸的100/100分数大约一个星期。像您一样，剩下的最后一项是消除“折叠内容上方的渲染阻止CSS”。

当然有一个简单的解决方案？不。我试用了Filament组的loadCSS解决方案。我喜欢的.js过多。

怎么样async对CSS（如JS）属性？它们不存在。

我准备放弃。然后它突然降临在我身上。如果链接脚本阻止了渲染，而是将整个CSS嵌入头部，该怎么办？这样就没有什么可以阻挡的。

在我的样式标签中嵌入1263行CSS似乎绝对不对。但是我给了它一个旋转。我首先使用以下命令压缩（并添加了前缀）：

postcss -u autoprefixer --autoprefixer.browsers 'last 2 versions' -u cssnano --cssnano.autoprefixer false *.css -d min/ 请参阅NPM postcss软件包。

现在，它只是一排长行的无空间CSS。我在<style>your;great-wall-of-china-long;css;here</style>首页的标签中放入了CSS 。然后，我重新分析了页面速度的见解。

我在移动设备上从90/100变成了99/100 ！！！

这违背了我（可能还有你）的一切。但这解决了这个问题。我现在仅在我的主页上使用它，并通过PHP include以编程方式包括压缩的CSS。

取决于您的CSS长度的YMMV（您的里程可能会有所不同）。Google可能会以超出首屏内容的价格向您讨价还价。但是不要假设；测试！

笔记

1. 我现在仅在主页上执行此操作，以便人们在我最重要的页面上获得FAST渲染。

2. 您的CSS将不会被缓存。不过我不太担心。他们第二次访问我网站上的另一个页面时，.css 将被缓存（请参阅注释1）。

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

• 昨天我在CSS优化中遇到了这篇文章： CSS概要分析...优化
  有关CSS的许多有用信息以及CSS造成最大性能消耗的原因。

• 我在Goooge Chrome（Canary）开发工具中的jQueryUK上看到了有关“隐藏的秘密”的以下演示文稿： DevTools可以做到这一点。查看有关“首次绘制时间”，重新绘制和昂贵的CSS的部分。

• 此外，如果您使用的是装载机像requireJS你可以在CSS加载插件之一一看，所谓的需要，CSS，它采用CSSO -一个optimzer也做结构优化，例如。合并具有相同属性的块。我使用了几次，它可以视情况节省很多CSS。

没问题：我第二次使用@Enzino为要加载的所有小图标创建一个sprite。文件太小，以至于不能真正保证每个图标的服务器往返。另外请记住，浏览器可以执行的并发http请求总数。因此，对大量小图标的请求也是“渲染阻止”。尽管与您的页面相比，有一个空白页面，但是我喜欢例如duckduckgo的加载方式。

请查看以下页面https://varvy.com/pagespeed/render-blocking-css.html。这帮助我摆脱了“ Render Blocking CSS”。我使用以下代码来删除“ Render Blocking CSS ”。现在，在Google Page Speed Insight中，我不会遇到与渲染阻止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>

我也为这个新的pagespeed指标而苦苦挣扎。

尽管我没有找到使我的分数恢复到100％的实用方法，但我发现有一些有用的方法。

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

我唯一想到的另一件事是在第一页上内联所有必要的CSS（看来是大部分-至少对于我的页面而言），以获得高分。尽管这可能会提高您的速度得分，但这可能会使您的页面加载速度变慢。

为此的2019年最佳解决方案是HTTP / 2 Server Push。

您不需要任何骇客的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”的最完整，最不容易理解的解决方案

有关详细讨论，请在这里查看我的文章：使用HTTP / 2 Push消除渲染阻止CSS

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

嗨，对于jQuery，您只能像这样使用

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