Core Web Vitalsを外さない表示高速化の基本
概要
画像・フォント・スクリプトの3点を最適化。defer付与、絵文字・埋め込みの無効化、事前接続などの最小スニペット付き。
はじめに
難しいチューニングの前に、重いものを軽く・遅らせるだけで体感は変わる。まずは画像／フォント／JSの3点から。
画像の基本
・WebPでアップロード（WordPressは標準対応）
・画像には幅と高さを入れてCLS（レイアウトずれ）を防ぐ
・ヒーロー以外は遅延読み込み（標準でloading="lazy"）
フォントの基本
PHP
// 外部フォント用のpreconnect（必要な場合のみ）
add_filter('wp_resource_hints', function ($hints, $relation) {
if ($relation === 'preconnect') $hints[] = 'https://fonts.gstatic.com';
return $hints;
}, 10, 2);スクリプトの基本
PHP
// 特定ハンドル以外はdeferを付与（jQueryなど除外）
add_filter('script_loader_tag', function ($tag, $handle) {
$exclude = ['jquery-core','jquery-migrate'];
if (in_array($handle, $exclude, true)) return $tag;
if (strpos($tag, ' defer') === false) {
$tag = str_replace(' src', ' defer src', $tag);
}
return $tag;
}, 10, 2);余計な読み込みを止める
PHP
// 絵文字を無効化
remove_action('wp_head', 'print_emoji_detection_script', 7);
remove_action('wp_print_styles', 'print_emoji_styles');
// oEmbedの自動検出を弱める（必要に応じて）
remove_action('rest_api_init', 'wp_oembed_register_route');
remove_action('wp_head', 'wp_oembed_add_discovery_links');計測リズム
・Lighthouse/Chromeの3回平均で見る
・変更は1つずつ→差分が分かる
・画像の元サイズを把握（CMS側で巨大画像を入れない）
まとめ
高速化は“引き算の設計”。重いものを軽く、要らないものは読まない、残りは遅らせる。これだけで多くのサイトは合格点に届く。
