LighthouseやPageSpeedInsightsのFCPやDCLのスコアの見方 千葉県の方へ

Core-i7で計測したLighthouseの結果の画像
千葉港の公衆電話の画像
千葉港の公衆電話

Lighthouseの計測結果はどれくらいがいいのか

前回PageSpeed InsightsのFCPやDCLについて、最適化スコアが94点でも実速の指標であるFCPやDCLがとても低かったということをご紹介させて頂きました。結果としてCSSのインライン化がうまくできておらずFCPやDCLを下げていたのですが、それを改善したら今度は最適化スコアが下がってしまいました。FCPやDCLは速くなったけどさすがに最適化スコア下がりすぎだな……と考え対応を模索していくうちにLighthouseにたどり着きました。FCPやDCLの他にも”様々な指標を調べるように”とGoogleも伝えております
そんなLighthouseを早速Chromeにインストールして計測しました。何度も何度も計測して対策を考えて、また計測して。とやっていくうちにあることに気づきました。
この計測結果、PCの処理能力に依存しているな……と。

何度も計測しているうちに、Core-i7ではなく、もう一台のCore-i3のPCだと自分のブログやサイトはどう開くかな??と気になったんですね。そしたらやはり遅いわけです。そんなことをやっているうちにそのPCでLighthouseを使ったら同じページでもスコアが全然違いました。

Core-i7で計測したLighthouseの結果の画像

Core-i3で計測したLighthouseの結果の画像

パフォーマンスの変わりようがすごい……なぜこうなるのかというと”最初に意味のある塗料”、”最初のインタラクティブ”、”一貫性のあるインタラクティブ”など読み込みに関する内容がCore-i3だとすごく遅くなっていました。赤くて赤くて……そのためパフォーマンスがガクっと下がっているようです。プログレッシブウェブアプリケーションのスコアが下がっているのもCore-i3だと”3Gで十分な速度でない”という注意がでるためです。Core-i7だとでません。

Lighthouseで何度も計測していると同じPCでもスコアが変わる時があります。おそらくメモリの働きなどPCのバックグラウンドで起きている処理の影響だと考えております。
PageSpeed Insightsの場合は処理能力が別々のデバイスで測定しても一貫した測定結果が表示されます。

Lighthouseの計測結果をどうみればいいのか?

PCの処理速度に依存しない”プログレッシブウェブアプリケーション(3G以外)”、”アクセシビリティ”、”ベストプラクティス”、”SEO”はそのまま見れると思います。
PCの処理速度に依存する部分のスコアは見方が難しいですよね。計測している自分の環境でどれくらいにしたらいいのか??というのが難しいかなと思うんですね。ただ、Lighthouseの良い点はPageSpeed Insightsにも出てこないような詳細内容がわかるという点ですよね。これはすごいわかりやすいですし、ありがたいですよね。ですので、Lighthouseが改善のための提案をしてくれている部分について、できる限りやってみてPageSpeed Insightsで測るのがいいのかなと考えます。

LighthouseとPageSpeedInsightsのFCPやDCLの関わり

Lighthouseで計測してパフォーマンスにある”最初に意味のある塗料”、”最初のインタラクティブ”、”一貫性のあるインタラクティブ”を改善するということはクリティカルレンダリングパスの改善にも繋がりますから、PageSpeed InsightsのFCPやDCLの改善ということですね。
ですが、ここでまた気づいたことがあります。

PageSpeed InsightsのFCPやDCLのスコアって閲覧して頂いているユーザーの方々のデバイスの処理能力に依存しているよね……

といのも、Google Chromeのデベロッパーツールからネットワークを開いたところで計測できるDCLの速度はPCの処理能力に依存していますし、PageSpeed InsightsのFCPやDCLのスコアはそういった別々の処理能力のPCで測った過去30日間の集計ということになります。

これはPageSpeed InsightsのFCPやDCLについて調べ対策をしたり、Lighthouseを使って使って使っていくうちに自分でたどり着いた答えだったのですが、Chrome User Experience Reportの”分析とベストプラクティス”のところにしっかり書いてありました。以下は英文を日本語訳したものの引用です。

サイトがより近代的なデバイスを備えたより多くの訪問者またはより高速なネットワークを介して頻繁に訪れる場合、サイトがうまく最適化されていなくても結果は「高速」と表示されることがあります。逆に、より多くのユーザーを惹きつけるように最適化されたサイト、または低速のデバイスやネットワークでユーザーの割合がより多い人口は「遅い」と表示されることがあります。

起点を越えた​​比較を行う場合、人口の違いを考慮に入れて管理することが重要です。デバイスの種類や接続の種類などの提供されるディメンションごとに分割し、人口の大きさ、原点にアクセスし、等々。

ということは、自分のブログやサイトを閲覧して下さるユーザーの方々が高速な処理能力のデバイスばかりの方々であれば、PageSpeed InsightsのFCPやDCLは速くなるでしょうし、反対に低スペックなデバイスの方々ばかりであればスコアが遅くなるということですね。

自分なりの指標が大切

ここまでくると指標はたくさん出てくるし、FCPやDCLのスコアの分析方法もユーザーの方々の環境に依存するということで『どうしたらいいのか…….』という感じになってしまうんですけど、自分なりの指標が大切なのかなと思います。自分のブログやサイトの目的は何か??それを通じて何がしたいのか??それをどんな人に届けたいのか又は届いているのか??といったことです。

LighthouseやPageSpeed Insightsの計測結果

×

自分なりの指標

これが大事になってくるのかなと思うんですね。

PCREPAIRのこのブログは回遊を目的としていません。このブログを通じてPCREPAIRを知ってほしいという認知を広めることを目的としております。そのため他のブログがやっているだろうこともやっていなかったりしますし、反対に他のブログがやっていないことをやっていたりします。自分なりに『ブログを通じてPCREPAIRを知ってもらうためにどうしたらいいだろうか??』というのをさんざん考えてそれを積み重ねてできあがったのが、今の状態です。今後もどんどん改善していく予定ではいますが。
ですので、自分なりの目標を定めてLighthouseやPageSpeed Insights、さらにGoogleアナリティクス。といったツールを使っていくといいのかなと考えます。

さらに、ある程度やってみて次に浮かんだのが『スコアも大事だけどユーザーの方々にとって役に立つ良い記事かかなきゃ。』ということです。お分かりかと思いますが、スコアだけでなく記事の内容も大事ですし、そういった記事を更新することが大事ですよね。バランスが大事だなというところにたどり着きました。

長くなってしまいました。お読み頂きました方々誠にありがとうございます。
宜しくお願い致します。