この記事は何
ウェブページの表示速度を早くするためにできることは無いか調べた時のメモ。 調べたきっかけは、Fastlyで障害発生の記事を読んでCDNについて調べている時にふと気になったため。
PageSpeed Insights
ウェブページのコンテンツを解析した上で、ページの読み込み時間の短縮方法を調べたりボトルネックとなっている箇所の分析をすることができるツール。１００点満点中何点かの点数がついて、「Good」、「Medium」、「Low」のどれに当てはまるか判定される。
Good: ページには、パフォーマンスに関するおすすめの方法が最大限適用されており、最適化の余地がほとんどありません。ページのスコアは 80 以上になります。
Medium: ページには、パフォーマンスに関する一般的なおすすめの方法の一部が実装されておらず、ある程度最適化の余地があります。ページのスコアは 60～79 の範囲になります。
Low: ページは最適化されておらず、最適化すべき点がかなり多くあります。ページのスコアは 0～59 の範囲になります。 引用元：PageSpeed Insights について | Google Developers
First Contentful Paint（FCP）はページに含まれるDOMコンテンツのどれかが描画されるまでの時間であり、参考文献によると1.8sec以下を目指すべき。First Contentful Paint（FCP）などのイメージは以下を参照。
TLDR; of Paint Metrics
— Katie Hempenius (@katiehempenius) 2019年10月21日
- First Paint (FP):
when *anything visually different than before* is rendered
- First Contentful Paint (FCP):
when *any DOM content* is rendered
- First Meaningful Paint (FMP):
when *meaningful content* is rendered pic.twitter.com/CmWY4W0jKB
ウェブ表示速度と検索結果の関係性
上記ブログによると、
この ”Speed Update” （と私たちは呼んでいます）は、ユーザーに本当に遅い体験を提供しているようなページについてのみ影響し、ごくわずかな割合のクエリにしか影響しません。
との記述があるので、早ければランキングが上がるというよりも過度に遅いとランキングを下げられる可能性があると読み取れる。
参考文献
- First Contentful Paint (FCP)
- Largest Contentful Paint (LCP)
- PageSpeed Insights について | Google Developers
Test my site
Test My Site は Google が提供する無料のツールで、お客様のモバイルサイトの速度を測定し、ユーザー エクスペリエンスを向上するための最適化案を提示します。 (引用元)
こちらもPageSpeed Insightsと同様に速度を測定できる、ただしこちらは『Chrome ユーザー エクスペリエンス レポート（CrUX）で収集された実際のデータに基づいて』サイトに含まれるページの表示速度を求めているという。ページ速度とサイト速度は同じものではなく、
- ページ速度：サイトに含まれるどこか 1 ページの表示速度であり、First Contentful Paint（FCP）に基づいた値になる（(参考文献：FAQ 速度の概要)）
- サイト速度：サイト内のすべてのページの表示速度に基づいた速度（(参考文献：FAQ 速度ツールについて)）
となっている。PageSpeed Insightsが開発者向けのツールであり、Test my siteはより簡単に使えるツールという立ち位置？
