Above

ページスピードってSEOの順位に影響するの?

さちこ先生、質問です。ページの読み込み速度の話を最近よく聞く気がするんですが、ページスピードってSEOの順位にも関係するんでしょうか?

マイマイSEO担当者 新人 マイマイ

うん、2018年7月から導入され始めたSpeed Update後は、スマホページの読み込みがあまりに遅いページの場合モバイルでの順位に影響するようになっているわ。

さちこ先生SEO 管理ツール さちこ先生

スピードアップデート…?

マイマイSEO担当者 新人 マイマイ

えーそうだったんですね!でも、スマホでページの表示が遅いとそのページを閉じちゃうことが多いかも。そういうページが上位に上がってこないのは当然かもしれないですね…

さちこ先生、もしかして…逆に考えるとページの読み込み速度を上げれば上げるほど、上位になりやすくなるっていうことですか?

マイマイSEO担当者 新人 マイマイ

勘違いしてしまいがちだけど、そうではないの!Googleの検索エヴァンジェリストの金谷さんもローンチ直後にツイートされていたけれど、Speed Updateはあくまで“あまりにも遅い場合に順位が下がる”というものよ。
あとは、サイト単位ではなくページ単位というところにも気をつけて。サイト全体に対する評価ではなく、そのページ単体のモバイル順位に影響する可能性があるということ。

さちこ先生SEO 管理ツール さちこ先生

なんだぁ、残念です…

マイマイSEO担当者 新人 マイマイ

マイマイ、順位を気にするのもいいけれど、ページスピードの改善をした方がいいのは“SEOの順位に影響するから”という理由だけではないことを覚えておいて。
ユーザーにとっていいサイトにするためにも、ページスピードは重要よ。

さちこ先生SEO 管理ツール さちこ先生

確かに、そうですね…
まずは私のサイトのページスピードがどのくらいなのか確認したいです。専用のツールとかってあるんでしょうか!?

マイマイSEO担当者 新人 マイマイ

ページスピード確認用のツール

主に確認しておきたいのはこの5つのツール。それぞれ使い方を紹介するわね。

さちこ先生SEO 管理ツール さちこ先生

ページスピード確認に使えるツール

  1. PageSpeed Insights
  2. Lighthouse
  3. Googleアナリティクス
  4. Test My Site
  5. GTmetrix

PageSpeed Insights

PageSpeed Insightsとは、Googleが提供するWebページの読み込み速度解析ツールです。調べたいサイトページのURLを入力し、「分析」ボタンを押すとモバイル・パソコンそれぞれのスコア及び改善項目を確認できます。

PageSpeed Insightsの確認画面

PageSpeed Insightsはサイト単位の読み込み時間ではなく、あくまでページ単位の読み込み時間を測るものだから気をつけてね。

さちこ先生SEO 管理ツール さちこ先生

わかりました!PageSpeed Insightsって改善項目もいろいろと教えてくれるんですね!どういったところを直すように教えてくれるんでしょうか?

マイマイSEO担当者 新人 マイマイ

PageSpeed Insightsで提案してくれる項目は下記が主なもの。対応はサーバーやシステムが絡むものもあるから、社内のシステムエンジニアやサーバーの保守・運用担当の方と相談しながら進めてね。

さちこ先生SEO 管理ツール さちこ先生

PageSpeed Insightsによる表示速度最適化項目

・「画像の軽量化」
画像サイズが必要以上に大きい等最適化がされていない
→画像の圧縮、実際の表示サイズに保存サイズを合わせる、CSSスプライトの活用 等

・「サーバーの応答時間の短縮」
サーバーからのレスポンスが遅い
→サーバーの保守・運用会社(もしくは社内担当者)に相談

・「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」
 ファーストビューの読み込み速度を速めることができる
→スクロールしないと見えない部分に影響するCSSは</body>の直前に置く等をして読み込みを遅らせる

・「ブラウザのキャッシュを活用する」
 キャッシュの設定をすることで読み込み速度を速めることができる
→(サーバがApacheの場合).htaccessファイルで設定

・「CSS / JavaScript / HTML を縮小する」
 外部ファイルのインライン化やMinify化(改行の削除等)をすることで読み込み速度を速めることができる。
→CSS・JavaScript・HTMLの最適化

・圧縮を有効にする
 サーバへ転送するデータを圧縮することで読み込み速度を速められる
→gzip圧縮等を利用する

へーなんだかムズカシイ…
ただ、ページスピードの改善といっても何からやればいいのか全くわからなかったけれど、この項目を確認してできるものから手をつけるのは良さそうですね!

マイマイSEO担当者 新人 マイマイ

