Autoptimizeの使い方7ステップ！サイト速度、本当に上げられる？

ページビルダー使用時の、おすすめ設定

ここでは、BEAVERBuilderやElementor使用時など、ページビルダー使用時ののおすすめ設定方法について解説します。

JavaScript オプション

「JavaScript コードの最適化」と「JS ファイルを連結」について、それぞれの設定を詳しく説明します。

1. 「JavaScript コードの最適化」

• 説明: この設定を有効にすると、Autoptimizeはサイト上のJavaScriptコードを最適化（縮小・圧縮）します。不要なスペースやコメントを削除し、JavaScriptファイルのサイズを小さくしてページ読み込みを高速化します。
• 推奨設定: 有効にするのが一般的におすすめです。
  • 理由: JavaScriptの最適化により、ファイルサイズが小さくなるため、ページの読み込み速度が向上します。特に、ページに複数のJavaScriptファイルがある場合、最適化することでユーザー体験が向上します。

2. 「JS ファイルを連結」

• 説明: 複数のJavaScriptファイルを1つにまとめて連結する設定です。これにより、サーバーへのリクエスト数が減少し、ページの読み込みが速くなることが期待されます。ただし、この機能を使うと、JavaScriptファイルの処理が一括で行われるため、連結されたファイル内でエラーが発生すると、すべてのJavaScriptが動作しなくなるリスクがあります。
• 推奨設定: 有効にすることが一般的ですが、Elementorや他のプラグインを使用している場合は注意が必要です。
  • 理由: JavaScriptファイルの連結によってHTTPリクエスト数が減るため、ページ読み込み速度の向上に貢献します。しかし、特にElementorのようなプラグインは多くのJavaScriptを使用しているため、すべてを連結すると、デザイン崩れや機能がうまく動作しない場合があります。一部のJavaScriptファイルは連結から除外（例: jQueryやElementor関連ファイル）するのが良い方法です。

設定のポイント

• JavaScript コードの最適化は、一般的にサイトのパフォーマンス向上に効果的なので有効にして問題ありません。
• JS ファイルの連結は、プラグインの動作やデザイン崩れを防ぐために、重要なJavaScriptファイルは除外しつつ有効にするのがおすすめです。特に、ElementorやjQueryに依存するスクリプトがある場合、それらは連結せずに別々に読み込むようにしましょう。

設定手順

1. Autoptimizeの設定に移動。
2. 「JavaScript コードの最適化」にチェックを入れる。
3. 「JS ファイルの連結」にチェックを入れる。
4. 連結を除外したいスクリプト（jquery.jsやwp-content/plugins/elementor/assets/js/など）を「除外するスクリプト」のフィールドに追加する。
5. 設定を保存してキャッシュをクリアし、サイトの動作とデザインを確認する。

こうすることで、サイトパフォーマンスの改善と、デザインやプラグインの正常な動作を両立させることができます。必要に応じてさらに最適化の微調整も可能です。

1. 「インラインの JS も連結」

• 説明: 通常、JavaScriptファイルだけを連結して最適化しますが、このオプションを有効にすると、HTML内にインラインで記述されているJavaScriptも連結されます。
• 推奨設定: チェックしない方が良いです。
  • 理由: インラインのJSを連結すると、Autoptimizeのキャッシュサイズが急激に大きくなるため、サイトのパフォーマンスに悪影響を及ぼす可能性があります。特に、ElementorやConvert Proのようなプラグインを使用している場合、これが問題を引き起こすことがあります。

2. 「Autoptimize に HTML からも JS を抽出させる」

• 説明: AutoptimizeがHTMLからもJavaScriptコードを抽出して最適化する機能ですが、これを有効にすると、キャッシュサイズが急増することがあります。
• 推奨設定: チェックしない方が良いです。
  • 理由: この設定もキャッシュの急増を引き起こす可能性が高く、サイト全体のパフォーマンスに影響を与えることがあります。また、HTML内のスクリプトは必ずしもすべて最適化されるべきではなく、トラブルの元になることもあるため、特に必要がない限り有効にする必要はありません。

3. 「head> 内へ JavaScript を強制」

