【WordPress /表示速度】ラボデータ とは？/ Page Speed Insights

Google Page Speed Insightsとは

「Google Page Speed Insights」とは、Googleが提供している無料ツールのひとつで、ページの読み込み速度をチェックできるツールです。

Page Speed Insightsでは、入力したURLのパソコン・モバイル端末それぞれの表示時のパフォーマンスに関するレポートと、その結果からページの改善方法を確認できます。2021年の6月からモバイルのみですが、コアウェブバイタル（ページの読み込み速度）が評価の対象になることが公式に発表されました。読み込み速度の改善に注力されているSEOの担当者様も多いのではないでしょうか。 コアウェブバイタルについては過去記事もご参照ください。 [sc_Linkcard url="https://cocorograph.co/knowledge/page-speed-up/"] 今回は Page Speed Insightsの結果が表示される際に出てくる、「ラボデータ」に注目してみます。 極力、わかりやすく噛み砕いて説明をしていきますが、ページの読み込み速度のテーマになると どうしても「複雑なテーマ」・「非常にテクニカルな話になりやすい」ということを大前提に読んでいただきたいです。 また、噛み砕こうとして、内容がずれてしまうことも避けたいので、バランスよくがんばります。

ラボデータとは

• First Contentful Paint
• Time to Interactive
• Speed Index
• Total Blocking Time
• Largest Contentful Paint
• Cumulative Layout Shift

の6つの要素で表示され、それぞれの数値を

• ０〜49　赤色　悪い
• 50〜89　黄色　改善が必要、改善した方が良い
• 90〜100　緑色　良好な状態

の３色から色分けして表示してくれます。６箇所全てが緑色になっていれば良好な状態ということです。 まずは、項目ごとにその意味と説明をしていきます。 項目について理解をしておくと、どこが・何が悪いのか理解しやすくなると思います。 6つの項目について1つづつ対応策を書き出すと、より複雑な内容になってしまうのでそれぞれ処理の仕方については、後半にまとめてお伝えします。（優先して、かつ共通して対応すべき手法がたくさんあるため）

First Contentful Paintとは

６箇所の各項目ごとにGoogleのサポートページにリンクが飛べるので、一旦そちらをみてみます。 ※Chromeの翻訳機能を使って日本語にしています。

用語が多いので、これを見てすぐになるほどと思うのは難しいですよね。 “FCPは、ユーザーがページに移動した後、ブラウザーがDOMコンテンツの最初の部分をレンダリングするのにかかる時間を測定します。” DOM?　レンダリング？ それぞれ、もう少し掘り下げてみます。 DOMとはDocument Object Modelの略称で、JavaScriptなどの色々なプログラミング言語から、オブジェクトを扱うためのつなぎ役です。 説明が難しいのですが、例えばWebページに表示されているボタンなんかをクリックした時に、あらかじめ設定してある処理を行うためには、JavaScriptからDOMを中継してようやく可能になる。といった感じです。 ページの読み込みの1つの中継地点と考えましょう。 レンダリングとは何かのデータをもとにして、表示する内容を作ることです。 これを元に解説すると、FCPとは「ユーザーがページに訪れた際に、一番最初に発生するデータの読み込みの処理がはじまる時間」ということでしょうか。 そのコンテンツがメニューバーであったり、ヘッダーである可能性も。

Time to Interactiveとは

こちらもサポートページを見てみます。

“TTIは、ページが完全にインタラクティブになるまでにかかる時間を測定します。次の場合、ページは完全にインタラクティブであると見なされます。” こちらはなんとなくわかりそうです。　気になるのは「インタラクティブ」です。 インタラクティブとはそのまま解説しているページを参照すると、「対話」「双方性」などと訳されます。 ユーザーがパソコンから画像や音声によるメッセージに対して、キーボードなどで入力して操作を進めていく様子をそのように表現するようです。 一般的なイメージとしては、 「Webページのコンテンツが表示され、ユーザー入力を処理できる状態になるまでの時間」です。

Speed Indexとは

“スピードインデックスは、ページの読み込み中にコンテンツが視覚的に表示される速度を測定します。” とのことです。 この項目に関してはそのままで、「ページの読み込み中に、コンテンツが可視化されるまでの速度」ということです。

Total Blocking Timeとは

まずはサポートページへ。

