そのセンス、俺にくれ!

30代2児のパパ、おこずかい月3万で楽しむアレコレ

Page Speed Insightsのサイトスコアが劇的改善!サイトの画像を最適化してみた

Google先生が教えてくれたサイトスコアの改善案のひとつである、画像の最適化作業をやってみました。

 

過去記事はこちら↓

pogu-note.hatenablog.com

pogu-note.hatenablog.com

 

 

画像の最適化

画像の最適化とは 

ウェブページ上のダウンロード容量の大半を画像が占めることはよくあり、表示スペースのかなりの部分を画像が占有することも少なくありません。そのため、画像を最適化することでウェブサイトの容量の大幅な削減とパフォーマンスの改善につながることがよくあります。

画像の最適化  |  Web  |  Google Developersより

 

というわけで、要は画像ファイルを軽くしようって作業です。

 

画像ファイルの容量が大きいと、サイト全体の読み込みに時間がかかり、結果見てる人に不親切・・・ということになりますね。

 

それがサイトスコアが低い原因でもある・・ということなようです。

(当ブログだと必ず1記事1枚以上は画像を貼ってるんでなおさら)

 

 

最適化をしてみる

 

今回画像のデータを圧縮するのにしようしたのはこちら↓

tinypng.com

 

圧縮したい画像をドラッグ&ドロップでok!

f:id:hatakebu:20170522113405p:plain

 上の画像を見てもらえればわかるとおり、もともと158.4KBだったものが83.2KB(-47%)まで削減できました。

 

これをドンドン進めていきます。

 

サイトスコアを再度測る

 

https://developers.google.com/speed/pagespeed/insights/?hl=ja

 

画像の最適化だけでどれだけスコアが改善できたか調べて見ます。

 

URLをいれて・・・

f:id:hatakebu:20170522113521p:plain

まずはモバイル版。

 

これが、

f:id:hatakebu:20170518120246p:plain

f:id:hatakebu:20170520221811p:plain

 

続いてPC版。

f:id:hatakebu:20170518120321p:plain

f:id:hatakebu:20170520221722p:plain

 

よし!ε-(´∀`; )

 

ということで、画像の枚数が多いとそれだけ手間はかかりますが、効果は抜群なので未作業の方は是非やってみてください!