ワードプレス

WordPressのHTTPリクエストを減らす：ウェブサイトの速度を最適化する方法

WordPressのHTTPリクエストは、CSS、JS、画像、フォントへのリクエストごとに時間がかかるため、ページの表示速度を左右します。リクエスト数を減らし、レンダーブロッキングを回避し、HTTPリクエストを最適化する方法を紹介します。 ウェブサイト すぐわかる 加速する.

中心点

次のようなポイントを押さえることで、問い合わせ件数を減らし、より良いサービスを提供することができる。 LCP 安定した機能:

キャッシング を使用します：ブラウザ、ページ、オブジェクトのキャッシュは、繰り返しのリクエストを大幅に削減します。.
CSS/JS 最適化する：最小化、バンドル、重要なCSSの統合、レンダーブロックの回避。.
絵モダナイズ：WebP/AVIF、遅延ローディング、固定サイズ、ヒーロースライダーなし。.
スクリプト delay：アナリティクス、ピクセル、外部リソースの遅延。.
CDN/ホスティング を選択する：HTTP/3、エッジキャッシュ、グローバルユーザー向けの短いTTFB。.

WordPressのHTTPリクエストとは？

ページ上の各リソースは、CSSファイル、JavaScript、画像、アイコンなど、それ自身のリクエストを生成する。 フォント. .最近のテーマやプラグインは、すぐに多くの小さなファイルを追加する。 お問い合わせ をドライブする。各リクエストには、DNSルックアップ、TCPハンドシェイク、転送が含まれ、まさにこのオーバーヘッドが加算される。最適化しないと、1ページあたり70回以上のリクエストが発生し、表示が著しく遅れます。目標値はこれより明らかに低い。50以下なら良好で、25以下なら最高速度になる。テンプレート、ヘッダー、フッターはあらゆる場所でロードされるため、ページタイプごとの小さな削減は広範囲に影響します。.

すべての問い合わせが重要な理由

特に同期的にロードされたファイルは、レンダリングをブロックする可能性があります。 シーエスエス そして JavaScript. .これらのリソースがページの先頭でレンダリングをブロックしたままだと、ユーザーは空白を待ってバウンスしてしまいます。これはコアウェブバイタルに影響を与えます：LCPは遅れ、TBTは増加し、画像や広告に対する固定的な対策なしにCLSは増加する。そのため私は、どのリソースが本当に重要で、どのリソースを遅らせることができるかを一貫してチェックしている。ファイルサイズが小さいにもかかわらずリクエストが遅くなる理由がわからない場合は、私のガイドをお読みください。 HTTPリクエストをブロックする理由実用的な説明のために。.

クイック・スタート：最大のレバレッジを持つ対策

私はキャッシュ、最小化、遅延ローディングから始める。なぜなら、これらのステップは素晴らしい効果をもたらし、素早く実装できるからだ。 である. .優れたキャッシュプラグインは、静的なHTMLページを作成し、そのページを保存します。 データベース. .Minificationは、スペースやコメントを削除し、ファイルを結合し、ダウンロードを大幅に削減します。レイジーローディングは、画面外の画像を後ろに移動させ、ファーストペイントとLCPに役立ちます。数回クリックするだけで、テーマを変更することなく、直接的な改善が実現できます。.

最適化措置	削減要求	ツール/プラグイン
キャッシュ（ブラウザ、ページ、オブジェクト）	50-80%	WP Rocket、LiteSpeed Cache、W3TC
最小化と結合	20-50% 転送回数減少	自動最適化, パーフマターズ
レイジーローディングの写真	30-60%イニシャル	WP Rocket、コア機能
HTTP/2/3対応CDN	より効率的な40%へ	クラウドフレア、QUIC.cloud

キャッシュの賢い使い方

私はまず、ブラウザのキャッシュを有効にして、リピーターがアセットをローカルに保存できるようにする。 キャッシュ からはもう二度と出てこない。 サーバー ロードします。ページキャッシュは訪問者のために静的なHTMLを生成し、PHPの実行とデータベースクエリを節約します。オブジェクトキャッシング（例：Redis）により、頻繁なクエリがメモリに残り、管理ページやショップページの負荷が軽減されます。Gzip/Brotliはさらに転送を減らし、転送時間とデータ量を削減します。次に、有効期限（キャッシュコントロール、expires）と、クエリー文字列が不必要にマーケティングスクリプトをキャッシュから除外していないかどうかをチェックします。.

CSSとJavaScript：最小化、結合、ロード

