ナレッジベース

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

未使用の CSS の削除やスクリプトの遅延には Zinn® Cache Pro の「CSS および JavaScript」タブを、WebP、AVIF、欠落している画像サイズには「画像」タブをご利用ください — 圧縮や結合のオプションが存在しない理由、およびページ表示を崩す変更を元に戻す方法について説明します。

未使用の CSS を削除、JavaScript を遅延、WebP と AVIF を配信

Zinn® Cache Pro の「CSS と JavaScript」タブを使用して未使用の CSS を削除しスクリプトを遅延させ、「画像」タブで WebP、AVIF、および不足している画像サイズを処理します。縮小や結合のオプションが存在しない理由と、ページが破損する変更を元に戻す方法についても説明します。

一度に1つの変更をテストします — アセットの最適化により、ブラウザによるテーマファイルの受信方法が変化します。問題の原因を明確に特定できるよう、設定を1つ変更したらサイトを確認し、それから次へ進んでください。
「CSS と JavaScript」タブを開きます — WordPress で Zinn Digital®、Cache Pro、そして「CSS と JavaScript」の順に開きます。画像は専用のタブにあります。
安全なデフォルト設定から始めます —「安全なデフォルトを使用」をオンのままにしてください。jQuery やクッキー同意バナーを遅延させることは決してなく、チェックアウトページもそのまま保持されます。
JavaScript を遅延させ、次に未使用の CSS を削除します —「訪問者が操作するまで JavaScript を遅延」をオンにし、保存したうえでログアウトした状態で主要なページを確認してください。その後、「未使用の CSS を削除」をオンにします。何かが正常に動作しなくなった場合は、そのスクリプトまたはスタイルシートを対象外ファイルの一覧に追加してください。
WebP および AVIF 画像を配信します —「画像」タブで WebP または AVIF をオンにし、既存の画像を変換します。元の画像はそのまま保持され、1クリックで変換されたすべてのコピーを削除できます。
縮小や結合のオプションがない理由 — ファイルの結合は HTTP/1.1では有効でしたが、HTTP/2や HTTP/3ではページの表示速度を低下させます。また、ファイルの圧縮後は縮小による節約効果はわずか数パーセントに過ぎず、レイアウト崩れの最も一般的な原因となります。本当の効果が得られるのは、未使用の CSS の削除と JavaScript の遅延です。

スクリーンショット付き: https://zinncache.com/kb/minify-css-and-javascript-in-wordpress