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

W3 Total Cache Minifyに最適な埋め込みタイプを選ぶのに苦労していませんか？この記事では、ウェブマスターの実体験に基づき、ウェブサイトのスタイルミスや読み込みクラッシュを回避するために、適切なMinify埋め込みタイプを正確に選択するためのステップバイステップガイドを提供します。また、初心者でも簡単に適用できる確実な設定方法も紹介し、スムーズで高速なWordPress体験を実現します！

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

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

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

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

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

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

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

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

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

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

簡単に言うと、これら4つの選択肢は多肢選択式の質問のようなものです。スピードを優先しますか、それとも秩序を優先しますか？

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

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

ファーストスクリーンの速度を向上させたい場合で、スクリプトに「AはBより先に実行されなければならない」といった強い依存関係がない場合は、ノンブロッキング実行のために「defer」の使用を優先してください。これは、実行順序を維持しながらレンダリングのブロッキングを回避できるため、現在利用可能なほぼ理想的な解決策です。

defer を試しても一部の関数に問題が残る場合は、JavaScript の非ブロッキング処理の使用を検討してください。この方法はより積極的ですが、互換性は若干劣ります。

非ブロッキング処理に「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（遅延評価）を使用し、これが現時点で最も安全な非ブロッキングソリューションであるため、問題が発生した場合にのみコールバックを使用するのが良いでしょう。

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

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