Google pagespeed说使用内联javascript

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

所以现在我很纠结 - 哪个最适合用户性能：谷歌"愚蠢"还是渲染阻塞 css 和 js？

提前非常感谢。

与其内联javascript，只需使用defer标志或异步加载它：

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

相关内容

最新更新

热门标签：