ページの表示速度を改善するには画像の転送量を減らすのがあらゆる意味で一番効果的

ページの表示速度を改善するには画像の転送量を減らすのがあらゆる意味で一番効果的
このページについて
ウェブページの転送量の大半を占める画像データ。WordPressで管理するサイトで画像の圧縮・最適化、webp形式で出力するなどページ表示速度改善に効果のある方法を紹介します。

WordPressで作ったサイトの表示速度が遅い...で対策をいろいろ検索すると出てくるのが、より高速なサーバーへの切り替えや、キャッシュ系プラグインの使用について書かれたページ。

まあ、いずれもあながち間違いではないのですが、その前に根本的に改善できることがあるんです。

それは...ページそのものの容量(転送量)を減らすことです。

ページへ誰かが訪問したとき、パソコンやスマホへ実にたくさんの情報が読み込まれます。その中でも転送量が大きいのが、画像ファイルです。

もしも、スマホやデジカメで撮影した画像をそのままアップロードして投稿などへ挿入しているようであれば、今回紹介する画像の最適化で、ページの転送量を劇的に減らすことができます。

転送量を減らす=表示速度が改善される、ということだけでなく、サーバーが処理する作業も同様に減らすことができ、たくさん同時アクセスされたときにも待ち時間が少なくなる効果が得られますから、ぜひ改善していきましょう。

ページ上部へ戻る▲

サイトで使われている画像を確認しましょう

画像なんかアイキャッチ画像+1枚位しか使ってないから意味ないのでは?と思っている方、ページにはこんな情報が同時に掲載されていませんか?

  • サイドバーへ画像付きの新着記事や人気記事を表示している
  • 本文内へカード形式の内部ページリンクを挿入している
  • 本文下に関連記事などをアイキャッチ画像付きで表示している
  • ヘッダーにスライダー画像を表示させたり、背景画像を使っていたりする

これらはすべて最初にアップロードした画像そのもの、または、そこから生成された小サイズの画像が使われているので、元の画像が大きければ(重ければ)、そこから生成した重い画像がたくさん表示されていることになります。

試しにWordPress管理画面のメディア一覧へファイルサイズ・画像の縦横サイズを表示させる方法で紹介しているコードをテーマのfunctions.phpへ追加して、管理画面のメディアを開いてみてください。

チェックすべきは以下の2つです。

  • 画像の横サイズがサイトの幅(本文の幅)よりも大きくなっていないか?
  • 画像のファイルサイズが何メガバイトにもなっていないか?

いかがでしょう?デジタルカメラやスマートフォンなどで撮影した画像をそのままアップロードしていたら、療法ともすごい数字になっているのではないでしょうか?

もしもそうなっていたら、本ページを参考にすることで、表示速度の改善ができるかもしれませんから、ぜひ対策していきましょう。

ページ上部へ戻る▲

既にアップロード済の画像を最適化しましょう

前項の画像サイズチェックでビッグな画像が見つかったら、その画像の入れ替えをしていきます。

とはいえ、メディアにアップロードする画像にはアップロード都度IDが振られてしまうので、1つ1つの画像がどこに使われているのかを確認しつつ、すべて手作業で入れ替えていくのは非常に大変な作業となります。

そこでおすすめなのが、一時的に入れ替え用のプラグインを使った画像の置き換えです。

この方法を使えば、メディア内での作業だけになりますから、投稿を開いては画像を入れ替えるという途方もない作業から解放されます。

詳しい手順と使用するプラグインについてはアップロード済みの画像を軽量化して入れ替える方法(PageSpeed Insightsのスコア改善策)で詳しく解説していますので、参照の上作業を行ってください。

ページ上部へ戻る▲

今後アップロードする画像への対処をしましょう

厳密にいえば、パソコンに表示している画像を事前に一度I♡IMAGEなどの外部ツールを使って、画像のクオリティ(粒度)そのものを圧縮してからアップロードするとより効果的ではありますが、「Imsanity」というプラグインを使うことで、少なくとも大きい縦横サイズのままアップロードされることがなくなります。

Imsanity」の使い方については、リンク先ページで詳しく解説しています。

一度設定しておけば、アップロード都度画像処理が自動で行われ、このプラグインで圧縮された画像を元にWordPress側、テーマ側で各種サイズの画像が生成されますから、ページ全体で画像の容量(転送量)を減らすことができます。

ちなみに「Imsanity」は、有名な画像最適化プラグインEwww…と同じ作者が提供している無料プラグインですので、信頼性は確かだと思います。

また、「Imsanity」には、アップロード済の画像を一括圧縮する機能もあり、前項で入れ替えた画像についてもさらに最適化することもできますから、同時に行っておきましょう。

ページ上部へ戻る▲

軽い画像形式にしてさらに転送量の改善をしましょう

少し前までは、.jpgという拡張子のjpeg形式の画像が一番軽量(容量の少ない)画像ということで一般的に使われてきましたが、現在ではさらに容量の軽い.webpという形式の画像があります。

webp形式の画像は、jpeg画像と比べて約25%程度容量が小さくなり、現存するほとんどのブラウザで表示可能となっています。webp形式のブラウザ対応状況はこちら

よく使われているブラウザの1つであるInternet Exprolerでは使用不可となっているものの、このブラウザのサポートが2022年6月15日で終了し、webp形式の使えるEdge他のブラウザへ今後置き換わっていくことから、webp形式へ切り替えていくべき時期ではないでしょうか?

とはいえ、webp形式の画像はパソコン上ではまだまだ使いにくい(きちんと対応するソフトが少ない)ことから、jpeg形式でアップロードしたものを訪問者にはwebp形式で出力するという方法がWordPressのサイトでは有効でしょう。

そこでおすすめなのが、「WebP Express」というプラグイン。WordPress公式サイトで配布されているプラグインで、もちろん無料で使用できます。

  • アップロードした画像からwebp形式の画像を自動生成して出力するようにしてくれる
  • webp形式の画像はメディアとは別場所に保管されるので、混在して見つけにくくなる心配がない
  • 過去の画像も一括でwebp形式の画像を生成してくれる
  • webp形式に対応していないブラウザではjpeg形式の画像を出力してくれる

といった、WordPressサイトでwebp形式の画像を扱うのには必要十分な機能を備えています。

詳しい使い方などは表示可能なブラウザで、軽量なWebP形式の画像を配信してくれるプラグイン「WebP Express」で紹介していますのでぜひ検討してみてください。

webp処理ができることでよく使われているプラグインにEwww…という、画像の圧縮とwebp対応の両方ができるオールインワンタイプのプラグインがあるのですが、個人的には「画像の圧縮(Imsanity)」と「webp変換(WebP Express)」は別々のプラグインで処理したほうがよいと考えています(もちろん私の管理するサイトは別々のプラグインを使っています)。

著:清水 由規, 著:清水 久美子, 著:鈴木 力哉, 著:西岡 由美, 監修:星野 邦敏, 監修:吉田 裕介
¥2,948 (2022/06/29 18:31時点 | Amazon調べ)
著:Mana
¥2,200 (2022/06/29 19:10時点 | Amazon調べ)

作者:

WordPress用テーマ「ha-Basic」「HABONE」の開発、プラグインやテーマの翻訳、WordPressの使い方やカスタマイズ方法などの情報を配信しています。

年齢:40代 趣味/園芸・ペット・卓球