web-dev-qa-db-ja.com

Google +1ボタンを追加するとページの読み込み時間が遅くなる

この記事 Google +1タグはページの読み込み時間を1秒増やすことができるため、訪問者が10％減少します。

記事の著者は、スマートタグの読み込みを使用してページの読み込み時間を短縮すると述べています。

誰もが所有権の方法ではなく、これを行うためのオープンソースの方法を知っていますか？

javascriptperformancesocial-networkssocial-networking
4
Steve

タグ管理は、さまざまなソースからさまざまな目的（Web分析、顧客追跡、広告ネットワーク、ソーシャルメディア統合など）で多くのタグを使用する可能性のある大規模なサイト/組織に価値がありますが、これはスマートjavascriptとは別の問題です読み込み中。 TagmanやEnsightenのような高価なタグ管理システムを使用しなくても、確実にJavaScriptを最適にロードできます。

「スマートタグの読み込み」と考えるものには2つのコンポーネントがあります。 1つは、必要に応じてタグをロードすることです。つまり、すべてのタグをレイアウトに埋め込み、すべての単一ページにロードするだけではありません。これは非常に簡単です。他の（わずかに）より難しいコンポーネントは 非ブロック方式でJavaScriptをロードする 依存関係による競合状態を引き起こすことなし

これを行うには、<script/>要素のdeferまたはasync属性を使用するか、JavaScriptを使用してタグを動的にロードします。

  • deferは、非ブロッキング方式でロードされ、通常はページに表示される順序で、ページのロードが完了した後にのみコードを実行します。
  • asyncおよびJSを使用した動的ロードは、ダウンロードされるとすぐにコードを実行するため、実行順序は保証されず、ページのロードが完了するまで待機しません。

その他の複雑な問題には次のものがあります。

  • IEでは、deferは必ずしもページに表示される順序で実行されるとは限りません。
  • asyncは、 制限付きブラウザーサポート を持つHTML5属性です。
  • 3つの手法すべてがwindow.onloadイベントをブロックするため、ページの読み込み時間が長くなります。

後者の回避策の1つは、遅延0のタイマーを使用することです。これは、タグがwindow.onloadの前または後に実行されることを保証せず、ロードイベントをブロックしないだけです。

Google+タグの場合、実行順序について心配する必要はありません。したがって、window.onloadをブロックするかどうかに応じて、deferまたは動的ロードを使用できます。 onloadでトリガーする必要があるUI関連のJSがある場合は、おそらくタイマー技術を使用して遅延を最小限に抑えます。

3
Lèse majesté

Google 以下を推奨 ：-

<script type="text/javascript">

// Add a script element as a child of the body
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "deferredfunctions.js";
document.body.appendChild(element);
}

// Check for browser support of event handling capability
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;

</script>

Phpied.comには トピックを説明する便利な記事 もあり、ソーシャルメディアボタンのdefering javasciptの読み込みに関する詳細情報も見つけることができます このクエリで

2
toomanyairmiles