Web制作

WordPressが重い!画像でかんたんに解決できる3つの方法

wordpress重い画像のアイキャッチ

WordPressでつくったサイトが、重くて困っていませんか?

当サイトでも、表示速度が遅くなってきたので、その解決策として「画像の最適化」を行いました。

その結果、PageSpeed Insights上で、モバイルのスコアが「23」⇨「35」に、パソコンのスコアが「79」⇨「82」に改善されました。とくにモバイルのスコアが12ポイント改善されました。

before:モバイル

モバイルスピード測定結果

after:モバイル(12ポイント改善)

モバイルスピード測定結果

 

before: パソコン

パソコンスピード測定結果

after:パソコン3ポイント改善)

パソコンスピード測定結果

 

今回行ったことは、たった3つです。

  • 画像を縮小してアップロードする
  • 画像を圧縮してアップロードする
  • 画像の遅延して表示させる

それでは、具体的な方法を解説していきます。

画像はすでに最適化しているというかたは、以下の記事を参考にしてみてください。

【初心者向け】WordPressが重いときのおすすめプラグイン5選WordPressが重く、サイト表示速度が遅いと感じている方が、プラグインをつかうことで、かんたんに速度改善できるようになります。主に初心者向けに書いています。...

WordPressの適切な画像サイズは?

そもそも、WordPressでアップロードする画像の、適切なサイズはご存知でしょうか。いろいろな説がありますが、当サイトでは50KB(キロバイト)以下を推奨します。

たとえば、ブログで利用されることが多いフリー画像サイトの素材は、5MB(メガバイト)以上あるものがほとんど。そのままアップロードしてしまうと、処理に無駄な時間がかかかり、サイトを重くする原因となります

以下の手順をふまえれば、画像サイズを50KB以下まで軽くすることができます。

SEOに最適な画像、ファイル形式の選び方については以下の記事でも詳しく解説をしています。

SEOに最適な画像の選び方!ファイル形式はこう選ぶ
SEOに最適な画像の選び方!ファイル形式はこう選ぶSEOに最適な画像を選ぶことでサイトが軽量化され、表示速度が速くなりユーザーの離脱を防げます。画像に合わせたファイル形式を選ぶことで小さいファイルサイズでも美しい画像を表現することが出来ます。...

WordPressの重い画像を縮小する

WordPressで画像をアップロードするときは、必ず事前に縮小させます。ひと手間を加えるだけで、元サイズの1/100まで画像を小さくすることができます。

画像を縮小する方法

画像の縮小は、いわゆるトリミングのことです。たいていのパソコンは、標準搭載されている機能で行うことができます。

今回は、Macの場合でご説明します。
(Windowsをお使いのかたは、こちらをご参照ください。)

リサイズ手順1

まず画像をひらいたら、上記写真の赤丸で囲った ボタンをクリックしてください。

リサイズ手順2つぎに「サイズを調整」ボタン  をクリックします。

リサイズ手順3

元サイズは「幅:6720、高さ:4480、6.8MB」となっています。
このままでは大きすぎるため、幅を小さくしましょう

幅の目安は、サイトのレイアウトよって異なります。
サイトが1カラム(1段組)なら1000、2カラム(2段組)なら800あれば十分です。

画像圧縮の結果

当サイトは2カラムなので、800としました。

画像を縮小した結果

それでは、画像を縮小した結果を見てみましょう。

リサイズ手順4

56KBにまで画像サイズを小さくすることができました。
元サイズが6.8MBなので、1/120まで軽くなっています
これでも十分なのですが、50KB以下まで、さらに軽くしましょう。

WordPressの重い画像を圧縮する

WordPressでは、画像を圧縮してからアップロードすることで、サイト表示速度を上げることができます。サイズにもよりますが、画像を10kb程度にまで軽くできることもあります。

画像を圧縮する方法

WordPressで画像を圧縮する方法は、2種類あります。
ひとつずつ解説します。

①プラグインで圧縮する

EWWW Image Optimizerの画像

プラグインを使えば、かんたんに圧縮することができます。
画像の圧縮は「EWWW Image Optimizer」というプラグインがおすすめです。

