使用 CDN 的 Google PageSpeed Insight CSS Javascript“首屏”问题答案

【问题标题】：Google PageSpeed Insight CSS Javascript "above the fold" issue using CDN使用 CDN 的 Google PageSpeed Insight CSS Javascript“首屏”问题
【发布时间】：2016-07-24 08:48:19
【问题描述】：

我尝试实现 CDN 资源，并为我的网页提供本地后备支持。但现在我无法摆脱“首屏”内容中 jquery 和 Bootstrap 的渲染阻塞 JavaScript 和 CSS CDN 资源。

我尝试遵守 Googles 指南，但没有解决我的问题：

<html>

<head>
</head>

<body>
  <div id="wrapper">...</div>
  <!-- jQuery CDN -->
  <script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
  <!-- jQuery local fallback -->
  <script>
    window.jQuery || document.write('<script src="./assets/scripts/jquery-2.2.2.min.js"><\/script>')
  </script>
  <!-- Bootstrap JS CDN -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js</script>
  <!-- Bootstrap JS local fallback -->
  <script>if(typeof($.fn.modal) === 'undefined') {document.write('<script src="./assets/scripts/bootstrap.min.js"><\/script>')}</script>
   <!-- Bootstrap CSS local fallback -->
   <div id="bootstrapCssTest " class="hide "></div>
   <script>
      $(document).ready(function() {
         if ($('#bootstrapCssTest').is(':visible') === true) {
              $("head ").append('<link rel="stylesheet " href="./assets/styles/bootstrap.min.css">');
         }
      });
    </script>
    </body>
</html>
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet " href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css ">

更新：我尝试使用“async/defer”属性来加载我的 .js CDN 脚本。但它不起作用，因为我的本地后备脚本给了我 "Uncaught ReferenceError: $ is not defined" 错误，因为它们是在 jquery 异步加载完成之前执行的。

【问题讨论】：

将它们放在页面最底部的结束正文标记 (</body>) 之前。那会解决你的问题。那时不需要异步。并且永远不要在</html>之外。顺便提一句; css可以放在头部，只有javascript应该放在页面底部。
脚本已经在关闭正文标记之前。将 css 移到头部，但仍然遇到相同的 Pagespeed 问题。

标签： javascript jquery css twitter-bootstrap google-pagespeed

【解决方案1】：

使用 jQuery 库包含页脚部分和下面的自定义代码启动 jquery 代码
40% CSS 代码在首屏内容（头部使用内部样式表）<style type="text/css">...</style>

<html>

<head>
</head>

<body>
  <div id="wrapper">...</div>
  <div id="bootstrapCssTest" class="hide"></div>
  <!-- jQuery CDN -->
  <script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
  <!-- jQuery local fallback -->
  <script src="../scripts/jquery-2.2.2.min.js"></script>
  <!-- Bootstrap JS CDN -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
  </script>
  <!-- Bootstrap JS local fallback -->
  <script src="../scripts/bootstrap.min.js"></script>
  <!-- Bootstrap CSS local fallback -->
  <script>
    $(document).ready(function() {
      if ($('#bootstrapCssTest').is(':visible') === true) {
        $("head ").append('<link rel="stylesheet " href="./assets/styles/bootstrap.min.css">');
      }
    });
  </script>
  <!-- Bootstrap CSS CDN -->
  <link rel="stylesheet " href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css ">
</body>
</html>

【讨论】：