Question

我正在为我的网站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。

FOR MOBILE：

FOR DESKTOP：

我想知道＆＃34; 在首映内容警告中消除渲染阻止JavaScript和CSS ＆＃34;仅在桌面显示，不在移动屏幕中显示。但URL是一样的。在实施此概念之前 noscript （https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery）＆＃34; 在上层内容警告中消除渲染阻止JavaScript和CSS ＆＃34;显示在两个屏幕上。那么为什么它不会反映在桌面屏幕上

Answer 1

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

减少“在首屏内容中消除渲染阻止CSS＆＃34;对于桌面

1 个答案: