1

私は以前、 HTML5 ボイラープレートに基づいて Web サイトを構築していました。スタイルと modenizr を先頭に、jQuery (Google CDN またはホストされたファイル) とスクリプトを body タグの前に閉じていました。そんな感じ：

<!DOCTYPE html>
 <!-- modernizr conditional comments here -->
 <html class="no-js">
    <head>
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
        <script src="js/vendor/modernizr-2.6.2.min.js"></script>
    </head>
    <body>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
        <script src="js/plugins.js"></script>
        <script src="js/main.js"></script>
    </body>
</html>

ここで、Google の PageSpeed Insight で提案されているように、フォールド下の css と js のレンダリングをブロックするすべてを削除したいと考えています。

Google からロードされた jQuery ライブラリを含む css および js ファイルを延期するにはどうすればよいですか? modernizr についてはどうすればよいですか?

4

1 に答える 1

0

この特定の警告を削除するには、次の手順を実行する必要があります。

  • ページの読み込み後まで、すべての外部 CSS の読み込みを延期する
  • ページのオンロード後まで、すべての外部 JS のロードを延期する

実際には、次のことを行う必要があります。

  • 「スタイルのないコンテンツのフラッシュ」(FOUC) を避けるために必要な CSS と残りの部分に CSS を分割します。
  • 同様にJavaScriptを分割します
  • 必要な CSS と JS をインライン化する
  • ページがオンロードされるまで、他の CSS および JS のロードを延期します。

ビルド ツールを使用することが、これを行う唯一の適切な方法です。さまざまなGruntツール、または ant ベースのH5BP Build Scriptを使用して実行できます。

ロードを延期する基本的な方法は次のとおりです。

(function () {
    // Load jQuery after page onload
    function loadJS() {
        var url = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js";
        var n = document.createElement("script");
        n.src = url;
        n.onload = loadJS1;
        document.body.appendChild(n);
    }

    // Load some JS after jquery has been loaded.
    function loadJS1() {
        var url = "js/main.js";
        var n = document.createElement("script");
        n.src = url;
        // Continue chaining loads if needed.
        //n.onload = loadJS2;
        document.body.appendChild(n);
    }

    // Check for browser support of event handling capability
    if (window.addEventListener) {
        window.addEventListener("load", loadJS, false);
    } else if (window.attachEvent) {
        window.attachEvent("onload", loadJS);
    } else {
        window.onload = loadJS;
    }
})();
于 2015-09-21T21:56:40.737 に答える