ブログ

【検証!】ページスピードインサイト(Page Speed Insights)のスコア改善施策と結果を公開!使い方とまずやるべき施策を徹底解説!

ページスピードインサイトは活用していますか?

2018年Googleはモバイル検索においてページの表示速度をランキングの要素として取り入れる、通称「スピードアップデート」を発表しました。そしてその速度をはかるツールがページスピードインサイトになります。

ページスピードインサイトは簡単に操作可能ですが、出力するデータは一般の方には少し難しいものも多くあります。そこで今回はページスピードインサイトの使い方をかいつまんで解説しつつ、簡単なスコアの改善のポイントを合わせてまとめてみたいと思います。

ページスピードは大きく、データの生成、データの転送、描画の3つから成り立つ

ツールの解説の前にまず、「そもそもページスピードってなに?」という部分を説明します。

  • データの生成
  • データの転送
  • 受け取ったデータの描画

サクラサクではページスピードを分析、改善する際、この3つの要素にわけて考えています。各要素はそれぞれ、サーバ、ネットワーク、ブラウザに対応します。ページスピードのスコアはこの3つの要素の総合得点で決まると考えていますので、順番に見ていきましょう。

1.データの生成

データの生成フェーズは、サーバ側でデータベースなど使用して出力するHTMLデータなどを生成する部分です。ウェブサーバやデータベースサーバの応答が遅い(スペックが足らない、クエリチューニングができていないなど)場合に問題になることが多いでしょう。主に後述するTTFBと呼ばれるスコアなどを参考にチューニングします。

2.データの転送

データの転送フェーズは主にネットワークの部分です。サーバで生成されたデータはインターネットを介してブラウザまで転送されますが、そこでかかる時間になります。データが早く生成できても転送に時間がかかればやはりスコアは下がりますので、重要なファクターです。主にデータが圧縮されているか、ファイルサイズは適正か、などの情報を参考にチューニングします。

3.受け取ったデータの描画

最後は描画フェーズです。ブラウザが担当する描画の部分は、転送されてきたデータの最後の処理です。JavascriptやHTMLの記述方法、キャッシュなど、チューニングの参考になるデータは多岐にわたります。

サクラサクでは、このようにページスピードを3つにわけて考えることで、よりチューニングしやすくなると考えています。

ここからはそれぞれのデータの見方とチューニングのヒントをまとめていきたいと思います。

データの生成フェーズでの改善方法

まずはデータの生成フェーズ、主にサーバ側の処理について見ていきたいと思います。

TTFB

データの生成フェーズの時間=「サーバでデータを生成する時間」ですが、サーバ内部の処理ということもあり厳密に外から計測することは難しいため、一般的にはTTFBという数値ではかることになります。

TTFBはTime To First Byte の略で、最初の1バイトが到着するまでの時間=最初のデータが到着するまでの時間になります。厳密にサーバ側の処理時間のみではありませんが、近いデータということで参考にします。なおページスピードインサイトでは「TTFBが遅い」という形でアラートがでます。
サーバー応答時間の短縮(TTFB)
TTFBは全体のスコアに影響しますが、特に「速度インデックス」は注意が必要です。「速度インデックス」は、サーバからデータを受信し、初めて表示するまでの時間です。ページスピードインサイトの中ではTTFBのウェイトが大きい項目になっています。
速度インデックス

TTFB対策

TTFBと「コンテンツの初回ペイント」が遅いということは、サーバ側の処理が重たいということになります。サーバ側の処理はなかなか外から見てチューニングすることは難しいですが、改善を検討している場合、以下を元にエンジニアに確認してもらうべきでしょう。

・検索結果ページなどデータベースをたくさん使用するページが遅い傾向がある
⇒DBのチューニング、SQLのチューニング、データベースサーバのスペックアップなど

・サーバが古い、安いサーバを使用しているなど
⇒ウェブサーバのチューニング、ウェブサーバのスペックアップ

なおTTFBはページスピードインサイト以外に、Chrome Developer Toolsなどを使用して個別のファイル単位で見ることも可能です。こちらの場合、個別ファイルごとに見ることができ、画像ファイルばかりTTFBが高いなどの個別の事象も捉えることができますのでおすすめです。
Chrome Developer Tools を使用してTTFBを調査
※Chrome Developer Tools を使用してTTFBを調査

補足:TTFBがスコアに与える影響の検証
TTFBがどの程度影響を与えるか調査した結果を以下に公開します。スコアが100、速度インデックスが0.9のページに対して、意図的にTTFBを5秒遅延させたページのスコアを計測した結果になります。

実験の結果、TTFBはスコアと速度インデックスのみに影響し、5秒の遅延がそのまま速度インデックスに反映してしまっている形になりました。

  スコア 速度インデックス それ以外のデータ