小さなファイルがたくさんあるということは リクエスト, そのため、スタイルやスクリプトはできるだけ少なくまとめている。 バンドル 一緒に。最小化によってサイズは小さくなるが、最も重要なのは、クリティカル・パスのファイルが少なくなることだ。重要なCSSはインラインでインクルードし、折り返しより上のコンテンツは即座にスタイリングされるようにしています。クリティカルでないスタイルは、非同期またはメディア属性で読み込みます。JavaScriptを遅延または延期するように設定しますが、依存関係が壊れないように順序をテストします。.

画像とメディア：大きな節約

画像は、多くの場合、その最大の原因となっている。 お問い合わせ, したがって、私はWebPまたはAVIFに変換し、固定を定義します。寸法. .レイジーローディングはオフスクリーン画像を遅らせるが、私は高速なLCPのために特別にヒーロー画像をプリロードする。レスポンシブsrcsetはモバイルデバイスが小さなバリアントをロードすることを保証します。ヒーローのスライダーはファイル数とリペイントが多くなるので避けています。また、アーティファクトを最小限に抑えるために、最新のフォーマット仕様を使っています。.

フォント、サードパーティプロバイダ、外部スクリプト

外部フォントをローカルに読み込むことで、フォントを完全にコントロールできる。 キャッシング そして プリロード 持つ。フォントスタイルは控えめに組み合わせ、可変フォントのレギュラーとボールドで十分なことが多い。アナリティクス、タグマネージャー、ピクセルについては、最初のインタラクションの後まで遅延を設定するか、onloadイベントの後にのみ読み込むようにしている。こうすることで、クリティカルパスに不要なファイルを残さないようにしている。ソーシャルメディアのウィジェットもチェックし、クリック時にリロードする静的プレビューに置き換えている。.

CDNとホスティングを賢く選ぶ

CDNはユーザーにより近いところで資産を管理し、レイテンシーとその数を削減する。往復で目立つ。 呼びかけ. .HTTP/2/3は、多重化、優先順位付け、TLSハンドシェイクの高速化を可能にする。HTMLのエッジキャッシュは、特に国際的なターゲットグループを高速化する。サーバーでは、NVMeストレージ、最新のPHPバージョン、短いTTFBに注意を払っています。優れたホスティング業者は、Brotli、Early Hints、QUICなどのツールを提供しており、私は積極的に利用しています。.

特殊なケースREST-APIとAdmin-Ajax

多くのインストールは REST API またはadmin-ajax.phpを使用します。 ウィジェット. .ネットワーク・タブでこれらのコールを特定し、ポーリング間隔を短くできるか、リクエストを要約できるかチェックする。可能であれば、サーバー側でAPIレスポンスをキャッシュし、レート制限を設定する。より詳細な最適化については、以下のガイドを参照してほしい。 REST-APIのパフォーマンス, 典型的なブレーキと解決策を示している。これは、機能を失うことなく、繰り返されるバックグラウンドクエリを減らす方法である。.

スピードを維持するための測定とモニタリング

私は、PageSpeed Insights、Lighthouse、GTmetrixですべての変更をテストし、本当のものを得るようにしている。効果シー・アンド・ノー回帰キャプチャする。目標：1ページあたり50リクエスト未満、LCP2.5秒未満、TBT200ミリ秒未満、CLS0.1未満。また、ウォーターフォールチャートを見て、リソースのブロック、DNSルックアップ、キューを視覚化する。覚えておいてほしいのは、リクエスト数は純粋なファイルサイズよりも重要であることが多いということだ。問い合わせに集中. .継続的なモニタリングにより、最適化は安定し、測定可能な状態に保たれる。.

高度な：HTTP/2/3、未使用のCSSとDBのメンテナンス

HTTP/2/3では、多重化、優先順位付け、高速化の恩恵を受けることができる。握手, 並列ロードの待ち時間を意味する ファイル 短縮。私は、スタイルシートを小さくしてリクエストを減らすために、使わないCSSを削除している。繰り返しのレイアウトでは、ページごとではなく、テンプレートごとに重要なCSSを使用する。データベースでは、リビジョン、期限切れのトランジェント、cronの死骸を削除し、バックエンドと動的機能が高速に保たれるようにしています。特に多くのプラグインを含む大規模なプロジェクトでは、このようなステップを踏むことで処理速度が著しく向上します。.

プラグインとテーマの衛生管理

