COLUMN

コラム

CATEGORY
  • Google PageSpeed Insights(ページスピードインサイト)を使ってWebサイトの読み込み速度改善!

2022.09.02Web制作

Google PageSpeed Insights(ページスピードインサイト)を使ってWebサイトの読み込み速度改善!

しまこ
しまこ

こんにちは。しまこです。
Google PageSpeed Insights(ページスピードインサイト)ってご存知でしょうか?
SEOのランキング要因の1つにユーザビリティの向上が挙げられおり、
Webサイトの読み込み速度の改善はユーザビリティ向上の大きな要素の1つです。

Webサイトにアクセスした際、サイトを読み込む時間が長くなればなるほど、ユーザーは離脱してしまう傾向にあります。
一般に表示が遅れるごとにコンバージョン率や顧客満足度は大幅に低下、表示に3秒以上かかるページは40%以上のユーザーが離脱すると言われています。

どれだけホームページ内で良質なコンテンツや魅力的なビジュアルを展開しても、
表示スピードが遅くて離脱されてしまうと、新規ユーザー獲得の機会損失に繋がります。
SEOの目的は「検索順位の向上による、検索流入の増加」だけではなく、Webサイト運営者の利益の増大であり、
ページ表示速度の向上は、「検索順位の向上」以外にも多くのフェーズに確実にメリットをもたらす重要な施策です。

PageSpeed Insightsとは

0002

ageSpeed InsightsとはGoogleが無料で提供しているWebサイトの表示速度を測定・評価する分析ツールです。

使い方は簡単で、調べたいWebサイトのURLを入力するだけで、Webページの読み込み速度がスコアで表示されます。
速度の評価だけでなく、改善ポイントも提示されるため、具体的な速度改善に役立てることが可能です。
モバイルとPC両方のデバイスに対応しており、一度の分析でそれぞれの分析結果を確認する事ができます。

スピードを測定する

PageSpeed Insightsのスコアは100点満点で評価されます。
この100点の中で、点数に応じてLow、Medium、Goodに分類ます。
サイトの表示速度の目安にしましょう。
それぞれのスコアの範囲は以下の通りです。

「Low」:0点~49点

改善点が多くある状態です。
全世界のページを対象とした読み込み速度の中で、下位1/3にあたる点数を表しています。

「Medium」:50点~89点

平均的な表示速度ではありますが、まだまだ改善の余地がある状態です。全世界のページを対象とした読み込み速度の中で、中間の1/3にあたる点数を表しています。

「Good」:90点~100点

表示スピードのパフォーマンスに関する改善点はほぼない良好な状態です。全世界のページを対象とした読み込み速度の中で、上位1/3にあたる点数を表しています。

読み込み速度の改善方法

改善できる項目として提示された項目の具体的な改善方法について紹介していきます。
改善できる項目は、全部で34項目存在します。その中でも重要度の高い項目について、ポイントを紹介していきます。

1.画像の最適化

PageSpeed Insightsでよく提案される「改善できる項目」の1つです。
具体的には、「次世代フォーマットでの画像の配信」、「適切なサイズの画像」、「効率的な画像フォーマット」などがこの対象です。
これまで画像ファイルは「jpeg」や「ping」と呼ばれるファイル形式が一般的でしたが、「JPEG2000」や「JPEGXR」、「WebP」といった次世代のファイル形式の方が、画像を圧縮する性能が高く、データ使用量を抑えることができます。

2.ソースコードの最小化

こちらも、画像の最適化と同様にPageSpeed Insightsでよく提案される項目です。
HTMLやCSS、JavaScriptには、余分な改行やスペースなど、使用していないソースコードが意外と多く記述されています。
これらを削除・圧縮することで、表示スピードの向上につなげることができます。

3.ブラウザキャッシュの活用

サーバーでブラウザのキャッシュを有効にした上で、静的なリソースのキャッシュの有効期間を1週間以上、広告やウィジェットなどは1日以上などに設定すると効果的です。

上記の他、「サーバーの応答時間を短縮する」、「CDNの導入」、「Webフォントの削減」等でも速度を改善する事ができます。

PageSpeed Insightsは、速度改善において問題点や改善点を可視化できるため、広く活用されています。
ただし、PageSpeed Insightsは必ず100点を目指すものではないことに注意してください。
Webサイトに必要だから実装している機能もあるでしょう。
それらをすべて削除するのは現実的ではありません。
実際のユーザーの表示速度に問題がないかを確認しながら、使っていないコードを削除したり、最適化の余地がないかを確認したりするのに利用しましょう。
誰でも無料で利用できるので、まずは自社サイトのスコアを確認し、改善が必要な項目があれば、優先順位をつけて取り組みましょう。

採用サイトデザインに特化したまとめサイト | DEZDEZ デザデザ