Google PageSpeed Insight CSS使用CDN的“折叠之上”问题

我试图实施CDN资源本地回退支持我的网页。但现在我无法摆脱“折叠式”内容中的jquery和Bootstrap的呈现阻止JavaScript和CSS CDN资源。Google PageSpeed Insight CSS使用CDN的“折叠之上”问题

我试图坚持谷歌的指引但它并没有解决我的问题：

<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脚本。但它不工作，因为我的本地回退脚本给我“未捕获ReferenceError：$未定义”错误，因为它们在jquery异步加载完成之前执行。

来源

2016-04-04 HelloWorld0815

将它们放在结束体标签之前（''）在页面的最底部。这将解决您的问题。那么不需要异步。并且绝对不在“”之外。顺便说一句， CSS可以放在头部，只有javascript应该放在页面的底部。 – giorgio

脚本已经在关闭body标签之前。将css移动到头部，但仍然得到相同的Pagespeed问题。 – HelloWorld0815

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

来源

2017-06-28 11:31:47

Google PageSpeed Insight CSS使用CDN的“折叠之上”问题

回答

相关问题