Googleは、ウェブサイトの表示速度を重要視しています。ユーザーがページにアクセスして、表示されるまでの時間が短い方が良いという訳です。
近年Googleは、サイト診断のツールを無償提供したり、検索結果の順位にも反映させると発表したりしています。とにかくウェブサイトを運営している方は、パソコン、スマートフォン共にサイトの表示速度を上げることが大切になります。
今回は、WordPressを使っている方に向けて、ちょっと専門的なお話をお伝えします。
プロフィール画像を表示するGravatarは、ブラウザのキャッシュを活用できない
WordPressを使ってサイトを構築している方は、プロフィール画像(アバター)は何のツールを使って表示させているでしょうか。古くからWordPressを使っている方は、Gravatar(グラバター)というウェブサービスを使っている方が多いのではないでしょうか。
Gravatarはメールアドレスと紐づけることができるため、WordPressのユーザー欄に登録したメールアドレスを記入すると、Gravatarで設定したプロフィール画像が表示されるのです。これは、複数のサイトを運営していたり、他のサイトに寄稿者として参加するときに、わざわざプロフィール画像(アイコン)を設定しなくて良いので便利です。
しかし、ウェブサイトの表示速度において、Gravatarは良くありません。
Google PageSpeed Toolsで、ウェブサイトの表示速度を診断すると、「ブラウザのキャッシュを活用」の欄にGravatarが警告されてしまうのです。要は、Gravatarは表示速度の足を引っ張っているということになります。
Gravatarは外部サイトなので、自分の力ではキャッシュ時間を設定できないのです。自分のサイトであれば「.htaccess」というファイルに記述することで、キャッシュ時間の設定が可能です。
Gravatarをやめて、他の方法でプロフィール画像を表示したい
Gravatar以外の方法でプロフィール画像(アバター)を表示する方法を探しました。そこで行き着いたのが、プラグイン「WP User Avatar」です。
これを使うと、外部サイトのGravatarを使わずに、自サイト内で完結することができるのです。
WordPress ダッシュボードの、プラグイン > 新規追加で「WP User Avatar」で検索してください。いくつか表示されますが、上の画像の左上のアイコンです。
WP User Avatar の使い方
プラグイン「WP User Avatar」を有効化したら、アバターの設定を行います。ここでは画像をアップロードするだけなので簡単です。
ただし、画像は圧縮してファイルサイズを落としておきましょう。速度アップが目的ですので、高画質すぎる画像は避けてください。このサイトのプロフィール画像(アバター)は、たったの9KBです。
次に、同じくダッシュボードから、設定 > ディスカッション へ移動します。「デフォルトアバター」を選択する項目があるので、ここで「WP User Avatar」を選択します。
これで完了ではありません。Gravatarは、メールアドレスと紐づいていますので、別のメールアドレスを再設定する必要があるのです。
ダッシュボードから、ユーザーへ移動し、ユーザー一覧から自分のアカウントを選択します。そして、「メールアドレス(必須)」欄を変更するのです。ここに記入したアドレスへ確認用メールが届くので、メール内に記載されたURLをクリックすれば、設定完了です。
設定 > 一般 にもメールアドレスを設定する項目がありますが、こちらは管理者用なので特に変更しなくても大丈夫です。
Google PageSpeed Tools の速度は、3ポイントアップ!
設定後、再びGoogle PageSpeed Toolsで診断すると、先ほどの「ブラウザのキャッシュを活用する」の項目から、https://secure.gravatar.com/ … の項目が消えました。成功です!
そしてGoogle PageSpeed Toolsの結果は、3ポイント向上したのです。
たった3ポイントですが、コツコツ速度アップの作業してみればわかるのですが、3は大きいです。Gravatarは、結構負荷が掛かっていたのかもしれませんね。
本サイト「Swingin’ Thinkin’」では、この他にもWordPressに関する情報を色々と書いています。よかったら、合わせて読んでみてください。
【追記・注意喚起】WP User Avatar が ProfilePress にアップデート
本記事を公開してから、およそ2年半。このプラグインは、もう使わないほうが良いかもしれません。挙動が怪し過ぎて怖いからです。
詳しくは、以下の記事をご覧ください。
僕は現在、代替方法を探しているところです。