そうね。PageSpeed InsightsはマイマイのサイトのCMSや社内の事情を考えて改善点を出してくれているわけではなく杓子定規的に分析をしてくれるものだから、提案されたものの中でどれが対応できるかを確認して進めた方がいいわね。
ちなみに、PageSpeed Insightsは2018年11月に仕様が新しくなったの。この後紹介するLighthouseのデータも一緒に見られるようになって、より体感速度を確認しやすいようになったのよ。

さちこ先生SEO 管理ツール さちこ先生

へー!Lighthouseってどんな内容が確認できるんでしょうか?

マイマイSEO担当者 新人 マイマイ

Lighthouse

Lighthouseとは、Webページの品質向上のための確認に使えるGoogle Chromeの拡張機能です。

Lighthouseの使い方

① Lighthouseをインストールし、Chromeの拡張機能に追加します

② Chromeをシークレットモードで開き、Lighthouse以外の拡張機能もオンにしている場合はLighthouse以外のものをオフにします
Chrome画面右上の「︙」をクリックし、「その他のツール」→「拡張機能」をクリックします。
現在インストールされている拡張機能一覧のページが開かれるので、Lighthouse以外をクリックしオフ(グレーになればOK)にする。

Lighthouse起動画面①

Chromeのシークレットモードでも拡張機能を有効にしている場合には、Lighthouseのデータを正確に取るためにLighthouse以外のものは一度オフにするようにしてね。

さちこ先生SEO 管理ツール さちこ先生

③ Chromeの拡張機能がLighthouseだけになっていることを確認したら、
画面右上のLighthouseのアイコンをクリックし、「Generate report」ボタンをクリックします。

Lighthouse起動画面②

④ 読み込みが完了すると、自動でレポートが開かれます。

Lighthouseレポート画面

少し待てばレポートが確認出来るんですね!
でも、レポート内容が全部英語で書かれているから、何から見ればいいやら…ページスピードはどこでチェックするんでしょうか?

マイマイSEO担当者 新人 マイマイ

実はLighthouseはPageSpeed Insightsと違って、ページスピードに関する項目の他にもSEO・PWA(プログレッシブ ウェブアプリ)・アクセシビリティ等の項目まで確認してくれるものなの。

だからページスピードだけ確認したい場合は、“Performance(パフォーマンスデータ)”や“Opportunities(改善できる項目)”を見てみて。これがPageSpeed Insightsにも追加された項目よ。

さちこ先生SEO 管理ツール さちこ先生

本当ですね、さっきPageSpeed Insightsで確認した項目が英語で書かれています!改善項目については教えて頂きましたが、パフォーマンスデータの項目はそれぞれどういう意味なんでしょうか…?

マイマイSEO担当者 新人 マイマイ

Lighthouseのデータは3G回線でアクセスした場合、各項目にかかる推定時間を出してくれているの。

さちこ先生SEO 管理ツール さちこ先生

LighthouseのPerformanceデータ項目

First Contentful Paint(コンテンツの初回ペイント):テキストまたは画像が初めて表示されるまでにかかった時間
Speed Index(速度インデックス):ページのコンテンツが取り込まれて表示される速さ
Time to Interactive(インタラクティブになるまでの時間):ページが完全に操作できるようになるまでの時間
First Meaningful Paint(意味のあるコンテンツの初回ペイント):ページの主要なコンテンツが表示されるまでにかかった時間
First CPU Idle(CPUの初回アイドル):ページのメインスレッド処理が静止し、入力できるようになるまでにかかった時間
Estimated Input Latency(入力の推定待ち時間):ユーザーの入力に対して応答にかかった時間

詳細:Lighthouse に関するGoogleヘルプページ

こんなに細かく出してくれているんですね…
実際にページ内のコンテンツが表示されるまでの時間や、操作できるようになるまでの時間ということは、Webサイトを見るときの体感時間を確認できますね。

マイマイSEO担当者 新人 マイマイ

そうよ。それぞれ緑(速い)・黄(平均)・赤(遅い)で評価が色付けされているから、それを目安にしてみて。

さちこ先生SEO 管理ツール さちこ先生

Googleアナリティクス

Googleアナリティクスの行動機能でもページスピードを確認することができます。

Googleアナリティクスでのページスピードの確認方法

① 行動>サイトの速度>概要
サイト内のページの平均読み込み時間・平均リダイレクト時間等がわかります。
ブラウザ別の平均読み込み時間を見て、PCとモバイルで読み込み時間に乖離が無いか等確認しましょう。

Googleアナリティクスサイトの速度の概要

② 行動>サイトの速度>ページ速度
ページビュー数が多い順に、ページ単位で読み込み時間をサイト平均と比較できます。
サイトの平均読み込み時間よりも速い場合は緑色で、遅い場合は赤い色で示されています。

