ページの読み込み時間に影響を与える 5 つのよくある間違い

ユーザーが Web サイトにアクセスしたときに Web サイトの読み込みに時間がかかる場合は、この記事が最適化作業にインスピレーションをもたらす可能性があります。ただし、問題の解決に役立たない場合でも、Web サイトの読み込み時間に影響を与える一般的なエラーを知ることはできます。

ページの読み込み時間が重要なのはなぜですか?

ページの読み込み時間は、Web サイトのパフォーマンスに関するユーザーの直感的なエクスペリエンスに直接影響します。一部の調査データによると、ページの読み込み時間が 3 秒を超えると、訪問ユーザーの半数が待機中に失われることになります。

検索エンジンのランキング
• — ページの読み込み時間は、検索エンジンが検索結果で Web サイトをランク付けするための重要な基準の 1 つです。したがって、Web ページの読み込み時間は、ユーザーが Web 上で Web ページを見つけやすいかどうかに影響します。
コンバージョン率
• — ページの読み込みが速くなるほど、ユーザーのエンゲージメントは高まります。ウェブサイトの速度が遅いと、コンバージョン率の低下につながるのは明らかです。 Web ページの読み込みに時間がかかりすぎると、CTA (Call-To-Action) の実行に多くの時間がかかり、その間にユーザーの忍耐力と熱意は消耗し、最終的には製品を購入せずに Web サイトを閉じることになります。製品を使用するか、提供するサービスを使用します。 ユーザー エクスペリエンス — Web サイトの読み込みに時間がかかるほど、ユーザーの満足度は高くなります。その結果、顧客維持率とリピート率が高くなります。
• HubSpot が行った調査に基づいていくつかの例を見てみましょう:

Yahoo がページの読み込み時間を 0.4 秒短縮した場合、トラフィックは 9% 増加する可能性があります。

• ページが 1 秒遅いと、Amazon は毎年 16 億ドルの売上を失う可能性があります。
• Bing 検索で 2 秒の遅延が発生すると、訪問者あたりの収益が 4.3% 減少し、クリック数が 3.75% 減少し、クエリ量が 1.8% 減少します。
• 上記のデータに基づいて、Web サイトにとってページの読み込み時間がいかに重要であるかがわかります。

ページの読み込み時間に影響を与える要因と最適化手法

ページの読み込み時間に影響を与える要因は数多くありますが、その中でもビルド時に遭遇したエラーをリストアップしました。代表的な間違いを 5 つ紹介します。

1. 大量の HTTP リクエスト

ブラウザは、Web サーバーからファイル、ページ、または画像を取得する必要があるたびに、HTTP リクエストを作成します。その後、Chrome の [デベロッパー ツール] の [ネットワーク] タブを使用して、アプリケーションが行うネットワーク リクエスト、時間のかかるリクエスト、その他の情報を監視できます。

一般的なブラウザでは、同時に発行される HTTP リクエストの数は通常 4 ～ 8 に制限されています。したがって、同時リクエストの数が多い場合、長時間の待機遅延が発生します。 Yahoo が行った調査によると、アプリケーションの読み込み時間の 80% は HTTP リクエストに依存しており、HTTP リクエストの総数を減らすとページの読み込み時間を短縮できます。

次の方法で、Web アプリケーションの HTTP リクエストの合計数を減らすことができます。

