ウェブ パフォーマンス
パフォーマンスはユーザー エクスペリエンスの重要な要素です。ページの読み込み速度とユーザー入力への応答速度は、ユーザーがサイトをどのように認識するかに大きな影響を与え、ユーザーがウェブサイトに留まるか離脱するかを左右する可能性があります。このページでは、ウェブ パフォーマンスに関するさまざまなトピックについて、ウェブサイトを高速かつ高速に保つために役立つ豊富な情報を紹介します。
次のページに進んでください。
パフォーマンスの学習
パフォーマンスについて詳しくは、Google では、始めるにあたって役立つ包括的なコースを用意しています。
ウェブに関する主な指標
Core Web Vitals の 3 つの指標、その仕組み、優れたユーザー エクスペリエンスのためにそれらが重要である理由について理解を深めましょう。
Core Web Vitals を最適化する
Core Web Vitals 指標について学んだら、これらのガイドで最適化方法をご確認ください。
Core Web Vitals について詳しく
指標について詳しく説明しているガイドをまとめたコレクションで、Core Web Vitals についてさらに詳しく学びましょう。
ベースライン 新しく利用可能になったパフォーマンス機能
ベースラインとして新たに利用可能になった、パフォーマンスを向上させる新機能をご確認ください。
事例紹介
ウェブに関する主な指標を改善し、その結果ビジネス指標が向上した企業の事例をご覧ください。
Chrome DevTools でパフォーマンスをデバッグする
Chrome DevTools を使用してウェブサイトのパフォーマンスの問題をデバッグする方法について説明します。
学習コース
パフォーマンスについて
ウェブ パフォーマンスは複雑で多面的な分野ですが、学ぶことは可能です。パフォーマンスについて初めて学ぶ場合は、まずパフォーマンスの基礎を学び、より高度なトピックに進むことができます。コースを完了すると、学んだことをすぐに実践できるようになります。
Core Web Vitals
Core Web Vitals の指標は、ユーザー エクスペリエンスに焦点を当てた 3 つの指標です。ページのパフォーマンスとユーザビリティ(主観的な読み込み時間、視覚的な安定性、ユーザー入力への応答性など)を測定します。Core Web Vitals を初めてご利用になる場合は、これらのガイドで仕組みを理解し、最適化方法のスタート地点としてご活用ください。
Largest Contentful Paint(LCP)
LCP は、最も大きなコンテンツがページに表示されるまでの時間を測定する指標です。LCP が低いページは、ページの読み込みが速いことを示します。
Cumulative Layout Shift(CLS)
CLS は、ページのレイアウトに予期しない変化がないか監視して、レイアウトの安定性を測定する指標です。CLS が低いページは、ページのレイアウトが安定しており、ユーザーが操作しようとしたときに予期せず変化しないことをユーザーに示します。
Interaction to Next Paint(INP)
INP は、ユーザー入力に対するページの応答性を測定する指標です。INP の低いページは、操作したページがすばやく反応することをユーザーに知らせるため、ウェブサイトの信頼性と快適性が高まります。
Core Web Vitals を最適化する
ウェブに関する主な指標はそれぞれ最適化して、ユーザー エクスペリエンスを改善できます。これらのガイドでは、実績のある手法を実践してウェブサイトのパフォーマンスと信頼性を高め、ユーザーのエンゲージメントを高めて離脱率を低減する方法を詳しく説明しています。
Largest Contentful Paint(LCP)を最適化する
ユーザーがページ上の最も重要なコンテンツをできるだけ早く見ることができるように、LCP を最適化する方法を学びます。
Cumulative Layout Shift(CLS)を最適化する
ユーザーがウェブサイトの安定性と使いやすさを期待できるように、CLS を最適化する方法を学びます。
インタラクションから次のペイントへの最適化(INP)
ユーザーがウェブサイトのインタラクションに迅速に応答することを期待できるように、ユーザー向けに INP を最適化する方法を学びます。
Core Web Vitals について詳しく
3 つの Core Web Vitals 指標とその最適化方法は、学習のスタート地点として最適ですが、それ以外にも学ぶべきトピックはたくさんあります。このコンテンツ コレクションは、コンバージョンの測定方法やデバッグ方法に加え、Cookie に関する通知やカルーセルなど、ユーザー インターフェースに関する一般的な問題についての追加のベスト プラクティスを理解するのに役立ちます。
事例紹介
パフォーマンスを改善すると、ユーザー エクスペリエンスが向上するだけでなく、ビジネスの成長にもつながります。これらの企業が Core Web Vitals を改善し、ビジネス指標を向上させた方法をご覧ください。
Disney+ Hotstar
Disney+ Hotstar が INP を 61% 削減して、リビングルーム デバイスでの週あたりのカード表示回数を 100% 増やした方法をご覧ください。
PubTech
PubTech の同意管理プラットフォームが、お客様のウェブサイトの INP を最大 64% 削減し、広告の視認性を最大 1.5% 改善した方法をご覧ください。
Taboola
Taboola が Long Animation Frames API(LoAF)を使用して、パブリッシャー パートナーのウェブサイトで INP を最大 36% 改善した方法をご覧ください。
新たに利用可能になったウェブ パフォーマンスの機能のベースライン
ベースラインは、ウェブ プラットフォームの機能をすべての主要なブラウザ エンジンで安全に使用できるタイミングをウェブ デベロッパーに知らせます。以下に、ベースラインとして新たに利用可能になったウェブ パフォーマンス関連の機能をいくつか示します。
Chrome DevTools でパフォーマンスをデバッグする
Chrome DevTools は、ウェブ アプリケーションのパフォーマンスを把握して改善するためのツールなど、ウェブ アプリケーションをデバッグするためのデベロッパー向けツールのスイートです。
[ネットワーク] パネル
DevTools の [Network] パネルには、ページが読み込んだすべてのリソースと、読み込みに要した時間が表示されます。このパネルを使用して、リソース負荷に関連するパフォーマンスの問題を特定する方法を学習します。
[パフォーマンス] パネル
DevTools の [パフォーマンス] パネルには、記録セッション中のページのパフォーマンスに関する非常に詳細な情報が表示されます。メインスレッドのアクティビティ、ネットワーク アクティビティ、パフォーマンスの問題の特定と修正に役立つその他のツールなどが表示されます。
[Memory] パネル
[メモリ] パネルには、ページの JavaScript によって使用されているメモリ量が表示されます。このパネルの使用方法を学ぶことで、ページの JavaScript によって発生したメモリ関連の問題を特定して修正できます。