パフォーマンスはユーザー エクスペリエンスの重要な要素です。ページの読み込み速度とユーザー入力への応答速度は、ユーザーがサイトをどのように認識するかに大きな影響を与え、ユーザーがウェブサイトに留まるか離脱するかを左右する可能性があります。このページでは、ウェブ パフォーマンスに関するさまざまなトピックについて、ウェブサイトを高速かつ高速に保つために役立つ豊富な情報を紹介します。
パフォーマンスについて詳しくは、Google では、始めるにあたって役立つ包括的なコースを用意しています。
Core Web Vitals の 3 つの指標、その仕組み、優れたユーザー エクスペリエンスのためにそれらが重要である理由について理解を深めましょう。
Core Web Vitals 指標について学んだら、これらのガイドで最適化方法をご確認ください。
指標について詳しく説明しているガイドをまとめたコレクションで、Core Web Vitals についてさらに詳しく学びましょう。
ベースラインとして新たに利用可能になった、パフォーマンスを向上させる新機能をご確認ください。
ウェブに関する主な指標を改善し、その結果ビジネス指標が向上した企業の事例をご覧ください。
Chrome DevTools を使用してウェブサイトのパフォーマンスの問題をデバッグする方法について説明します。
学習コース

ウェブ パフォーマンスは複雑で多面的な分野ですが、学ぶことは可能です。パフォーマンスについて初めて学ぶ場合は、まずパフォーマンスの基礎を学び、より高度なトピックに進むことができます。コースを完了すると、学んだことをすぐに実践できるようになります。

パフォーマンスを学びましょう！

Core Web Vitals の指標は、ユーザー エクスペリエンスに焦点を当てた 3 つの指標です。ページのパフォーマンスとユーザビリティ（主観的な読み込み時間、視覚的な安定性、ユーザー入力への応答性など）を測定します。Core Web Vitals を初めてご利用になる場合は、これらのガイドで仕組みを理解し、最適化方法のスタート地点としてご活用ください。
LCP は、最も大きなコンテンツがページに表示されるまでの時間を測定する指標です。LCP が低いページは、ページの読み込みが速いことを示します。
詳細
CLS は、ページのレイアウトに予期しない変化がないか監視して、レイアウトの安定性を測定する指標です。CLS が低いページは、ページのレイアウトが安定しており、ユーザーが操作しようとしたときに予期せず変化しないことをユーザーに示します。
詳細
INP は、ユーザー入力に対するページの応答性を測定する指標です。INP の低いページは、操作したページがすばやく反応することをユーザーに知らせるため、ウェブサイトの信頼性と快適性が高まります。
詳細
ウェブに関する主な指標はそれぞれ最適化して、ユーザー エクスペリエンスを改善できます。これらのガイドでは、実績のある手法を実践してウェブサイトのパフォーマンスと信頼性を高め、ユーザーのエンゲージメントを高めて離脱率を低減する方法を詳しく説明しています。
ユーザーがページ上の最も重要なコンテンツをできるだけ早く見ることができるように、LCP を最適化する方法を学びます。
詳細
ユーザーがウェブサイトの安定性と使いやすさを期待できるように、CLS を最適化する方法を学びます。
詳細
ユーザーがウェブサイトのインタラクションに迅速に応答することを期待できるように、ユーザー向けに INP を最適化する方法を学びます。
詳細
3 つの Core Web Vitals 指標とその最適化方法は、学習のスタート地点として最適ですが、それ以外にも学ぶべきトピックはたくさんあります。このコンテンツ コレクションは、コンバージョンの測定方法やデバッグ方法に加え、Cookie に関する通知やカルーセルなど、ユーザー インターフェースに関する一般的な問題についての追加のベスト プラクティスを理解するのに役立ちます。
詳細
パフォーマンスを改善すると、ユーザー エクスペリエンスが向上するだけでなく、ビジネスの成長にもつながります。これらの企業が Core Web Vitals を改善し、ビジネス指標を向上させた方法をご覧ください。
Disney+ Hotstar が INP を 61% 削減して、リビングルーム デバイスでの週あたりのカード表示回数を 100% 増やした方法をご覧ください。
詳細
PubTech の同意管理プラットフォームが、お客様のウェブサイトの INP を最大 64% 削減し、広告の視認性を最大 1.5% 改善した方法をご覧ください。
詳細
Taboola が Long Animation Frames API（LoAF）を使用して、パブリッシャー パートナーのウェブサイトで INP を最大 36% 改善した方法をご覧ください。
詳細

ベースラインは、ウェブ プラットフォームの機能をすべての主要なブラウザ エンジンで安全に使用できるタイミングをウェブ デベロッパーに知らせます。以下に、ベースラインとして新たに利用可能になったウェブ パフォーマンス関連の機能をいくつか示します。
CSS プロパティ content-visibility は、2024 年 9 月にベースラインとして新たに利用可能になりました。
AVIF 画像形式は、2024 年 1 月にベースラインとして新たに利用可能になりました。
モジュールのプリロードがベースラインになりました。2023 年 9 月に新たに利用可能になりました。
Server-Timing HTTP レスポンス ヘッダーは、2023 年 3 月にベースラインとして新たに利用可能になりました。

Chrome DevTools は、ウェブ アプリケーションのパフォーマンスを把握して改善するためのツールなど、ウェブ アプリケーションをデバッグするためのデベロッパー向けツールのスイートです。
DevTools の [Network] パネルには、ページが読み込んだすべてのリソースと、読み込みに要した時間が表示されます。このパネルを使用して、リソース負荷に関連するパフォーマンスの問題を特定する方法を学習します。
詳細
DevTools の [パフォーマンス] パネルには、記録セッション中のページのパフォーマンスに関する非常に詳細な情報が表示されます。メインスレッドのアクティビティ、ネットワーク アクティビティ、パフォーマンスの問題の特定と修正に役立つその他のツールなどが表示されます。
詳細
[メモリ] パネルには、ページの JavaScript によって使用されているメモリ量が表示されます。このパネルの使用方法を学ぶことで、ページの JavaScript によって発生したメモリ関連の問題を特定して修正できます。
詳細