Web ページの読み込み時間を効果的に短縮するにはどうすればよいでしょうか? _html/css

ネットユーザーは、インターネットを閲覧する際に Web ページが開くまでに長い時間を費やすことを好みません。待ち時間が長ければ長いほど、ユーザーは Web ページを直接閉じる可能性があり、大量のトラフィックが失われます。次に、キーワードのランキングは Web ページを開く速度にも関係します。これは主に検索エンジンのユーザーエクスペリエンスを反映します。ユーザーエクスペリエンスが良好であれば、ランキングは他の Web サイトよりも高くなります。したがって、あまりコストをかけることなく、いくつかのヒントに注意を払うだけで、Web ページの表示速度を向上させることが必要だと思います。ここでは、ウェブサイトのアクセス速度を向上させ、ウェブページの読み込み時間を短縮するのに役立つ 20 の方法を紹介します。

1. ページの HTTP リクエストの数を減らす

より簡単に理解すると、他のページやファイルへの呼び出しの数を減らすことができます。

A. CSS 形式のコントロールを使用する場合、多くの場合、背景を使用して多くのグラフィックファイルを読み込みます。通常、ページを活気づけるために、多くの背景を使用します。この状況を改善するには、頻繁に読み込む必要がある複数の画像を 1 つの画像に結合するために、CSS の便利なbackground-position 属性を使用します。次のフォームを使用して、画像のこの部分をロードするための HTTP リクエストを 1 に減らします。

B. イメージマップを使用する。この方法も一般的に使用されますが、同じ領域に限定されます。

C.インライン画像、この方法はめったに見られませんが、小さくて単純な画像には非常に実用的です。

2. CDN (Content Delivery Network) ネットワークアクセラレーションを使用する

中国では CDN アクセラレーションビジネスを行っている企業が数多くあります。簡単に言えば、CDN ネットワークが到達できる場所に写真やビデオを拡散することを意味します。これらのファイルは、ネットワークを高速化する目的を達成するために、近くにダウンロードできます。これにより、自分の Web サイトの負荷も軽減されます。

3. ファイルの有効期限またはキャッシュヘッダーを追加します

同じユーザーが頻繁にアクセスする画像、JS スクリプトファイルなどについては、Apache または Nginx でバッファリング時間を設定できます (24 時間の設定など)。有効期限を設定することで、ユーザーがページにアクセスした後に影響を受けないようにするため、後で再度アクセスしたときに同じ画像セットや JS が再度ダウンロードされることがなくなり、HTTP リクエストが減少し、ユーザーのアクセス速度が明らかに向上し、サーバーの負荷が軽減されます。も減額されます。以下は nginx 設定におけるキャッシュ制御の例です:

4. サーバーは gzip 圧縮をオンにします

これは誰もがよく知っています。つまり、送信する必要があるコンテンツは圧縮されてクライアントに送信されます。解凍してネットワーク上に送信することで、データ量が大幅に削減されます。通常、サーバー上の Apache および Nginx は、この設定を直接有効にすることができます。また、コードの観点から送信ファイルのヘッダーを直接設定したり、gzip 設定を追加したり、負荷分散デバイスから直接設定したりすることもできます。ただし、この設定によりサーバーの負荷が若干増加することに注意してください。

5. CSS 形式の定義はファイルのヘッダーに配置されます

この設定は、クライアントが低速なネットワーク上にある場合、または Web ページのコンテンツが比較的大きい場合に、より有益です。 Web ページが徐々にレンダリングされる間維持されます。Web ページの美しさに影響します。

6. Javascript スクリプトはファイルの最後に配置されます

これらのスクリプトがページの先頭に配置されると、多くの Javascript スクリプトは実行効率が低いか、一部のサードパーティのドメイン名スクリプトが予期せずロードに失敗します。その結果、Web サイトのコンテンツの読み込み速度が低下したり、正常に読み込めなくなったりする可能性があるため、これらのスクリプトは通常、Web ページファイルの最後に配置されます。フロントは、メイン Web ページの読み込み速度に影響を与えないように、完了後にメイン Web ページにロードする、いわゆる「ポストロード」方法を使用してロードする必要があります。

