ウェブサイトのパフォーマンスを向上させるためのウェブサーバーの改善

ウェブサイトのパフォーマンスを向上させるためのウェブサーバーの改善
<br />このシリーズの最初のセクションでは、Web サイトのパフォーマンスを向上させるための Web サイトの「コンテンツ」に関連する 10 の原則について説明しました。ウェブサイトのコンテンツを改善することに加えて、ウェブサイトのサーバー側でも注意と改善が必要な領域があります。
    コンテンツ配信ネットワークを使用して、Gzip 圧縮ファイルの Expires または Cache-Control ヘッダーを指定します。コンテンツの ETag を構成します。出力バッファを早期にフラッシュします。GET を使用して AJAX リクエストを完了します。

11. コンテンツ配信ネットワークを使用する<br />ユーザーと Web サイト サーバーの距離が応答時間に影響します。ウェブサイトのコンテンツを地理的に異なる場所にある複数のサーバーに分散すると、ダウンロード時間が短縮されます。しかし、まず何をすべきでしょうか?
コンテンツを見つけるための最初のステップは、配信サーバー上で適切に動作するようにサイトを再構築することではありません。アプリケーションのニーズに応じて Web サイトの構造を変更します。これには、サーバー間のセッション状態の同期やデータベース更新のマージなどの複雑なタスクが含まれる場合があります。ユーザーとコンテンツ サーバー間の距離を短縮するために、これらのアーキテクチャ上の手順は避けられない場合があります。
エンドユーザーの応答時間の 80% ~ 90% は、画像、スタイルシート、スクリプト、Flash などのページ コンテンツのダウンロードに費やされることに注意してください。これらは、Web サイトのパフォーマンスに関する黄金律です。アプリケーション アーキテクチャを再設計するという困難な作業に着手するよりも、まず静的コンテンツを配布する方がよい場合がよくあります。これにより、応答時間が改善されるだけでなく、コンテンツ配信ネットワークへの実装もはるかに簡単になります。
コンテンツ配信ネットワーク (CDN) は、さまざまな地理的な場所に分散された一連の Web サーバーで構成されており、Web サイトのコンテンツの送信速度を向上させます。ユーザーにコンテンツを配信するために使用されるサーバーは、主にネットワーク上のユーザーとの距離に基づいて指定されます。たとえば、ネットワーク ホップが最も少なく、応答時間が最も速いサーバーが選択されます。ウェブページ制作チュートリアルチャンネルのコンテンツを見るには、ここをクリックしてください。大手インターネット企業の中には独自の CDN を持っているところもありますが、Akamai Technologies、Mirror Image Internet、Limelight Networks などの CDN サービスを使用するにはコストが非常に高くなります。立ち上げたばかりの企業や個人のウェブサイトでは、CDN を使用するコスト予算がないかもしれませんが、対象ユーザーベースが拡大し、グローバル化が進むにつれて、高速レスポンスを実現するために CDN が必要になります。たとえば、Yahoo は、Web サイト プログラムの静的コンテンツを CDN に転送することで、エンド ユーザーの応答時間を 20% 以上短縮しました。 CDN を使用すると、コードを変更して Web サイトのアクセス速度を大幅に向上できる比較的簡単な方法です。
12. ファイルヘッダーにExpiresまたはCache-Controlを指定する
このルールには2つの側面があります: 静的コンテンツの場合:
ファイル ヘッダーの有効期限の値を「無期限」に設定します。動的コンテンツの場合:
適切な Cache-Control ファイル ヘッダーを使用して、ブラウザーが条件付きリクエストを行えるようにします。Web ページのコンテンツ デザインはますますリッチになってきており、ページにはより多くのスクリプト、スタイル シート、画像、Flash を含める必要があります。初めてページにアクセスするユーザーは複数の HTTP リクエストを送信しますが、Expires ヘッダーを使用することでコンテンツをキャッシュ可能にすることができます。後続のページ訪問時に不要な HTTP リクエストを回避します。 Expires ヘッダーは画像ファイルによく使用されますが、スクリプト、スタイルシート、Flash を含むすべてのコンテンツに使用する必要があります。
ブラウザ (およびプロキシ) はキャッシュを使用して HTTP リクエストのサイズと数を削減し、ページ アクセスを高速化します。 Web サーバーは、HTTP 応答の Expires ヘッダーを使用して、コンテンツをキャッシュする期間をクライアントに通知します。次の例は、応答が 2010 年 4 月 15 日まで期限切れにならないことをブラウザに伝える、より長い Expires ヘッダーを示しています。
有効期限: 2010 年 4 月 15 日 (木) 20:00:00 GMT
Apache サーバーを使用している場合は、ExpiresDefault を使用して、現在の日付を基準とした有効期限を設定できます。次の例では、ExpiresDefault を使用して、リクエスト時刻から 10 年後に有効期限が切れるファイル ヘッダーを設定します。
有効期限デフォルトは「アクセスプラス10年」
Expires ヘッダーを使用する場合は、ページ コンテンツが変更されたときにコンテンツ ファイル名を変更する必要があることに留意することが重要です。 Yahoo! では、yahoo_2.0.6.js のように、コンテンツ ファイル名にバージョン番号を追加するという手順をよく使用します。
Expires ヘッダーの使用は、ユーザーが Web サイトにアクセスした後にのみ有効になります。ブラウザのキャッシュが空であるため、ユーザーが初めてサイトにアクセスしたときに HTTP リクエストの数を減らす効果はありません。したがって、これによってサイトのパフォーマンスがどの程度向上するかは、「事前キャッシュ」(ページ上のすべてのコンテンツがすでに含まれている)が存在している間にページがアクセスされる頻度によって決まります。 Yahoo! では測定方法を確立しており、全ページビューの 75 ~ 85% が「事前キャッシュ」されていることがわかりました。 Expires ヘッダーを使用すると、ブラウザにキャッシュされ、ユーザーがリクエストの 1 バイトも送信しなくても、ユーザーの次のリクエストで再び使用できるコンテンツの量が増えます。
前のページ1 2 3 次のページ 続きを読む