TTFB操作なし 100 0.9
TTFB 5秒遅延 80 7.7 変化なし

データの転送フェーズでの改善方法

ネットワーク処理であるデータの転送では、主にファイルサイズについて見ていきます。

ファイルサイズ

まずファイルサイズです。ファイルサイズはスコアに大きく影響します。アラートとしては、「次世代フォーマットでの画像の配信」「効率的な画像フォーマット」の2つが影響します。またこれ以外に「過大なネットワークペイロードの回避」がでる場合もあります。
ファイルサイズ
なおラボデータ上では、「コンテンツの初回ペイント」「意味のあるコンテンツの初回ペイント」「速度インデックス」「CPUの初回アイドル」「インタラクティブになるまでの時間」の5つに影響します。
ラボデータ
ファイルサイズが大きい場合、TTFBのアラートがでることも多い上に、描画のための時間もかかるため、単純にデータの転送フェーズだけでない大きな影響を及ぼしますので注意が必要です。

ファイルサイズの対策

特に画像は昨今では無劣化圧縮の技術も発達しているため、普通にアップロードするのではなく無劣化圧縮をかけることで大幅にファイルサイズを軽減できます。アラートがでた場合(ページスピードインサイトでは主に画像ファイルがリストアップされます)、アラート内に対象のパスがでてきますので、それを無劣化圧縮していきましょう。Wordpressをお使いの場合、Tinypngのプラグインなどもおすすめです。

※Tinypng
https://tinypng.com/

※TinypngのWordpressプラグイン

Compress JPEG & PNG images

補足:ファイルサイズがスコアに与える影響の検証
ファイルサイズの大きさがどれほどスコアに影響を与えるのか実験してみました。

今回は2.7MBの画像のスコアとそれを無劣化圧縮して430KBにした画像のスコアを比較しています。結果、ファイルサイズのスコアへの影響は非常に高いことがわかります。

画像種類 スコア
2.7MBの画像 3
430KBにした画像 87

補足:ファイル数がスコアに与える影響の検証

ファイルサイズは影響を与えることがわかりましたが、ファイル数はどうでしょうか。実験として、30KBのファイル100個のページと、3MBのファイル1個のページで比較してみた結果は以下の通りです。ファイル数はスコアに影響を与えないことがわかります。

ページの種類 スコア
30KBのファイル100個のページ 100
3MBのファイル1個のページ 100

その他、簡単に修正できるもの

ファイルサイズ以外に簡単に対応できるものがいくつかあります。これらのメッセージがでている場合、対応を検討してみてください。

通信のgzip圧縮

これはサーバ側の設定でサーバ<>ブラウザ間をgzipで圧縮する設定がONになっているかどうかの確認です。アラートとしては「テキスト圧縮の有効化」がでている場合に対応が必要です。
テキスト圧縮の有効化
対策はサーバ側でONにするのみです。サーバによって対応方法が異なる場合もありますので、エンジニアに確認してみてください。
また経験上、誤検知している場合もあります。アラートがでたとしても、誤検知の場合対応できない場合があります。(その場合エラーも残り続けてしまいますが、今の所対策不能だと思われます)

キャッシュの有効活用

ネットワークの通信をもっとも減らしてくれるものの一つがキャッシュです。ブラウザにキャッシュがある場合、サーバにアクセスせずそのキャッシュを使用して描画を試みるためです。つまりキャッシュがある場合ネットワークの負荷は0になります。メッセージとしては「静的なアセットと効率的なキャッシュポリシーの配信」などが該当します。
静的なアセットと効率的なキャッシュポリシーの配信
ページスピードインサイトはすべてのキャッシュをオフにしてアクセスしますので(初回アクセス時をエミュレート)、本施策を行ってもスコアが上がるわけではありません。そのため、ページスピードインサイト上でも「診断」という形で改善項目とは別に表示されています。

対策は.htaccessなどで、それぞれの画像やファイルにキャッシュ期間を設定していくことになります。

描画部分の改善方法

描画部分はページスピードの中でも対応が一番難しい部分です。順番に見ていきましょう。

レンダリングブロック

Javascriptやcssなどを描画の途中でロードすることによって、画面の表示が止まってしまう現象を検索エンジンは嫌います。レンダリング(画面生成と表示)をブロック(止める)ということになります。
アラートとしては「レンダリングを妨げるリソースの除外」になります。ページスピードインサイトのスコアが低いサイトの場合、高確率ででてくるものです。ページスピードインサイトのスコアは、きちんと最後まで読み込むまでのスコアになります。レンダリングブロック=描画を止めて別の処理をする ということですので、これらをなくしていくことで、よりスムーズに描画ができるようになります。
レンダリングを妨げるリソースの除外
またレンダリングブロックの評価は「コンテンツの初回ペイント」「意味のあるコンテンツの初回ペイント」の2つに影響します。
コンテンツの初回ペイント