CSS/JS ファイルのマージ
• — マージを試みることができます。 CSS ファイルと JS ファイルは同じファイルにマージされるため、リクエストが減り、サーバーから複数のファイルを取得する必要がなくなります。すべての CSS ファイルはチャンクでレンダリングされるため、CSS ファイルを減らすとページの読み込み時間が大幅に短縮されます。
コンテンツのオンデマンド読み込み
• — アプリケーションのすべてのイメージを一度にロードするのではなく、必要な場合にのみロードします。このアプローチは、遅延読み込みまたはオンデマンド読み込みと呼ばれます。ユーザーがサイトにアクセスしたとき、クリック時にすべての画像を読み込むのではなく、ユーザーがその特定の場所までスクロールしたときにのみ画像を読み込むことができます。
ブラウザ キャッシュを有効にする
• — 頻繁に変更されない静的画像または Web サイト コンテンツのキャッシュを許可します。ユーザーが Web サイトに 2 回目にアクセスすると、サーバーに新しい HTTP リクエストを送信しなくても、キャッシュはこのコンテンツをロードできます。これにより、コンテンツの読み込みが速くなります。
サーバーは HTTP/2
• をサポートしています - HTTP/2 を使用すると、Web サイトを読み込むためにブラウザーからサーバーへの接続を 1 つだけ確立する必要があり、同時に複数のリクエストが許可されます。時間。これは、リソースごとに新しい接続を作成するよりもはるかに効率的です。

2. CDN を使用しない

Web サイトで CDN が有効になっていない場合、ユーザーが物理的に離れたところにいると読み込み時間が長くなります。サーバ。これらの遅延は距離が遠くなるほど顕著になり、サーバーへのすべての HTTP リクエストに影響します。 CDN を使用すると、ページの読み込み時間を短縮できます。

CDN

それは何ですか? CDN の正式名称は Content Delivery Network で、コンテンツ配信ネットワークのことです。 CDN は、インターネット上に構築されたコンテンツ配信ネットワークであり、さまざまな場所に配置されたエッジ サーバーに依存し、中央プラットフォームの負荷分散、コンテンツ配信、スケジューリングなどの機能モジュールを使用して、ユーザーが必要なコンテンツを近くで入手できるようにします。

CDN を使用すると、ユーザーは Web ページに必要なリソースを自分の場所に最も近いサーバーから取得できるようになります。 CDN 内のサーバーは、地理的に異なる場所に分散されます。したがって、この種の CDN の使用は、アプリケーションの読み込み時間を改善する効果的な方法の 1 つです。

たとえば、Web サーバーがカリフォルニアにある場合、CDN を展開すると、ゲスト アクセス ネットワーク トポロジ図は次のようになります。

ほとんどの CDN サービスには独自のネットワーク バックボーンがあり、インターネットよりも高品質のサービス、より低いパケット レート、より高速なトラフィックを提供できます。読み込み速度などは少し異なります。 。欠点は高価なことです。

3. ファイルサイズとページサイズ

Webサーバーからの大きなサイズのファイルの読み込みや、大きなページサイズの読み込みには時間がかかるため、このような大きなファイルをいくつか取得すると、ページの読み込み時間が長くなります。

#圧縮を有効にすることは、HTTP リクエストのファイル サイズを削減し、ページの読み込み時間を短縮する一般的な方法です。

一般的な圧縮方法は 2 つあります:

最初の方法は Gzip です。Gzip はファイル内で類似のコードを見つけて、それらを一時的に置き換えてファイルを小さくします。現在、ほとんどの Web サーバーは Gzip 圧縮をサポートしています。 HTML または CSS ファイルの圧縮を有効にすると、通常、ファイル サイズが約 50% または 70% 節約され、ページの読み込み時間と使用される帯域幅が削減されます。アプリケーションで使用される画像のサイズを減らすことで、ページの読み込み時間をさらに短縮できます。

別の圧縮ソリューションは Brotli と呼ばれます。公式の紹介によると、圧縮率は gzip より 20% ～ 30% 高く、実行効率もより効率的です。具体的にテストしたわけではないので、それを証明することはできません。実際の状況を考慮してください。

4. すべてのリソースを同時にロードする

すべての HTML、CSS、JS ファイルを同時にロードすると、ページがレンダリングされるため、ページのロード時間が長くなります。これらすべてのリソースが読み込まれる前に、プロセスはブロックされます。

遅延 JavaScript 読み込みは、他の要素が読み込まれた後に大きな JS ファイルを読み込むメカニズムです。この方法により、ページ コンテンツの読み込みが、大きな JS ファイルの読み込みによる影響を受けなくなります。

HTML サイトをお持ちの場合は、

以上がページの読み込み時間に影響を与える 5 つのよくある間違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。