PageSpeed Insightsは実測の速さと改善余地のscoreを分けて読む

PageSpeed Insightsを開いたときは、一つのscoreだけでpageを遅い、悪いと決めません。実際の利用者がどのくらいの速さで表示を見ているかと、見た目や機能を保ったまま改善できる余地は別の数字です。どちらが低いかだけで作業を始めると、読者が困っていない部分を直し、問い合わせや説明に必要な機能を壊すことがあります。

Googleは1月10日、PageSpeed InsightsがChrome User Experience Reportのdataを使い、実際の環境での速度を踏まえた情報を出すと案内しました。speed scoreはFirst Contentful PaintとDOM Content LoadedのmedianでFast、Average、Slowに分けます。optimization scoreは、同じ見た目と機能を保つ前提で、どこまで改善できるかを見積もるscoreです。二つは同じ意味ではありません。 Google Search Central Blog

実測の速さと改善余地は答える問いが違う

speed scoreが示すのは、利用者が実際に開いたときの表示の速さに近い情報です。Fast、Average、Slowの区分は、Chrome User Experience Reportにあるdataとの比較で決まります。ここでは、読者が画面を見るまでにどの程度待つかを考えます。

optimization scoreが示すのは、pageの作りを改善できる余地です。画像の大きさ、読み込むfile、renderを止めるresourceなどを見直す候補になります。ただし、scoreを計算するときは、pageの見た目と機能を同じに保つ前提があります。改善候補が出たからといって、画像、form、計測、地図、fontを無条件に外してよいわけではありません。

たとえば、実測の速度がFastでも、optimization scoreに改善候補が出る場合があります。このときは、利用者を待たせている緊急の問題と決めず、次の改修で直せる候補として扱います。反対に、実測の速度がSlowなら、候補の数だけを数えず、最初の表示で何を待たせているかを調べます。同じscoreを高くする作業でも、優先順位は違います。

まず読者が最初に開くURLを測る

PageSpeed Insightsへsiteのtop pageだけを入れて終えません。検索結果や広告から最初に開くservice page、問い合わせや予約の入口、画像や外部serviceが多いpageを選びます。top pageが軽くても、広告のlink先が遅ければ、読者は必要な説明にたどり着く前に待ちます。

各URLで、最初にモバイルのbrowserを開きます。本文、価格や条件、電話番号、問い合わせbuttonなど、読者が先に見る情報が表示される順を確かめます。次にPageSpeed Insightsを開き、Fast、Average、Slowの区分と、表示を止めるresourceやbytesに関する情報を見ます。画面を見ずにscoreだけを比べると、数字と読者の操作がつながりません。

仮に画像が大きいという候補が出た場合、その画像が最初に必要な商品説明なのか、下の方にある飾りなのかを分けます。必要な画像なら、表示する順、fileの形式や大きさ、読み込む場所を制作側と検討します。飾りなら、そもそも最初の画面に必要かを決めます。技術的な候補と、siteに残す内容を決める判断を混ぜません。

scoreが低くても一度に全部を替えない

改善候補が多いpageでも、画像、JavaScript、stylesheet、外部serviceを一度に替えません。一度に変えると、表示が速くなった理由も、formや計測に問題が出た理由も分からなくなります。まず一つのURLで、最初に読ませたい内容を邪魔している要素を選び、変更前の画面とscoreを残します。

たとえば、外部の地図やSNS buttonを読み込んでいる場合、それが問い合わせに必要か、画面の後ろへ置けるかを考えます。formのscriptなら、外した後に送信できなくなることがあります。計測用のtagなら、広告やアクセス解析の数字が変わる可能性があります。遅いfileを見つけることと、そのfileを消してよいことは別です。

変更後は同じURLで確認します。PageSpeed Insightsの区分や候補に変化があるかを見たうえで、mobile browserで本文、画像、form、電話linkを操作します。scoreが上がっても、読者が問い合わせできなければ改善とは言えません。反対にscoreが少ししか変わらなくても、最初に必要な説明が早く読めるなら、作業の意味はあります。

distributionは一人の利用者の体験と混同しない

PageSpeed InsightsのPage Load Distributionsは、First Contentful PaintとDOM Content Loadedがdata内でFast、Average、Slowのどこに分かれるかを示します。これは、すべての利用者が同じ時間で表示を見ているという意味ではありません。通信環境、端末、読むpageの内容で体験は変わります。

だから、実測のdataがあるときも、officeの速い回線で一度開いた結果だけで判断しません。実際に使うmobile画面で主要pageを開き、説明が読めるまでに何が出るかを見ます。PageSpeed Insightsの結果は、見落としやすい問題を見つける材料です。siteの目的や読者の動きを代わりに決めるものではありません。

制作会社へ依頼するときは、scoreの画像だけでなく、対象URL、読者が最初に読む内容、残す機能、困っている場面を渡します。制作側はresourceと表示の順を調べられます。事業側は、どの説明、問い合わせ、計測を残すかを決めます。実測の速さと改善余地を分けて読めば、scoreを上げるためだけの修正を避けられます。

PageSpeed Insightsは、pageのすべてを一つの数字で採点する道具ではありません。利用者の速度を知り、改善できる候補を見つけ、読者が必要な情報へ進める画面を作るために使います。まず実測の区分と公開画面を見て、次に残す機能を決め、その後で一つずつ改善します。