画像が大きすぎて表示速度が遅い!ブログのページ速度を高速化!

表示速度に影響する画像圧縮

画像が大きすぎて、ページ表示速度遅くなっていませんか?

2018年7月より、Googleはページ読み込み速度をモバイル検索のランキング要因として利用するようになりました。

ページ読み込み速度をモバイル検索のランキング要因とすること

ざっくりいうと、 サイトの表示速度がSEOにも影響してくるということです。

サイトの表示速度が遅いと、検索順位が下がってしまう可能性があります。

表示速度には画像ファイルの大きさが影響します。今回は、画像ファイルの圧縮について説明させていただきます!

スポンサーリンク

表示速度を調べる「PageSpeed Insights(ページスピードインサイト)」

ページにアクセスした時の表示速度をはかるツールがあります。

Google公式の無料表示速度計測ツール ページスピードインサイト

Googleが公式提供している表示速度を計測する無料ツールの「PageSpeed Insights」

 

 

Googleなので安心して使えますね。

URLを入力してクリックするだけで、サイトのスピードをはかってくれます。

パソコンの表示速度と、スマホの表示速度の2種類を同時に計測できます。

実際に自分のブログの表示速度をはかってみた

実際に、「PageSpeed Insights」をつかって、ぼくのブログの表示速度を分析してみました。

ページ読み込み速度が遅い(パソコン版)
パソコンの表示速度
ページ読み込み速度が遅い(スマホ版)
スマホの表示速度

パソコンで52、モバイルで38という点数。

これは遅い(涙)

原因は、いろいろ考えられるのですが、ぼくの場合遅くなっている一番の原因は画像でした。

先ほどの表示速度の結果の画面を下にスクロールしていくと、「改善できる項目」とでます。

ページ読み込み速度の改善提案

ぼくの場合は、「適切なサイズの画像」という項目があがっており、この行の右側の記号「∨」をクリックすると、

ページ読み込み速度が遅い原因は、大きすぎる画像サイズ
容量が大きい画像がわかる

原因となる重い(容量が大きい)画像がどれかわかる。

上図は改善後なのですが、ここにファイルサイズが2MB(2000K)以上のが像が2枚あった。

画像の容量が大きいものは「画像圧縮」という作業をすると、小さくできます。

その2枚の写真を画像圧縮した結果がこれ↓

改善したブログ表示速度(パソコン版)
画像圧縮後のパソコンの表示速度
改善してはやくなったブログ表示速度(携帯・スマホ版)
画像圧縮後のスマホの表示速度

パソコンで58→73、モバイルで38→48という点数。(まだまだスピード改善が必要です。)

画像を2枚小さくしただけで、点数が改善しました。

つまり、画像を圧縮しない写真画像が1枚でもあるとかなりスピードが遅くなってしまいます。

ブログをはじめた最初の頃は、画像圧縮を知らなかったので、初期の記事は全部ダメです。

あ〜、つらい……。

スポンサーリンク

【jpgとpng対応】無料画像圧縮ツール「TinyPNG・タイニーピング」

画像圧縮の方法についてです。

いろんな圧縮の方法があるのですが、おすすめするのが無料で使えるツールTinyPNG です。

TinyPNGタイニーピングの画像圧縮

TinyPNGは、登録不要でサイトにアクセスして、画像をドラッグするだけでOK!!

すぐに圧縮されたファイルが作られ、ダウンロードできます。

名前がTinyPNGですが、PNGだけでなくjPEGも圧縮できます。

では、実際にやってみます。

画像のおもさを計測するサンプル画像

この画像は、画像表示サイズは、784 x 558 ピクセルファイルサイズは、1MB(=1000KB)です。

TinyPNGを使って、画像圧縮すると、下図のようになります。

画像圧縮後の画像

PNG後の画像圧縮した画像の画像表示サイズは、圧縮前と同じ784 x 558 ピクセルです。ファイルサイズは、279KBです!

画像表示サイズは同じで、ファイルサイズが1MB(1000KB)→279KBと、72.1%容量カット!

画像圧縮って、「表示サイズが小さくなる」って心配する人もいるかもしれませんが、表示サイズは変わらず、ファイルサイズだけが小さくなります

画像圧縮の比較画像
画像圧縮による変化

写真を見比べてみるとわかりますが、見た目では変化がわからないくらいです。

【まとめ】画像サイズが大きい・容量が重すぎて、サイト表示スピードが遅くなる

サイトに1枚でもデカイ画像があれば、サイトの表示速度が遅くなってしまいます。

画像は、カンタンに小さくできます。

サイトの表示速度に関しては、ワードプレスのテーマによってもかなり変わってきます。

今回は、たった一枚画像が大きくても、それによってサイトの表示速度にかなり影響するということがわかりました。

ぼく
写真をちょっとの作業で圧縮するだけで、表示速度がかわってきます!SEOに影響してくるのでやっちゃいましょう!

 

あわせて読みたい

ブログ本のオススメまとめ記事

ーーーーーーーーーーーーーー

初心者ブロガーにおすすめの1冊!

 
スポンサーリンク