googleに示された改善点を修正すると点数もアップするのかやってみた
前回googleの無料サービス「PageSpeed Insights」を使ってサイトのスピードを計測したわけですが、100点満点中85点以上が優良サイトという事なのですが残念ながら当サイトは「PC表示72点」「モバイル表示78点」というふがいない結果になってしまいました。
ただ、このサイトはパフォーマンスを測るだけではなく、パフォーマンスを上げるための修正点を提示してくれるのがありがたい所。
そこで実際に提示された修正点を直すと表示パフォーマンスの点数がが実際にあがるのか試してみました。
画像の最適化
まずは簡単そうなPC部分の画像の修正をやっていきます。
画像の改善方法は全て画像を圧縮してくださいというものでした。サイズの大きい画像を使うとあまりよくないみたいですね。
ともかくまずは画像のサイズを圧縮して修正することにします。
画像の赤枠の部分がリンクになっているので、その部分をクリックして修正方法を確認。
このように画像圧縮のためのお勧めのツールまで教えてくれます。
探す手間が省けてありがたい・・・とおもったのですが、リンク先が英語のサイトでイマイチ使い方が解らなかったのでやっぱり自分で探すことにします。
JPEGmini
今回は手直しする画像の数が少ないので、わざわざインストールして使うツールはめんどくさいのでオンライン上で使えるJPGEminiを使ってみる事にします。
JPEGminiとは
「JPEGmini」は、JPEG画像を圧縮し、データ量を削減してくれるオンラインサービスだ。手持ちのJPEG画像をアップロードするだけで、最大で80％、わずか5分の1の容量にまでデータ量を減らしてくれるので、バナー画像の制作などに効果を発揮する。
[blogcard url=”https://www.jpegmini.com/”]
まずは左下にある「UPLOAD PHOTO」をクリック。
この赤枠の部分に圧縮したい画像をドラッグ＆ドロップすると画像が圧縮されます。
201KBの画像が164KBに圧縮されました。
なんだか微妙な圧縮率ですが、ともかく圧縮した画像をアップロードしてみる事にします。
画像を上書きしてアップロードする場合は元画像をちゃんと保存しておいてくださいね。しまったと思っても上書きした後は元に戻りませんからその点だけは気を付けて作業してください。
アップロードの結果
まだまだ圧縮があまいので改善しろとのことですが、たったの37KB削っただけでパフォーマンスが72%⇒74%になりました。
これは指定通りにすべて圧縮すると結構改善されそうですね。
画像改善の結果
改善の結果100点満点集83点まで回復しましたが、目標の85点には届かず・・・。
画像以外の改善となると、javaScriptやCSSの改善なんですが使ってるプラグインなんかが含まれていたりするのでどうしたものかと検討中です。
何か別の方法で改善できる道を探してみます。
画像改善のまとめ
今回の画像の圧縮で思ったのは、無駄に表示以上のサイズの画像は使わない。という事です。
実は今回改善した画像はたった一つ。
サイトトップにあるこの画像だけでした。
このたった一枚の画像のためにサイトのパフォーマンスが著しく落ち込んでいたみたいです。
何故そうなったか理由を言うと単純で「無駄に大きい画像を使っていた事」です。
ここの実際の表示サイズは「500×294」なのですが、そこに使用してた画像のサイズは「1600×1064」。本来の表示サイズよりも約3倍。なのでまずは画像サイズを「500×294」に修正すると修正前201KBから修正後46KBまで縮小することができ、サイトのパフォーマンスも72点から83点まで上げることができました。
しかし大きいサイズを使っているのは判っていたのですが、最近のネット回線のスピードでは数十KB位は特に問題ないと思っていましたがやっぱりダメなんですね。
やはりサイトは少しでも軽くすることを意識しながら今後サイト制作をしていきます。
