目次
対処法
参考:
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]
アニメーション
参考:
High Performance Animations | HTML5 Rocks
仕組み
参考:
Inside Look at Modern Web Browser Part 3 | Google Developers [Official]
Lighthouse
参考:
Lighthouse によるウェブアプリの監査 | Google Developers [公式]
Lighthouse Performance Scoring | Google web.dev
Lighthouse | Chrome ウェブストア [公式]
ページエクスペリエンス
参考:
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):累積レイアウトシフト数
参考:
Performance Audits | web.dev [Official]
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.github.io)
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