色粉を使ったカラフルなレイアウトの変化を体験しながら笑っている男性。

相互作用と次のペイントの測定

インタラクション先 次のペイント

男性は次の絵の具やカラフルなレイアウトの変更と対話しながら笑っていました。

相互作用の測定と 次のペイント

による: サイモン | カテゴリー: ページ速度
発行日: 2024 年 1 月 9 日

ユーザーが情報への即時アクセスを期待するデジタル時代では、Web サイトのパフォーマンスがユーザーの満足度を決定する上で重要な役割を果たします。 Google PageSpeed Insights は、Web 開発者やサイト所有者が Web サイトのパフォーマンスを分析して最適化するのに役立つ強力なツールです。

ユーザー エクスペリエンスに大きな影響を与える 2 つの重要な指標は、インタラクションと次のペイントです。この記事では、これらの指標の重要性を詳しく掘り下げ、Google PageSpeed Insights を使用して指標を効果的に測定および改善する方法を検討します。

これは 2024 年 3 月から FID に代わる Core Web Vitals 標準指標となり、将来に影響を与えることを覚えておいてください。 ページスピードスコア.

インタラクションの理解と 次のペイント

交流

インタラクションとは、Web ページが完全にインタラクティブになり、ユーザーがその要素をシームレスに操作できるようになるまでにかかる時間を指します。これはユーザーのエンゲージメントと満足度に直接影響するため、重要な指標です。インタラクション時間が遅いと、イライラしたユーザーがサイトを完全に読み込む前、または入力に応答する前にサイトを放棄する可能性があります。

Google PageSpeed Insights でのインタラクションの測定には、次のようなさまざまな要素の分析が含まれます。

インタラクティブ化までの時間 (TTI)

TTI は、Web ページが完全にインタラクティブになり、ユーザーがボタンをクリックしたり、フォームに入力したり、動的要素を操作したりできる瞬間です。グーグル ページ速度 Insights は、ページの読み込みが開始されてからメインスレッドがアイドル状態になるまでにかかる時間に基づいて TTI を計算します。

最初の入力遅延 (FID)

FID は、ボタンのクリックやオプションの選択など、ユーザーが初めてページを操作するのにかかる時間を測定します。これはインタラクションの重要な側面であり、FID が低いほどエクスペリエンスの応答性が高いことを示します。

それは違う 画像

ロードがいかに速いか

JS がアクティブになった後

ペイント

Next Paint は、Web ページの視覚的な側面、特にコンテンツが表示されるまでにかかる時間に焦点を当てます。次のペイントを素早く行うと、Web サイトの読み込みが速いことがユーザーに認識され、ポジティブなユーザー エクスペリエンスに貢献します。

次のペイントの重要な要素は次のとおりです。

最初のコンテンツフル ペイント (FCP)

FCP は、ブラウザがページ上の最初のコンテンツをレンダリングするのにかかる時間を測定します。これにより、ページ全体がまだ完全に読み込まれていない場合でも、ユーザーが意味のあるものをどれだけ早く表示できるかについての洞察が得られます。

最大のコンテンツフル ペイント (LCP)

LCP は、最大のコンテンツ要素がユーザーに表示されるまでにかかる時間を測定します。 Google では、LCP が 2.5 秒以下であれば良好であると判断し、ページの読み込みが速いことを示します。

相互作用と次のペイントの測定 Google PageSpeed Insights を使用する

インタラクションと次のペイントの重要性を理解したところで、Google PageSpeed Insights を使用してこれらの指標を測定する方法を見てみましょう。

CLS の一般的な原因の 1 つは、サイズが指定されていない画像やメディア要素が含まれていることです。これらの要素が読み込まれると、要素に必要なスペースが動的に割り当てられるため、レイアウトがシフトする可能性があります。幅の指定と 画像の高さ属性により、ブラウザが必要なスペースを確保できるようになり、レイアウトが変更される可能性が軽減されます。.

インタラクションと次のペイントの重要性を理解したところで、Google PageSpeed Insights を使用してこれらの指標を測定する方法を見てみましょう。

Googleへのアクセス ページスピードに関する洞察

訪問 Google PageSpeed Insights Web サイトにアクセスし、分析する Web ページの URL を入力します。クリックしてください "分析する」ボタンをクリックして評価を開始します。

結果の確認

Google PageSpeed Insights は、モバイル版とデスクトップ版の両方のスコアを含む、Web サイトのパフォーマンスに関する包括的なレポートを提供します。 「フィールド データ」セクションに注目してください。 現実世界のユーザーエクスペリエンス、およびユーザー インタラクションをシミュレートする「ラボ データ」セクション。

分析中 インタラクションメトリクス

「ラボ データ」セクションには、TTI や FID などのインタラクションに関連する指標が表示されます。 Google PageSpeed Insights は、これらの指標を改善するための推奨事項を提供します。一般的な戦略には、JavaScript の実行の最適化、必須ではないスクリプトの延期、レンダリングをブロックするリソースの削減などが含まれます。