どのプラグインが機能を重複させているか、あるいはほとんど使われていないかを定期的にチェックしている。 になる, 重い荷物を軽いものに変える 代替案. .AstraやGeneratePressのようなリーンなテーマは、リクエストがほとんど発生せず、きれいに最適化できる。テーマ内では、アイコンのコレクションやスライダーなど、不要なモジュールを非アクティブにしている。また、ページビルダーを最小限の方法で設定し、使用するウィジェットだけをロードするようにしています。フィーチャーフラグとモジュラーエンキューは、ファイルの無駄を省くのに役立ちます。.

資源の有効活用と優先順位付け

キャッシュとバンドルに加えて リソースのヒント 決定的な仕上げです。私は、本当に重要なリソースにのみPreloadを使う。LCP画像、メインCSS（クリティカルCSSとしてインラインでない場合）、そしてプライマリCSSである ウェブフォント-ファイルを参照してください。プリロードが多すぎると優先順位がブロックされ、逆効果になることもある。フォントには フォント表示 (スワップ/オプション)でFOITを回避し、正しいプリロードを作成する。 として-ブラウザがファイルを2度読み込まないようにするためです。.

DNSプリフェッチ そして プリコネクト 必須のサードパーティプロバイダー（チェックアウトの支払いプロバイダーなど）には控えめに使っています。Preconnectのおかげで TLSハンドシェイク, しかし、これはリソースが確実に必要な場合にのみ意味がある。. プリフェッチ 次のステップ（例えば次のページネーションページ）で必要になるであろうリソースに使う。と関連して 初期のヒント これにより、接続が確立している間の最初のバイトまでの時間が短縮される。.

プリロード：LCP画像、メインCSS、重要なフォントファイルのみ。.
プレコネクト：安全で避けられないサードパーティドメイン用。.
プリフェッチ：すぐに必要になる可能性のあるリソースやページ。.
DNSプリフェッチ：外部ホストとの低いが有利な準備作業。.

また、可能な限り 優先順位のヒント (LCP画像はfetchpriority=“high“)とすることで、ブラウザは何が本当に優先されるべきかを理解します。これにより、読み込み時間が短縮され 要求シーケンス より正確にコントロールする。.

WordPressの資産：必要なものだけを読み込む

多くのページでは、スタイルやスクリプトをグローバルに読み込みますが、それらが必要なのは一部のテンプレートだけです。私はそのような候補を特定し、それらをロードする 条件付き - 例えば、フォームスクリプトはコンタクトページのみ、スライダーCSSはスライダーが存在する場所のみ、WooCommerceアセットはショップ、商品、チェックアウトページのみ。.

特にやりがいのある清掃作業：

絵文字-フロントエンドのスクリプトとスタイルを無効化する。.
オンベッドは、サードパーティのコンテンツが埋め込まれていない場合に機能します。.
ダッシュコン を必要としないテーマであれば、フロントエンドで使用できます。.
jQueryマイグレート 古いスクリプトがぶら下がっていなければ。.
グーテンベルク ブロックライブラリ フロントエンドでブロックスタイルが実際に使用される場合にのみ、CSSをロードする。.

きめ細かなアセット管理のために、私は（テンプレート／ブロックごとの）モジュール式エンキューに頼るか、ページごとにリソースを非アクティブ化できる最適化プラグインを使用しています。これにより リクエストリスト 膨大な数のファイルから、本当に必要な一握りの資産に素早く変換する。.

WooCommerce、フォーム、その他のダイナミック・エリア

店舗にはそれぞれ特殊なケースがある：よく知られているのは カートの破片-スクリプトはadmin-ajax.php経由で多くのリクエストを繰り返す原因になります。私はこの関数を意味のあるエリア（商品、買い物かご、チェックアウトページ）でのみロードし、ブログやランディングページでは非アクティブにしています。ミニカートは可能な限りキャッシュし、実際にインタラクションがあったときだけ更新するようにしています。商品画像には一貫して ソースセット そして、最初の可視画像を事前にロードする。.

フォームの場合 世論調査-区間、バンドルでバリデーションを送信し、入力がキー入力ごとに送信されないようにデバウンスを使用する。可能であれば、キャッシュされたエンドポイント（RESTなど）を介して検索とフィルターを実現し、繰り返し同じリクエストがキャッシュから提供されるようにする。これにより、サーバーの負荷が軽減され HTTPリクエスト そして、知覚速度を向上させる。.

画像、iframe、メディアをさらに絞り込む

LCPイメージには以下を使用する。 fetchpriority="high" そして正確なプリロードを設定する。同時に、私は次のことにも注意を払っている。幅/高さまたはCSSアスペクト比, レイアウトがずれないように。画像は decoding="async", を設定し、レンダリングをブロックしないようにする。 へたれ それが理に適っている場合のみである。第一写真は怠惰であってはならない。.

