WordPress 用に画像を圧縮する方法 — 5 分でサイトを高速化する
WordPress サイトが遅いです。プラグインのキャッシュを試したり、ホスティングをアップグレードしたり、CSS を最小化したりしましたが、それでも遅いです。その理由を説明する統計が次のとおりです。平均的な WordPress サイトでは、画像がページの総重量の 40 ～ 60% を占めています。最適化されていない 5 枚の写真を含む 1 つのブログ投稿は 15 ～ 25 MB になることがあります。慎重に選択したホスティング プランとキャッシュ設定では、ページを読み込むたびに 25 MB の画像を提供することを補うことはできません。
画像が WordPress サイトの速度を低下させる理由
WordPress を使用すると、危険なほど簡単に巨大な画像をアップロードできます。携帯電話から写真をメディア ライブラリにドラッグすると、WordPress がいくつかのサイズのサムネイルを生成し、それを投稿に挿入します。問題: 携帯電話は 12 ～ 48 メガピクセルで撮影し、幅 4000 ～ 8000 ピクセル、それぞれ 3 ～ 8 MB のファイルを生成します。 WordPress は投稿内でその画像を幅 800 ピクセルで表示することがありますが、テーマが適切に設定されていない限り、バックグラウンドでフルサイズのオリジナルが読み込まれます。
これに、一般的なブログ投稿の 5 ～ 10 個の画像を掛け、テーマのヘッダー画像、サイドバー画像、および背景画像を追加すると、1 ページあたり簡単に 20 ～ 40 MB の画像データを提供することになります。高速接続でも、画像だけで 2 ～ 4 秒かかります。モバイル接続では、状況はさらに悪化します。
WordPress の理想的な画像サイズ
圧縮を心配する前に、寸法を正しく把握してください。ほとんどの WordPress テーマには、幅 700 ～ 1200 ピクセルのコンテンツ領域があります。 900 ピクセルのコンテナに幅 5000 ピクセルの写真をアップロードするのはまったくの無駄です。 画像のサイズを変更する テーマのコンテンツの幅に合わせてください。標準的なブログ投稿の場合、通常、必要となる最大幅は 1200 ピクセルです。全幅のヒーロー画像の場合、事実上すべての画面に 1920 ピクセルで十分です。
注目の画像: 1200 x 630 ピクセル (これはソーシャル メディア共有にも最適です)。 ブログ投稿画像: 幅 800 ～ 1200 ピクセル、高さは比例します。 全幅バナー: 1920 × 600 ～ 800 ピクセル。 サムネイル: WordPress はこれらを自動的に生成しますが、[設定] > [メディア] でサイズを制御できます。アップロードする前に寸法を取得すると、通常、圧縮が適用される前にファイル サイズが 60 ～ 80% 削減されます。
アップロード前ではなく、アップロード前に圧縮する
多くの WordPress ユーザーは、アップロード後に画像を圧縮するために Smush や ShortPixel などのプラグインに依存しています。これらは機能しますが、サーバーの負荷が増加し、大規模なライブラリには有料プランが必要になる場合があり、依然としてサイズの大きいオリジナルを最初にアップロードすることになります。より良いアプローチ: アップロードする前に画像を圧縮してください ワードプレスに。正しいサイズにサイズ変更し、75 ～ 85% の品質で圧縮すると、6 MB の携帯電話の写真が 150 KB の Web 対応画像になります。それを直接アップロードします。
最適化されていない画像を含む既存の投稿がある場合は、プラグインを使用して一括最適化を行うことができます。ただし、今後新しい投稿を行う場合は、アップロードする前に圧縮してください。より高速で、品質をより細かく制御でき、アクティブな状態を維持するプラグインに依存しません。
WordPress の WebP フォーマット
WordPress はバージョン 5.8 から WebP アップロードをネイティブにサポートしており、AVIF サポートは WordPress 6.5 で追加されました。 WebP 画像は、同等の JPEG よりも約 30% 小さいため、目に見える品質の違いはなく、サイト上のすべての画像がより高速に読み込まれます。 画像を WebP に変換する アップロードする前に、WebP バージョンをサポートするブラウザ (2026 年のすべての最新ブラウザ) に自動的に提供するプラグインを使用してください。
コア ウェブ バイタルへの影響
Google の Core Web Vitals は読み込みパフォーマンスを直接測定し、画像は次の 2 つの重要な指標に影響を与えます。 最大のコンテンツフル ペイント (LCP) そして 累積レイアウト シフト (CLS)。最適化されていない画像は、LCP スコアが低下する最大の原因です。 CLS を防ぐために、画像には常に幅と高さの属性を指定してください。
遅延読み込みと応答性の高い画像
WordPress 5.5 以降では、画像に遅延読み込みが自動的に追加されます。つまり、スクロールしないと見えない範囲にある画像は、訪問者が画像の近くをスクロールするまで読み込まれません。これは、多くの画像を含むページにとって大幅な改善です。最初のページ読み込みでは、画面に表示されている画像をフェッチするだけで済みます。テーマがこの機能を無効にしていないことを確認してください。ページのソースを調べて次の情報を探すことで確認できます。 読み込み中=「怠惰」 img タグの属性。
WordPress は、srcset 属性を使用してレスポンシブ画像マークアップも生成し、訪問者の画面に基づいてさまざまな画像サイズを提供します。これは、モバイル訪問者が取得する画像ファイルがデスクトップ訪問者よりも小さいことを意味します。ただし、これは適切な開始サイズで画像をアップロードした場合にのみ機能します。WordPress は 1200 ピクセルの画像の小さいバージョンを提供できますが、400 ピクセルの画像の小さいバージョンは提供できません。アップロードするサイズとして幅 1200 ～ 1920 ピクセルを目指し、残りは WordPress に処理させます。
5 分間のバージョン: 画像のサイズを幅 1200 ピクセルに変更し、WebP 形式で 80% の品質で圧縮し、WordPress にアップロードし、遅延読み込みが有効になっていることを確認します。次の 5 つのブログ投稿に対してこれを実行し、Google PageSpeed Insights スコアを確認します。通常、改善は劇的です。画像の最適化だけでモバイルのパフォーマンス スコアが 20 ～ 40 ポイント上昇することになります。
