はじめに
ウェブサイトのパフォーマンスは、ユーザーエクスペリエンスと検索エンジンランキングに直接影響を与えます。Cumulative Layout Shift（CLS）は、Googleが推奨するPageSpeed Insightsで重要な指標として評価されるパフォーマンスの一つです。この記事では、WordPressサイトのCLSを改善するためのステップと設定方法について詳しく説明します。
症状・背景
- ユーザーがページを読み込んだ後に要素が突然移動したり、画面下部にスクロールして初めて表示されるコンテンツがある
- Google Lighthouseツールで「Cumulative Layout Shift」のスコアが低い
- PageSpeed Insightsでの評価結果において「レイアウトのシフトを減らす」という改善案が提示される
手順・設定方法
ステップ1: サイトのCLSスコアを確認する
# WordPress管理画面にログインし、「ツール」メニューから「Site Health」を選択します。
wp site health
# 「Performance」タブで、Cumulative Layout Shiftのスコアをチェックします。ステップ2: 画像の適切なサイズ指定
# WordPressプラグイン「Smush」を使用して、すべての画像ファイルに最適なサイズと品質を設定します。
wp smush bulk --resample=1 --quality=80
# 「Settings > Smush」で、自動リサンプリングと圧縮機能を有効化します。ステップ3: レイアウト固定のCSS追加
# カスタムCSSファイルに以下のコードを追加して、重要要素が固定位置で表示されるように指定します。
.add-to-cart-button {
position: sticky;
top: 80px;
}
# 「Appearance > Customize」からカスタマイズ機能を開き、「Additional CSS」セクションに上記のCSSコードをコピー&ペーストします。ステップ4: JavaScriptの遅延読み込みと並列処理
# WordPressテーマのfunctions.phpファイルに以下のような関数を追加して、JavaScriptファイルを遅延読み込みと並行実行に設定します。
function defer_please($tag, $handle) {
if (in_array($handle, array('jquery', 'your-custom-script'))) {
return str_replace(' src', ' defer="defer" async="async" src', $tag);
}
return $tag;
}
add_filter('script_loader_tag', 'defer_please', 10, 2);注意事項
- サイトのCSSとJavaScriptファイルを定期的に最適化して更新する
- 外部APIからのデータ取得や重いスクリプトは、可能な限り遅延読み込みと並行実行に設定すること
- コード変更を行う際は必ずバックアップを取り、テスト環境で動作確認を行ってから本番環境へ反映すること
まとめ
1. サイトのパフォーマンスを定期的にチェックする
CLSスコアが低下した場合はすぐに原因を特定し対策を講じる
2. 画像やメディアファイルの最適化を行う
適切なサイズと品質で配信することで、レイアウトシフトの頻度を減らすことができる
3. カスタムCSSを使用して重要要素を固定位置表示する
重要なボタンやリンクがスクロールしても常にユーザーの視界内に存在するように指定する
4. JavaScriptの読み込み順序とタイミングを最適化する
重いスクリプトは遅延読み込み、軽量なスクリプトは並行実行で効率的に処理する
5. ウェブパフォーマンスに関する最新情報を把握する
Google LighthouseやPageSpeed Insightsの更新内容に注意を払い、必要に応じて対策を講じる
関連記事: