2026年10月18日
2026年10月18日
WordPressのGravatarで表示が遅くなる問題を解決する方法
はじめに
WordPressのコメント欄や管理画面はGravatar(外部サービス)からアバター画像を取得します。コメントが多いページではGravatarへのリクエストが大量に発生し、外部サービスへの依存でページ速度が低下することがあります。
症状・原因
- コメントが多いページの表示が遅い
- PageSpeed Insightsで「サードパーティのコードの影響を抑えてください」と指摘される
- Gravatarサーバー(gravatar.com)への接続が遅い・タイムアウトする
- 管理画面のユーザー一覧ページの読み込みが遅い
解決手順
ステップ1:Gravatarが速度に与える影響を測定する
# Gravatar へのリクエスト数を確認
wp eval "
\$comments = get_comments(['number' => 50, 'status' => 'approve']);
echo 'コメント数: ' . count(\$comments) . PHP_EOL;
echo 'Gravatar リクエスト予定数: ' . count(array_unique(array_column(
(array)\$comments, 'comment_author_email'
))) . PHP_EOL;
"
# curl で Gravatar のレスポンス時間を測定
curl -o /dev/null -s -w "%{time_total}s\n" \
"https://secure.gravatar.com/avatar/$(echo -n 'test@example.com' | md5sum | cut -d' ' -f1)?s=50"
ステップ2:Gravatarを無効化してデフォルトアバターを使う
// functions.php: Gravatar を完全に無効化
// ① デフォルトアバターを mystery(謎の人物)に変更して外部リクエストを減らす
add_filter('pre_option_show_avatars', '__return_zero');
// ② または、ローカルのデフォルト画像を使う
add_filter('get_avatar_url', function(string $url, mixed $id_or_email, array $args): string {
// Gravatar URLを使わずローカル画像を返す
return get_theme_file_uri('images/default-avatar.png');
}, 10, 3);
// ③ 管理画面でもアバターを無効化
add_filter('get_avatar', function(string $avatar, mixed $id_or_email, int $size, string $default, string $alt): string {
return sprintf(
'<img alt="%s" src="%s" width="%d" height="%d" class="avatar avatar-%d photo">',
esc_attr($alt),
esc_url(get_theme_file_uri('images/default-avatar.png')),
$size, $size, $size
);
}, 10, 5);
ステップ3:Gravatarをローカルにキャッシュする
// functions.php: Gravatar 画像をローカルにキャッシュして再利用
add_filter('get_avatar_url', function(string $url, mixed $id_or_email, array $args): string {
if (is_admin()) {
return $url; // 管理画面ではキャッシュしない
}
// メールアドレスからハッシュを生成
$email = is_object($id_or_email) ? $id_or_email->comment_author_email
: (is_string($id_or_email) ? $id_or_email : '');
if (empty($email)) {
return $url;
}
$hash = md5(strtolower(trim($email)));
$size = $args['size'] ?? 96;
$cache_dir = WP_CONTENT_DIR . '/uploads/avatars/';
$cache_file = $cache_dir . $hash . '-' . $size . '.jpg';
$cache_url = WP_CONTENT_URL . '/uploads/avatars/' . $hash . '-' . $size . '.jpg';
// キャッシュが存在し、7日以内の場合はそのまま使う
if (file_exists($cache_file) && (time() - filemtime($cache_file)) < 7 * DAY_IN_SECONDS) {
return $cache_url;
}
// Gravatar から取得してキャッシュ
if (!is_dir($cache_dir)) {
wp_mkdir_p($cache_dir);
}
$gravatar_url = "https://secure.gravatar.com/avatar/{$hash}?s={$size}&d=mm&r=g";
$response = wp_remote_get($gravatar_url, ['timeout' => 3]);
if (!is_wp_error($response) && wp_remote_retrieve_response_code($response) === 200) {
file_put_contents($cache_file, wp_remote_retrieve_body($response));
return $cache_url;
}
return $url; // 取得失敗時はオリジナルURLを使用
}, 10, 3);
ステップ4:Gravatarを遅延読み込み(lazy load)する
// functions.php: アバター画像を遅延読み込み
add_filter('get_avatar', function(string $avatar): string {
// loading="lazy" 属性を追加
return str_replace('<img ', '<img loading="lazy" ', $avatar);
});
// または img タグを data-src に変換して JavaScript で遅延読み込み
add_filter('get_avatar', function(string $avatar): string {
return preg_replace(
'/\ssrc=(["\'])([^"\']+)\1/',
' src=$1data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7$1 data-src=$1$2$1',
$avatar
);
});
ステップ5:DNS プリフェッチで Gravatar を高速化する
// functions.php: Gravatar ドメインの DNS プリフェッチを追加
add_action('wp_head', function(): void {
if (get_option('show_avatars')) {
echo '<link rel="dns-prefetch" href="//secure.gravatar.com">' . PHP_EOL;
echo '<link rel="preconnect" href="https://secure.gravatar.com" crossorigin>' . PHP_EOL;
}
}, 1);
# Gravatar を使わないプラグイン(WP User Avatar)をインストール
wp plugin install wp-user-avatar --activate
# または Simple Local Avatars
wp plugin install simple-local-avatars --activate
注意事項
- ローカルキャッシュを実装する場合、
wp-content/uploads/avatars/ディレクトリへの書き込み権限が必要です。また、キャッシュファイルが増え続けるため、30日以上古いファイルを定期的に削除するcronを設定してください get_avatar_urlフィルターでGravatarURLを差し替える場合、プラグインやテーマがget_avatar()を直接呼び出している箇所は別途対応が必要ですwp_remote_get()でGravatarを取得する処理はページ表示時に実行されるため、未キャッシュの場合は初回表示が遅くなります。バックグラウンドでキャッシュするWP-Cronジョブとの組み合わせを検討してください
まとめ
Gravatar速度問題の解決は①curlでGravatarのレスポンス時間を測定し影響を確認、②get_avatar_urlフィルターでローカルデフォルト画像に差し替えるか外部リクエストを排除、③wp_remote_get+file_put_contentsでGravatarをローカルに7日間キャッシュ、④loading="lazy"属性をget_avatarフィルターで追加して遅延読み込みを実施、⑤dns-prefetch/preconnectでGravatar接続を事前確立して初回表示を改善します。