• 説明: 通常、JavaScriptはページの読み込み後に実行されますが、このオプションを有効にすると、JavaScriptをページの読み込み中に実行するため、ページがレンダリングされる前にJavaScriptが実行される可能性があります（レンダリングブロッキングが発生する）。
• 推奨設定: チェックしない方が良いです。
  • 理由: JavaScriptをhead内で強制的に読み込むと、ページのレンダリングが遅れ、ユーザーがページを閲覧できるようになるまでの時間が長くなることがあります（特にモバイルでのパフォーマンスが低下します）。この設定は特定の要件がない限り推奨されません。

4. 「try-catch で囲む」

• 説明: JavaScriptコードをtry-catchで囲むことで、JavaScriptのエラーが発生してもページ全体が壊れないようにするための設定です。特定のエラー処理を行いますが、全体的なパフォーマンスには影響を与える可能性があります。
• 推奨設定: 一般的にはチェックしない方が良いです。
  • 理由: try-catchで囲むことで、JavaScriptエラーの影響を最小限にすることはできますが、通常はこれを行う必要はありません。これを使うとJavaScriptのエラーハンドリングが不自然に働き、デバッグが難しくなる可能性があります。一般的な使用では推奨されませんが、問題が特定のスクリプトで発生している場合にのみ試す価値があります。

まとめ:

これらのオプションは、特定の状況下で役立つことはありますが、通常の設定ではチェックしない方が無難です。これらを無効のままにしておくことで、Autoptimizeのキャッシュサイズが膨れすぎたり、ページのパフォーマンスが低下するリスクを避けることができます。

もし、特定の問題が発生した場合には、一つずつ設定を変更し、テストを行うことで問題解決に役立つ場合もあります。

CSSオプションの設定

CSSに関するAutoptimizeの各オプションについて、それぞれの設定と推奨の有効・無効について解説します。

1. 「CSS コードを最適化」

• 説明: このオプションを有効にすると、CSSファイルのサイズを縮小（minify）します。空白やコメントなどの不要な部分を削除し、ファイルを軽量化することで、ページの読み込みを早めます。
• 推奨設定: 有効にするのがおすすめです。
  • 理由: CSSファイルを縮小することでページのパフォーマンスが向上します。縮小化自体はCSSの動作には影響を与えません。

2. 「CSS ファイルを連結」

• 説明: このオプションは、複数のCSSファイルを1つにまとめて、サーバーへのリクエスト数を減らし、ページの読み込み速度を改善します。多くのリクエストが発生することでパフォーマンスが低下するのを防ぐ効果があります。
• 推奨設定: 有効にするのが一般的ですが、デザイン崩れを防ぐため注意が必要です。
  • 理由: CSSファイルを連結することでリクエスト数が減り、パフォーマンスが向上します。ただし、Elementorや他のプラグインが動作に特定のCSSファイルを必要としている場合、連結によってデザイン崩れが発生する可能性があるため、慎重にテストを行ってください。

3. 「インラインの CSS も連結」

• 説明: HTML内にインラインで記述されているCSSを、外部CSSファイルと一緒に連結するオプションです。
• 推奨設定: チェックしない方が良いです。
  • 理由: インラインのCSSを連結すると、キャッシュサイズが増大する可能性があり、サイト全体のパフォーマンスに影響を与える可能性があります。インラインのCSSは通常、特定の用途で使われているため、連結する必要はあまりありません。

4. 「データ生成: 画像を URI 化」

• 説明: 小さな画像（例えばアイコンなど）を別途ダウンロードするのではなく、CSSファイル内に画像を埋め込む（Base64化）オプションです。これにより、サーバーへのリクエスト数を減らす効果があります。
• 推奨設定: 必要に応じて有効にする。
  • 理由: 小さな画像を一度に読み込めるため、パフォーマンス向上につながります。ただし、大きな画像をURI化するとファイルサイズが大きくなり、パフォーマンスに悪影響を及ぼすため、URI化するのは小さな画像だけに留めるべきです。

5. 「レンダリングブロックしている CSS を除去」

• 説明: これはCritical CSSと呼ばれる手法で、ファーストビュー（最初に表示される部分）のCSSをインライン化し、レンダリングブロッキングを回避します。残りのCSSはページ読み込み後に非同期で読み込まれます。
• 推奨設定: 有効にすることをおすすめしますが、慎重に設定してください。
  • 理由: この設定はページのレンダリングを高速化しますが、適切に設定しないとデザイン崩れが発生する可能性があります。Critical CSSを自動生成するプラグイン（例: AutoptimizeのCriticalCSSタブを利用）や、手動で設定することでデザインを維持しつつパフォーマンスを向上させることができます。