Googleアナリティクスサイトの速度のページ速度

③ 行動>サイトの速度>速度についての提案
ページ単位で、ページビュー数・平均読み込み時間・PageSpeed Insightsの提案箇所数・PageSpeed Insightsのスコアを確認できます。

Googleアナリティクスサイトの速度の提案

ページ単位でPageSpeed Insightsのスコアや改善項目を見れるのは便利ですね!私も自分のサイトを確認してみます♪

マイマイSEO担当者 新人 マイマイ

Test My Site

Test My Siteとは、モバイルサイトのページスピードとパフォーマンスのテストツールです。

Test My Siteの使い方

① 調べたいサイトのURLを入力し、「→」ボタンをクリックします

Test My Siteの入力画面

② 読み込みが完了するとレポートが表示されます。

Test My Siteの確認画面

③ さらに詳しいレポートを取得したい場合は、「無料レポートを取得する」をクリック。
  「テスト結果の詳しいレポートを希望します」にチェックをし、メールアドレスを入力後送信。

Test My Siteのレポート申請画面

Test My Siteは、測定結果が3画面分しかないんですね。シンプルで分かりやすいです。

マイマイSEO担当者 新人 マイマイ

ポイントは、同じ業種内での比較ができること。同じ業種のページと比較をして対象サイトの読み込み時間が特に良好・良好・普通・要改善のどこに当たるかが確認できるの。モバイルサイトのみの調査結果ではあるけれど、便利よ。
メールで受け取るレポートは届くまでに多少時間がかかるから気をつけね。

さちこ先生SEO 管理ツール さちこ先生

GTmetrix

GTmetrixとは、調べたいサイトのページスピードを確認できるツールです。

GTmetrixの使い方

① 調べたいサイトのURLを入力後、「Analyze」ボタンをクリックします。

GTmetrix入力画面

② 「Analyze」ボタンのクリックをして数分後に読み込みが完了されると、レポートが開かれます。

GTmetrixレポート画面

さちこ先生、GTmetrixも英語なんですね…それぞれ、どういった意味なんでしょうか?

マイマイSEO担当者 新人 マイマイ

スコアの詳細項目は下記の通りよ。改善項目は30近く出してくれているから、Page Speed Insightsよりも詳しく改善項目を知りたい場合にはチェックしてみて。

さちこ先生SEO 管理ツール さちこ先生

GTmetrixのPerformance Scores/Page Details項目

・Page Speed Score(PageSpeed Insightsの評価):GoogleによるA~Fのページスピード評価
・YSlow Score(YSlowの評価):YahooによるA~Fのページスピード評価
・Fully Loaded Time(読み込み時間):ページの読み込みが完全に完了するまでにかかった時間
・Total Page Size(データサイズ):ページ内にあるHTMLやCSS・画像等の全データ量
・Requests(リクエスト数):サーバーとやり取りをした回数

詳細:GTmetrixヘルプページ

ありがとうございます。スコアに関する情報が見やすく感じました。改善項目もどんなことが書かれているか調べてみます…!

マイマイSEO担当者 新人 マイマイ

どう、マイマイ?これでページスピードの重要性と確認方法がわかったかしら?

さちこ先生SEO 管理ツール さちこ先生

はい、今までページの読み込み速度についてあまり考えたことってなかったけれど、ユーザーにサイトを見てもらうためには大事なポイントだと気づきました!今回教えて頂いたツールで、スコアを把握しつつ改善していきます!

マイマイSEO担当者 新人 マイマイ

頑張ってね。一つのツールだけだとデータが偏ってしまう可能性があるから、複数ツール使って確認するようにするのよ!

さちこ先生SEO 管理ツール さちこ先生

ユーザーにとってより良いサイトを目指したいなら…

ページの読み込み速度がいかに重要か分かって頂けましたでしょうか。
ユーザビリティ改善にはページスピード以外にもたくさんの要素があります。

しかし、『ユーザビリティを改善するといっても、サイトを見慣れすぎていて客観的な課題点がわからない
そもそもユーザーに見つけてもらうために、サイトの集客施策を打たなくてはいけない』とお悩みだったりしませんか?

そんなときには、SEOファシリテーションツール seoLOUNGEがおすすめです!

seoLOUNGEは、SEOオペレーションを完全にサポートする業界唯一のツールです。
SEOツールとはいっても、UXをスコア化する機能サイトの具体的な内部改善項目がわかる機能等、
サイトの最適化には必ず使っていただけるものです。

どんな画面のツールか?他にどんな機能があるのか?気になる方は、ぜひ詳細をご覧ください。

無料デモ・資料請求は
お気軽にお問い合わせください

seoLOUNGEについて
詳しく見る