概要
参考：
対処法
参考：
CSS の実装方法を少し改善するだけで、Web ページの読み込み／表示を最適化するテクニックのまとめ | コリス
Web ページの表示が早くなる！既存ページのクリティカル レンダリング パスを最適化するオンラインツール | コリス
Largest Contentful Paint を最適化する | web.dev
First Input Delay を最適化する | web.dev
Cumulative Layout Shift を最適化する | web.dev
Eliminate Render-Blocking Resources | web.dev
ペイントの複雑さの簡略化とペイントエリアの縮小 | Google Developers [Official]
コンポジタ専用プロパティの優先使用、およびレイヤー数の管理 | Google Developers [Official]
サイトに初回ペイントの遅延を引き起こすリソースを使用しない | Google Developers [Official]
リフロー (Reflow)
要素のリフローを最小限に抑える。
- DOM の階層を必要以上に深くしない。
- CSS ルールを最小限に抑える → 不要な CSS ルールを削除する。
- アニメーションをフロー外で適用する。
position: absoluteposition: fixed
- 複雑な CSS セレクタの使用を避ける
- 子孫セレクタを使用しない
参考：
ブラウザのリフローを最小限にする | Google Developers [公式]
アニメーション
参考：
High Performance Animations | HTML5 Rocks
仕組み
参考：
Inside Look at Modern Web Browser Part 3 | Google Developers [Official]
Lighthouse
リポジトリ：
入手：
Lighthouse | Chrome ウェブストア [公式]
参考：
Lighthouse によるウェブアプリの監査 | Google Developers [公式]
Lighthouse Performance Scoring | Google web.dev
ページエクスペリエンス
- モバイル：2021年6月から、モバイル向け Google 検索に導入された。
- デスクトップ (PC)：2022年2月から、デスクトップ向け Google 検索に導入された。
参考：
ページエクスペリエンスアップデートの展開を完了 | 海外 SEO 情報ブログ
ページスピードを Google はどのようにしてランキング要因に組み込んだのか？ | 海外 SEO 情報ブログ
ページエクスペリエンスのランキングを PC 検索にも拡大 | 海外 SEO 情報ブログ
2022年2月よりデスクトップにもページエクスペリエンスをランキングシグナルに展開！ | デジタルマーケティングブログ
Google 検索へのページエクスペリエンスの導入時期 | Google Developers [公式]
Google 提供ツール
参考：
Make the Web Faster | Google Developers [Official]
web.dev
コアウェブバイタル (Core Web Vitals)
- LCP (Largest Contentful Paint)：最大視覚コンテンツの表示時間
- FID (First Input Delay)：初回入力までの遅延時間
- CLS (Cumulative Layout Shift)：累積レイアウトシフト数
→ Measure
公式サイト：
参考：
Web Vitals | web.dev [Official]
The Business Impact of Core Web Vitals | web.dev
Largest Contentful Paint (LCP) | web.dev [Official]
First Input Delay (FID) | web.dev [Official]
Cumulative Layout Shift (CLS) | web.dev [Official]
Test My Site
公式サイト：
Test My Site – モバイルサイトの速度を比較しましょう | Google [公式]
Web Vitals Chrome Extension
入手：
Web Vitals | Chrome ウェブストア [公式]
リポジトリ：
WebPageTest
公式サイト：
WebPageTest – Website Performance and Optimization Test [Official]
リポジトリ：
WPO-Foundation/webpagetest: Official repository for WebPageTest – GitHub
ドキュメント：
WebPageTest Documentation [Official]
参考：
webpagetest.org を利用した Web ページの表示速度測定とチューニング – Qiita
サイトの表示速度を link タグの rel=”preconnect” で上げる／WebPageTest で事前接続を調べる | 些細な日常
WebPageTest の使い方／サイト表示高速化の計測ツール | Heysho
スマホでアクセスした時に、ファーストビューの表示までどのくらいかかる？ WebPageTest ですぐに調べてみよう！ | アイデアマンズブログ
WebPageTest でサイトのパフォーマンスを定期計測する | アクトインディ株式会社
WebPageTest から始める継続的パフォーマンス改善 | スライド置き場 (azu)
Private Instances | WebPageTest Documentation [Official]
WebPageTest API Integrations | WebPageTest Documentation [Official]
WebPageTest GitHub Action | GitHub Marketplace [Official]
Sign Up – WebPageTest by Catchpoint | WebPageTest [Official]
GAS WebPageTest
リポジトリ：
uknmr/gas-webpagetest – GitHub
参考：
gas-webpagetest で WebPageTestの パフォーマンス計測を自動化、可視化する | Web Scratch