6. 「すべての CSS をインライン化」

• 説明: サイト上のすべてのCSSをインライン化して、レンダリングブロックを完全に排除するオプションです。ただし、CSSをインライン化すると、HTMLファイルのサイズが非常に大きくなります。
• 推奨設定: チェックしない方が良いです。
  • 理由: 全てのCSSをインライン化すると、HTMLファイルが膨大になり、読み込み時間がかえって長くなる可能性があります。また、FacebookやWhatsAppなどでのシェア時にメタタグの位置が崩れて、シェア画像やリンクが正常に表示されないこともあります。レンダリングブロックを避けるには、Critical CSSの手法がより適しています。

設定のポイント:

1. 「CSS コードを最適化」は必ず有効にして、ファイルサイズを削減。
2. 「CSS ファイルを連結」はデザイン崩れに注意しながら有効化。
3. 「インラインの CSS も連結」は避ける。
4. 「データ生成: 画像を URI 化」は小さな画像に限り有効化。
5. 「レンダリングブロックしている CSS を除去」は、Critical CSSの設定を適切に行う場合有効化。
6. 「すべての CSS をインライン化」は、HTMLの肥大化やシェア関連の問題を引き起こす可能性があるため、避ける。

これで、AutoptimizeのCSS設定がサイトのパフォーマンスを最大化しつつ、デザインを保つための最適化が進められます。

HTML オプション

AutoptimizeのHTML オプションについて、それぞれの設定の意味と推奨設定を解説します。

1. 「HTML コードを最適化」

• 説明: このオプションを有効にすると、HTMLコードの不要な空白や改行、コメントなどが削除され、ファイルサイズが縮小されます。結果として、ページの読み込み速度が向上します。
• 推奨設定: 有効にすることをおすすめします。
  • 理由: HTMLの最適化は、ファイルサイズを小さくするシンプルかつ効果的な方法で、ページ全体のパフォーマンス向上に貢献します。通常、HTMLコードの最適化が原因でデザイン崩れなどの問題は発生しないため、無効にする理由は少ないです。

2. 「インラインの JS/CSS も最小化」

• 説明: HTML内にインラインで記述されたJavaScriptやCSSも、最小化（minify）するオプションです。これにより、インラインスクリプトやスタイルの余分なスペースやコメントが削除され、ファイルサイズが縮小されます。
• 推奨設定: 有効にするのが一般的ですが、慎重に使用することをお勧めします。
  • 理由: インラインのJS/CSSを最小化することで、パフォーマンスがさらに向上しますが、デザインや機能に影響を与えることが稀にあります。特に、ElementorやConvert ProなどがインラインCSS/JSに依存している場合、最小化によって問題が生じる可能性があるので、動作を確認しながら進めてください。

3. 「HTML コメントを維持」

• 説明: 通常、HTML内に含まれるコメントは最適化時に削除されますが、このオプションを有効にすると、コメントが残ったままになります。HTMLコメントは通常、コードに説明やメモとして使われますが、ユーザーに表示されることはありません。
• 推奨設定: 無効にする（つまりコメントを削除する）方が良いです。
  • 理由: HTMLコメントを残す必要は通常ありません。コメントを削除することで、わずかながらファイルサイズを縮小でき、ページ速度がわずかに改善します。開発やデバッグの目的でコメントを保持したい場合にのみ有効にしてください。

設定のまとめ:

• 「HTML コードを最適化」はパフォーマンス向上に効果的なので、有効にする。
• 「インラインの JS/CSS も最小化」は、効果的だが、サイトのデザインや機能に問題がないか確認しながら有効化。
• 「HTML コメントを維持」は不要なので、無効にすることで軽量化。

これで、HTMLの最適化設定が完了し、サイトの読み込み速度が改善されます。

その他オプション

1. 「連結されたスクリプト / CSS を静的ファイルとして保存」

• 説明: Autoptimizeは、連結されたCSSやJavaScriptファイルを静的ファイルとして保存します。これにより、サーバーが静的ファイルを効率的に提供でき、キャッシュや圧縮が可能です。ただし、サーバーがこれらの圧縮や有効期限を正しく処理しない場合は、チェックを外す必要があります。
• 推奨設定: 有効にするのが一般的です。
  • 理由: ほとんどのサーバー環境では、静的ファイルの保存と圧縮が有効化されているため、パフォーマンスが向上します。ただし、サーバーの設定によって問題が生じる場合（例: 圧縮が適切に行われない場合など）は、無効にするのが適切です。

