クリティカルリクエストチェーンとは、ページのレンダリングに必要な、依存関係にある一連のネットワークリクエストです。この問題への対処方法や回避方法を学びます。以下をお読みください。
重要なリクエストとは何ですか?
クリティカルリクエストとは、ページのレンダリングに必要なリクエストです。つまり、リクエストが失敗すると、ページはレンダリングされません。クリティカルリクエストは、確実に完了するために、他のリクエストよりも優先される必要があります。.
重要なリクエストを行う方法はいくつかあります。最も一般的な方法は、 `async` 属性 。これにより、ブラウザはスクリプトのダウンロード中に他のリソースの読み込みを継続します。重要なリクエストを行うもう 1 つの方法は、リソースを HTML コード自体にインライン化することです。これにより、ブラウザはリソースを取得するために再度ラウンドトリップする必要がなくなりますが、HTML コードのサイズが大きくなります。
ページのレンダリングに必要なリソースに対する重要なリクエストのみを行うことが重要です。重要なリクエストを過度に行うと、ページの読み込みが遅れ、最終的にはユーザーエクスペリエンスの低下につながる可能性があります。.
重要なリクエストの連鎖を回避するにはどうすればよいですか?
- ドメインシャーディング技術の使用： 重要なリクエストの連鎖を避ける主な方法の一つは、ドメインシャーディング技術の使用です。ドメインシャーディングを使用すると、コンテンツを複数のドメインに分割できるため、DNSルックアップの回数を減らし、 ページの読み込み時間を短縮。
- CDN の使用: CDN は、世界中のサーバーにコンテンツをキャッシュすることでページの読み込み時間を短縮し、訪問者がコンテンツに簡単かつ迅速にアクセスできるようにします。
- ウェブサイトのパフォーマンスを最適化する： ウェブサイトのパフォーマンスを最適化することで、重要なリクエストの連鎖を避けることもできます。これには、HTML、CSS、JavaScriptファイルの縮小、画像の圧縮、キャッシュプラグインの使用などが含まれます。
重要なリクエストの連鎖の代替手段
重要なリクエストを連鎖させる代わりに、パフォーマンスの向上に役立ついくつかの代替手段があります。
1. リソースのインライン化： これは、重要で小さなリソースを、個別のHTTPリクエストを発行するのではなく、HTMLコードに直接埋め込むことを意味します。データURI、またはインラインスクリプトとスタイルを使用することで、これを実現できます。
2. リソースの事前読み込み： これは、ブラウザに特定のリソースを事前に取得するように指示するもので、必要なときに利用できるようになります。これは、リンクタグまたはリソースヒントを使用して行うことができます。
3. リソースのキャッシュ： キャッシュは頻繁にアクセスするリソースをローカルに保存するため、使用するたびにサーバーから取得する必要がありません。これには、キャッシュヘッダーまたはサービスワーカーを使用できます。
4. リクエスト順序の最適化： リソースリクエストの順序はパフォーマンスに影響を与える可能性があるため、重要なリソースが最初にリクエストされるようにすることが重要です。これは、preload キーワードを使用するか、リソースリクエストの順序を手動で変更することで実現できます。
5. ラウンドトリップタイムの最小化： ラウンドトリップタイム（RTT）とは、リクエストがブラウザからサーバーへ、そして再びブラウザへ戻るのにかかる時間です。RTTを短縮することでパフォーマンスを向上させることができます。RTTを短縮する方法はいくつかあります。例えば、持続接続の使用、DNSルックアップの最適化、リダイレクトの削減などが挙げられます。
結論
この記事が、クリティカルチェーンリクエストの回避の重要性をご理解いただく一助になれば幸いです。クリティカルチェーンリクエストを回避することで、ウェブサイトの読み込み速度を向上させ、ユーザーエクスペリエンスを向上させることができます。変更内容を本番サイトに実装する前に、必ずテストを行ってください。ご不明な点がございましたら、お気軽に サポートチーム までお問い合わせください。
