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的「摺疊之上」問題

回答

相關問題