2. 「除外された CSS ファイルと JS ファイルを最小化」

• 説明: 通常、Autoptimizeは除外されたCSSやJSファイルもファイル名に基づいて最小化します。除外したファイルが最適化されて壊れる場合、このオプションを無効にすることで、除外ファイルがそのまま扱われるようになります。
• 推奨設定: 問題がなければ有効にするのが良いですが、問題が発生する場合は無効にします。
  • 理由: 除外されたファイルも最小化することで、サイト全体のパフォーマンスを向上させる可能性がありますが、特定のファイルが最小化によって壊れる場合は、無効にした方が安全です。最小化したい場合は、除外するファイルが適切に処理されているかテストしてください。

3. 「404 フォールバックの使用」

• 説明: サイト上で古いキャッシュされたHTMLが、削除されたAutoptimizeのCSSやJSを参照している場合、このオプションを有効にすると、フォールバックファイルを使用してエラーを防ぎます。これにより、表示が壊れるのを防ぐことができますが、サーバー側の追加設定が必要になる場合があります。
• 推奨設定: 有効にして問題ないですが、必要な場合のみです。
  • 理由: フォールバック機能により、Autoptimizeが最適化したファイルが404エラーで見つからない場合でも、表示を維持できるため、予期しないサイト崩壊を防ぐことができます。ただし、サーバーの設定が必要になることがあるため、サーバー設定に詳しい場合にのみ有効にしてください。

4. 「ログイン状態の編集者、管理者にも最適化を行う」

• 説明: デフォルトでは、ログイン中の編集者や管理者にもAutoptimizeによる最適化が適用されます。このオプションをオフにすると、ログイン状態では最適化が無効化され、ページビルダー（例: Elementor）を使っている場合にリアルタイムの編集がしやすくなります。
• 推奨設定: 無効にする（チェックを外す）方が良いです。
  • 理由: ページビルダーを使用する場合、最適化された状態だと編集が難しくなることがあります。ログイン中は最適化を無効にすることで、編集時にページが正しく表示され、作業がスムーズになります。

5. 「投稿/ページごとに設定」

• 説明: このオプションを有効にすると、投稿やページごとにAutoptimizeの設定を個別に調整できるようになります。特定のページや投稿で最適化をオフにしたり、微調整を行うことが可能です。
• 推奨設定: 必要に応じて有効にする。
  • 理由: もし特定の投稿やページで最適化が原因で問題が発生している場合、このオプションを有効にして、ページごとに最適化を調整するのが効果的です。多くのページで同様の最適化設定を適用したい場合は、無効のままで問題ありません。

6. 「追加の互換性ロジックを無効化」

• 説明: Autoptimizeは、互換性のあるプラグイン（GutenbergやRevolution Slider、jQueryに依存するプラグインなど）で問題が発生しないように、互換性ロジックを適用しています。このオプションを無効にすると、Autoptimizeが「慎重すぎる」場合に最適化の範囲が広がりますが、サイトが壊れるリスクもあります。
• 推奨設定: 無効にしない方が良い（デフォルトのままが推奨）。
  • 理由: 互換性ロジックは、特にJavaScript最適化で発生する問題を防ぐために重要です。これを無効にすると、サイトでレンダリングブロッキングやJavaScriptエラーが発生するリスクが高まります。サイトでJSの問題が頻繁に起きる場合を除き、通常は有効のままが安全です。

1. 「連結されたスクリプト / CSS を静的ファイルとして保存」: 有効（サーバーが対応できる場合）。
2. 「除外された CSS ファイルと JS ファイルを最小化」: 問題なければ有効、壊れる場合は無効。
3. 「404 フォールバックの使用」: 必要に応じて有効。
4. 「ログイン状態の編集者、管理者にも最適化を行う」: 無効にする（ページビルダーを使用する場合）。
5. 「投稿/ページごとに設定」: 必要に応じて有効（ページごとに調整したい場合）。
6. 「追加の互換性ロジックを無効化」: 無効にしない（デフォルトのまま）。

これでAutoptimizeの設定が最適化され、サイトのパフォーマンスとデザインのバランスが取れるはずです。

画像最適化

