PageSpeed InsightsのFCPやDCLについて 最適化スコアか体感か 千葉県の方へ

PageSpeed Insightsの計測結果の画像
千葉市稲毛区稲丘町の風景の画像
千葉市稲毛区稲丘町の風景

PageSpeed Insightsについて見直してみました

PageSpeed Insightsの計測結果の画像

最近、PageSpeed Insightsの内容にFCPとDCLが追加されました。FCPはFirst Contentful Paintの略称でページがユーザーに視覚的に届くまでの時間。
DCLはDOM Content Loadedの略称でページのHTMLを解析し終わるまでの時間です。

今回考えた内容が、最適化スコアは高いけどDCLとFCPが遅いことです。
スマートフォンでWi-Fiを使わずに4Gの設定で自分のブログをタップすると確かに遅く感じます。
PageSpeed Insightsでは1.8sと1.9sが表示されていますが実際はそれより遅い感覚でした。

最適化スコアは94点だけど遅い……最適化スコアかそれともDCLやFCPか。というお話です。

DCLの確認方法

GoogleChromeのデベロッパーツールでDCLが表示されている画像

PageSpeed Insightsに出てくるFCPやDCLの計測結果は1週間くらい経たないと変化しないようなので、リアルタイムでのDCLの計測方法です。

Google ChromeのデベロッパーツールからNetworkを開いたところで確認できます。ページを更新する度に計測結果を表示してくれます。

このDCLですがPCの処理能力にも依存していそうです。

2台のPCで同ページを計測したら全く違う数字が表示されました。(画像はシークレットモードでの計測結果です。)

同じ90点台でもDCLが全然違う

PCREPAIRのホームページのDCLの計測結果

PCREPAIRのホームページなのですが、PageSpeed Insightsの最適化スコアはブログと同じように90点台です。正確には93点でブログより1点低いです。

ですがホームページのDCLは121msでした。sでなくms……最適化スコアは同じ90点台でもこんなに違うようです。

ブログとホームページを比較したら

最適化 94と93
DCL  3.76sと121ms

これには驚きました。
PageSpeed Insightsの最適化スコアが高くてもFCPやDCLが遅い場合もあるということと、反対に最適化スコアが低くてもFCPやDCLは速い場合があるということに気づきました。

DCLやFCPを遅くしている原因

なんでこんなにブログのDCLが遅いんだろう……と調べた結果、CSSのインライン化でした。
プラグインを使ってCSSのインライン化をしていたのですが、その状態でページのソースを確認するとズラーーーーーーーーーーーーーーーーーッとコードが記述された後にようやくbodyの部分のHTMLが出てくるという状態でした。

これは自分でも酷い………と自分でも感じました。

下の画像がCSSのインライン化をはずした後のDCLの計測結果です

WordpressのCSSのインライン化のプラグインをはずした後のDCLの計測結果の画像

686msになりました。3.76sから686msへ。自分のスマートフォンでテストしてもだいぶ体感速度は速くなったと感じます。

プラグインを使ってCSSのインライン化をすると最適化スコアは15点上がります。94点になります。ですがDCLは3秒ほど遅くなっていました。

プラグインをはずすと最適化スコアは79点まで下がります。ですがDCLは3秒くらい速くなりました。

スコアかUXか

プラグインをはずしました。スコアは大切かもしれませんが、それ以前にUXが大事だと考えております。

どんなにPageSpeed Insightsのスコアが良くてもそれはあくまで指標であり、実際のユーザーの方々が体感として『遅いな』と感じて潜在的にストレスになっているのであればまだまだ改善点があると考えております。

最後に今までのことをお詫び申し上げます。プラグインを使うことで最適化スコアが15点ほど高くなり、PageSpeed Insightsになかったとはいえ自身の知識不足からFCPやDCLのことを考慮せず、高速化できていると間違え、それで良しとしておりました。

FCPやDCLの点に気づけなかったことを本当に申し訳なく思っております。

おそらくユーザーの方々に遅いなぁという体感を配信してしまっていたと思います。誠に申し訳ございませんでした。
現状、最適化スコアはパソコンが79点とモバイルが66点なので、今後はDCLやFCPを考えながら最適化スコアも高くしていきたいと考えております。

後日、この記事の続きを書きました。
LighthouseやPageSpeedInsightsのFCPやDCLのスコアの見方 自分なりの指標が大切