すでにアップロード済みの画像をまとめて圧縮してくれ、さらに、これからアップロードする時にも自動で圧縮を行ってくれるスグレモノです。

詳しい使い方は下の記事をご覧ください。

②手動で圧縮する

プラグインだけでも十分なのですが、さらに軽量化するために、画像をアップロードする前にも圧縮をしておきましょう。

手動で圧縮するには、以下のサイトを使います。

 

https://compresspng.com/ja/

画像圧縮サイトJPG

『PNG圧縮』とサイトには表記されていますが、PNG、JPEGどちらにも対応しています
JPEG形式の画像を圧縮するときは、上記写真の赤枠のタブで、切り替えてください。

使い方はかんたんで、圧縮したい画像をドラッグ&ドロップするだけ。
自動的に圧縮が始まるので、終わったらダウンロードすれば終わりです。

画像を圧縮した結果

それでは、画像を圧縮した結果を見てみましょう。

画像圧縮の結果

49KBまで画像サイズを小さくすることができました。

WordPressで画像を遅延して表示させる

画像サイズを小さくする以外にも、画像を読み込ませるタイミングを遅らせることで、サイト表示速度を改善することができます。

画像を遅延表示させる方法

BJ Lazy Loadの画像

BJ Lazy Load」というプラグインを使えば、一度にすべての画像を読み込むのではなく、ページのスクロールに合わせて画像を読み込ませることができます。

使い方は、「BJ Lazy Load」をインストールして有効化するだけでOKです。

非常に効果的な方法ではありますが、WordPressテーマによっては、不具合が起こる可能性もあります。プラグインすべてに共通して言えることですが、インストールする前に、必ずバックアップをとることをオススメします。

【おまけ】不要な画像を削除する

「メディア」に溜まっている不要な画像を削除することも効果的です。記事を書くときに、結局使わなかった画像が出てくると思いますが、そのまま放置しておくと、無駄にサイトを重くしてしまいます。面倒でも、定期的にチェックしましょう。

まとめ

今回の取り組みで、「画像の最適化は、サイト表示速度を改善する」ことがわかりました。

WordPressのサイトで、わかりやすい記事を書こうとすれば、画像は必ず使用することになります。画像はどうしてもサイトを重くしがちなので、普段からきちんと最適化を心がけましょう。

サイト表示速度の改善方法は、他にもまだまだあります。
具体的には以下の記事にまとまっていますので、画像の最適化が済みましたら、別の方法を試してみてください。

【Google Speed Update】サイト表示速度を上げるために必要な施策サイトの表示速度を向上させる方法には多くの方法があります。しかし、全て対応するには膨大な時間と手間がかかります。まずは、この記事でお伝えすることから取り組みを始めてみましょう。...
ABOUT ME
テル(webmarksライター)
テル(webmarksライター)
WEBエンジニア / プランナー。食品メーカーで営業、WEBディレクターを経験。人手不足により、サイト制作や広告運用など、幅広く兼務するうちに、ECサイト運営スキルを一通り身につける。Amazon出店時には、10ヶ月で月商7桁達成。2019年に独立。人にキャリアを考えてもらう「キャリアブレスト」の企画も行っている。
【おすすめ】個人事業主は加入必須の安心サービス!
フリーナンス

フリーナンスは、フリーランス・個人事業主のための「お金と保険のサービス」です。会員登録するだけで、業務遂行中の事故、仕事の結果の事故、受託物の事故などを最高5,000万円まで無料で保証。業務中の万が一の情報漏えい、著作権侵害、納品物の瑕疵、納期遅延に対しても守ってくれるため、個人事業主なら加入必須のサービスです。

評価(星5個中)
即日払い請求書をフリーナンスが買い取り(最高300万円まで)、その代金を即日払い。手数料は請求書額面の3.0%~
あんしん補償事故等の補償(最高5,000万円)、情報の漏洩や著作権侵害などによる事故の補償(最高500万円)
振込専用口座ご希望の口座名義で開設可能、口座維持費も振込手数料も無料

詳細ページ公式ページ

RELATED POST