<<:  フロートをクリアするための CSS メソッドの概要

>>:  ウェブデザインにおける円形要素の使用例 25 選

推薦する

dockerネットワーク双方向接続の詳細な説明

Dockerネットワークを見るdocker ネットワーク ls [root@master ~]# d...

Docker イメージ + nginx を使用して Vue プロジェクトをデプロイする方法

1. Vueプロジェクトのパッケージ化開発されたvueプロジェクトに次の名前を入力し、パッケージ化し...

Linux での MongoDB のインストールと設定のチュートリアル

MongoDBインストールYumを使用してインストールすることを選択する1. repoファイルを作成...

Vue プロジェクトに ECharts を導入する

目次1. インストール2. はじめに3. 使用4. 必要に応じてEChartsチャートとコンポーネン...

優れたグラフィックデザイナーが習得すべき7つのスキル

1》ウェブデザインが得意であること2》Webページのデザイン方法を知る3》計画する4. SEOを理解...

Vueのアイデアを使ってストレージをカプセル化する方法

目次背景関数目的アイデアの源成し遂げるセット得るプロパティの削除拡張機能を禁止するもっている要約する...

フロントエンドページのスライド検証を実装するための JavaScript + HTML

この記事では、フロントエンドページのスライド検証を実装するためのJavaScript + HTMLの...

WeChatミニプログラムでのマップの正しい使用例

目次序文1. 準備2. 実際の戦闘2.1 ミニプログラムの権限を設定する2.2 カプセル化ツールの機...

CSS はこのように使用できますか?気まぐれなグラデーションの芸術

前回の記事「1行のCSSコードの魅力」では、たった1行のCSSコードで生成できる美しい(奇妙な感じと...

WeChatアプレットでのwxsファイルの素晴らしい使い方をいくつか紹介します

目次序文応用フィルタードラッグファイル間での参照の受け渡しwxsはjsロジック層にパラメータを渡しま...

Docker: /etc/default/docker の DOCKER_OPTS パラメータを変更しても反映されない

デフォルトでは、 /etc/default/docker 設定は有効になりません。docker 環境...

MySQL で結合を使用して SQL を最適化する方法の詳細な説明

0. 以下のテストに関連する表を準備する関連するテーブル作成ステートメントについては、https:/...

MySQLでテーブルを接続するいくつかの方法

MySQL テーブルでの接続方法は実は非常に簡単なので、ここではその特徴を簡単にリストします。テーブ...

ES5とES6の違いを分析する

目次概要関数シグネチャオプションパラメータ非厳密モード例外処理実用要約する概要ご存知のとおり、ES6...

Vue の NetEase Cloud Music Player インターフェースを模倣したシンプルな実装プロセス

仕事のプロジェクトのニーズにより、曲の再生が必要となり、さまざまな資料を参考にして、NetEase ...