こんばんは、管理人のwaraharaです。

本日は本業が暇なので、先週サボってしまった分2回目の記事投稿となります。

以前からサイトの表示速度の改善を考えていましたが、本日時間があったのでできる限りで改善してみました。

多くの方はすでに実施済みかもしれませんが、参考になるかもしれませんので記事にしておきます。

サイトの表示速度の測定に使用したサイトなど

サイト表示速度の計測に使用したのは主に3つ

PageSpeed Insights

PageSpeed InsightsはGoogleが提供しているサイトの表示速度を図るためのツールです。

PageSpeed Insightsを使うことで、サイト表示速度を改善するために必要な項目を詳しく知ることができます。

PageSpeed Insights

Test My Site

Test My SiteもGoogleが提供しているサイトの表示速度を図るためのツールですが、メインはモバイルでの表示速度の計測をしてくれるツールです。

モバイルでの表示速度がメインですので、PageSpeed Insightsとの併用が必要です。

Test My Site

Lighthouse

LighthouseもGoogleが提供しているツールの一つですが、Lighthouseはサイトの品質向上を目的としたツールで、Performance・Accessibility・Best Practices・SEOの4項目で評価してくれます。

現在は、PageSpeed Insightsの分析エンジンとしてLighthouseが使用されています。

Lighthouse

画像の圧縮に利用したのは主に2つ

TinyPNG

TinyPNGは画像の圧縮をしてくれるサービスで、WordPressを利用している方であればプラグインとして利用することもできます。

TinyPNGの特徴は何と言っても無料で使えて画像の品質を落とさずに圧縮できることで、有名なプラグインであるEWWW Image Optimizerよりも個人的には使う価値があると感じました。

というのも、EWWW Image Optimizerを使用して画像を圧縮してみましたが、ほとんど圧縮されておらず、スコアが全く改善されなかったので、TinyPNGをしようすることになりました。

初めはプラグインがあることも知らずに、TinyPNGのサイトで一つ一つ画像の圧縮を行なっていましたので、皆さんはTinyPNGをプラグインで使用することをお勧めします。

TinyPNGの注意点は月に500枚までしか無料で圧縮することができず、それ以降は課金式になっているので、超えることはないと思いますが注意が必要です。

TinyPNG

ImageOptim

ImageOptimも画像を圧縮してくれるツールです。

特徴は無料であることと、圧縮率が他を圧倒することです。

実際に同じ画像をTinyPNGとImageOptimで圧縮して比較してみたところ、4MBの画像がTinyPNGでは1.6MBであったのに対して、ImageOptimでは1.2MBまで圧縮することができました。

わずかな差かもしれませんが、少しでも画像を圧縮できた方がサイトはより早く表示される可能性が上がりますので、個人的にはこれからはImageOptimを使用していこうと思います。

ImageOptim

当ブログの現在の表示スコア

PageSpeed Insights

パソコンのスコア。スコアが50以上上がりました。
モバイルのスコア。こちらは今後も改善が必要ですね。

Test My Site

以前は真っ赤だったものが画像を圧縮するだけでこの変わりよう
同じ業種内の比較までしてくれます。

Lighthouse

このように各4項目についてのスコアを提示してくれます。

画像圧縮ツール比較

TinyPNGで圧縮した画像

こちらがTinyPNGで圧縮した画像。少し綺麗に見えなくもない。

ImageOptimで圧縮した画像

こちらがImageOptimで圧縮した画像。少し暗く見える…かな?

正直違いがほとんどわかりません。

見た目がほとんど違うのであれば、無料で制限なく使用できてより圧縮率の高いImageOptimを管理人を使用します。

表示速度を上げたい方はとりあえず画像を圧縮するだけで明らかにスコアが変わりますので、是非検討してみてください。