レンダリングブロックの対策
レンダリングブロックの対策は、こつこつ上部に出現するJavascript、cssの2つをフッターで読み込み、実行することです。実行順がおかしくなるとエラーになる場合もありますので、注意して進めてください(Javascriptの場合、defer 属性で対応できる場合もあります)

またもう一つ注意点として、cssを下部で読み込む場合、一瞬かもしれませんがcssが当たるまでレイアウトが崩れるという現状があります(cssを読み込むのが遅くなるため)。これをUX上よしとするかについても良く検討の上実施してください。

補足:読み込み位置をヘッダーとフッターでかえた場合のスコアの検証
レンダリングブロック対策の効果がどのくらいあるのかを調べるため、今回はサクラサクラボで、全css、Javascriptをヘッダー読み込みとフッター読み込みの2つにわけて実験を行った結果を公開します。結果は以下のように7 -> 32 と大きく改善する結果となりました。また合わせて「コンテンツの初回ペイント」「意味のあるコンテンツの初回ペイント」の2つも大きく改善していることがわかります。

読み込み場所 スコア コンテンツの
初回ペイント
意味のあるコンテンツの
初回ペイント
ヘッダーで読み込み 7 6.2秒 6.8秒
フッターで読み込み 32 1.4秒 1.4秒

画像の遅延読み込み(Lazy Load)

画像を遅延読み込みすることで、当初必要のない画像の読み込みを後回しにし、インタラクティブになるまでの時間を早める施策です。アラートとしては「オフスクリーン画像の遅延読み込み」としてでます。合わせて、画像が多い場合出現する「次世代フォーマットでの画像の配信」がでる場合もあります。
画像の遅延読み込み
また画像の遅延読み込みはラボデータでは「インタラクティブになるまでの時間」に影響します。
インタラクティブになるまでの時間

画像の遅延読み込みの対策
これは画像を遅延読み込みするように修正していくことになります。現在ではライブラリなどもでていますのでそれを活用する、Wordpressの場合プラグインもありますので、そちらも合わせてご確認ください。

※サクラサクラボで使用している Lazy Load のプラグイン

補足:Lazy Loadがスコアに与える影響の検証
本サイト、サクラサクラボはほとんどの画像をプラグインでLazy Loadにしていますが、意図的にプラグインを外した場合どうなるかを検証しました。結果スコアが36 -> 28 と2割ほどダウンし、インタラクティブになるまでの時間は倍増しています。

  スコア インタラクティブになるまでの時間
Lazy Loadあり 36 14.5
Lazy Loadなし 28 29.6

Javascriptの対応

ここまでを実装すると、大きな改善項目がないにも関わらず、スコアがまだ上がりきっていない場合があります。例えばサクラサクラボではここまでの実装で、スコアは43になりましたが、まだ「速度インデックス」「CPUの初回アイドル」「インタラクティブになるまでの時間」「最大推定FID」は赤のままです。また改善できる項目に赤のものはなく、すべて1秒以下の小さい項目です。
改善項目が少ないがスコアはまだ上がりきっていないサクラサクラボ
※改善項目が少ないがスコアはまだ上がりきっていないサクラサクラボ
※余談ですが、サクラサクラボはこの状態からすべてのJavascriptを外すと98点になります。

Javascriptのアラートは改善項目ではなく「診断」の項目にでてくるものを参考にします。具体的には「メインスレッド処理の最小化」「Javascriptの実行にかかる時間の低減」の2つがでている場合、Javascriptを見直したほうがよいと考えます。
「メインスレッド処理の最小化」「Javascriptの実行にかかる時間の低減」
サクラサクラボの場合2つともでていますので、Javascriptのチューニングによる改善が見込めます。ただしここからはサイトごとに対応がかわってくるため、以下にチューニングのヒントになりそうなものを箇条書きでご紹介します。

  • このページで必要でない機能が含まれていないか確認
  • 不要なタグ(解析系など)が含まれていないか確認
  • 不要な機能がないかの確認(UI/UXを削る)
  • 無駄な処理がないか確認
  • setTimeoutなどを利用してメインスレッドから外せる処理がないか
  • ファーストビューの描画が終わった後で実行してもよいものがないか

Javascriptのチューニングは、UI/UXの犠牲を伴うものもでてくるかもしれません。機能が本当に必要なのかも検討する必要がありますが、ページスピードインサイトのスコアをどこまで上げるかについてもきちんと考える必要があります。

