こんにちは！


株式会社エイト代表取締役の大野(@eight_ceo)です。


「Webサイトをつくったけれど、うまくできているのかな」「なんか表示するまでに時間がかかっている気がする」そんな不安を抱えている人もいるでしょう。


見られるサイトである条件の一つに、「サイト表示速度」があります。


サイト表示速度はWebサイトを運営する上でとても重要な要素です。


今回は、サイト表示速度を改善する上で役立つ、「PageSpeedInsight」について解説します。


------------------------------------------------

Web集客なら弊社にお任せください！

自社運営するメディアと同じ熱量で

お客様の結果にコミットいたします。


【会社ホームページ】

https://eight-media.co.jp/


【お問い合わせフォーム】

https://eight-media.co.jp/about/


【メールアドレス】

info@eight-media.co.jp


LINEの友達追加《お問い合わせはこちら》

https://lin.ee/FFq4XmZ

------------------------------------------------


1.PageSpeedInsightとは？

PageSpeedInsightは、Googleが無料で提供している、Webサイトの表示速度を測定・評価してくれるツールです。モバイルサイトも、デスクトップ表示のサイトも両方の分析ができます。


2.サイトの表示速度が影響する３つのこと

そもそもなぜサイトの表示速度が重要なのでしょう。


結論から言うと、表示速度が遅さが、ユーザーの離脱に影響してしまうからです。


サイトの応答が遅いと、「5秒未満」でも36.4％が離脱しているというデータがあります。


この表示速度が特に影響する３つのことをお伝えします。


2-1.離脱率・直帰率

まずは離脱率・直帰率に大きな影響が出ます。


上にも書いたように、サイトの表示が遅いと、それだけでユーザーが離脱していく可能性が高いです。


離脱率・直帰率が高いということは、PV数やコンバージョン数にも悪影響を及ぼします。


ユーザーに快適に閲覧してもらうためにも、表示速度の改善は優先度が高いのです。


2-2.クローラー

クローラーとは、検索の順位を決定するのに必要な要素を、サイトを回って集めてくるボットのこと。


サイトの表示速度は、検索サイト内の順位決定にも影響を及ぼし、表示速度が遅いサイトは、インデックスに表示されにくくなる可能性があります。


そのため、自分のサイトが検索結果に表示されなくなることも考えられます。


2-3.SEO

SEOにも表示速度は影響します。2018年に、表示速度をランキングに関わる要素としてGoogleは取り入れています。


このことは、Googleが表示速度をユーザーの快適性と結びつけていることの表れと言えるでしょう。


つまり、表示速度が遅い＝ユーザーにとって使いにくいサイトと判断され、SEOに影響を与えてしまうということです。


3.PageSpeedInsightの特徴

PageSpeedInsightの特徴は、モバイルサイトやデスクトップ表示のサイトが表示されるまでの時間を表示したり、パフォーマンスを100点満点で数値化したりするところにあります。


表示時間は、リクエストがあってからメインコンテンツが表示されるまでの時間や、読み込みの応答性など、全部で6つの項目を評価してくれます。


4.PageSpeedInsightの使用方法

4-1.URLを入力

表示速度改善に大いに役立つPageSpeedInsightですが、使い方は非常に簡単です。


表示速度を測定したいページのURLをコピーして、入力欄に貼り付け。分析のボタンをクリックするだけです。


特徴で書いたような数字が結果として表示されます。


モバイルで表示したときのスコアと、デスクトップ表示したときのスコアの切り替えもできます。


4-2.スコアの確認

・スコアの見方

スコアは100点満点で表示されます。その点数を3段階に分類して、表示速度の快適性をわかりやすく評価してくれます。３段階の内容は以下の通りです。


  • 赤色（0～49点）：赤色で表示されます。最適化が不十分で、改善するべき点が多く残っています。
  • 黄色（50～89点）：最適化までは改善する余地があります。
  • 緑色（90点～）：最適化が十分にされており、改善するところがほとんどありません。


・スコアの目安

スコアはすべて80点以上を目指す必要はありません。


サイトは海外で測定されるため、日本ドメインのサイトはスコアが低くなりがち。


デスクトップ表示なら50点以上、モバイルサイトなら40点以上なら、ユーザーが快適に閲覧できる状態と考えてよいでしょう。


・スコアの変動

スコアは、インターネットの速度やリソースの競合など様々な原因で変動する可能性があります。


時間帯によって変わることもあるので、正確な結果がほしい場合は、同じURLで３回ほど測定するようにしましょう。


最も良かった結果から、改善内容を考えていくといいです。


5.PageSpeedInsightで確認できる５項目

5-1.実際のユーザーの環境で評価する

ユーザーの環境から実際に収集したデータのこと。


このデータをもとにして、Googleは表示速度の良し悪しを判定しています。


ユーザーが、1番目に目にするコンテンツが表示されるまでの時間を示した「First Contentful Paint (FCP)」を改善すると、直帰率の改善が期待できます。


