2

在我的项目（Preloaders.net）中，我有很多脚本，因为它是一个 Web 应用程序。没有办法拥有“一些”css和js。我将所有内容合并到一个文件中，但 Google Pagespeed 仍然习惯说删除“渲染阻止 CSS 和 JS”。所以我只是让 CSS 和 JS 与 HTML 内联显示。Google pagespeed 现在对内联 CSS 很满意，但它看起来真的很愚蠢——因为现在 JS 和 CSS 不会缓存在所有其他页面上。将 CSS 和 JS 分开几乎是没有用的，而且是不可能的，因为这对于 web 应用程序的工作是必需的。

所以现在我被撕裂了——这对用户性能来说是最好的：谷歌“愚蠢”还是渲染阻塞 css 和 js？

提前非常感谢。

4

1 回答 1

1

而不是内联javascript，只需使用延迟标志或异步加载它：

<script src="whatever.js" async></script>

这将解决js问题。

至于 css - 仅内联每个页面的首屏，并以异步方式加载其余样式（来自https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery）：

<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>

于 2017-08-05T01:03:11.673 回答