W3 Total Cache Minifyプラグインの設定：埋め込みタイプの選択方法？私のトラブルシューティング経験と役立つアドバイス

W3 Total Cache Minify の適切な埋め込みタイプの選択にお困りですか？この記事では、ウェブマスターの実体験に基づき、ウェブサイトのスタイル不整合や読み込みクラッシュを回避するために、適切な Minify 埋め込みタイプを正確に選択するためのステップバイステップガイドを提供します。初心者でも簡単に適用できる、確実な設定方法もご紹介します。WordPress 衝突せずに加速せよ！

ウェブサイトの最適化を行っていた際、W3 Total Cache の Minify 設定を開いたところ、完全に呆然としてしまいました。埋め込みタイプのドロップダウンメニューには、デフォルト (ブロック)、非ブロッキングに JS を使用、非ブロッキングに「非同期」を使用、非ブロッキングに「遅延」を使用、という 4 つのオプションがありました。

少し考えてみたが、これは一体どういうことなのだろうか？

ご安心ください、あなただけではありません。これらの4つのオプションは、初心者でさえ戸惑う可能性が高く、ましてや長年WordPressを使っている人にとってはなおさらでしょう。この記事では、私が実際に遭遇した落とし穴と、そこから学んだ教訓をご紹介します。ドキュメントを参照する必要はありません。私の指示に従ってください。

これら4種類の埋め込みとは具体的にどのようなものですか？

まず、これら4つの選択肢がどのような性格特性を持っているのかについて話しましょう。

デフォルト（ブロック済み）これはデフォルトブロッキングと呼ばれます。最もシンプルな方法で、ブラウザはスクリプトに遭遇すると処理を停止し、スクリプトをダウンロードして完全に実行した後、ページのレンダリングを続行します。信頼性が高いように聞こえますよね？しかし、その代償として、最初のページ読み込みがブロックされてしまいます。ユーザーは、スクリプトの実行が完了するまで何も表示されません。

非ブロッキング処理にJavaScriptを使用するこれは非常に興味深いですね。ページに直接 `<script>` タグを記述する代わりに、まず小さなスクリプトを出力し、ページ実行後に JavaScript を介して読み込む必要のあるスクリプトを動的に挿入します。こうすることで、ページを先にレンダリングし、スクリプトを段階的に読み込むことができます。素晴らしいと思いませんか？しかし、問題は、この動的な挿入プロセスによって、スクリプトの本来の実行順序が乱れる可能性があることです。ページ上のスクリプトが実行順序に大きく依存している場合、問題が発生する可能性があります。

非ブロッキングには「asynchronous」を使用してください。これは、`<script>`タグに`async`属性を追加する方法です。スクリプトはバックグラウンドで非同期にダウンロードされ、ダウンロード完了後すぐに実行されます。ページはスクリプトの実行を待つ必要はありません。ただし、欠点としては、実行順序を完全に制御できないことです。コードで指定した順序に関係なく、最初にダウンロードが完了したスクリプトが最初に実行されます。

非ブロッキングに「delay」を使用するこれが`defer`属性を追加する意味です。スクリプトはページ全体の解析が完了するまで実行を待機し、重要な点として、記述した順序を維持します。最初の画面をブロックしたり、順序を乱したりしないため、非常にユーザーフレンドリーです。

どちらを選べばいいですか？

簡単に言うと、これら4つの選択肢は多肢選択式の問題のようなものです。スピード重視ですか、それとも秩序重視ですか？

私の提案は以下のとおりです。

ウェブサイトの規模が小さく、スクリプトの数も少なく、読み込み速度にそれほど高い要求がない場合は、デフォルト（ブロック）設定を使用するのが最も簡単な方法です。多少速度は遅くなりますが、特に問題は発生しません。

最初の画面の速度を改善したい場合、スクリプトに「AはBより先に実行されなければならない」といった強い依存関係がない場合は、次のことを優先してください...非ブロッキングに「delay」を使用する（延期）。これは、レンダリングを妨げたり、処理順序を乱したりしないため、現時点ではほぼ理想的な解決策です。

遅延処理を試しても一部の機能に問題が発生する場合は、次の点を検討してください。非ブロッキング処理にJavaScriptを使用するこの解決策はより抜本的ですが、互換性はやや劣ります。