5-2.パフォーマンスの問題を診断する

こちらは、特定の環境のもとで測定されたデータから評価されたスコアを表示します。


各項目を改善することで短縮される時間がでてくるので、改善の優先順位をつけるのにも役立つでしょう。


Googleが判定した改善すべき項目はオレンジで表示され、その中でも優先した方がよい項目は赤で示されています。


5-3.改善できる項目

ページの表示速度を向上させるための改善案が書かれています。


またどのくらい速度が改善されるかも書かれているので、時短効果の大きな項目から手をつけていくとよいでしょう。


5-4.診断

診断結果と改善に関する詳細情報が確認できます。


「パフォーマンスの問題を診断する」の項目と同じように色分けされているので、優先順位をつけるのに役立つでしょう。


まずは赤色の▲がついた項目を改善するべきです。


5-5.合格した監査

評価した内容のうち、改善する必要がないと診断された項目を表示しています。


6.提案される改善策

6-1.リンク先でリダイレクトを使用しない

リンク先にリダイレクトが複数あると、ページの表示速度に悪影響を及ぼします。


パフォーマンス改善のためには、できるだけリダイレクトの使用を減らすべきです。


6-2.表示可能なコンテンツの優先順位を決定する

最初に見える範囲を表示するのに、必要なデータ容量が大きすぎる場合に表示されます。


スクロールせずに見える範囲にある、コンテンツの表示に必要なデータサイズを抑えましょう。


例えば、JavaScriptや画像、HTMLマークアップです。


6-3.HTML/CSS/JavaScriptのサイズ圧縮

HTML/CSS/JavaScriptには、改行や余分なスペースなど、不要なデータが思いのほか存在していて、これらの圧縮が提案されることもあります。


プログラミング言語のコード量も影響してくるので、簡略化できないか考えるのも案の一つです。


圧縮をしたい場合、PageSpeedInsightから最適化されたリソースをダウンロードすることもできます。


6-4.レンダリングを妨げるJavaScriptの削除

ページをスクロールせずに見える範囲に、レンダリングの妨げとなるJavaScriptへの参照が含まれている場合に提案されます。


改善したい場合、JavaScriptの中でも、実行前に取得する必要のある外部スクリプトの使用を避ける、またJavaScriptの外部スクリプトが小さい場合、HTMLドキュメントに直接インラインかすることで、遅延を回避できます。


6-5.画像の最適化

サイトで使われている画像サイズが大きすぎる場合に提案される項目です。


大きなサイズの画像や高画質な画像は、データサイズが大きくなり、表示速度を悪化させます。


PageSpeedInsightでは、最適化された画像リソースをダウンロードできるので、改善に役立ててください。


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

ファイルのキャッシュが許可されていない、キャッシュの有効期間が短いように設定されていると提案されます。


解決方法としては、キャッシュ期間を少なくとも１週間、静的アセットや更新頻度の低いアセットについては、最大１年間有効にしておくことが挙げられます。


6-7.サーバの応答時間の短縮

サーバーの応答時間が200msを超えると提案されます。


サーバーが遅くなる原因としては、リソースによるCPUの消費、メモリ不足、速度の遅いアプリケーションロジックなどが考えられます。


原因となる事項は多岐にわたるため、計測・改善に見識のある担当者を割り当てるとよいでしょう。


6-8.圧縮を有効にする

圧縮可能なリソースが、圧縮されずに配信されている場合に提案されます。


使用しているサーバーを一覧から選択して、「gzip」の項目が推奨設定になっているか確認してください。


もしくは、使用しているWebサーバーのドキュメントで、圧縮を有効にします。Webサーバーであれば、


  • Apache：mod_defalteを使用する
  • Nginx：ngx_http_gzip_moduleを使用する
  • IIS：HTTP圧縮を設定する


ことで圧縮を有効にすることができます。


7.まとめ

ユーザーに離脱されてしまうと、どんなにいい内容が書かれていても意味がありません。


ユーザーの離脱率や直帰率を抑え、検索順位を上位にするためにも、PageSpeedInsightの活用をおすすめします。


使用方法は簡単で、しかも無料で使えるので、まずは１サイトだけでも測定してみてはいかがでしょうか。


改善が必要な場合は、提案される内容の把握が大切です。


また提案される内容が多い場合でも、慌てずに優先順位をつけて対策するようにしましょう。


ぜひ今回の記事を参考にして、ユーザーに優しいサイト作りを目指してください。


------------------------------------------------

Web集客なら弊社にお任せください！

自社運営するメディアと同じ熱量で

お客様の結果にコミットいたします。


【会社ホームページ】

https://eight-media.co.jp/


【お問い合わせフォーム】

https://eight-media.co.jp/about/


【メールアドレス】

info@eight-media.co.jp


LINEの友達追加《お問い合わせはこちら》

https://lin.ee/FFq4XmZ

------------------------------------------------