ページの読み込み時間に影響を与える 5 つのよくある間違い-jsチュートリアル-php.cn

ページの読み込み時間に影響を与える 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 ファイルはチャンクでレンダリングされるため、CSS ファイルを減らすとページの読み込み時間が大幅に短縮されます。
— アプリケーションのすべてのイメージを一度にロードするのではなく、必要な場合にのみロードします。このアプローチは、遅延読み込みまたはオンデマンド読み込みと呼ばれます。ユーザーがサイトにアクセスしたとき、クリック時にすべての画像を読み込むのではなく、ユーザーがその特定の場所までスクロールしたときにのみ画像を読み込むことができます。
— 頻繁に変更されない静的画像または Web サイトコンテンツのキャッシュを許可します。ユーザーが Web サイトに 2 回目にアクセスすると、サーバーに新しい HTTP リクエストを送信しなくても、キャッシュはこのコンテンツをロードできます。これにより、コンテンツの読み込みが速くなります。
をサポートしています - 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 サイトをお持ちの場合は、タグの前に外部 JS ファイル (defer.js) を呼び出す必要があります。

<script type="text/javascript">
   function downloadJSAtOnload() {
      var element = document.createElement("script");
      element.src = "defer.js";
      document.body.appendChild(element);
  }
  if (window.addEventListener)
    window.addEventListener("load", downloadJSAtOnload, false);
  else if (window.attachEvent)
    window.attachEvent("onload", downloadJSAtOnload);
  else <br>    window.onload = downloadJSAtOnload;
</script>

ログイン後にコピー

上記のコードは、「外部の defer.js ファイルをロードする前に、ドキュメント全体がロードされるのを待ちます。」

5. 大量のリダイレクト

通常、ユーザーがページにアクセスする際のエラーを回避するために、移動または削除されたページを処理するにはリダイレクトを使用します。ただし、リダイレクトが増えると、HTTP リクエストも増えます。これにより、ページの読み込み時間が大幅に長くなる可能性があります。 Google は、特にモバイルファーストサイトの読み込み時間を改善するために、ウェブサイトの所有者にリダイレクトを削除することを推奨しています。

同様の Web サイトスクレイピングツールを使用して、Web サイト内のすべてのリダイレクトリクエストを取得できます。これを分析することで、不要なリダイレクトを常に把握し、排除することができます。

一般に、リダイレクトは 2 つのタイプに分類されます。

サーバー側リダイレクト - 高速でキャッシュ可能。
クライアントリダイレクト — 遅くてキャッシュできません。

サーバー側のリダイレクトを最小限に抑えながら、ページへのクライアント側のリダイレクトの使用を回避し、Web ページの読み込み時間を最適化します。

結論

実行速度と読み込み速度が速いサイトは、ウェブマスターとユーザーの両方にとって有益であると考えられています。この記事がそのページについて考えるきっかけになれば幸いです。ロード時間の重要性について十分に自信を持ってください。

ウェブサイトのパフォーマンスの向上をお考えの場合は、Google Pagespeed Insights、Pingdom、YSlow などのツールをいくつかご紹介します。これらのツールは、Web サイトの欠点を洞察する完全なレポートを提供します。あなたのウェブサイトのユーザーエクスペリエンスも向上することを願っています。