ソーシャルメディアの「好き」ボタンと「+1」ボタンをサイトに追加する最も効率的な方法は何ですか？

Question

タスクは簡単ではありませんが、私に負担を与えます。

これらの私が働いているボタンです：

• グーグル（1）
• Facebookの（ような）
• は、Twitter（ツイート）
• LinkedInの（株）

webpagetest.orgで少しテストしたところ、これらの各サービスからスニペットを取得してこれらのボタンをページ。画像そのものに加えて、いくつかのJavaScriptファイル（場合によっては、1つのボタン用の複数のJavaScriptファイル）を効果的にダウンロードしています。 Facebook Likeボタンとそれに関連するリソースの合計読み込み時間は、DSL接続では2.5秒です。

1つのソースから複数のボタンを取得できるので、ShareThisのようなサービスを使用する方がやや優れています。ただし、Google +1に対する適切なサポートはありません。 Google +1ボタン用にコードを取得しても、そのコードはGoogleからすべてのリソースを引き出しています。

一般的な「共有」ボタンがクリックされたときにすべてのボタンを読み込むというアイデアがあります。そうすることで、ページの読み込み時間が増えることはありません。私はこれが開始点としてhereと記述されたコードを使用して達成できると思います。これはおそらく良い解決策になるだろうが、私はその道を行く前にここで尋ねると思った。

Answer 1

私はそれについて心配しないでしょう、そして、なぜ問題のウェブサイトが適切にリソースを管理していれば、それはGoogleとFacebookなどです...ブラウザは最初の要求。キャッシュが小さいか無効になっているサービスでその効果が見えるかもしれませんが、おそらくすべてのクライアントがキャッシュにそれらのリソースを持っていてページに到達している可能性があります。

そして、私は興味があったからといって、ここでは別の方法です：ここで

はStackOverflowののFacebookのシェアのJavaScriptから、関連するコードの抜粋です：

facebook:function(c,k,j){k=a(k,"sfb=1");c.click(function(){e("http://www.facebook.com/sharer.php?u="+k+"&ref=fbshare&t="+j,"sharefacebook","toolbar=1,status=1,resizable=1,scrollbars=1,width=626,height=436")})}}}(); 

縮小さ、ちょっと、私は気にしませんでした、ので、コードを修正する

StackOverflowエンジニアは、クリックするだけでページを呼び出すようです。つまり、クリックするまではテキストだけであり、すべてを動的に引き寄せることになります。

Answer 2

これらのボタンの動的な面に気をつけなければ、可能な解決策が見つかりました。言い換えれば、あなたは

https://plusone.google.com/_/+1/confirm?hl=en&url={URL} 
http://www.facebook.com/share.php?u={URL} 
http://twitter.com/home/?status={STATUS} 
http://www.linkedin.com/shareArticle?mini=true&url={URL}&title={TITLE}&summary={SUMMARY}&source={SOURCE} 

あなただけの適切なを挿入する必要があると思います...あなただけのこれらのリンクを使用することができ、+ +1を持っているか、あなたのページを気に入ってどのように多くの人々を示すために気にしない場合パラメーター。それはそれよりはるかに単純で軽量にはなりません。私はもちろん各ボタンのアイコンを使用していましたが、実際にCSSスプライトを使用してさらに節約できました。私は実際にこのルートに行くかもしれません。

---

UPDATE

私はこの変更を実装し、ページの読み込み時間は、1.5 MbpsのDSLの3.9秒まで4.9秒から行ってきました。そして、リクエスト数は82から63に増えました。

フロントエンドの最適化をいくつか行っていますが、これは正しい方向に大きなステップでした。