Google PageSpeed Insights（ページスピードインサイト）によるページスピード改善

Google PageSpeed Insights（ページスピードインサイト）の測定と改善

Google PageSpeed Insights（ページスピードインサイト）には、ページスピードの測定結果と合わせた改善項目と改善方法の提案機能があります。
提案された項目を修正することで、ページスピードの改善やUX（ユーザーエクスペリエンス）向上につながり、Googleの評価も高まり検索順位の上昇要因の一つになります。

ページスピード計測・改善ツールの種類と特徴

Google PageSpeed Insights（ページスピードインサイト）の測定結果

Google PageSpeed Insightsでは、モバイル・PC等の実際のユーザー環境とシミュレーション環境でのページスピードとサイトパフォーマンスが測定できます。

ページスピードとSEO評価

サイトパフォーマンススコアの各指標を元に、改善できる項目と対応後に短縮できる時間（推定）が提示されます。優先すべき改善項目が赤色の三角マーク、改善した方が良い項目はオレンジ色の四角マークで表記されます。

改善できる各項目の右側の下矢印をクリックすると、改善すべきファイルや改善方法の詳細、改善後の予測数値などが表示されます。

Google PageSpeed Insights（ページスピードインサイト）の改善項目

Google PageSpeed InsightsでWebページを測定した際に提示される主な改善項目をご紹介します。

画像最適化の改善項目

画像の読み込み設定の改善項目

HTML・CSS・JavaScriptの改善項目

サーバー設定の改善項目

各項目の提示に対応することによって、ページスピードが改善され、PageSpeed Insightsのスコアも向上します。次項より、各項目に対応した改善方法をご紹介します。

画像最適化（ページスピードインサイトによる改善）

画像ファイルは、テキストファイルに比べるとファイルサイズが大きく、ページスピードへの影響も大きくなります。ページスピードの改善には、画像を適切に設定する画像最適化が有効です。

適切なサイズの画像

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

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

画像の利用点数

画像の最適化ではありませんが、画像の文字やアイコンをテキストに変更し、画像の点数を減らすことによってページスピードを改善できます。

画像の読み込み設定（ページスピードインサイトによる改善）

画像の読み込む順番を入れ替えたり、読み込むタイミングを変更することによって、UX（体感速度）を向上できます。

Largest Contentful Paint（LCP） の画像のプリロード

Google PageSpeed Insightsの診断項目で最大コンテンツ（LCP）を確認し、プリロード（事前読込）の設定を行います。
LCPとは、表示された領域の最大のコンテンツ要素で、画像以外にもテキストブロックが含まれるケースもあります。

オフスクリーン画像の遅延読み込み

画像要素で width と height が明示的に指定されていない

HTML・CSS・JavaScriptの最適化（ページスピードインサイトによる改善）

HTML・CSS・JavaScriptの軽量化、使用していないコードの削除、適切な読み込み設定によって、
全体的な通信量を抑えページスピードの改善につながります。

使用していないCSS・JavaScriptを削除

 Chrome のデベロッパーツールの 「Covergage」で使用していないJavaScriptやCSSを調査し、使用率が低い JS・CSSは不要なコードを削除したり別ファイルに分割します。
ファーストビューのコンテンツで使用されていないCSSの読み込みを遅らせることも、改善につながります。

CSS・JavaScriptの最小化

レンダリングを妨げるリソースの除外

Webブラウザがスクロールごとにコンテンツを読み込む際に、ページの上部でCSS・JavaScriptのダウンロードが始まると、スクロールが一時停止しレンダリングが遅れます。そのため、重要度が低いCSS・JavaScriptを除外します。

重要なCSS・JavaScriptをHTMLのインライン要素に設定

重要なCSS・JavaScriptはインラインで配信し、その他のCSS・JavaScriptは読み込みを遅延する設定にします。

必要なCSS・JavaScriptのみを読み込む設定

特定のページ、特定の状況やデバイスで必要なCSS・JavaScriptを指定し、その他のリソースは読み込まないか、読み込みを遅延する設定にします。

CSS・JavaScriptを非同期処理に設定

サーバーの設定（ページスピードインサイトによる改善）

サーバー側の設定や構成、スペックを変更することでページスピードの改善が可能です。

テキスト圧縮の有効化

Webサーバーに置いてあるhtml・JavaScript・CSSなどのファイルをサーバーでgzip形式に圧縮してから送信することによって、ネットワークでのファイル転送量を減らすことができます。

静的なアセットと効率的なキャッシュポリシーの配信

適切なブラウザキャッシュの設定によって、アセット（画像やCSS、JavaScript など）の読み込み速度を改善できます。
Webサーバ上の「.htaccess」ファイルで、画像・javascript・cssのキャッシュ期限をGoogleが推奨する1週間以上・最大1年間に設定します。2回目以降のアクセスでダウンロードを省略し、ページスピードが改善されます。

最初のサーバー応答時間を短縮

サーバーのスペック、サーバーOSの種類、利用ミドルウェアの種類や設定など、環境や状況によって確認すべき要素が多岐にわたります。現状のパフォーマンスやデータを調査し、影響の大きな要因を特定して修正します。問題の解決後も、サーバーの応答時間を継続的に計測する必要があります。

PHPのバージョンアップ

PHPバージョンを確認し、最新のバージョンにアップデートすることで、パフォーマンス向上が期待できます。PHPのバージョンアップの手順は、ご利用のレンタルサーバーによって異なります。

サーバーのグレードアップ

サーバーのプランを変更し、より高速で高性能なホスティングサービスを利用することで確実な効果が望めます。共用サーバーを利用している場合は、専用サーバーに変更することも改善につながります。
サーバーの性能については、各レンタルサーバーの公式HPなどで表示速度（サイトを表示させる速度）や転送量（受け入れられるアクセス量）などの仕様が確認できます。

CDN（コンテンツデリバリーネットワーク）を導入

ページスピードに関するご依頼やご相談など、 お気軽にお問い合わせください

ページスピードスピードインサイトによる改善のFAQ