「指定枚数目から遅延読み込み」に関して、この設定はページ内の画像の遅延読み込みを何枚目から適用するかを指定するものです。遅延読み込み（Lazy Loading）は、ページのパフォーマンス向上のために、画像をスクロールして表示されたタイミングで読み込む技術です。

設定の意味:

• 最初の画像 X 枚を遅延読み込みしない: 例えば、「3」と設定すると、最初の3枚の画像はページの読み込み時に通常通りすぐに表示されます。4枚目以降の画像は、ユーザーがスクロールしたときに読み込まれます。
• 「1」と設定すると、すべての画像が遅延読み込み対象になります。つまり、ページ読み込み時には画像が読み込まれず、ユーザーが画像の位置までスクロールしたときに初めて画像が表示されます。

推奨設定:

• 重要なコンテンツが含まれる画像（例: ファーストビューで表示されるメインビジュアルやアイキャッチ画像など）は遅延読み込みしない方が良いため、2〜3枚は遅延読み込みしない設定が一般的に推奨されます。
  • 例: 「3」と設定することで、ページの最初の3枚の画像はすぐに表示され、それ以降の画像は遅延読み込みされるようにできます。
• 「1」と設定すると、すべての画像が遅延読み込みされるため、初期のページ表示が速くなりますが、スクロールするまで画像が表示されないため、ユーザー体験に影響を与える場合があります。

まとめ:

• 重要な画像（最初に見える部分の画像など）は、通常通り表示させた方が良いので、遅延読み込みを最初の2〜3枚目から適用するのがバランスの取れた設定です。
• すべての画像を遅延させたい場合は「1」を設定してください。

お使いのサイトのレイアウトやユーザーの体験に合わせて、適切な枚数を設定してみてください。

追加の自動最適化

Googleフォントの最適化については、サイトのパフォーマンスとレンダリングブロック（表示の遅れ）のバランスを取るために慎重に設定する必要があります。それぞれのオプションの違いと、推奨設定を解説します。

1. Google フォントの削除

• 説明: Googleフォントを完全に削除し、デフォルトのシステムフォントに切り替えるオプションです。これにより、フォント読み込みの遅延や外部リクエストが発生しなくなり、パフォーマンスが向上しますが、サイトのデザインや見た目が大きく変わることがあります。
• 推奨設定: デザインにGoogleフォントを使わない場合のみ有効にします。
  • 理由: デザインに大きく依存していないサイトや、パフォーマンスを最優先に考える場合、フォントを削除してデフォルトフォントにすることが可能です。しかし、デザインに影響がある場合は、他の選択肢を考慮する必要があります。

2. 結合とヘッダーでのリンク（フォント読み込みは速いがレンダリングブロックが発生）, display

を含む

• 説明: Googleフォントをヘッダーで結合して読み込みます。これにより、フォントの読み込みが速くなりますが、ページの読み込みが完了するまで表示が一時的にブロックされる（レンダリングブロック）可能性があります。
• 推奨設定: フォントの表示を最優先したい場合に使用します。
  • 理由: フォントの読み込みをできるだけ早く行い、サイトの見た目を維持したい場合、この設定が最適です。ただし、フォントの読み込み中に表示がブロックされるため、ユーザーがページを見たときにコンテンツの表示が遅れるリスクがあります。特にモバイルでこの影響が顕著になることがあります。

3. 結合とヘッダーで遅延リンク（フォント読み込みは遅いが、レンダリングブロックなし）, display

を含む

• 説明: Googleフォントを遅延リンクで読み込み、ページの表示がブロックされないようにします。display: swapが適用され、まずデフォルトフォントが表示され、後でGoogleフォントに切り替わるという動作です。これにより、レンダリングブロックは発生せず、ユーザーが早くページのコンテンツを見られるようになります。
• 推奨設定: パフォーマンスを重視したい場合におすすめです。
  • 理由: レンダリングブロックを避け、ページの表示速度を向上させることができます。最初はシステムフォントで表示され、Googleフォントに切り替わるため、ユーザーにとっての体験が改善されます。パフォーマンスを重視しつつ、フォントも使いたい場合に最適な設定です。

どの設定を選ぶべきか？

• パフォーマンス重視: 「結合とヘッダーで遅延リンク」を選び、display: swapを有効にして、フォントがレンダリングブロックを引き起こさないようにします。これにより、ページの読み込みが速くなり、ユーザー体験が向上します。

