リクエストが完了するまで待機することになります)。これは最適な方法ではありません。ソースから検出可能である必要があります。リソースを高い取得優先度でプリロードする必要があります。リソースの読み込みが開始されるようにすれば十分です。遅れて読み込みを開始するページを作成することも可能です。したがって、最初のリソースと比較することは、改善の機会を特定するには良い方法ですが、場合によっては十分でないこともあります。比較して測定し、この時間を最小限に抑えることが重要です。マークアップから検出可能であっても、最初のリソースから読み込みが開始されないことがあります。スキャナの優先度ヒューリスティックでリソースが重要であると認識されない場合や、他のリソースがより重要であると判断された場合に発生することがあります。画像を遅らせることができます。遅延読み込みを使用すると、画像がビューポートにあることがレイアウトによって確認されるまでリソースが読み込まれないため、読み込みが本来よりも遅く開始される可能性があります。画像を遅延読み込みしないでください。遅延読み込みを行わなくても、画像はレンダリングをブロックするリソースではないため、ブラウザによって最初に最優先で読み込まれることはありません。属性を使用して、最も重要なリソースをブラウザにヒントとして伝えることができます。設定することをおすすめします。短縮に役立たなくなります。スライドの画像など)の優先度を下げることもできます。src="/path/to/carousel-slide-3.webp">特定のリソースの優先度を下げると、より多くの帯域幅を必要とするリソースに帯域幅を割り当てることができますが、注意が必要です。リソースの優先度を確認し、ラボツールとフィールドツールで変更をテストしてください。リソースは最初のリソースと同時に開始されます)。リソースの読み込みが開始されました。つの理由は、リソースが別のオリジンでホストされている場合です。このようなリクエストでは、リソースの読み込みを開始する前にブラウザがそのオリジンに接続する必要があるためです。リソースと同じオリジンでホストすることをおすすめします。することで、これらのリソースで既存の接続を再利用できるため、時間を節約できます(この点については後で説明します)。要素をレンダリングできるようにすることです。要素をレンダリングできない主な理由は、なんらかの理由でレンダリングがブロックされている場合です。スタイルシートまたは同期スクリプトが原因で、ページ全体のレンダリングがブロックされています。コードの読み込みを待機している)。ライブラリなど)によって非表示になっている。メインスレッドは長いタスクのためにブロックされ、レンダリング作業はそれらの長いタスクが完了するまで待機する必要があります。以降のセクションでは、不要な要素のレンダリングの遅延の最も一般的な原因への対処方法について説明します。レンダリングしたくないため、これは良いことです。要素がレンダリングされなくなります。画像とスタイルシートの読み込みが同時に開始されますが、スタイルシートの準備が整うまで画像はレンダリングできません。この問題を解決するには、次のいずれかを行います。スタイルシートのサイズを小さくする。一般的に、スタイルシートのインライン化は、スタイルシートが小さい場合にのみおすすめします。インライン化されたコンテンツは、後続のページ読み込み時にキャッシュの効果を得ることができないためです。リソースよりも時間がかかる場合、インライン化の有力な候補となる可能性は低くなります。リソースよりも小さくなるようにサイズを小さくすることをおすすめします。これにより、ほとんどのアクセスでボトルネックがなくなります。スタイルシートのサイズを小さくするための推奨事項は次のとおりです。ルールを探し、削除(または延期)できる可能性のあるものを探します。最初のページ読み込みに必要なスタイルと、遅延読み込みが可能なスタイルにスタイルシートを分割します。重要なスタイルについては、転送サイズをできるだけ小さくします。属性のないスクリプト)を追加する必要はほとんどありません。追加すると、ほとんどの場合パフォーマンスに悪影響を与えます。リクエストを待機してレンダリングが遅れないように、コードをインライン化することをおすすめします。スタイルシートと同様に、スクリプトが非常に小さい場合にのみインライン化してください。マークアップで応答するプロセスです。つのメリットがあります。リクエストを待つ必要はありません。遅くなる可能性があることです。サーバーの処理時間はユーザーが制御できるのに対し、ユーザーのネットワークとデバイスの機能は制御できないため、このようなトレードオフは一般的に価値があります。類似したオプションは、静的サイト生成(SSG)または事前レンダリングと呼ばれます。ページを生成するプロセスです。ご使用のアーキテクチャで事前レンダリングが可能な場合、通常はこちらの方がパフォーマンスの面で優れています。遅れる可能性があります。ファイルが読み込まれ、それを解析してブラウザのメインスレッドで実行する必要があることです。画像リソースが完全にダウンロードされた場合でも、無関係なスクリプトの実行が完了するまで待機してからレンダリングを開始しなければならない場合があります。現在のすべてのブラウザは、画像をメインスレッドでレンダリングします。メインスレッドをブロックする要素があると、不要な要素のレンダリング遅延が発生する可能性があります。リソースの読み込み時間を短縮するこのステップの目的は、リソースのバイトをネットワーク経由でユーザーのデバイスに転送する時間を短縮することです。リソースのサイズを小さくします。リソースが移動する距離を短縮する。ネットワーク帯域幅の競合を減らす。リソース(存在する場合)は、画像またはウェブフォントです。次のガイドでは、両方のサイズを小さくする方法について詳しく説明しています。最適な画像サイズを提供する最新の画像形式を使用する画像を圧縮するウェブフォントサイズを小さくするリソースが移動する距離を短縮するリソースのサイズを小さくするだけでなく、サーバーをユーザーの地理的位置にできるだけ近づけることで、読み込み時間を短縮することもできます。そのための最善の方法は、コンテンツ配信ネットワーク(CDN)を使用することです。リソースの移動距離を短くするだけでなく、一般的にリソースのサイズを小さくし、前述のサイズ削減の推奨事項をすべて自動的に実装するため、特に役立ちます。リソースの読み込み時間を短縮するのに効果的ですが、サードパーティのドメインを使用して画像をホストすると、追加の接続費用が発生します。ドキュメントと同じオリジンから画像を提供する方法が最善です。リクエストをプロキシできます。利用可能な場合は、この方法を検討することをおすすめします。ネットワーク帯域幅の競合を減らすリソースのサイズを小さくして移動距離を小さくしても、他の多くのリソースを同時に読み込むと、リソースの読み込みに時間がかかることがあります。この問題はネットワーク競合と呼ばれます。指定してできるだけ早く読み込みを開始した場合、ブラウザは優先度の低いリソースが競合しないように最善を尽くします。リソースの読み込み速度に影響する可能性があります。ネットワーク時間を完全に排除するリソースの読み込み時間を短縮する最善の方法は、プロセスからネットワークを完全に排除することです。回目にリクエストした訪問者にキャッシュからリソースが提供されるため、リソースの読み込み時間は実質ゼロになります。リソースの読み込み時にレンダリングをブロックする必要があるかどうかも検討する必要があります。以外に設定すると、テキストは読み込み中に常に表示されます。ブロックされることはありません。してインライン化することをおすすめします。リクエストも不要になります。使用する場合は注意が必要です。リソースをキャッシュに保存できないため、デコード費用が増加し、レンダリングの遅延が長引く場合があります。できるだけ早く配信することです。このステップはデベロッパーが最も管理できないことが多いため、最後に記載します。この後のすべてのステップに直接影響するため、最も重要なステップでもあります。バックエンドがコンテンツの最初のバイトを配信するまで、フロントエンドで何も起こりません。高速化するためにできることはすべて、他のすべての読み込み指標の改善にもつながります。遅くなる一般的な原因として、広告や短縮リンクなどから複数のリダイレクトを経由してアクセスしているユーザーが挙げられます。訪問者が待機しなければならないリダイレクトの数は常に最小限に抑えます。エッジサーバーから使用できず、すべてのリクエストを配信元サーバーに送信する必要があることです。パラメータを使用している場合に、別のページが表示されるわけではない場合でも発生することがあります。最適化ガイドをご覧ください。ツールにログに記録したりして、デバッグと最適化に役立てられることです。トラックにバーを追加しています。サブカテゴリのタイムラインが表示されます。トラックと並んで見たときに特に役立ちます。これらの期間中にページ上の他の何が起こっているかを一目で把握できるためです。合計時間に対する各サブパートの割合を計算することもできます。この情報に基づいて、前述の推奨される割合の分類をページが満たしているかどうかを判断できます。時間の割合をコンソールに記録する例を示しています。サブカテゴリのタイミングと割合。これらの可視化はどちらも、次のコードで作成されています。内訳をより詳しく把握することもできます。上記のコードは標準のナビゲーションで機能しますが、事前レンダリングされたページについては特に考慮する必要があります。これは有効化開始時間から測定する必要がありますが、わかりやすくするためにこのコードでは省略しています。ビルドのこの内訳が含まれており、これらの考慮事項が含まれています。独自のソリューションの実装を検討している方のために、このコードはオープンソースです。似ていますが、有効化を開始するための追加ロジックがあります。つのサブパートがリアルタイムでログに記録されるため、この内訳を確認できます。サブパートのタイミング。複雑な指標であり、そのタイミングはさまざまな要因によって影響を受ける可能性があります。リソースの負荷の最適化に関するものだと考えると、状況を大幅に簡素化できます。つのステップで行われます。リソースの読み込みができるだけ早く開始されるようにします。要素がリソースの読み込みが完了するとすぐにレンダリングされるようにします。リソースの読み込み時間をできるだけ短縮します。ドキュメントをできるだけ早く配信してください。ページでこれらの手順を実施できたら、ユーザーに最適な読み込みエクスペリエンスを提供できていると確信できます。スコアに反映されます。ライセンスにより使用許諾されます。ライセンスにより使用許諾されます。サイトのポリシーをご覧ください。関連会社の登録商標です。