WordPress サイトの表示速度を上げる改善策 #01

ソーシャルボタンのJavascriptの読み込みを非同期処理にして、サイトの表示速度を上げる方法を紹介します。
表示速度は検索順位を決める要因のひとつ、とGoogleが発表しています。

サイトの表示速度について、こちらの記事に詳しく書かれています。
最低2秒、目指すは1秒以内。ウェブサイトを高速化するためのTIPS at #SMX Advanced Seattle 2012

自分のサイトの表示速度を調べる

表示速度を調べるには、下記のようなサイトがあります。

pagespeed

GTmetrixで表示速度を調べた画面です。
Page load timeを見ると、このサイトは表示に5秒かかっています。

PageSpeed InsightsやGTmetrixを確認すると、画像、css、Javascriptファイルなど、どこを改善するといいのかを表示しています。
これから表示速度向上を目指して改善に取り組みます。

ソーシャルボタンの非同期処理

pagespeed

このサイトは記事の下にツイッターやFacebookなどソーシャルボタンを設置しています。
プラグインを使わずに設置をしていますが、最初はJavascriptなど個別に設置していました。
画像はJavascriptをまとめて非同期処理をしたあと、速度表示をしたものになります。
サイトの表示は4秒台になりました。

非同期処理とは

下記のコードは、非同期にする前のコードです。
Javascriptをひとつずつ読み込みます。
FacebookボタンのJavascriptが読み終わらないと、TwitterボタンのJavascriptは読み込まれないため、Facebookのサーバーが重い場合など、Twitterボタンの表示が遅くなります。

非同期処理というのは、Facebook、Twitterそれぞれのボタン表示のJavascriptを同時に読み込むことになります。

非同期処理のコード

下記のコードは非同期処理をしたものになります。このサイトはfooter.phpのファイルに入れています。
facebookのappIdは取得しているものを入れてください。

参考サイト
ソーシャルのJavascriptを1つにまとめて、非同期化処理を加える方法
最近海外で流行りのTwitter,Facebook,Google+1,Analyticsをまとめる非同期スクリプトにはてなを加えてみた

ソーシャルボタンの公式サイト

コードで使用しているソーシャルボタンの公式ページをまとめてご紹介します。
公式サイトには、ボタンの形式など、設定の詳しい方法が載っています。

非同期処理をしてみてのまとめ

まだ4秒かかっていますが対策すると少しも表示速度を上げられることが実感できます。
サイトの表示が速くなれば訪れてくれる方も快適に見られるので修正できるところは引き続き対策していきます。

Comment

  • One Comment

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Share・Feedly