非ブロッキングには「asynchronous」を使用してください。(async) は最もお勧めできないオプションです。実行順序が完全にめちゃくちゃになるため、スクリプトがすべて独立して実行されていることを確信していない限り、クラッシュする可能性が高くなります。

私が陥った2つの大きな落とし穴

口先だけの約束は無意味だ。私が犯した二つの失敗を書き出した。自分の経験と照らし合わせて、同じ過ちを繰り返さないようにしてみてほしい。

最初の落とし穴：カスタムWordPressテーマはリアルタイムでプレビューできない。

しばらくの間、テーマをカスタマイズする際に、「保存」をクリックしてもプレビューが更新されないという問題が発生していました。変更を加えてページを更新しても、プレビューはそのままの状態でした。

調査の結果、Minifyの圧縮機能が原因であることが判明しました。解決策は簡単です。

W3 Total Cacheプラグインにアクセスする常规設置、現れる"圧縮"そのオプションのチェックを外してください。次に、右上隅の「設定を保存」の下にある小さな矢印をクリックし、「…」を選択してください。設定を保存してキャッシュをクリアするこの手順は非常に重要です。キャッシュをクリアしないと、古いバージョンが表示されたままになります。

完了したら、テーマのカスタマイズ画面に戻ってください。ライブプレビューが通常に戻ります。

2つ目の問題：Astraテーマの検索ボックスをクリックしても反応しない。

この問題に遭遇したのはかなり前のことです。Astraテーマを使っていたのですが、ある日突然、検索ボックスを何度クリックしても反応しなくなってしまいました。最初はテーマ自体に問題があるのか​​と思ったのですが、後になってW3TCのMinify設定が原因だと分かりました。

解決策は以下のとおりです。

W3 Total Cache → 一般設定 → 詳細圧縮設定 → JS → ミニファイエンジン設定 → ロケール設定 に移動し、埋め込みタイプを次の 2 つのいずれかに変更します。

1. 以前は、JavaScriptを使用してノンブロッキングを実現していました。
2. その後、非ブロッキングのためにJSを使用します

同様に、キャッシュをクリアしてページを更新することで、検索ボックスが正常に動作するようになります。

なぜ他のオプションではなくこの2つが選ばれたのかというと、いくつか調査を行った結果、Astraテーマのフロントエンドコンポーネントはスクリプト実行のタイミングに非常に敏感であり、特定の非ブロッキングメソッドを使用するとイベントバインディングが失敗する可能性があるからです。「JSによる非ブロッキング」モードを使用することで、ページが完全に読み込まれた後にのみスクリプトが実行されることが保証され、非同期処理で発生するような実行の乱れを回避できます。

落地清单

最後に、直接参考にできるチェックリストを以下に示します。

まず最初に、目標を明確にしましょう。最速のページ読み込み速度を重視するのか、それとも安定性とエラーのない動作を優先するのか。これによって、使用すべき埋め込みタイプが決まります。

2つ目のステップは、一度にすべてを変更しないことです。まず、重要度の低いページを選んでテストし、1～2日様子を見て、問題がないと確信できた場合にのみ、サイト全体に展開しましょう。

第三に、変更を加えるたびに必ずキャッシュをクリアしてください。W3TCのキャッシュ機構により最新の変更が反映されないため、「キャッシュをクリアして再度テストする」手順は絶対に必要です。

第四に、ブラウザの開発者ツールやPageSpeed Insightsなどのツールを使って、変更前後の読み込み速度を比較してください。直感だけでなく、データに基づいて判断しましょう。

最後に書く

正直に言うと、この埋め込み型設定を初めて見たとき、しばらくの間戸惑いました。デフォルトのブロッキングモードは遅すぎるように思えたし、非同期モードでは順序が保証されず、遅延モードでは互換性の問題が発生する可能性があったからです。どのオプションを選択すべきか、迷いました。

しかし後になって、これはトレードオフだと気づきました。最速と最も安定性の両方を同時に実現することは不可能で、必ずどちらかを犠牲にしなければなりません。私の経験では、まずはdefer（遅延評価）を使用し、これが現時点で最も安全な非ブロッキングソリューションであるため、問題が発生した場合にのみコールバックを使用するのが良いでしょう。

もし同様の問題に遭遇した場合、あるいは私の方法を試してもなお他の問題が残る場合は、遠慮なくご相談ください。ウェブサイト開発は試行錯誤の連続です。例外はありません。

私の記事を読んでいただき、ありがとうございました。また次回お会いしましょう。