7. CSS スクリプト (CSS 式) の使用を避ける

CSS のパラメータを動的に変更するために、CSS 式を使用することがありますが、これはメリットがなく、負荷が大幅に増加します。クライアントのブラウザに依存するため、変更する必要がある場合は、JavaScript を使用することをお勧めします。

8. CSS と JavaScript は外部から呼び出されます

CSS と JS のコンテンツが比較的大きい場合は、ブラウザ自体が処理するため、外部から読み込む方が適切です。 CSS、jsファイルはキャッシュされます。

9. Javascript と CSS コードを圧縮する

一般に、js や css ファイルにはスペース、改行、コメントが多く含まれており、これらを圧縮できれば非常に便利です。ネットワーク伝送用。この分野には多くのツールがあり、開発バージョンを保持し、そのツールを使用して 2 つのファイルを比較すると、圧縮率は通常 50% 以上に達し、データ量が大幅に削減されます。かなり。

10. 301 および 302 リダイレクトの使用を避けます

11. 適切な開発およびメンテナンスの習慣を身につけ、スクリプトの繰り返し呼び出しを避けるようにしてください

12. 13. Ajax はキャッシュを使用します電話

これの使用については、Discuz フォーラムのコードを参照してください。キャッシュ呼び出しメソッドは、多くの Ajax 呼び出しに使用されます。一般に、その実装には追加の機能パラメーターが使用されます。このパラメータは変更されません。キャッシュされたファイルを使用し、変更が発生した場合は新しいファイルを再ダウンロードするか、情報を更新します。

14. フラッシュを適切に使用する

クライアントが閲覧リクエストを送信した後、サーバーは通常、これらのリクエストを処理するのに 200 ～ 500 ミリ秒かかります。この期間を短縮したい場合は、クライアントのブラウザが待機状態になります。ユーザーの待機時間に応じて、適切な場所でフラッシュを使用して、準備ができたコンテンツをユーザー側にプッシュできます。たとえば、Ajax 呼び出しでは GET メソッドを使用する必要があります。可能な限り

実際の使用 XMLHttpRequest を使用する場合、POST メソッドを使用すると 2 つの HTTP リクエストが発生しますが、GET メソッドを使用すると HTTP リクエストは 1 つだけ発生します。代わりに GET メソッドを使用すると、HTTP リクエストが 50% 削減されます。

16. DCOM 要素をできるだけ減らす

これは、Web ページ内のさまざまな <> 要素の数をできるだけ減らすことです。

17. Web ページに複数のファイルや画像を読み込むには、複数のドメイン名を使用します

Web ページの読み込みプロセス中に、同時に IE によって行われる同時 HTTP リクエストの最大数が制限されるという情報があることに注意してください。同じドメイン名は 2 です。Web ページがロードする必要があるファイルの数が 2 を超える場合 (通常はそれよりはるかに多い)、Web ページへのアクセスを高速化するには、ファイルを複数のドメイン名に分散するのが最善です。たとえば、19 階では、その js ファイルは独自のドメイン名を使用しています。Baidu には 20 以上の画像サーバーがあると言われています。

18. 必要に応じて iframe の使用を減らします

iframe は通常、異なるドメイン名からコンテンツを読み込むために使用されます。これは、読み込み速度が原因で、メイン Web ページの読み込み速度にも影響する可能性があります。可能であれば、ロードする必要があるコンテンツはローカルにキャプチャされ、直接埋め込まれます。本当に iframe をロードする必要がある場合は、ポストロードメソッドを使用してそれを実現します。

19. 画像ファイルを最適化する

画像ファイル、特にサムネイルを最適化して、Web ページでサイズ変更メソッドを使用しないでください。こう見る見た目は小さくなりましたが、ロードされるデータ量はまったく減っていません。 Web ページに読み込まれたサムネイルを見たことがありますが、その実際のサイズは 10M にもなります... 通常の画像やアイコンも可能な限り圧縮する必要があり、これは Web 画像を保存し、サムネイルの数を減らすことで実現できます。色など

20. ページのコンテンツがある程度大きい場合は、ページングで表示することも、タオバオのようにページをめくってから読み込むこともできます。