★★★ たった "1日" でできるWordPressブログの作り方講座 ★★★ はじめてみる

画像読み込みを高速化するためにWordPressでできる3つの対策

WordPressで画像読み込みをスピードアップさせているイメージ画像

画像はサイズ(容量)がでかいので表示速度を低下させる原因になりがち

テキストと違って平気で数十KB~数百KBくらいの容量になるので読み込み速度を落とさないためには画像を最適化しておく必要があるのです。

そこでWordPressで簡単にできる画像読み込み最適化の対策をまとめました。

画像最適化のためにできる3つの対策

画像のサイズと読み込み時間を減らすためにできる対策は次の3つ

  • アップロード時にデータ圧縮
  • アップロード時に最大幅にリサイズ
  • ページ表示時に遅延読み込み

もしこれを全部自力でやろうとすると大変ですが、WordPressならプラグインを使えば全て自動&簡単に行うことができます。

ではこの3つのやり方について順番に見ていきましょう。

アップロード時にデータ圧縮

画像の最適化として一番最初にしておきたいのがこのデータ圧縮です。この対策をしておけば無駄な部分を減らしてデータサイズを小さくすることができます。

WordPressの場合は画像圧縮系のプラグインで検索すれば多数出てきます。

例えば代表的なプラグインは次の3つ

  • Compress JPEG & PNG images
  • EWWW Image Optimizer
  • WP Smush

どのプラグインもアップロード時に自動的に圧縮する機能が付いています。

でもこれだけ選択肢があると逆にどれを使えばいいか分からないなってしまいますよね。

そこで次の記事で各プラグインについて圧縮性能を比較しました。

WordPressには画像圧縮系のプラグインがいくつかありますが、画像の圧縮率や使いやすさはプラグインごとでだいぶ違います。そこでここで「EWWW Image Optimizer」、「Compress JPEG & PNG images(TinyPng)」、「Smush Image Compression and Optimization」の3つの画像圧縮系プラグインを圧縮率や使いやすさの点から比較します。

もしどれを使えば悩んでいるならこの記事を見てもらえば選ぶときの参考になると思います。

ちなみに圧縮率が最も高いのはあの画像圧縮サービス TinyPNG の開発元が作った Compress JPEG & PNG images です。

詳しい使い方については次の記事でまとめたのでそちらも是非ご覧ください。

WordPressの画像圧縮系プラグインの中で一番おすすめなのが「Compress JPEG & PNG」です。これはTinyPngの開発元が作ったプラグインで他と比べても圧縮率がかなり優秀です。ここではその使い方について紹介します。

ただし無料会員だと制限があるので不自由なく使いたいなら有料会員になる必要があります。

アップロード時にリサイズ

普段大きな画像をアップロードする時、そのままのサイズでアップしていませんか?

大抵の画像はそれでもいいですが、記事の最大幅を超えるような画像の場合はアップロード前にリサイズするのをおすすめします。

なぜ最大幅にリサイズした方がいいかというと次のメリットがあるから

  • データサイズが減る
    ⇒ 記事幅に収めることでデータを無駄なく小さくできる
  • 画像のぼやけがなくなる
    ⇒ 最大幅を超える画像だと縮小されてぼやけるが、その対策にも効果あり

データサイズが減るのはもちろんのこと、記事幅に収まらない画像がぼやけてしまうのを防ぐ効果まであります。

なのでアップロード前に「この画像は記事幅よりも幅が大きすぎるな...」と感じたらその幅に合わせてリサイズした方が良いでしょう。

でも全部手動でやるのは大変なのでリサイズについても便利なプラグインがあります。

それが次の記事で紹介した Resize Image After Upload というプラグイン

WordPressで記事幅より大きい画像をアップロード時に記事幅に自動リサイズさせる方法をまとめました。大きすぎる画像は縮小されて潰れてしまうので綺麗に画像を表示したい、という方は是非お試しを

この記事でも書いたように画像アップロード時に指定しておいた最大幅まで自動的にリサイズしてくれる優れものです。