• デザイン重視（フォント表示優先）: 「結合とヘッダーでのリンク」を選んで、フォントの読み込みを優先しつつ、多少のレンダリングブロックが発生することを許容します。

• フォント不要: 「Google フォントの削除」を選んで、システムフォントに切り替えます。フォントにこだわらない場合、パフォーマンスが大幅に向上します。

結論として、「結合とヘッダーで遅延リンク」が多くのサイトでバランスが良く、パフォーマンスを重視しながらGoogleフォントを使い続ける場合に最適です。

静的リソースからクエリー文字列を削除

「静的リソースからクエリー文字列を削除」の設定について解説します。

1. 説明:

• このオプションを有効にすると、CSSやJavaScriptなどの静的リソースに付加されるクエリー文字列（主に?ver=1.0などのバージョン番号）が削除されます。
• クエリー文字列は、ブラウザやキャッシュサーバーによってはリソースのキャッシュを避けたり、更新頻度を管理するために使われています。

2. 効果:

• クエリー文字列を削除すると、特定のCDN（Content Delivery Network）やキャッシュサーバーがより効率的にリソースをキャッシュできる場合があります。結果的に、サイトのパフォーマンスが向上する可能性があります。
• ただし、読み込み時間自体が劇的に改善するわけではありません。また、クエリー文字列が削除されることで、リソースの更新が反映されない場合もあります（新しいバージョンがキャッシュされない可能性）。

3. 推奨設定:

• 有効にすることが一般的に推奨されますが、注意点があります。
  • 有効にすると、いくつかのCDNやサーバーでキャッシュ管理が効率化され、パフォーマンスが若干向上する可能性があります。
  • ただし、プラグインやテーマがクエリー文字列（バージョン情報）を利用してリソースのキャッシュ制御を行っている場合、最新のリソースが反映されない可能性があるため、注意が必要です。

4. 使用する場合の注意点:

• クエリー文字列の削除が原因で、キャッシュが更新されず古いスタイルやスクリプトが使われ続けることが稀にあります。その場合、キャッシュを手動でクリアするか、オプションを無効にして再度確認する必要があります。

まとめ:

• クエリー文字列を削除することにより、パフォーマンス向上が期待される場合があるため、基本的には有効にするのが良いです。
• ただし、リソースの更新やキャッシュの問題が発生した場合は、無効に戻すことを検討してください。

WordPress のブロック CSS を除去

「WordPress のブロック CSS を除去」オプションについて解説します。

1. 説明:

• WordPressは、ブロックエディタ（Gutenberg）を使用するサイトに対して、ブロック型のCSSやグローバルスタイルを追加します。これにより、ブロックエディタを使用しているページのデザインが整えられますが、同時にCSSファイルのサイズが大きくなり、ページの読み込み時間が増えることもあります。
• このオプションを有効にすると、これらのブロックCSSやグローバルスタイルを除去できます。結果として、ページのサイズが小さくなり、読み込みが速くなる可能性があります。

2. 適用する場合:

• Gutenberg（ブロックエディタ）を使用していない場合や、特定のページビルダー（Elementor、Diviなど）を使用している場合は、ブロックCSSが不要なので、有効にして除去することができます。
• Gutenbergで作成されたページがない、またはカスタムCSSでスタイルをコントロールしている場合は、このオプションを有効にすることでページサイズを減らし、パフォーマンスを向上させることができます。

3. 適用しない場合:

• Gutenbergを使用している場合や、ブロック型のCSSやグローバルスタイルに依存しているテーマやプラグインを使っている場合は、これを無効にするべきです。これらのCSSが除去されると、ページのデザインが崩れる可能性があります。
• 特に、Gutenbergを使ってページや投稿をデザインしている場合は、このCSSがないとスタイルが適用されなくなるため、デザインがうまく表示されなくなるリスクがあります。

4. 推奨設定:

• Gutenbergを使わない場合は、有効にして除去することでパフォーマンスが向上します。
• Gutenbergを使う場合は、無効のままにすることでデザインが崩れないようにしましょう。

まとめ:

• Gutenbergを使わない（Elementorなど他のページビルダーを使用している）場合は、「WordPress のブロック CSS を除去」を有効にしてページの軽量化を図るのが良いです。
• Gutenbergを使う場合は、デザインの崩れを防ぐために無効のままにするのが安全です。

これで、最適な設定を選べると思います。