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


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


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


えーそうだったんですね!でも、スマホでページの表示が遅いとそのページを閉じちゃうことが多いかも。そういうページが上位に上がってこないのは当然かもしれないですね…
さちこ先生、もしかして…逆に考えるとページの読み込み速度を上げれば上げるほど、上位になりやすくなるっていうことですか?


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


なんだぁ、残念です…


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


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


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


ページスピード確認に使えるツール
PageSpeed Insights
PageSpeed Insightsとは、Googleが提供するWebページの読み込み速度解析ツールです。調べたいサイトページのURLを入力し、「分析」ボタンを押すとモバイル・パソコンそれぞれのスコア及び改善項目を確認できます。
PageSpeed Insightsはサイト単位の読み込み時間ではなく、あくまでページ単位の読み込み時間を測るものだから気をつけてね。


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


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


PageSpeed Insightsによる表示速度最適化項目
・「画像の軽量化」
画像サイズが必要以上に大きい等最適化がされていない
→画像の圧縮、実際の表示サイズに保存サイズを合わせる、CSSスプライトの活用 等
・「サーバーの応答時間の短縮」
サーバーからのレスポンスが遅い
→サーバーの保守・運用会社(もしくは社内担当者)に相談
・「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」
ファーストビューの読み込み速度を速めることができる
→スクロールしないと見えない部分に影響するCSSは</body>の直前に置く等をして読み込みを遅らせる
・「ブラウザのキャッシュを活用する」
キャッシュの設定をすることで読み込み速度を速めることができる
→(サーバがApacheの場合).htaccessファイルで設定
・「CSS / JavaScript / HTML を縮小する」
外部ファイルのインライン化やMinify化(改行の削除等)をすることで読み込み速度を速めることができる。
→CSS・JavaScript・HTMLの最適化
・圧縮を有効にする
サーバへ転送するデータを圧縮することで読み込み速度を速められる
→gzip圧縮等を利用する
へーなんだかムズカシイ…
ただ、ページスピードの改善といっても何からやればいいのか全くわからなかったけれど、この項目を確認してできるものから手をつけるのは良さそうですね!


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


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


Lighthouse
Lighthouseとは、Webページの品質向上のための確認に使えるGoogle Chromeの拡張機能です。
Lighthouseの使い方
① Lighthouseをインストールし、Chromeの拡張機能に追加します
② Chromeをシークレットモードで開き、Lighthouse以外の拡張機能もオンにしている場合はLighthouse以外のものをオフにします
Chrome画面右上の「︙」をクリックし、「その他のツール」→「拡張機能」をクリックします。
現在インストールされている拡張機能一覧のページが開かれるので、Lighthouse以外をクリックしオフ(グレーになればOK)にする。
Chromeのシークレットモードでも拡張機能を有効にしている場合には、Lighthouseのデータを正確に取るためにLighthouse以外のものは一度オフにするようにしてね。


③ Chromeの拡張機能がLighthouseだけになっていることを確認したら、
画面右上のLighthouseのアイコンをクリックし、「Generate report」ボタンをクリックします。
④ 読み込みが完了すると、自動でレポートが開かれます。
少し待てばレポートが確認出来るんですね!
でも、レポート内容が全部英語で書かれているから、何から見ればいいやら…ページスピードはどこでチェックするんでしょうか?


実はLighthouseはPageSpeed Insightsと違って、ページスピードに関する項目の他にもSEO・PWA(プログレッシブ ウェブアプリ)・アクセシビリティ等の項目まで確認してくれるものなの。
だからページスピードだけ確認したい場合は、“Performance(パフォーマンスデータ)”や“Opportunities(改善できる項目)”を見てみて。これがPageSpeed Insightsにも追加された項目よ。


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


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


LighthouseのPerformanceデータ項目
・First Contentful Paint(コンテンツの初回ペイント):テキストまたは画像が初めて表示されるまでにかかった時間
・Speed Index(速度インデックス):ページのコンテンツが取り込まれて表示される速さ
・Time to Interactive(インタラクティブになるまでの時間):ページが完全に操作できるようになるまでの時間
・First Meaningful Paint(意味のあるコンテンツの初回ペイント):ページの主要なコンテンツが表示されるまでにかかった時間
・First CPU Idle(CPUの初回アイドル):ページのメインスレッド処理が静止し、入力できるようになるまでにかかった時間
・Estimated Input Latency(入力の推定待ち時間):ユーザーの入力に対して応答にかかった時間
こんなに細かく出してくれているんですね…
実際にページ内のコンテンツが表示されるまでの時間や、操作できるようになるまでの時間ということは、Webサイトを見るときの体感時間を確認できますね。


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


