WordPressのプロフィール画像「アバター」

Googleは、ウェブサイトの表示速度を重要視しています。ユーザーがページにアクセスして、表示されるまでの時間が短い方が良いという訳です。

近年Googleは、サイト診断のツールを無償提供したり、検索結果の順位にも反映させると発表したりしています。とにかくウェブサイトを運営している方は、パソコン、スマートフォン共にサイトの表示速度を上げることが大切になります。

今回は、WordPressを使っている方に向けて、ちょっと専門的なお話をお伝えします。

スポンサーリンク

プロフィール画像を表示するGravatarは、ブラウザのキャッシュを活用できない

WordPressを使ってサイトを構築している方は、プロフィール画像(アバター)は何のツールを使って表示させているでしょうか。古くからWordPressを使っている方は、Gravatar(グラバター)というウェブサービスを使っている方が多いのではないでしょうか。

Gravatarはメールアドレスと紐づけることができるため、WordPressのユーザー欄に登録したメールアドレスを記入すると、Gravatarで設定したプロフィール画像が表示されるのです。これは、複数のサイトを運営していたり、他のサイトに寄稿者として参加するときに、わざわざプロフィール画像(アイコン)を設定しなくて良いので便利です。

しかし、ウェブサイトの表示速度において、Gravatarは良くありません。

Google PageSpeed Toolsで、ウェブサイトの表示速度を診断すると、「ブラウザのキャッシュを活用」の欄にGravatarが警告されてしまうのです。要は、Gravatarは表示速度の足を引っ張っているということになります。

Google PageSpeed Toolsの診断結果

Gravatarは外部サイトなので、自分の力ではキャッシュ時間を設定できないのです。自分のサイトであれば「.htaccess」というファイルに記述することで、キャッシュ時間の設定が可能です。

Gravatarをやめて、他の方法でプロフィール画像を表示したい

プラグイン「WP User Avatar」
プラグイン「WP User Avatar」

Gravatar以外の方法でプロフィール画像(アバター)を表示する方法を探しました。そこで行き着いたのが、プラグイン「WP User Avatar」です。

これを使うと、外部サイトのGravatarを使わずに、自サイト内で完結することができるのです。

WordPress ダッシュボードの、プラグイン > 新規追加で「WP User Avatar」で検索してください。いくつか表示されますが、上の画像の左上のアイコンです。

WP User Avatar の使い方

プラグイン「WP User Avatar」アバターの設定

プラグイン「WP User Avatar」を有効化したら、アバターの設定を行います。ここでは画像をアップロードするだけなので簡単です。

ただし、画像は圧縮してファイルサイズを落としておきましょう。速度アップが目的ですので、高画質すぎる画像は避けてください。このサイトのプロフィール画像(アバター)は、たったの9KBです。

プラグイン「WP User Avatar」デフォルトアバターの設定

次に、同じくダッシュボードから、設定 > ディスカッション へ移動します。「デフォルトアバター」を選択する項目があるので、ここで「WP User Avatar」を選択します。

WordPressユーザーのメールアドレスを再設定

これで完了ではありません。Gravatarは、メールアドレスと紐づいていますので、別のメールアドレスを再設定する必要があるのです。

ダッシュボードから、ユーザーへ移動し、ユーザー一覧から自分のアカウントを選択します。そして、「メールアドレス(必須)」欄を変更するのです。ここに記入したアドレスへ確認用メールが届くので、メール内に記載されたURLをクリックすれば、設定完了です。

設定 > 一般 にもメールアドレスを設定する項目がありますが、こちらは管理者用なので特に変更しなくても大丈夫です。

Google PageSpeed Tools の速度は、3ポイントアップ!

Google PageSpeed Toolsの診断結果

設定後、再びGoogle PageSpeed Toolsで診断すると、先ほどの「ブラウザのキャッシュを活用する」の項目から、https://secure.gravatar.com/ … の項目が消えました。成功です!

そしてGoogle PageSpeed Toolsの結果は、3ポイント向上したのです。

たった3ポイントですが、コツコツ速度アップの作業してみればわかるのですが、3は大きいです。Gravatarは、結構負荷が掛かっていたのかもしれませんね。

本サイト「Swingin’ Thinkin’」では、この他にもWordPressに関する情報を色々と書いています。よかったら、合わせて読んでみてください。