减少桌面的“消除首屏内容中的渲染阻塞 CSS”答案

【问题标题】：Reduce “Eliminate render-blocking CSS in above-the-fold content" for Desktop减少桌面的“消除首屏内容中的渲染阻塞 CSS”
【发布时间】：2017-01-18 12:42:38
【问题描述】：

我正在为我的网站开发 googlepagespeed。之前我的网站速度是 IN MOBILE-86 和 IN DESKTOP-93。我看过"Eliminate render-blocking CSS in above-the-fold content" 链接。我已经实现了https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery。所以现在我正在使用 noscript 加载我的 css。所以我的网站使用 IN MOBILE-96 和 DESKTOP-93

提高了分数

<html>
  <head>
    <style>
      .blue{color:blue;}
    </style>
    </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
    <noscript id="deferred-styles">
      <link rel="stylesheet" type="text/css" href="small.css"/>
    </noscript>
    <script>
      var loadDeferredStyles = function() {
        var addStylesNode = document.getElementById("deferred-styles");
        var replacement = document.createElement("div");
        replacement.innerHTML = addStylesNode.textContent;
        document.body.appendChild(replacement)
        addStylesNode.parentElement.removeChild(addStylesNode);
      };
      var raf = requestAnimationFrame || mozRequestAnimationFrame ||
          webkitRequestAnimationFrame || msRequestAnimationFrame;
      if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
      else window.addEventListener('load', loadDeferredStyles);
    </script>
  </body>
</html>

但桌面分数是恒定的。我的网站链接是https://www.winni.in/cake-delivery-in-bangalore。

手机版：

桌面版：

我想知道“消除首屏内容警告中阻止渲染的 JavaScript 和 CSS”仅在桌面显示，而不在移动屏幕中显示。但是网址是一样的。在实施此概念之前，noscript(https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery)“在首屏内容警告中消除渲染阻止 JavaScript 和 CSS”显示在两个屏幕上。那么为什么它没有反映在桌面屏幕上

【问题讨论】：

标签： css pagespeed google-pagespeed

【解决方案1】：

.woff 字体文件被视为 CSS。 所有 CSS 必须在 JavaScript 之前加载。

【讨论】：