Googleアナリティクス
Googleアナリティクスの行動機能でもページスピードを確認することができます。
Googleアナリティクスでのページスピードの確認方法
① 行動>サイトの速度>概要
サイト内のページの平均読み込み時間・平均リダイレクト時間等がわかります。
ブラウザ別の平均読み込み時間を見て、PCとモバイルで読み込み時間に乖離が無いか等確認しましょう。
② 行動>サイトの速度>ページ速度
ページビュー数が多い順に、ページ単位で読み込み時間をサイト平均と比較できます。
サイトの平均読み込み時間よりも速い場合は緑色で、遅い場合は赤い色で示されています。
③ 行動>サイトの速度>速度についての提案
ページ単位で、ページビュー数・平均読み込み時間・PageSpeed Insightsの提案箇所数・PageSpeed Insightsのスコアを確認できます。
ページ単位でPageSpeed Insightsのスコアや改善項目を見れるのは便利ですね!私も自分のサイトを確認してみます♪


Test My Site
Test My Siteとは、モバイルサイトのページスピードとパフォーマンスのテストツールです。
Test My Siteの使い方
① 調べたいサイトのURLを入力し、「→」ボタンをクリックします
② 読み込みが完了するとレポートが表示されます。
③ さらに詳しいレポートを取得したい場合は、「無料レポートを取得する」をクリック。
「テスト結果の詳しいレポートを希望します」にチェックをし、メールアドレスを入力後送信。
Test My Siteは、測定結果が3画面分しかないんですね。シンプルで分かりやすいです。


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


GTmetrix
GTmetrixとは、調べたいサイトのページスピードを確認できるツールです。
GTmetrixの使い方
① 調べたいサイトのURLを入力後、「Analyze」ボタンをクリックします。
② 「Analyze」ボタンのクリックをして数分後に読み込みが完了されると、レポートが開かれます。
さちこ先生、GTmetrixも英語なんですね…それぞれ、どういった意味なんでしょうか?


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


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(リクエスト数):サーバーとやり取りをした回数
ありがとうございます。スコアに関する情報が見やすく感じました。改善項目もどんなことが書かれているか調べてみます…!


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


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


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


ユーザーにとってより良いサイトを目指したいなら…
ページの読み込み速度がいかに重要か分かって頂けましたでしょうか。
ユーザビリティ改善にはページスピード以外にもたくさんの要素があります。
しかし、『ユーザビリティを改善するといっても、サイトを見慣れすぎていて客観的な課題点がわからない』
『そもそもユーザーに見つけてもらうために、サイトの集客施策を打たなくてはいけない』とお悩みだったりしませんか?
そんなときには、SEOファシリテーションツール seoLOUNGEがおすすめです!
seoLOUNGEは、SEOオペレーションを完全にサポートする業界唯一のツールです。
SEOツールとはいっても、UXをスコア化する機能やサイトの具体的な内部改善項目がわかる機能等、
サイトの最適化には必ず使っていただけるものです。
どんな画面のツールか?他にどんな機能があるのか?気になる方は、ぜひ詳細をご覧ください。
関連記事
隠しリンクとは、Webページ内において、「ユーザーの目には見えない(見えにくい)けど、検索エンジンのクローラーだったら理解できる」というかたちでリンクを埋め込むスパム行為です。ここではそんな隠しリンクについて解説します。
「SEOについて知りたい!」と思うのであれば、SEOに関連する資格を取得するのも1つの手段です。知識を体系的に学べたり、SEOの基礎を学べたりします。こういった資格を通して体系的に基礎知識を学んだ上で、最新のSEOに触れることでよりステップアップできるはず!ここではSEOに関連する資格について見ていきます。
SEO効果を考えるうえでタイトル(titleタグ)の付け方は非常に重要です。例えば、ページの内容を簡潔に伝えるタイトルにしたり、タイトル内に施策キーワードを入れたりしたほうがよいでしょう。ここではSEOにおける効果的なタイトルの付け方について見ていきます。
アンカーテキストとは、他のWebページへリンクする際に表示する文章のことです。ユーザビリティの観点から考えても、SEOの観点から考えても非常に重要になりますので、リンク先の内容がすぐに理解できるように正しく設置しましょう。
よく読まれている記事
まだデータがありません。
さちこ先生、質問です。ページの読み込み速度の話を最近よく聞く気がするんですが、ページスピードってSEOの順位にも関係するんでしょうか?