はじめに
この記事は「PageSpeed Insights」を詳しく紐解くというよりは調べたらわかるけど、
「少しめんどくさいなぁ・・・」とか
「使用を簡単にある程度把握したい」
という方に向けたライトな内容で書かせていただきますので、
それを踏まえて読み進めていただけると嬉しいです。
ちなみに「PageSpeed Insights」は11月12日リニューアルされました。
Googleの提供するページ検証ツール
Googleの提供するページ検証ツールは大きく2つあります。
「PageSpeed Insights」 と 「Testmysite」
各リファレンスを調べればより詳しくわかることですが、おおまかに記述していきます。
それぞれのツールはアップデートされますので、この記事を書いた時点とは異なっている可能性があることをあらかじめご了承ください。
PageSpeed Insights
実際に利用すると下記の項目についてサイトの現状を知ることができます。
- 速度スコア
- 最適化スコア
- 最適化についての提案
サイトの表示速度の改善と言えばこれ！というほど著名なツールだと思います。
実際利用されている方も多いと思いますし、私もその一人です。
私がこのツールを利用することによって主に「画像の圧縮」に取り組みました。
少し前に利用していた時と随分UIが変わりましたし、
表示されるデータも多くなったように思います。
Testmysite
サイトのURLを入力するとサイトのパフォーマンスを検証してくれます。
「PageSpeed Insights」と異なる点としては検証結果を表示して詳しいレポートはメールで送信するような方式をとっています。
無料レポートを求める場合はボタンを押すとメールアドレスを入力する欄が表示されるので送信先のアドレスを入力します。
レポートはしばらくしたら届くそうですが、割と時間がかかります。
（私の場合25分ほどでメールが届きました）
「PageSpeed Insights」 と 「Testmysite」の違い
大きな違いと言えば「Testmysite」はモバイルに特化していることだと思います。
またサイトでは大雑把にしか改善提案をしてもらえないので詳しいレポートの提供をまたないといけません。
「PageSpeed Insights」は詳しい改善点が検証結果と同時に表示されるのですぐに行動に起こすことが可能といったところでしょうか。
PageSpeed Insightsで表示されるデータについて
ここからは「PageSpeed Insights」の検証結果で表示されるデータが何を意味しているかを説明できればと思います。
ページスピードといっても様々な指標があります。
例えば、
- ユーザーがサイトに遷移してから何か表示されるまでにかかった時間
- ページの中にある全てのコンテンツが表示されるまでにかかった時間
などが挙げられます。
間違って理解していると改善するために取り組んだことそのものが無駄になってしまう可能性もあると思うのでGoogleの公式サイトを見ながら、こちらの記事も参考にして理解を進めていただければと思います。
少しわかりにくいかもしれませんが、検証結果左上の方の「モバイル」と「パソコン」を切り替えられるタブメニューが存在します。（デフォルトはモバイルのはずです）でどちらのデバイスなのかを確認してから数値を確認するようにしてください。
次に「Lighthouse」という文言がところどころに出てくると思いますがこちらはウェブアプリです。
ここでは詳しく触れはしませんが、Chromeの拡張機能として実行する方法とコマンドラインから実行する方法と２通りありますので気になる方は試してみてください。
表示される各種データ
フィールドデータ
フィールドデータの項目で気になるのは下記2つの項目だと思います。
- FCP コンテンツの初回ペイント
- FID 初回入力遅延
また「提供元の概要を表示」を押すと、隠れていた「Origin Summary」という項目が表示されます。
こちらの値はサイト全体の数値を表しているようです。
FCPとFIDはChromeユーザーエクスペリエンスレポートに十分なデータない場合は、表示されないようなので注意してください。
ラボデータ
こちらには6つの項目があります。
項目とそれが何の時間を意味しているのかを簡単に書き記しておこうと思います。
| 項目 | 値の意味 |
|---|---|
| コンテンツの初回ペイント | テキストもしくは、画像が初めて表示されるまで |
| 意味のあるコンテンツの初回ペイント | ページの主要コンテンツがレンダリングされるまで |
| 速度インデックス | コンテンツを取り込んで表示されるまで |
| CPU の初回アイドル | メインスレッド処理が静止し、初めて入力の処理が可能になるまで |
| インタラクティブになるまでの時間 | ページが完全にインタラクティブになるまで |
| 入力の推定待ち時間 | ユーザーの入力に対しアプリが応答するまで |
ラボデータではレンダリングされてから表示されてユーザーが操作できるまでを
ms（ミリ秒）単位で結果として表示してくれます。
改善できる項目
改善できる点として上がってくる、フロント側で改善できる項目は以下のようなものがあります。
- レンダリングを妨げるリソースの除外
- 使用していない CSS の遅延読み込み
レンダリングブロックに解消やスクロールしないで見れる部分以外で利用するJavaScriptやCSSをheaderではなくfooterで読み込むなど簡単に工夫できることは多くあります。
中にはそれでは解決できなときもありますし、場合によってはheader以外で読み込むと他の箇所に影響を及ぼす場合もあるので注意も必要です。
レンダリングブロックを解消する方法には様々な方法がありますので、状況に合わせて手法を変えて取り組んでいただくのが良いと思います。
まとめ
Webはすごい勢いで発展して、動的なコンテンツもどんどん増えてきています。
「フリースポットWi-Fi」やカフェでは各々の店舗でWi-Fiが提供されるようになったとはいえ場所によっては電波が届かない、人によっては通信制限がかかり通信速度が遅くなることやフリーのSIMを使う人も増えてきたと思います。
Webページ表示速度の今
スマホが普及したことにより通信環境やキャリアなども多種多様な状況の昨今においてWebの製作者もサイトの表示スピードは気にしなくてはならない要素となりました。
サーバーサイドのサイトのキャッシュなども重要ですが、フロントサイドでもやるべきことや考えないといけないことが多くなってきていると思います。
なので今回はGoogleが提供するページを検証するツールで「何を検証できてサイトの改善にどうすれば活かすことができるのか」を個人の見解ではありますがお役に立てていただけると幸いです！
とはいえ自動にできることは自動化したい！
現在ではPageSpeed 最適化ツールがいくつかあるようなので参考までに紹介しておきます。
それぞれのサイトには自動で最適化するツールであることが記述されていますので、
改善のために書き換えたソースが勝手に書き換えられるなどが起こる可能性もあるかと思います。
十分に調べ検証した上でご利用いただければと思います。