次のペイントのメトリクスを調べる

次のペイント指標を評価するには、「ラボ データ」セクションの FCP と LCP に焦点を当てます。これらのメトリックが必要なしきい値を満たしていない場合は、次のことを検討してください。 画像の最適化、ブラウザーのキャッシュを活用し、重要な CSS を優先してレンダリングを高速化します。

機会と診断の活用

Google PageSpeed Insights には、改善のための具体的な提案を提供する「機会」セクションが用意されています。これには以下が含まれる場合があります 画像の最適化、ブラウザーのキャッシュを活用するか、レンダリングをブロックするリソースを排除します。 「診断」セクションでは、パフォーマンスに影響を与える潜在的な問題をさらに特定します。

インタラクションの改善と 次のペイント

画像の最適化

大きな画像ファイルは、インタラクションと次のペイント メトリクスの両方に大きな影響を与える可能性があります。画像圧縮ツールを使用して、品質を損なうことなくファイルサイズを削減します。さらに、画像の遅延読み込みを実装して、ユーザーに表示されたときにのみ画像が読み込まれるようにすることを検討してください。

レンダリングをブロックするリソースを最小限に抑える

JavaScript や CSS ファイルなどのレンダリングをブロックするリソースにより、ページのレンダリングが遅れる可能性があります。不要なスクリプトを延期し、可能な場合は非同期読み込みを使用することで、これらのリソースを最適化および最小限に抑えます。これにより、重要なコンテンツの読み込みが速くなり、インタラクションと次のペイントの両方が向上します。

ブラウザのキャッシュを利用する

ブラウザーのキャッシュを有効にして、静的リソースをユーザーのデバイスにローカルに保存します。これにより、次回以降の訪問時に同じリソースを繰り返しダウンロードする必要が減り、読み込み時間が短縮されます。ブラウザのキャッシュは、次回のペイント メトリクスの改善に特に効果的です。

重要なCSSを優先する

クリティカル CSS には、スクロールせずに見える範囲のコンテンツをレンダリングするために必要なスタイルが含まれています。重要な CSS の読み込みに優先順位を付けることで、ユーザーは意味のあるコンテンツをすぐに見ることができます。これは、FCP の高速化と、Web サイトの速度に対するユーザーの認識の向上に直接貢献します。

サードパーティのスクリプトを評価する

サードパーティのスクリプトが Web サイトのパフォーマンスに与える影響を確認して評価します。不要なサードパーティ スクリプトの使用を制限し、重要なコンテンツのレンダリングがブロックされないように非同期読み込みを検討してください。

コード分割の実装

コードの分割には、大きな JavaScript ファイルを、より小さく管理しやすいチャンクに分割することが含まれます。これにより、ブラウザーは現在のページに必要な必須コードのみをロードできるようになり、TTI が向上し、FID が削減されます。

サーバーの応答時間を監視する

サーバーの応答時間が遅いと、インタラクションと次のペイントの両方に大きな影響を与える可能性があります。サーバーの応答時間を定期的に監視してサーバー構成を最適化し、コンテンツ配信ネットワーク (CDN) を利用して、効率的なサーバー側の処理を確保して全体的なパフォーマンスを向上させます。

私の 結論

TTI、FID、FCP、LCP の重要性を理解し、戦略的な改善を実施することで、ユーザーに好印象を与える、より高速で応答性の高い Web サイトを作成できます。サイトのパフォーマンスを定期的に分析し、特定された問題に対処し、視聴者にシームレスで楽しいオンライン エクスペリエンスを提供することに尽力し続けます。

技術ブログの著者

その他の最近の ページスピードブログ

ニトロパックのレビュー。ウェブサイトのパフォーマンスを最大化しますか?

NitroPack は、Web サイトの速度とパフォーマンスを向上させるために設計された包括的な Web サイト最適化サービスです。ファイルの縮小、画像の最適化、遅延読み込み、コンテンツ配信ネットワーク (CDN) の統合、キャッシュ メカニズムなどの一連の機能を提供しており、これらはすべて読み込み時間の短縮とユーザー エクスペリエンスの向上を目的としています。

ユーザー エクスペリエンスが PageSpeed スコアよりも優れている理由

高速な Web サイトの重要性はいくら強調してもしすぎることはありませんが、検索エンジン、特に Google の目においてユーザー エクスペリエンスが独自の、おそらくより重要な位置を占めていることを認識することが不可欠です。

パフォーマンスとユーザーエクスペリエンスのバランスをとる

オンライン ビジネスとデジタル プレゼンスのペースの速い世界では、Web サイトの所有者は、Web サイトを「環境に優しい」ものにするために、より高いページ速度スコアの終わりのない追求に巻き込まれることがよくあります。

他の カテゴリー

ウェブデザイン & SEO