ワードプレス

CDNを使ってもWordPressが遅くなる理由

なぜなら、巨大なファイルはまずオリジンサーバーからエッジノードに転送され、その後オンザフライで最適化される必要があり、計算時間がかかるからです。どのように 画像サイズ, CDNのセットアップとCore Web Vitalsの相互作用と、最適化されていないアップロードがLCPとtime-to-first byteを著しく悪化させる理由。.

中心点

オリジナルサイズ がボトルネックになっている。.
LCP負荷 ヒーロー画像が重く、プリロードが足りないため。.
オンザフライ-リサイズにはエッジノードのCPUと時間がかかる。.
WebP/AVIF データ量を大幅に削減する場合、フォールバックが互換性を確保する。.
ワークフロー プリリサイズ、品質～85 %、レスポンシブサイズ。.

CDNにもかかわらず、なぜ大きな画像は速度を低下させるのか

CDNは レイテンシー, しかし、オリジナルファイルのサイズが大きすぎる場合は困難です。まず、Edgeノードはソースサーバーからファイルを取り出さなければならないが、5～10MBの画像では時間がかかり、最悪の場合タイムアウトにつながる。その後、圧縮、フォーマット変更、リサイズといった処理が行われます。この処理の間、ブラウザは最も重要な画像を待ちますが、これがLCPを悪化させます。最初のヒットの後でも、新しいパージやバリアント変更によってキャッシュの価値が下がり、再び遅延が発生するリスクがあります。.

CDNと画像の関係

最新のCDNは、ユーザーに近いキャッシュから静的ファイルを配信する。絵を追加で変換します。これには、圧縮（Brotli/Gzip）、フォーマット変換（WebP/AVIF）、ビューポートごとのリサイズ、遅延ロードなどが含まれる。高速に聞こえますが、最初のリクエストは元のファイルを取得、分析、変換しなければなりません。適切なキャッシュ戦略がなければ、各バリアント（ブレークポイント、DPR、クオリティ）ごとに複数のバージョンが作成され、最初にそれらを作成しなければなりません。これはその後のリクエストを速くしますが、非常に大きなアップロードの場合、この構造は最初のページのロードを著しく遅らせます。.

画像フォーマット一覧：JPEG、PNG、SVG、WebP、AVIFは？

モチーフの種類によって、意図的に形式を選んでいる。右コンテナ：

JPEG: 色のグラデーションが多い写真用。私は4:2:0クロマサブサンプリングと品質〜80〜85 %を使用します。.
PNG: 透明度やハードエッジのあるグラフィック用。PNGは膨張するので写真には注意。純粋なベクター図形にはSVGがいい。.
SVG: ロゴ、アイコン、シンプルなイラスト。品質を損なうことなくスケーラブルで、非常に小さい。重要：信頼できるソースのみを使用し、必要に応じてサニタイズしてください。.
WebP：写真や混合モチーフのための私の標準。画質と圧縮のバランスが良く、背景を透明にすることも可能。.
AVIF：圧縮率は最高だが、エンコード／デコードが遅くなることがあり、細かいグラデーションでは難しい。モチーフを個別にチェックし、問題がある場合はWebPを使う。.

