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接続を事前確立して初回表示を改善します。

お気軽にご相談ください

お見積りへ お問い合わせへ
▲