パフォーマンスの監査
これらを確認することにより、ユーザーがページ内のコンテンツを閲覧したり操作したりすることができるようにページが最適化されているかどうかを確認することができます。
- パフォーマンスの監査スコア #
- Lighthouse performance scoring Learn how Lighthouse generates the overall Performance score for your page.
- Lighthouse performance scoring
- 指標 #
- First Contentful Paint Learn about Lighthouse's First Contentful Paint metric and how to measure and optimize it.
- Speed Index Learn about Lighthouse's Speed Index metric and how to optimize it.
- Total Blocking Time (合計ブロック時間) LighthouseのTotal Blocking Timeメトリックの概要、それを評価および最適化する方法について学びます。
- Largest Contentful Paint Learn about Lighthouse's Largest Contentful Paint metric and how to measure and optimize it.
- Cumulative Layout Shift Learn about the Cumulative Layout Shift (CLS) metric and how to optimize for it.
- First Contentful Paint
- 改善項目 #
- Eliminate render-blocking resources Learn about the render-blocking-resources audit.
- Properly size images Learn about the uses-responsive-images audit.
- Defer offscreen images Learn about the offscreen-images audit.
- Minify CSS Learn about the unminified-css audit.
- Minify JavaScript Learn about the unminified-javascript audit.
- Remove unused CSS Learn about the unused-css-rules audit.
- 画像を効率的にエンコードする uses-optimized-images監査について学びます。
- Serve images in modern formats Learn about the uses-webp-images audit.
- テキストの圧縮を有効にする テキストの圧縮を有効にすると、ウェブページの読み込みパフォーマンスが向上する仕組みについて学びます。
- 要求されるオリジンへの事前接続 uses-rel-preconnect監査について学習します。
- Reduce server response times Learn about the server-response-time audit.
- Avoid multiple page redirects Learn why page redirects slow down your web page's load speed and how to avoid them.
- Preload key requests Learn about the uses-rel-preload audit.
- Use video formats for animated content Learn about the efficient-animated-content audit.
- Reduce the impact of third-party code Learn how third-party code, like advertising networks and analytics services, affects page load performance, and how you can optimize third-party code.
- 合成されていないアニメーションは避けてください 「合成されていないアニメーションを避ける」灯台監査に合格する方法。
- ファサードを使用したサードパーティリソースの遅延読み込み ファサードを使用してサードパーティのリソースを遅延読み込みする機会について学習します。
- Eliminate render-blocking resources
- 診断 #
- Avoid enormous network payloads Learn how to improve your web page's load time by reducing the total file size of resources you serve to your users.
- Serve static assets with an efficient cache policy Learn how caching your web page's static resources can improve performance and reliability for repeat visitors.
- 過大な DOM サイズを回避 大規模な DOM によって Web ページのパフォーマンスが低下してしまうことと、読み込み時に DOM のサイズを縮小する方法を学びます。
- クリティカル要求をチェーン化しない クリティカル要求チェーンとは何か、Webページのパフォーマンスにどのように影響するのか、その影響を低減する方法について説明します。
- User Timing marks and measures Learn how the User Timing API can help you get real-world performance data for your web page.
- JavaScriptの実行時間を短縮する JavaScriptの実行によりページのパフォーマンスが低下すること、またJavaScriptの実行を高速化する方法について学びます。
- Minimize main thread work Learn about the browser's main thread and how you can optimize your web page to reduce main thread load and improve performance.
- Ensure text remains visible during webfont load Learn how to use the font-display API to make sure your web page text will always be visible to your users.
- Keep request counts low and transfer sizes small Learn how high resource counts and large transfer sizes affect load performance. Get strategies for reducing request counts and transfer sizes.
- Ensure the page can be restored from the back/forward cache How to use Lighthouse to test if a page can be restored from the back/forward cache.
- Avoid enormous network payloads
- Retired metrics #
- Time to Interactive Learn about Lighthouse's Time to Interactive metric and how to measure and optimize it.
- First Meaningful Paint Learn about Lighthouse's deprecated First Meaningful Paint metric and how to measure and optimize it.
- First CPU Idle Learn about Lighthouse's deprecated First CPU Idle metric and how to optimize it.
- Max Potential First Input Delay Learn about Lighthouse's deprecated Max Potential First Input Delay metric and how to measure and optimize it.
- Time to Interactive