アートディレクションは <写真-エレメント：モバイル用／デスク用、フォーマット別に異なるカットを用意した。 タイプ-ヒント重要なのは 堅牢なフォールバック (ブラウザがAVIF/WebPをサポートしていない場合は、JPEG/PNG）。.

コアウェブ・バイタルとLCPへの影響

メトリック LCP ヒーローエリアはしばしば最大の可視要素を含むため、画像サイズに敏感に反応します。300-500KBのヒーロー画像は高速ですが、4-8MBの画像は大幅に遅くなります。ゆっくりと生成されるWebPバリアントが追加された場合、待ち時間はさらに長くなります。LCP画像のプリロードがないと、ブラウザは中央の画像が表示される前に追加のリソースをブロックします。この影響は、デスクトップ接続よりも、待ち時間の長いモバイル接続で顕著です。.

典型的な設定ミスとその結果

width属性とheight属性がない場合、レイアウトがジャンプして CLS-値が増加する。LCP 画像が遅延ローディングによって遅延されると、レンダリングの開始が遅すぎて、ユーザーは遅れてコンテンツだけを見ることになります。過度に積極的なキャッシュパージは、苦労して生成された variant を削除し、次の訪問者をより遅い変換パスに送り返します。さらに、WebP のフォールバックがないため、JPEG しか扱えない古いブラウザはブロックされます。自動遅延ロードが有害な場合がある理由は、次の記事で説明しています。レイジーローディングは必ずしも高速ではない; そこで、LCP画像を遅延から除外する方法を紹介する。.

ワードプレス専用調整ネジ

ワードプレスでは、次のような方法で基礎を固めている。 画像サイズ とフィルター。と add_image_size() 意味のあるブレークポイントを定義する（例：360、768、1200、1600px）。必要でない中間サイズは remove_image_size() または 中級_画像サイズ_上級 アップロードプロセスが手に負えなくならないように。について big_image_size_threshold。 私は上限（例えば2200px）を設定することで、オリジナルがオーバーサイズになるのを防いでいる。.

マークアップには wp_get_attachment_image(), なぜならWordPressは自動的に ソースセット そして サイズ を生成した。テーマのレイアウトが正しくない場合、私は サイズ-属性は、モバイルデバイスが不必要に大きな画像を読み込む一般的な原因です。レイジーローディングはWordPress以来デフォルトで有効になっています。 wp_lazy_loading_enabled それぞれ wp_img_tag_add_loading_attr 特にLCP画像は除外している。さらに、この画像には fetchpriority="high", ネットワークスタックの優先順位を高める。.

アップロード前の具体的な最適化ステップ

渋滞を防ぐには アップロード カット、圧縮、適切なフォーマットへの変換を事前に行ってください。一般的なテーマの場合、コンテンツ画像は幅1200～1600px、ヘッダーは1800～2200pxで十分です。品質レベルは80-85 %程度に設定し、視覚的にきれいなまま、バイト数を節約している。また、ウェブサイトには不要なEXIFデータも削除する。この予備作業により、CDNエッジの負荷が軽減され、バリアントがより速く作成されます。.

測定	ベネフィット	ヒント
アップロード前のリサイズ	撮影時間大幅に減少	最大幅をテーマに合わせる
品質～85 %	ファイルサイズ激減	写真ではほとんど見えない
WebP/AVIF	貯蓄最大80 %	フォールバックとしてJPEG/PNGを提供する
LCPイメージのプリロード	LCP 格段に良い	最大の折り畳み画像のみをプリロードする。
キャッシュの有効期限が長い	エッジ-安打率の上昇	不必要なパージを避ける

カラーマネジメント、品質、メタデータ

色空間はパフォーマンスや表示に影響を与えます。私はウェブ用のアセットを sRGB また、大きなICCプロファイルはバイト数がかさみ、ブラウザ間で色のずれが生じるので避けます。JPEGでは、適度なシャープネスとコントロールされたノイズリダクションに頼ります。大げさなぼかしはバイト数を節約しますが、グラデーションが滲んでしまいます。クロマチックサブサンプリング設定（4:2:0）は、写真の品質を目に見える形で損なうことなく、良い節約をもたらします。EXIF、GPS、カメラデータは一貫して削除している。.

本当に重要なCDN設定

優先順位をつける画像-CDNで直接最適化：フォーマットの自動選択、DPRに従ったリサイズ、適度なシャープネス、上限を設けた非可逆圧縮。ヒーロー画像の固定ブレイクポイントを定義し、ビューポートごとに新しいバリアントが作成されないようにしています。クリーンヒットを達成するために、キャッシュキーをフォーマットとサイズにバインドしています。また、エッジノードを温かく保つために、画像のキャッシュの有効期限を長く保っています。具体的な統合手順が必要な場合は Bunny CDNの統合を見つけた。

HTTPヘッダーとキャッシュ戦略の詳細

正しいヘッダーはキャッシュの断片化を防ぐ。画像には キャッシュ・コントロール 高い 最高年齢 (オプションで 不変を厳守すること。 公開. .CDNには Sマクサージュ, ブラウザーよりもエッジの寿命を長くするためだ。. イータグ 或いは 最終更新日 再バリデーションに役立つが、安定したままであるべきである。CDNがコンテンツ・ネゴシエーションによってAVIF/WebP/JPEGを決定する場合、キャッシュ・キーには 受け入れる-ヘッダをつけないとミスが発生します。あるいは、URL パラメータやパスで variant を分けることで、エッジキャッシュを厳重にします。重要: 静的アセットはクッキーを送信してはいけません；; クッキーの設定 はキャッシュを殺す。.

モバイルパフォーマンスとレスポンシブサイズ

スマートフォンの利点 レスポンシブ サイズときれいなsrcset属性。私は、WordPressが適切な中間フォーマットを生成し、CDNがこれらのバリアントをキャッシュすることを確認します。そのため、360pxのワイドディスプレイが2000pxの写真を取得することはありません。ピクセル密度が高い場合は、2倍のバリアントを配信しますが、4K画像がミニディスプレイに表示されないように制限を設けています。これにより、モバイルネットワークのデータ量を削減し、LCPを大幅に安定させることができます。.

プリロード、優先順位付け、適切な属性

LCPイメージのために、私は以下を組み合わせた。 rel="preload" (イメージとして）という明確な目標を持っている。必須バリアントであって、一般的なものではない。さらに、私は実際の <img> fetchpriority="high" で、デフォルトの遅延ロード(loading="eager" この要素に対してのみ)。. decoding="async" は、メインスレッドをブロックすることなくデコードを高速化する。CDNが別ドメインにある場合、早い段階で プリコネクト, TLSハンドシェイクとDNSをより迅速に完了させるためである。すべてが一緒になることで、画像表示までのクリティカル・チェーンが短縮される。.

オンザフライ・リサイズとプリプロセスの比較

オン・ザ・フライは便利そうだが、大きなオリジナルは難しい。負荷エッジCPUのために。そこで私は、アップロード前の前処理と、制御されたエッジのリサイズを組み合わせている。つまり、最も重い作業はローカルで行い、微調整はCDNが行う。画像フォーマットについては、基本的にWebPを選択し、繊細なモチーフについてはAVIFをチェックしている。この2つのフォーマットの違いについては、こちらで説明している： WebPとAVIFの比較.

CDN運用におけるコスト、限界、スケーリング

変換機能は無料ではありません：多くのCDNは、画像変換、CPU時間、イグレスに対して別途料金を請求する。巨大なオリジナルはレイテンシーを増加させるだけでなく、コストも増加させる。そこで、私は次のような計画を立てている。 保守的なバリエーション - ピクセル幅ごとにブレークポイントを設定するのではなく、いくつかのブレークポイントを適切に選んで設定する。これにより、生成と保存が必要なファイル数を減らすことができる。トラフィックが多い場合 オリジン・シールド, を使用してオリジンサーバーを保護します。エッジノードのエラー画像(429/503)は、オンザフライのリサイズに負荷がかかっていることを示すことが多い。.

故障解析：本当のブレーキを見つける方法

私はまずラボ-いくつかの測定ポイントでテストを行い、フィルム・ストリップ、ウォーターフォール・ダイアグラム、LCPエレメントをチェックする。次に、キャッシュ効果を認識するために、ファーストビューとリピートビューを比較する。乖離が大きい場合は、ファーストヒットが変換コストを負担していることを示している。次に、LCP画像を分離し、異なるサイズでテストし、キロバイトに対する品質を評価します。最後に、サーバーのログとCDNの分析をチェックし、エッジ・ミスやパージがキャッシュを空にしていないかどうかを確認します。.

RUMとフィールドデータを正しく解釈する

検査結果はすべてを物語るわけではない。私はこう評価する フィールドデータ 実際のデバイス、ネットワーク、地域をカバーする。地域間のばらつきが大きい場合は、コールドエッジやピアリングリンクが弱いことを示しています。主に携帯電話ユーザーの間でLCPの値が低い場合、私はまずヒーロー画像をチェックします、, ソースセット-ヒットとプリロード。ファーストビューとリピートビューの間に繰り返しギャップが生じるのは 最高年齢-値や頻繁なパージ。新しいヘッダー画像やキャンペーンビジュアルがトリガーになることもよくあります。.

日常生活におけるワークフローと自動化

固定観念なし プロセス 大容量のファイルが再び忍び寄る。そこで私は、アップロード時の自動リサイズ、標準化された品質プロファイル、固定された最大幅に頼っています。画像スタイルガイドは、画像の一貫性を保ち、圧縮しやすくするのに役立ちます。本番前にLCP画像を手動でチェックし、最大の要素に対してのみプリロードを有効にします。新しいヒーローの被写体はすぐにフレームから外れてしまうので、本番後は再度計測します。.

SEO、アクセシビリティ、編集ガイドライン

性能と品質が両立する ＳＥＯ そして A11y. .私は有意義な賞を授与する。 オールド-テキストと意味のあるファイル名、画像の寸法を統一し、CSSのアップスケーリングを避ける。ソーシャルプレビュー（Open Graph）用の圧縮画像は別に用意し、誤ってLCP画像とならないようにしています。クローラーやプレビューがアクセスする必要があるため、ホットリンクプロテクションは慎重に使用する。編集チームのために、最大幅、フォーマット、品質レベル、簡単なチェックリストを文書化しています：トリミング、フォーマットの選択、画質のチェック、ファイル名の割り当て、WordPressへのアップロード、LCP候補のマーク、プリロードのテスト。こうすることで、複数の人がコンテンツを管理する場合でも、クオリティの再現性が保たれます。.

簡単にまとめると

CDNは配信を高速化するが、特大のオリジナルはそのままである。 ボトルネック - 最初に取り出すときに時間がかかり、LCPを悪化させる。私は、画像の幅、品質、フォーマットを事前に最適化し、エッジの微調整だけを残すことで、これを防いでいます。クリーンなsrcsetアトリビュート、LCP画像のプリロード、長いキャッシュの有効期限は、すべての違いを生み出します。設定については、WebP/AVIFのフォールバック、寸法の指定、バリアントのキャッシュキーをチェックしています。これによって、ページ上に画像がたくさんあっても、WordPressのスムーズな動作が保たれます。.