今時のサイトには、FacebookやTwitterを始め、たくさんのソーシャルネットワークリンクが並んでいます。
多くのサイトでは同じデザインのボタンがついていますが、これはソーシャルネットワークの公式ボタンです。公式のものをそのまま使うのも手ではあります。
が、ちょっと重すぎるのです。私の環境では特にFacebookが遅いことが多いです。
ページ表示のWaterfall
ページの表示が終わるまでの時間や通信量を計測してくれるサイトがいくつかありますので、試してみました。
Pingdomというサイトは、なんとなくプロっぽい表示になるのでたまに使いたくなるサイトです。（GTMertixも同じですが）最初は日本語フォントが表示されなかったり、一定時間内に表示させるとキャッシュされてしまうのか、表示が早くなるという不具合もありますが、便利ですよね。
今回はたまたまFacebookの表示も早かったのですが、1秒近く取ったりすることはザラですし、実際に表示してみても、他に並んだソーシャルボタンを押しのけて後から表示されるのを見かけることも多いと思います。PingdomやGTMertixで計測する場合、気をつけていないと「遅すぎて計測されない」こともあります。
今回は、
- Twitter（2件）14kb 約0.3秒
- Facebook（3件）44kb 約0.8秒
- はてなブックマーク（5件）6.2kb 約2.5秒
- GetPocket（2件）5.6kb 約0.3秒
かかっていました。並列リクエストされていて、この時間がすべて表示をブロックされていたわけではありませんので、かなり大雑把ですが、少なくともページ表示時間よりもはてなブックマークの表示時間のほうが長いことだけは間違いありません。（＝1秒以上ははてなブックマークが真っ白）
Pingdomには日本サーバーがないので、日本ローカルのはてなブックマークは時間がかかるのはわかります。私の環境だと、大抵はフェイスブックのボタンが表示が遅かったり、表示されなかったりします。
外部リクエストの大半はGoogle関係
外部リクエストの大半は、実はソーシャルボタンとは関係ないAdSenseだったり、Google Analyticsだったりしますが、これらを除くわけにも行きませんし、Googleのサーバーはレスポンスが良いのでそんなに邪魔になりません。
ソーシャルボタンの通信
ソーシャルシェアボタンを置くことによって起こってくる追加の通信量はなんのためなのでしょうか？
答えは、3つの部分に別れます。例として、当サイトの最近の投稿を見てみます。（悲しいのでぼかしをかけていますが、バレバレですね
ひとつ目はボタンの外観部分です。この画面でいうと、「ツイート」「いいね！」以下略の青っぽい箱の部分が画像として表示されていますので、画像をソーシャル・ネットワークサービスから取得してきます。
ふたつ目はリンクの表示内容です。目に見えませんが、リンク内にシェアされるタイトルとかハッシュタグとかそういうものが埋め込まれます。
みっつ目は上ではぼかしてある数字部分で、これまでのシェア数です。
ソーシャルボタンの軽量化
ボタンの種類に依りますが、基本的にWordPressやJoomla!のようなPHP（プログラミング言語）を扱えるサイトではない静的なHTMLサイトや、SeesaaやFCブログ、アメーバブログのような無料ブログにもそのまま置けるというのをコンセプトに作られています。
なので、ソーシャルネットワークサービスのサーバーに置かれたJavascriptを読み込んで、関数を使って、URLやタイトル、記事内容などを送り、シェアボタンに必要な情報を送り返して貰ってリンクとして表示するという流れになるように作られています。
シェアボタンの画像
シェアボタンの画像は、無駄ですよね。多くのソーシャルネットワークでは、リンクURLと一緒にJavascriptで挿入されるようになっていますので、お仕着せのボタンを使っていると削除できません。
また、シェアボタンの画像はGoogle PageSpeed Insightにかけると最適化していない！と指摘されてしまいますし、ボタンの画像をブラウザにキャッシュさせる設定も自分では出来ないので、気になるポイントです。
自前でボタンを設置している場合にはFont Awesome（参考：「Better Font Awesome」、Font Awesomeを使えるCDN）のようなアイコンフォントを使えば、外部サイトからの画像を減らせます。
リンク内容
WordPressをはじめとするCMSは、タイトルやURL、記事内容といったものを出力するプログラムです。Javascriptに頼らなくても、リンクを作ることが出来ます！
過去のシェア数
過去のシェア数を示す数字が一番厄介です。ボタン自体、簡単に作れますし、シンプルなボタンだけの表示を使っているサイトも多くあります。
でも、記事を読むときに過去のシェア数が多いものを見ると、「これは良い記事に違いない！」としっかり読むという人も多いと思います。少なくとも、注目された記事ということです。
付けてあると頼もしい数字なのですが、それぞれのソーシャルネットワークから数字を取得しなければいけません。ここをなんとかするのが大きな関門です。
Tweet数は取得できなくなった！
2015年11月20日にTwitterがTweet数を表示するJavascriptのサービスを終了させました。その後、表示出来ないままになっているので、見た目が格好悪くなってしまいました。
ツイートだけ、浮いています。今でもTweet数を取得する方法はいくつかあり、実際運用しているサイトもあります。古いページのTweet数に目を瞑れば、なんとかなります。
コメント