Google PageSpeed Insight CSS Javascript「折りたたみの上」問題CDNを使用して

私はCDNリソースを実装しようとしましたローカルフォールバック私のウェブページのサポート。しかし、私はjqueryとBootstrapのレンダリングをブロックするJavaScriptとCSSのCDNリソースを "fold-above-fold"のコンテンツで取り除くことはできません。Google PageSpeed Insight CSS Javascript「折りたたみの上」問題CDNを使用して

私はグーグルのガイドラインに固執しようとしたが、それは私の問題を解決できなかった：

Remove Render-Blocking JavaScript

Optimize CSS Delivery

<html> <head> </head> <body> <div id="wrapper">...</div>  <script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>  <script> window.jQuery || document.write('<script src="./assets/scripts/jquery-2.2.2.min.js"><\/script>') </script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js</script>  <script>if(typeof($.fn.modal) === 'undefined') {document.write('<script src="./assets/scripts/bootstrap.min.js"><\/script>')}</script>  <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>  <link rel="stylesheet " href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css ">

UPDATE：私の.js CDNスクリプトを読み込むために "async/defer"属性を使用しようとしました。しかし、私のローカルフォールバックスクリプトが私に"Uncaught ReferenceError：$が定義されていません"というメッセージが表示されるので、動作しませんでした。エラーは、jquery非同期ロードが完了する前に実行されるためです。 jQueryライブラリーを使用し

出典

2016-04-04 HelloWorld0815

閉鎖ボディタグの直前に配置してください（ ' '）あなたのページの一番下にあります。それはあなたの問題を解決します。非同期は必要ありません。そして、決して ' 'の外にはありません。 Btw; CSSを頭に置くことができます.JavaScriptのみをページの下部に配置します。 – giorgio

スクリプトはbodyタグを閉じる前にすでに存在しています。 CSSを頭に動かしましたが、同じPagespeed問題が発生しました。 – HelloWorld0815

フッター部と上記倍コンテンツ（内部スタイルシートを使用してヘッド部）<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>

で

40カスタムコード開始jqueryのコード％以下のCSSコードを含みます

出典

2017-06-28 11:31:47

Google PageSpeed Insight CSS Javascript「折りたたみの上」問題CDNを使用して

答えて

関連する問題