未使用のCSSを削除し、JavaScriptを遅延させ、WebPとAVIFを配信します

1. 一度に1つの変更をテストしてください

   アセットの最適化により、ブラウザによるテーマファイルの受信方法が変わります。問題が発生した際に原因を特定しやすくするため、設定を1つ変更したらサイトを確認し、その後に次の操作へ進んでください。

2. CSS と JavaScript のタブを開いてください

   WordPress で Zinn Digital®、Cache Pro、次に CSS および JavaScript を開きます。画像は専用のタブにあります。

3. 安全なデフォルト設定から開始する

   「安全なデフォルト設定を使用する」をオンのままにしてください。jQuery や Cookie 同意バナーの読み込みを遅延させることはなく、注文手続きページには干渉しません。

4. JavaScript を遅延させ、未使用の CSS を削除します

   訪問者が操作するまで JavaScript を遅延させる機能を有効にし、保存したうえでログアウトした状態で主要ページを確認してください。その後、未使用の CSS を削除する機能を有効にしてください。正常に動作しなくなったものがある場合は、そのスクリプトまたはスタイルシートを除外ファイルの一覧に追加してください。

5. WebP および AVIF 画像を配信

   「画像」タブで WebP または AVIF を有効にしてから、既存の画像を変換してください。元の画像はそのまま保持され、クリック1回で変換済みのコピーをすべて削除できます。

6. 圧縮または結合のオプションがない理由

   ファイルの結合はHTTP/1.1では有効でしたが、HTTP/2やHTTP/3ではページの表示速度を低下させます。また、ファイルの圧縮後に軽量化（minify）を行っても数パーセントの削減にしかならず、レイアウト崩れの最も一般的な原因となります。真の効果は、未使用のCSSの削除とJavaScriptの遅延実行によって得られます。

次のガイド: WordPress データベースをクリーンアップする