Google PageSpeed Insightsでサイトのページ表示速度の改善方法

はじめに

独学で未経験からWebサイトをリーリースしました。
実際に自身のサイトはどうなのか？と疑問に思ったのでGoogle PageSpeed Insightsでチェック、改善してみようと思います。

Google PageSpeed Insightsとは

Google PageSpeed Insightsを使うとモバイル端末やパソコン向けのページの実際のパフォーマンスに関するレポートと、そうしたページの改善方法を確認できます。

Webサイトの表示速度はSEOや検索順位にも影響があるとも言われています。

＊＊主な機能＊＊
・速度スコアのチェック
・最適化スコア
・最適化についての提案

実際に使ってみる

URLを上の欄に入力

スコアと改善項目が表示されました!

主な改善項目

1.適切なサイズの画像

適切なサイズの画像を配信して、モバイルデータ量を節約し読み込み時間を短縮してください。

2.次世代フォーマットのでの画像配信

JPEG 2000、JPEG XR、WebP などの画像フォーマットは、PNG や JPEG より圧縮性能が高く、ダウンロード時間やデータ使用量を抑えることができます。

3.効率的な画像フォーマット

画像を最適化すると、読み込み時間を短縮しモバイルデータ量を抑えることができます。

4.レンタリングで妨げるリソースの除外

ページの First Paint をリソースがブロックしています。重要な JavaScript や CSS はインラインで配信し、それ以外の JavaScript やスタイルはすべて遅らせることをご検討ください。

5.使用していないCSSを削除してください

スタイルシートから古いルールを削除し、スクロールせずに見える範囲のコンテンツに使用されていない CSS の読み込みを遅延させると、データ通信量を減らすことができます。

改善策

画像のサイズ変更

適切なサイズの画像を提供するための主な戦略は、「レスポンシブ画像」と呼ばれます。
今回はgulpで画像圧縮とImageMagickでサイズ変更をして画像のレスポンシブ対応をしてみたいと思います。

＊＊結果＊＊

画像だけで14％改善できました！

おわりに

サイトの公開前に画像のサイズや圧縮をすることの大切さが分かりました！
不要なCSS、JSを削除する項目もありましたが、そのあたりも考慮しながらサイト構築をしていきたいと思います。