【WV.10】WordPress高速化のためのCore Web Vital チェックリスト

Core Web Vitalに関する連載の最終回ではこれまで紹介してきた内容をチェックリスト形式で紹介しよう。

基礎知識

• LCP, FID, CLSなどの指標を理解する。

リソースの配信

• 画像の次世代配信（webp）
• ブラウザキャッシュ、GZip圧縮の適用
• CDNを利用する

サーバーの処理速度向上

• ページキャッシュの利用
• キャッシュを利用できない場合のTTFB改善

リソースの読み込み

• CSSの遅延読み込み（rel=preload）
• JavasScriptの遅延読み込み（defer/async）
• srcsetおよびpictureによる画像のサイズ最適化
• サードパーティーリソースの削除および改善
• loading=lazyによる画像・iframeの遅延読み込み
• リソースヒント（preload / preconnect / prefetch / dns-prefetch）

最後に宣伝なのだが、連載で紹介した内容のうち、テーマに関連するものをプラグインとして公式ディレクトリに公開したので、興味がある方はチェックしてみて欲しい。

Render Faster

基本的な機能は以下の通り。

1. CSS/JSの遅延読み込み
2. 画像・iframeの遅延読み込み
3. oembedのtwitter/instagramのスクリプトを遅延読み込み
4. コアのブロックスタイルを分割（WP 5.8以降）