“TBTは、マウスのクリック、画面のタップ、キーボードを打つなどのユーザー入力への応答がブロックされている合計時間を測定します。” ブロックとはわかりやすくいうと、「待ち時間」です。 つまり、「ユーザーがクリックなどのアクションを起こしてからの応答までの待ち時間の合計」ということです。 厳密には、先程の「FCP」と「TTI」の間でかつ、50ミリ秒を超える長いタスクのブロックされる部分の合計を指します。

Largest Contentful Paintとは

6つの項目の中では、この後ご紹介する「CLS」と並んで大きな要素になります。

“LCPは、ビューポートの最大のコンテンツ要素が画面にレンダリングされるタイミングを測定します。” 「最大のコンテンツ」という言葉の解釈が難しいのですが、主にそのページで主要な動画や画像のことが対象になる場合が多いです。 記事等で画像や動画が使用されていない場合は、見出し位なんかが該当するかと思われます。 「主要となる要素が表示されるまでの時間」でいきましょう。 背景画像や、メインのコンテンツが表示されるまでの時間が早ければ早いほど、UX（ユーザー体験）が優れているとされています。

Cumulative Layout Shiftとは

こちらも先程の「LCP」と並んで大きな要素です。

“CLSは、ページの存続期間全体で発生するすべての予期しないレイアウトシフトについて、すべての個々のレイアウトシフトスコアの合計を測定します。” つまり、ユーザーが意図しないレイアウトのズレがどのくらいあるかということです。 身近にある例ですと、「記事を読みはじめたら、画像や広告が少し遅れて出てきて文章がずれて困惑した」などのケースが挙げられます。 みなさんも一度は経験したことがあるのではないでしょうか？ そのような、ユーザーが不快な思いをする体験が少ないほど良いということになります。 これらの指標の改善策についてもみていきましょう。

すぐにできるページ速度の改善策

ここでは共通して表示速度の改善につながる施策について解説していきます。 具体的な対応方については技術的な部分もありますが、長くなってしまうので個別に記事にしていこうと思います。

画像の容量を小さくする

「Tiny PNG」という画像の圧縮サイトです。 画像ファイルの数が膨大ではなく、アップロードし直すことができる規模でしたら、こちらのサイト等を利用して画像を圧縮して容量を小さくしましょう。 画像の数が多い場合はこのようなプラグインも利用しましょう。

EWWW Image Optimizer

こちらのプラグインでは一括で画像ファイルの圧縮をしてくれます。 画像の劣化を極力控えてくれる分、圧縮率もそこまで大きくはないので注意してください。

外部ファイルの圧縮

CSSやJavaScriptなどの容量は、記載されている行数で要領が変わります。 無駄なスペースや改行が多いだけでも容量を圧迫してしまいます。 下記サイト等を利用して、ファイルの圧縮も試みましょう。 CSSはこちら

CSS圧縮ツール

JavaScriptはこちら

JavaScriptはこちら

使用していない外部ファイルの削除

外部ファイルの数も多いほど、表示速度に大きく影響してきます。 例えば、以前配信してたけれど、現在は配信をしていない広告のタグなどは定期的に見直して削除をしましょう。

AMPを使用する

AMPとは「Accelerated Mobile Pages」の略で、GoogleとTwitterが始めた、モバイルユーザーのWeb体験を快適にすることを目指したプロジェクトのことです。 画像のサイズやウェブフォントの影響などにより、PCサイトに比べるとスマホサイトは読み込みに時間がかかってしまいがちです。 AMPを導入したWebページは、GoogleやTwitterにキャッシュとして保存されています。これにより、Webページを読み込む必要がなく、Google等に保存されたキャッシュを表示するだけでよいのです。 また、AMPの規定に則って厳しく制限されたシンプルなhtmlとCSSが要求されるため、データ量は必然的に小さくなります。読み込むデータが少ないため、表示速度も速くなるのです。 AMPに関しては追って記事にして詳しく解説していきます。 ※2021年7月現在、AMPページの優遇は無くなりました。ただ、表示速度が早くなりユーザビリティが優れているという点では相対的に良い評価を得るきっかけにはなります。

まとめ

今後も対応方法については記事を更新していきますが、地道な作業が多く、難しい場面も出てくると思います。 この記事が多少なりとも、お役に立てばと思います。 記事を読んで不明な点等がありましたらお気軽にTwitter（

@kaznak_com

）などでご質問ください。 ではまた。