サクラサクでは「モバイルで40点、できれば60点」を一つの基準としています。無理に100点を狙おうとせず、UI/UXをきちんと考えながら対策を進めていってください。

スコアにこだわりすぎないことが大切

ここまでページスピードインサイトの説明と、スコア改善方法のポイントについて解説してきました。

ページスピードがランキングに影響するようになったスピードアップデート以降、ページスピードは非常に重要になっています。

他方、検索順位に限って言えば、早ければ早いほどいいということではなく、「遅すぎる場合以外は検索順位への影響はほとんどない」ということ、またページスピードインサイトのスコアそのものではなく、「ユーザが実際にどのくらいの速度で表示しているかを検索エンジンは評価している」という2点も理解しておく必要があります。(サクラサク見解)

そのため、ツールを「100点をめざすため」に使うのではなく、「最低ラインからの脱却」と捉えて使うのがよいのではないかと考えています。

ページスピードインサイトは一つのツールにすぎません。そしてそのページスピードインサイトは明確に「ファーストビューを操作可能にするまでの時間」にこだわってスコアリングしています。そのためJavascriptをヘビーに用いたサイトはどうしてもスコアが低くなりがちです。40点のサイトを60点のサイトにするためにUXを犠牲にしなければならないこともあると考えると、安易に100点をめざすとは言えないのが現実です。

本稿の内容を参考に、まずはモバイルでは最低ラインである40点を超え、その後は60~をめざしてみてはいかがでしょうか。





無料メルマガのご登録(無料)

SEOの最新情報を無料でお届けします!





プライバシーポリシー

執筆者:山崎 好史

記事一覧

執行役員 CTO
コンテンツマーケティング部 部長

株式会社CSK(現株式会社SCSK)にて保守運用マネージャとして活躍後、独学でプログラミングおよびSEOを学び、サクラサクマーケティングの前身である株式会社ブルトアに入社。SEOの知識と技術力を生かして主にSEOにおけるツール開発、R&Dなどを進め、中核事業に成長させる。

現在はエンジニア以外にシステム運用チーム、コンテンツマーケティングチームも合わせてを取りまとめ、プロダクト全般を統括中。



無料資料ダウンロード

サービス資料ダウンロード

用語集

ソースコード集

お役立ちリンク集

無料メルマガのご登録(無料)

SEOの最新情報を無料でお届けします!





プライバシーポリシー

お役立ちツール

カテゴリ一覧

タグクラウド

新着記事一覧

  1. Google検索品質評価ガイドラインのNeeds Metとは

    Needs Metとは、Googleの検索品質評価ガイドラインにおいて、検索結果がどの程度ユーザーの役に立って満足させたか(ニーズを満たしたか)どうかを評価するものです。 検索結果がユーザーの役に立つかどうかは、ユーザー […]...

    1. 【検証!】ページスピードインサイト(Page Speed Insights)のスコア改善施策と結果を公開!使い方とまずやるべき施策を徹底解説!

      ページスピードインサイトは活用していますか? 2018年Googleはモバイル検索においてページの表示速度をランキングの要素として取り入れる、通称「スピードアップデート」を発表しました。そしてその速度をはかるツールがペー […]...

      1. ウェブマスターオフィスアワーまとめ(2019年6月25日)

        6月25日のウェブマスターオフィスアワーが行われました。Googleの金谷さんとあんなさんが回答した内容をまとめます。 ※具体例がなく、明確な回答ができなかった質問は除いています。 Q.しごと検索でbaseSalaryの […]...

おすすめコンテンツ

  1. コンテンツマーケティングとは?特徴と事例、社内でできる方法を解説します

    ここ数年で急激にコンテンツマーケティングという言葉を聞くようになりました。しかし、「興味があるがまだ着手できていない」という人や、「そもそもどんなコンテンツを作ればいいのかわからない」、「社内で運用しているが成果がでない […]...

    1. SEO対策(検索エンジン最適化)とは~上位表示を実現する為のSEOとは?Googleの本質を理解し、自社サイトを強化する

      目次 1. SEO(Search Engine Optimization:検索エンジン最適化)とは 2. SEOの現在(検索エンジン最適化≒Google最適化) 3. Google Search Consoleの活用とS […]...

      1. SEOに強いコンテンツは回答性×網羅性×文字数×ユーザー体験

        目次 SEOに強いコンテンツとは回答性網羅性文字数ユーザー体験[回答性×網羅性×文字数×ユーザー体験]を考慮したSEOに強いコンテンツ制作お問い合わせフォーム SEOに強いコンテンツとは 検索エンジンで上位表示をさせるた […]...

最新情報を取得する

PAGE TOP