PageSpeed InsightsのFCPとDCLは最初に読める表示とpageの準備完了を分けて見る
公開日： 執筆：佐藤
PageSpeed InsightsのFCPとDCLを見たときは、二つを同じ「表示速度」として合計しません。FCPは画面へ最初のcontentが表示されるまでの目安で、DCLはpageのdocumentが読み込みを終えた時点に関わる指標です。読者が本文を読み始められない問題と、page全体の準備が遅い問題では、先に確認する画面も直す場所も変わります。
Googleは1月10日、PageSpeed Insightsのspeed scoreをFirst Contentful PaintとDOM Content Loadedのmedianで判定すると案内しました。Page Load Distributionsでは、FCPとDCLのeventがChrome User Experience Report内でFast、Average、Slowのどこに分かれるかを示します。数値の名前を覚えることより、読者が最初に何を見られるかと、pageがどこで待たせているかを分けて確かめることが必要です。 Google Search Central Blog
FCPは読者が最初に何を読めるかを見る手掛かりにする
FCPが示す最初のcontentは、必ずしも問い合わせbuttonやserviceの説明とは限りません。logo、背景色、写真の一部が先に出ても、読者が知りたい料金、対応範囲、連絡先が読めなければ、pageを開いた意味はまだ十分に伝わりません。FCPを見るときは、数値だけでなくmobile browserの最初の画面を開き、何が表示されるかを一緒に見ます。
たとえば、検索広告からservice pageへ来る人が、最初に大きな画像だけを見て本文を待つ場合を考えます。画像が事業の説明に必要でも、本文や見出しがその後まで出なければ、読者は何を頼めるpageか判断できません。画像を消すかどうかより、最初に見せる説明、画像、電話やformへの案内の順をどうするかを決めます。
FCPを改善するために、公開pageの文章を短くすればよいわけでもありません。説明を削っても、読者が次に何をすればよいか分からなくなれば、pageの目的を失います。先に、最初の画面で必要な一文、条件、次の行動を決めます。そのうえで、画像、stylesheet、JavaScriptなど、表示を待たせている要素を制作側と調べます。
DCLはpageが読めることと操作できることを分けて確かめる
DCLが遅い場合でも、読者がすでに本文を読めることがあります。反対に、本文が出ていても、menu、form、地図、予約buttonのような操作が使えなければ、目的の行動へ進めません。DCLを見るときは、documentの読み込みが終わるまで何を待たせているかと、読者が使う操作がいつ使えるかを分けます。
たとえば、問い合わせformで外部scriptを使っている場合を考えます。早く見せるためにscriptを外すと、formが送れなくなることがあります。menuの開閉をJavaScriptへ任せている場合も、読み込みの途中やscriptが動かない環境で主要pageへ進めるかを確認します。DCLを短くすることと、必要な機能を失わないことは、同時に考えます。
DCLの数字が高いからといって、すべての外部serviceを止める前に、そのserviceの役割を調べます。アクセス解析、広告計測、地図、font、SNS buttonは、管理する人と必要なpageが違う場合があります。外してよいかを決める人と、読み込みの順を直す人を分け、何を変えたかを記録します。
二つの数値から一つのURLを選んで確認する
FCPとDCLがどちらも気になるときは、site全体を一度に直しません。検索や広告から最初に開かれるURLを一つ選び、mobile browserで最初の表示、本文、問い合わせへの操作を順に見ます。次にPageSpeed InsightsでFCP、DCL、resourceに関する情報を確認し、画面で見た問題と結びつく候補を探します。
確認の順序は、次のように考えます。最初の説明が遅いならFCPに関わる表示の順を見ます。本文は読めるのにformやmenuが遅いならDCLに関わるscriptや外部serviceを調べます。どちらも問題が見えないのにscoreだけが低いなら、読者が困る場面を見つけるまで大きな改修を始めません。数値が低いことと、優先して直すべき場面があることは別です。
仮に画像を小さくする変更をしたら、同じURLでFCPとDCLを見直します。その後、mobile browserで最初の説明、画像、form、電話linkを確かめます。画像を変えたのにDCLが大きく変わらないなら、ほかのresourceが待たせている可能性を考えます。数字の変化が小さくても、最初の説明が早く読めるようになれば、読者にとっての意味はあります。
記録するのは数値だけでなく読者が待つ場面である
改善前後には、URL、FCPとDCLの区分、最初に表示された内容、使えるまで待った操作、変えたresourceを残します。「速くなった」とだけ書くと、次の改修でどこまで戻すべきか分かりません。公開画面の変化と数値を同じ記録にすれば、別のpageで似た問題が出たときも比較できます。
制作会社へ渡す場合は、FCPやDCLの画像だけを送らず、読者が困る場面を添えます。「広告から開いた直後にサービス内容が読めない」「formの送信buttonを押せるまで待つ」といった状態です。制作側は画像、stylesheet、JavaScript、server responseを調べます。事業側は、最初に何を伝え、どの機能を残すかを決めます。
FCPとDCLは、pageを一つの速さで決めないための手掛かりです。FCPでは最初に読める内容を、DCLでは必要な操作までの準備を確かめます。二つを分けて見れば、scoreを上げるためだけに内容を減らさず、読者が必要な情報と行動を守りながら改善できます。
関連記事
