web-dev-qa-db-ja.com

ソーシャルメディアボタンはウェブサイトの読み込み時間を遅くします

シンプルで高速なウェブサイトを作成しています。できるだけサイトを最適化しようとしています。ソーシャルメディアボタンがWebサイトの速度を大幅に低下させていることに気付きました。 Facebook Likeボタン、Twitterボタン、Google +ボタンを含めています。そこで、いくつかのテストを実行しました。

ウェブサイトwithoutソーシャルメディアボタン、読み込み時間0.24秒：

enter image description here

ウェブサイトwithソーシャルメディアボタン、読み込み時間1.38秒：

enter image description here

ここに私のコードがあります：

<div id="social">
    <!-- FB -->
    <div id="fb-root"></div>
    <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_EN/all.js#xfbml=1&status=0"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>
    <div class="fb-like" data-href="http://facebook.com/textsearcher" data-width="150" data-layout="button_count" data-show-faces="false" data-send="false"></div>
    <!-- Twitter -->
    <a href="https://Twitter.com/share" class="Twitter-share-button" data-url="http://www.textsearcher.com/" data-hashtags="TextSearcher">Tweet</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.Twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'Twitter-wjs');</script>
    <!-- G+ -->
    <div class="g-plusone" data-size="medium" data-href="http://www.textsearcher.com/"></div>
    <script type="text/javascript"> (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script>
</div>

そこで、ウェブサイトの読み込み時間を遅くすることなく、これらのソーシャルボタンを読み込むためにいくつかのことを試しました。

JavaScriptを介して1秒遅れてボタンをロードする：

setInterval(function(){
    $("#social").html("<!-- FB --><div id="fb-root"></div>.....");
},1000);

これは役に立たず、ボタンが適切にロードされず、バグがありました。

ドキュメントの準備ができた後にボタンをロードする：

$(document).ready(function() {
    $("#social").html("<!-- FB --><div id="fb-root"></div>.....");
});

これも助けにはなりませんでした。ボタンは正常にロードされましたが、Webサイトのロード時間は依然として> 1.00秒でした。

アイデアが不足しています。ウェブサイトを遅くすることなくそれらをロードする方法はありますか？

PS。使用 ページ読み込み時間 プラグインchromeこれらのテストで

ソリューション：

CodeMonkeyの回答のおかげで、entireページが読み込まれた後にソーシャルボタンを読み込むことで、最終的にこの問題を解決しました。必要なJavaScriptコード（ソーシャルメディアボタン用）を別のファイルに移動して、HTML /マークアップを少しきれいにしました。

JS（別のファイル、social.js内）：

/* Facebook*/
(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_EN/all.js#xfbml=1&status=0"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));
/* Twitter */
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.Twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'Twitter-wjs');
/* G+ */
(function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();

HTML：

<script>
    $(window).bind("load", function() {
       $.getScript('js/social.js', function() {});
    });
</script>
<!-- FB -->
<div id="fb-root"></div>
<div class="fb-like" data-href="http://facebook.com/textsearcher" data-width="150" data-layout="button_count" data-show-faces="false" data-send="false"></div>
<!-- Twitter -->
<a href="https://Twitter.com/share" class="Twitter-share-button" data-url="http://www.textsearcher.com/" data-hashtags="TextSearcher">Tweet</a>
<!-- G+ -->
<div class="g-plusone" data-size="medium" data-href="http://www.textsearcher.com/"></div>

このロードタイミングが再び正常になった後、0.24秒：

Load timings

javascripthtmlfacebook-social-pluginsgoogle-plus-onetwitter-button
57
user2824854

試すことができます

$(window).load(function() {

の代わりに

$(document).ready(function() {

画像とすべてが読み込まれるまで待機します。

それでも解決しない場合は、ホバー時にのみ表示することをお勧めします。静止画像/ CSSスプライトがたくさんあり、ユーザーがそれらの上にカーソルを置くと置き換えられます。

その余分なステップが不要で、モジュールをインストールするためのサーバーアクセスがある場合は、Googleのmod pagespeedを試してJavaScriptを延期できます https://developers.google.com/speed/pagespeed/module/ filter-js-defer

サーバーにアクセスできない場合は、CDNルートを試すことができます。Cloudflareのロケットローダーは非常に興味深いです。同様の理由でテストを行っていますが、速度が33％増加しました http：// www。 cloudflare.com/features-optimizer

それでも解決しない場合は、ページの下部にボタンを貼り付けてCSSで再配置するという昔のお気に入りを試してみてください。そうすれば、好きな場所に置くことができますが、ページの読み込み時間を妨げることはないようです。

こちらのようなよりシンプルなオールドスクールの代替手段を試すことができます http://zurb.com/article/883/small-painful-buttons-why-social-media-b

または http://www.addthis.com/ または http://www.sharethis.com/ のようなサービスがより速く動作するかどうかを確認します

もちろん、この時点で部屋にいる象は、ページに3つの主要なソーシャルメディアボタンを配置し、1秒だけかかるということです-悲しいことに、かなり良いようです！これらは一見複雑になったボタンですが、最適化されていないように見えます。 google pagespeed insights は、それらすべてについて不満を言うものを見つけますiirc。

100％以上の速度でヒットしているので、A/Bテストをいくつか行って、本当に必要かどうかを確認することをお勧めします。共有ボタンを使用すると、その存在を保証するトラフィックが増えますか？

39
CodeMonkey

この質問は古く、質問者にはおそらく私の回答が表示されませんが、いいね/共有/などの数を示すことを犠牲にしない限り、同じ問題を持つ人のための代替案があります。

訪問者を実際のソーシャルネットワークに送信するリンクを追加するだけで、URLと説明があらかじめ入力された共有ウィンドウを開くことができます。

コードは非常にシンプルで、必要な画像やテキストを使用できます。これにより、ボタンをサイトのデザインに合わせやすくなります。

<a href="https://www.facebook.com/sharer/sharer.php?u=URL" target="_blank">Share on Facebook</a>
<a href="https://Twitter.com/intent/tweet?url=URL&text=TEXT&via=YOURTWITTERACCOUNTNAME" target="_blank">Tweet</a>
<a href="https://plus.google.com/share?url=URL" target="_blank">Share on Google+</a>

[〜＃〜] url [〜＃〜]をあなたのウェブサイトのURLに置き換え、[〜＃ 〜] text [〜＃〜]と短い説明。

このソリューションはJavaScriptを必要としないため、非常に軽量です。ロゴ、アイコンフォント、シンプルなテキスト（「Facebookで共有」）を使用できます。

他の多くのソーシャルネットワークをカバー というブログ記事も書きました。

4
Stefan

ソーシャルウィジェットは、ページの読み込みが完了するのを待っているより重要なスクリプトをブロックしない限り、読み込み時間をあまり遅くしないでください。使用しているコードは非同期です。これは役立ちますが、ほとんどのブラウザでは_window.onload_イベントをブロックします。 iframeを使用してブロックしない方法でJS SDKをロードする方法については、 Stoyanの投稿 を参照してください。

それが多すぎて、SDKのダウンロードまたは実行を遅らせたい（実行後にスピードアップしたい）場合は、以下をお勧めします。

まず、クロスプラットフォームの方法で準備ができているDOMにフックする方法を提供するjQueryのようなライブラリを使用します。 ここに1つの実装があります 。 「DOM readyハンドラ」を取得したら、次の2つのことのいずれかを実行する必要があります。

  1. JS SDK読み込みコードをDOM readyハンドラーに移動します。

  2. FB.init（...）からxfbml：trueを取得し（もしあれば）、SDK URLからxfbml = 1を取得します。これにより、ソーシャルウィジェットがすぐに解析および初期化されなくなります。次に、DOM readyハンドラーでFB.XFBML.parse（）を呼び出します。 その方法についてはこちらのドキュメントをご覧ください 。パフォーマンスのために行う最善の方法は、FB.XFBML.parse(document.getElementById(''))を具体的に呼び出すことです。これにより、SDKがDOM全体を処理する時間を無駄にしないようにします。

3
AndrewF

プラグイン（ソーシャルメディアボタン）のロード時間は、次のような多くの要因によって異なります（ただし、これらに限定されません）。

  • サーバーの応答時間（プラグインは、コードから通知されるまでロードされません。）
  • ユーザーのインターネット速度（この場合、あなたのもの）
  • ソーシャルメディアWebサイトのサーバーまでの距離（たとえば、Facebookのサーバーは大陸の反対側にあり、待ち時間が発生する可能性があります）
  • ソーシャルメディアウェブサイトの読み込み時間

つまり、コードを可能な限り最適化する以外にできることはあまりありません。

また、プラグインのドキュメントで特に指定されていない限り、ドキュメントの準備が整った後にJavascriptプラグインを実行することをお勧めします。すべてのページを変更する準備ができているかどうかわからないため、setIntervalは適切なアプローチではありません。そのため、ページのコンテンツを変更するために$(document).ready()アプローチを使用するようにしてください。

2
Luke111

ソーシャルメディアを読み込むスクリプト内に、「遅延」を入れます。

<script defer src="http://api.facebook.com/....."></script>
1
Kernel James

Social initスクリプトに非同期ロードを使用してみてください。

<script async="async">...</script>
1
paka

「いいね」ボタンを再利用可能なiframeに入れて、URLを「いいね」に渡します。

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fphys.org" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px;" allowTransparency="true"></iframe>
0
boateng

主要なソーシャルメディアボタンのほとんどは、JavaScriptの非同期バージョンを提供します。公式のドキュメントページを少し下にスクロールするだけです。

0
Muskie

Facebookのソーシャルプラグインをより速くロードする方法を見つけるためにここに来た場合-例： window.onload（）イベントが発生する前にそれらをレンダリングする方法（wifiの遅いネットワーク/ページの大きな画像のため...）解決策を試すことができます。

window.fbAsyncInit = function () {
    dispatchEvent(new Event('load'));
}

fbAsyncInitは、facebook sdk jsファイルが読み込まれるとすぐに呼び出され（高速など）、カスタムロードイベントディスパッチを使用して、ソーシャルボタンを偽装して（画像などの他のリソースが読み込まれる前に）レンダリングできます。他のjavascriptコード/ライブラリに応じてonload（）イベントを早期に起動する場合の結果に注意してください。

別の解決策は、iframeにSDKをロードしてソーシャルプラグインをラップすることです。 FB APIは親ウィンドウのwindow.onloadを待機せず、ソーシャルプラグインをより早くレンダリングします。

0
lukyer