私は外部のiframe（YouTube、地図、ソーシャル）を次のように置き換えています。 ライトプレビュー. .ウィジェット全体をすぐにロードする代わりに、静的なプレビュー画像を表示し、クリックした後に本当の埋め込みをロードします。こうすることで、最初のインタラクションには不要な多数の初期リクエストを排除しています。私自身の動画には、ポスター画像、最新のコーデック、アダプティブ・ストリーミングを使用し、大きなファイルが同期の妨げにならないようにしています。.

キャッシュヘッダのクリーンアップとキャッシュバスト

多くのリクエストは、ブラウザやCDNのキャッシュが最適に動作しないために発生します。私は、静的アセット（CSS、JS、フォント、画像）について次のように定義しています。 長いTTL をもって キャッシュ・コントロール というフラグを立てる。不変. .アップデートを安全に展開するには バージョニング ファイル名またはWordPressver-パラメータで指定します。重要: CDNはクエリー文字列を正しくキャッシュしなければなりません。 ver=-パラメータはその効果を失い、不必要にリロードされる。.

イータグ そして 最終更新日 そのため、再検証は迅速に実行され、if-none-match/if-modified-since-responsはデータ量の節約に役立つ。そして 有効期限切れ 更新がバックグラウンドで実行されている間も、サイトのレスポンスは維持されます。この結果、キャッシュが混乱することなく、ラウンドトリップが減り、更新がきれいにスケジュールされます。.

間違いを避ける：バンドルとミニファイが良すぎる場合

時点では HTTP/2/3 1つのファイルにすべてを詰め込む必要はない。大きすぎるバンドルは キャッシュヒット, なぜなら、変更のたびにブロック全体が無効になってしまうからだ。クリティカルパスを小さく保ち、再利用を可能にする、論理的に分離されたいくつかのバンドル（例えば、グローバルコアバンドル、テンプレートバンドル、めったに変更されないベンダーバンドル）です。.

最小化も問題を引き起こす可能性がある：Uglify/Minifyはいくつかのプラグインの機能を損傷する可能性があります。そのため、私は段階的にテストを行い、必要であれば重要なスクリプトをMinify/Combineから除外しています（例：インラインJSON、支払いスクリプト、Captcha）。ゴールは より安定した, クリティカルパスが短く、アップデートのたびに壊れるノーリスクのバンドル。.

測定方法：当てずっぽうではなく、信頼できるテストを

私は再現可能なプロファイルで測定している：デスクトップとモバイルを別々に、現実的な帯域幅とCPUスロットルで測定しています。DevToolsでは次のものを使っています。 カバレッジのために 未使用のCSS/JS とウォーターフォール図を比較して、どのリクエストが優先順位によって待たされたり、積み重ねられたり、遅くなったりしているかを確認します。私は ファーストビュー そして リピートビュー, キャッシュヘッダが本当に機能するのか、再訪問時にリクエスト数が実際に半分以下になるのか、あるいはそれ以上になるのかをチェックする。.

ガードレールも設定した。 リクエスト ページタイプごとの予算、LCPターゲット、サードパーティプロバイダーの予算。新機能は予算に適合した場合のみ稼動します。これにより、最適化の直後だけでなく、長期的にサイトを高速に保つことができます。.

サーバーサイドの機微：TTFBとTLS

純粋なリクエスト数に加え、サーバーのレスポンスタイムも重要である。私は オペキャッシュ をアクティブにし、PHP-FPM を調整し、プラグインが無駄のないものであることを確認し、データベースを最小限にします。往復. .TLSでは、短い証明書チェーンを確保し、現在のTLS 1.3を有効にしています。 OCSPステープリング. .HTTP/3とともに、これはハンドシェイク時間を短縮し、特にモバイルユーザーにとって最初のリクエストを大幅にスピードアップする。.

簡単にまとめると

私は、キャッシュを有効化し、CSS/JSをバンドルし、画像を最新化し、外部スクリプトを遅延させることで、リクエスト数を減らしている。 ロード. .私はフォントをローカルにホストし、重要なリソースをきれいにプリロードする。 ターゲット. .HTTP/2/3のCDNと高速ホスティングは、レイテンシーとTTFBを減らす。私は、PageSpeed、Lighthouse、GTmetrixの測定を使って、LCP、TBT、CLSが目標の通路に滑り込んでいるかどうかをチェックする。わずか数時間で、このプロセスはしばしば70以上の遅いリクエストから50を大きく下回るスピードのページに飛躍させる。.