web-dev-qa-db-ja.com

JavaScriptの解析を延期する-GooglePage Speed

私のJavaScriptファイルはすべてすでに一番下にありますが、Google PageSpeedは速度を向上させるためにこの提案をしています。

JavaScriptの解析を延期する

JavaScriptの88.6KiBは、最初のページの読み込み中に解析されます。 JavaScriptの解析を延期して、ページレンダリングのブロックを減らします。 http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js （76.8KiB） http：// websiteurl/js/plugins。 js （11.7KiB） http：// websiteurl / （109BのインラインJavaScript）

これは私のhtmlです（例）

<html>
<head>
<!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<head>
<body>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.5.1.min.js"%3E%3C/script%3E'))</script>
    <script src="js/plugins.js"></script>
    <script>$(document).ready(function() {
            $("#various2").fancybox({
                'width': 485,
                'height': 691,
            });
        });</script>
    </body>
    </html>

deferを使用してパフォーマンスを向上させるにはどうすればよいですか？

Google chromeだけですか、それともすべてですか？

javascriptjqueryperformancegoogle-pagespeed
17
Jitendra Vyas

ページのパフォーマンスを求める場合は、まず第一に、これらのスクリプトをページの下部に移動して、他のアセットをロードできるようにする必要があります。

また、ヘッドでdnsプリフェッチを使用して、google-codeのベースドメインを設定します。

<link rel="dns-prefetch" href="//ajax.googleapis.com">

これはほんの小さなコードなので、下部のplugins.jsファイルに追加して、プラグインファイルを延期することができます。

<script src="js/plugins.js" defer></script>

それはとにかく私がすることです、私のすべてのサイトはyslowとページ速度でそれぞれ98と97に最適化されています。

それが役に立てば幸い。

-V

9
Vince Kronlein

これは古い質問だと思いますが、自分で良い答えを探していたので、現在使っている方法を紹介します。

インラインJavascriptに関する限り、私が行うことは、すべてのtype属性を_text/deferred-javascript_などに変更して、スクリプトタグ内のコードがページの読み込み中に評価されないようにすることです。次に、ページonloadイベントに関数をアタッチします。この関数は、上記のタイプに一致するすべてのスクリプトを検索し、eval()を使用して内部のコードを評価します。一般的にeval()は悪ですが、ここでは役に立ちそうです。

外部Javascriptファイルの場合、私は非常によく似た処理を行います。スクリプトタグをページに追加する代わりに、それらを記録し、ページの読み込みが完了した後に1つずつ挿入します。

私が抱えている1つの問題は、インライン遅延Javascriptの1つにエラー（たとえば、解析エラー）が含まれている場合、後続のスクリプトが読み込まれないことです（ただし、現在の実装に依存する場合があります）。

1
idrarig

こんにちは最近、高速Webアプリケーションの構築に役立つ「エレガントフレームワーク」と呼ばれるオープンソースのnodejsフレームワークを作成し、すべてのページでデスクトップとモバイルの両方で100％のGoogleページ速度を得ることに成功しました。次のURLで確認できます。

https://developers.google.com/speed/pagespeed/insights/?url=getelegant.com

ページのソースを表示して、そこから学ぶことができることがたくさんあります。理解できないことがあれば、コメントしてください。

これまでのところ、この方法を試すことができます：

// Load script element as a child of the body
function loadJS(src, callback) {
    var script = document.createElement("script");
    script.type = "text/javascript";
    if (script.readyState) {  //IE
        script.onreadystatechange = function () {
            if (script.readyState == "loaded" || script.readyState == "complete") {
                script.onreadystatechange = null;
                if (callback) {
                    callback();
                }
            }
        };
    } else {  //Others
        script.onload = function () {
            if (callback) {
                callback();
            }
        };
    }
    script.src = src;
    document.body.appendChild(script);
}
// Load style element as a child of the body
function loadCSS(href,callback) {
    var element = document.createElement("link");
    element.rel = "stylesheet";
    if (element.readyState) {  //IE
        element.onreadystatechange = function () {
            if (element.readyState == "loaded" || script.readyState == "complete") {
                element.onreadystatechange = null;
                if (callback) {
                    callback();
                }
            }
        };
    } else {  //Others
        element.onload = function () {
            if (callback) {
                callback();
            }
        };
    }
    element.href = href;
    document.body.appendChild(element);
}
// Load All Resources
function loadResources() {
    // css
    loadCSS("/compressed/code-mirror-style.css?please1");
    loadCSS("/compressed/all.css?please2");

    // js
    loadJS("/compressed/code-mirror.js", function () {
        loadJS("/compressed/common.js", function () {
            $("[data-lang]").each(function () {
                var code = $(this).addClass("code").text();
                $(this).empty();

                var myCodeMirror = CodeMirror(this, {
                    value: code,
                    mode: $(this).attr("data-lang"),
                    lineNumbers: !$(this).hasClass('inline') && !$(this).hasClass('no-numbers'),
                    readOnly: true
                });
            });
        });
    });
}

// Check for browser support of event handling capability
if (window.addEventListener) {
    window.addEventListener("load", loadResources, false);
} else if (window.attachEvent) {
    window.attachEvent("onload", loadResources);
} else {
    window.onload = loadResources
}
0
Fareed Alnamrouti

これはおそらく、特定のレベルのパフォーマンスに遭遇したときの一般的な応答/提案です。

ただし、jQuery、プラグイン、109バイトのインラインJavaScriptについては特に言及しています。インラインJavaScriptはありますか？また、JavaScriptインクルードを<body>の下部に配置していますか？

例

パフォーマンス記事の読み込み

編集：

最近投稿されたHTMLに基づく...

テストとして、次の2つの項目を削除して、違いがあるかどうかを確認します。

<!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->



<script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.5.1.min.js"%3E%3C/script%3E'))</script>


また、警告メッセージには109バイトのインラインJSが記載されていますが、投稿したHTMLにはそのようなものはありません。

0
Sparky