はじめに
「lazy loadを設定してファーストビューの読み込みを高速化」というトラブルに悩んでいる方は多くいます。本記事では原因の特定から解決まで、図解付きでわかりやすく解説します。
症状・原因
lazy loadを設定してファーストビューの読み込みを高速化が起きる主な原因は以下の通りです。
- レンダリングブロックリソース（JS・CSS）の未最適化
- 画像の過大なファイルサイズ・未圧縮
- キャッシュの未設定またはキャッシュプラグインの競合
- 不要なプラグインによるHTTPリクエスト過多
解決手順
ステップ1：PageSpeed Insightsで問題箇所を特定する
Google PageSpeed InsightsにURLを入力して、LCP・FID・CLSのスコアを確認します。「改善できる項目」に表示された問題から優先度の高いものに取り組みます。
ステップ2：画像を圧縮・WebP化する
ShortPixelやSmushなどのプラグインで画像を一括最適化します。
# WP-CLIでサムネイルを再生成
wp media regenerate --yesステップ3：キャッシュプラグインを設定する
WP RocketやLiteSpeed Cacheなどで以下を有効化します：
- ページキャッシュ
- ブラウザキャッシュ
- GZIP圧縮
- CSS/JSの結合・ミニファイ
ステップ4：レンダリングブロックリソースを除去する
functions.php でスクリプトを defer 読み込みに変更します。
add_filter( 'script_loader_tag', function( $tag, $handle ) {
$defer = ['my-script-handle'];
if ( in_array( $handle, $defer ) ) {
return str_replace( ' src', ' defer src', $tag );
}
return $tag;
}, 10, 2 );注意事項
SEO設定の変更はサイトのインデックスやランキングに影響します。大きな変更をする場合はGoogle Search Consoleで変更後の推移をモニタリングしてください。サイトマップ再送信も忘れずに行ってください。
まとめ
WordPressでlazy loadを設定してファーストビューの読み込みを高速化の解決手順を振り返ります。
1. PageSpeed Insightsで問題箇所を特定する
2. 画像を圧縮・WebP化する
3. キャッシュプラグインを設定する
4. レンダリングブロックリソースを除去する
手順通りに行えば多くのケースで解決できます。解決しない場合はホスティング会社のサポートやWordPress公式フォーラムにご相談ください。