普段から大きめの画像を扱うことが多いなら、このプラグインが重宝すると重いので是非活用してみてください。

ページ表示時に遅延読み込み

最後の対策は画像の遅延読み込みです。

これはページの表示時に画像を読み込まずに、画像の表示が必要になった時にその場で読み込むという手法になります。

この遅延読み込みを使うことのメリットは次の2つ

  • 表示が高速になる
    ⇒ サイズの大きい画像を全て読み込む必要がないため
  • データの転送量を減らせる
    ⇒ 記事途中で離脱されても無駄なデータ通信が発生しない

すぐに表示しない画像は後読みなので表示速度を高速化できる効果があります。

WordPressの場合は「BJ Lazy Load」プラグインを使えばほとんど手間なく画像の遅延読み込みが簡単にできます。その導入手順は次の通り

まずWordPressメニューから「プラグイン」ー>「新規追加」を開きます。

新規追加画面が開いたらプラグインの検索欄に「bj lazy load」と入力して検索

しばらくすると検索結果に次のようなプラグインが表示されるので「今すぐインストール」ボタンを押してインストールしましょう。

ちなみにこのプラグインは以下のページから直接ダウロードも可能
https://ja.wordpress.org/plugins/bj-lazy-load/

インストールが終わったら「今すぐインストール」ボタンが次の画像のように「有効化」ボタンに変わるのでそれを押して有効化しましょう。

以上で画像の遅延読み込みが有効になりました。

あとは何の設定もする必要がなくページが読み込まれると自動的に画像は遅延読み込みされるようになります。

ちなみにこのプラグインで遅延読み込みされるのは次のような画像

  • 記事内にある画像
  • ウィジェット内の画像
  • 投稿サムネイル画像
  • 投稿者のGravatar画像
  • iframe内にある画像

ほとんどすべての場所にある画像を遅延読み込みしてくれるのでページ表示速度の改善に役立つこと間違いなしです。

さらにWordPressを高速化するには

以上がWordPressでできる画像の最適化対策です。全ての対策をしておけば大分ページ表示速度の改善につながります。

しかしWordPressを高速化するには画像の最適化だけでは不十分です。これに加えて最低限しておきたいのが次のWordPress高速化設定

この5つはやり方も難しくなく、誰でもできることばかりなので簡単です。

また自分であれこれ設定したくない、という場合はWordPress高速化に適したレンタルサーバーに乗り換えることでも根本的な表示速度改善ができます。

詳しいやり方については次記事でまとめたのでそちらをどうぞ

一言でWordPress高速化と言っても様々な方法があって何をすればいいか分からない方も多いと思います。そこでここではWordPress高速化のために"最低限"しておいた方がいい6つのテクニックについて紹介していきます。

画像最適化に加えて上の記事でまとめたことも実践すれば表示速度が見違えるほど改善します。是非お試しを!

まとめ

ここまでで紹介した画像読み込み最適化対策をもう一度まとめると次の通り

  • アップロード時にデータ圧縮
  • アップロード時に最大幅にリサイズ
  • ページ表示時に遅延読み込み

この3つをやっておくだけでも表示速度の改善につながります。

以上ここでは画像の読み込みを最適化するための3つの対策について紹介しました。

これに加えてWordPressの高速化設定も行っていけば表示速度はさらに改善し、結果として読者が快適に見ることができるブログを作るのにつながるはずです。

もちろん記事の質も大事ですが、表示速度で離脱されることがないように読者がストレスなく見れる快適なブログを目指していきましょう。

The following two tabs change content below.

フク郎

昔はプログラミングに熱中していたが、ブログとWordPressに興味を持ち始め今はサイト・ブログ作りが生きがい。自分の「好き」をブログに変えたい、情報発信したい人に役立つWordPress術・サイト構築術を発信中。一日一歩楽しんでブログ構築できるように読みやすい&楽しい記事作りを心がけています。Twitterアカウントはこちら ⇒ フク郎@Fukuro-Press