5つの方法でWebページの応答時間を短縮
1.Yslowの概要とWebサイトのロード時間の測定
何が問題なのかを決める前に、サイトのロード時間を知ることが第一歩です.Webサイトの変更を加速させる必要があるかどうかを知ることもできます.
私たちが始める前に、YSlowをインストールしていない場合は、インストールしてください.彼はMozilla Firefoxの拡張子で、次のリンクから見つけることができます.https://addons.mozilla.org/en-US/firefox/addon/5369
まず、Six RevisionsのWebサイトを参照し、同じ例を使用してテストします(新しいラベルまたはブラウザウィンドウで開く必要があります).
ブラウザの有効な呼び出しには、図1のようなマイルメーターの欄があります.その横には、Webページのロードが完了すると、「YSlow」と数字が表示されます.数字は、ブラウザがWebサイトをロードするのにかかる時間(秒)を表します.私たちはこの数字ができるだけ低いレベルを維持することを望んでいます.
等級領域
各レベル要因を貫き、各レベル領域の短い秒速度と、これらの問題を解決して最適なパフォーマンスを実現する方法について説明します.
HTTPリクエストを減らす:Webページがサーバからファイルを取得すると、HTTPリクエストが発生します.範囲には、スクリプト、CSSファイル、ピクチャ、およびasynchroneousクライアント/サービス側リクエスト(Ajaxおよびその他の変更されたテクノロジー)が含まれます.これは性能に言及する際のポイントですが、体力を費やすだけで簡単に解決できます.たとえば、可能な限りスクリプト、CSS、および画像をマージして、ユーザーのマシン上でファイルをキャッシュするのに役立ちます.
追加期限ヘッダ:80%のページロード時間はダウンロードスクリプト、画像、CSSに関係する.多くの場合、これらの要素はユーザーのマシンでは変更されません.htaccessにコードキャッシュをユーザーのローカルマシンに追加します(後述します).
Gzipコンポーネント:Gzipingまたは圧縮JSファイル、ピクチャ、HTMLドキュメント、CSSドキュメントなど.ユーザーは、より小さなファイルバージョンをダウンロードし、Webページのロード速度を増加させることができます.これにより、サーバの消費量を削減できますが、解凍コンポーネントは、ユーザーのブラウザに応じてページ応答を遅くする可能性があります.
CSSを最上位に置きます:CSSファイルをウェブサイトの最上位に置いて、ウェブサイトができるだけ同時に他の部品をロードすることができて、例えば画像と文字.
jsを下端に置く:CSSをドキュメントのヘッダに置く、を閉じる前にjsを挿入するだけでよい.これらのスクリプトがバックグラウンドでロードされると、ユーザーはまず完全に見えるページを取得します.
CSS式の使用を避ける:私はCSS式(ダイナミック特性と呼ばれる)を使用したことがありません.これはIE固有のプログラミング概念(制御/条件付き構造など)を追加したCSS特性にすぎません.IE 8まで、三叉戟レイアウトエンジン(IEで使用される)はサポートされていません.どうせ彼らを使うのはいい考えがない.ある程度、PHPスクリプトを使用して、乱数、1日の時間、ブラウザなど、異なる条件に基づいて異なるCSSスタイルルールをロードします.
外部呼び出しJSとCSS:JSとCSSファイルを外部ファイルに配置し、ブラウザは呼び出しのたびにページのロード速度が速くなることをキャッシュします.
DNS検索を減らす:ユーザーがブラウザのアドレスバーにドメイン名を入力すれば、ブラウザはいつもDNSを実行してIPアドレスを検索し、ウェブサイトが多くの入り口の位置を持っていれば、必要なDNS検索も多くなる.DNSクエリは、可能な限り低いレベルを維持し、平均60〜100ミリ秒で行われる.
縮小JS:一般的なgzip圧縮とは異なり、縮小jsドキュメントは不要なスペース、tabs、その他の中と楊の選択文字を除去し、ファイルの総サイズを減らし、小さなページはより速いロード速度を得ることができ、JSMINを使用してJavaScriptを縮小することができます.
リダイレクトを回避:サーバ側ヘッダリダイレクト、jsリダイレクト、またはHTML要素リダイレクトにかかわらず.あなたのサイトは空白のページのヘッダをロードし、新しいページをロードします.ユーザーは必要なページを得るためにますます多くの時間を費やしているので、すべての代価を惜しまないでこのような状況を避けなければなりません.
重複スクリプトの除去:ブラウザが同じスクリプトをロードすると、ページのロード時間が増加します.これは非常に簡単な数学的な問題で、より多くのファイルはより多くのロード時間に等しいです.あなたのサイトをよくチェックして、jQueryや他のスクリプトを2回か3回呼び出していないことを確認します.
2.CSS精霊を使用してHTTP要求を減らす
CSS SpritesはTeslaが電流を発明してから最もcoolなことかもしれない.ええ、エジソンという意味です.
ええ、大きくありませんが、とてもコンパクトです.
CSS spritesは、cssの背景画像を統合することで、ページからサービスへのHTTPリクエストを削減し、ページのロード時間を簡単に削減することができます.
3.まずCSSをロードし、最後にJavaScriptをロードする
一部のサイトでは、機能を乱すHTTPリクエストを避けることはできません.
この点では、以下のいくつかの提案があります. body上の をロードする.は、
何が起こるの?ウェブページはユーザーのマシンに表示をロードするので、彼らの目は提供された内同をスキャンし始め、この時JavaScriptはちょうどバックグラウンドでロードするのに間に合った.i
ヒント:JavaScriptタグを移動したくない場合は、Webサイトの動作を台無しにすると思います.
4.サブドメイン名による同時ダウンロード
ファイルのダウンロードを増やすと、並行してダウンロードします.ページを開いてフッターのステータスバーを開くと、他のサイトをロードするとstaticが同時に表示されます.domain.comとc 1.domain.comが要求する.
これは非常に優れた負荷性能を最適化する方法である.単純な食用サブドメイン名であり,コンテンツは同じサーバ上にあるが,ブラウザは独立したサーバとして扱われる.
このような設定を行います.サーバ上に3つのサブドメイン名 を作成画像を各サブドメイン名のフォルダ内に 配置する新しいサブドメイン名におけるウェブサイトピクチャの位置パス を置き換える.
JavaScriptファイルは現在使用されており、2つ以上の同時実行はありません.
5. Adding an Expires Header
一部のWebサイトは非常に豊富で、上記のテクノロジーを使用してもパフォーマンスが向上するようです.
ユーザーがあなたのサイトにアクセスし、必要なページ、画像、スクリプトなどのHTTリクエストを生成します.
Expires Headerを使用すると、ユーザーのローカルマシンでこれらの要素をキャッシュすることができ、アクセス速度を向上させるだけでなく、帯域幅を節約することができます.Expires headerは、すべての画像、スクリプト、cssで使用できます.
あなたのサイトのルートディレクトリだけが必要です.htaccessファイルにコードを1行加えると簡単にできます.(ない場合は、テキストエディタで.htaccessとして保存し、ルートディレクトリにアップロードすることができます.)
下のhtaccess.icoです.pfd, .flv(Flashタイプファイル),.jpg, .pngなどは2010年の満期までの遠い期限を設けている.
注意:あまりにも遠いexpiresヘッダを設定すると、ファイルを更新するには名前を変更する必要があります.そうしないと、キャッシュを使用するユーザーは更新を見ることができません.
たとえば、avaScriptファイルを更新する必要がある場合は、バージョン番号を使用して古いバージョンのファイル(javascriptfile-1.0.js、javascriptfile-1.1.js)をすべて更新します.
原帖住所:http://www.20ju.com/content/V93677.htm
何が問題なのかを決める前に、サイトのロード時間を知ることが第一歩です.Webサイトの変更を加速させる必要があるかどうかを知ることもできます.
私たちが始める前に、YSlowをインストールしていない場合は、インストールしてください.彼はMozilla Firefoxの拡張子で、次のリンクから見つけることができます.https://addons.mozilla.org/en-US/firefox/addon/5369
まず、Six RevisionsのWebサイトを参照し、同じ例を使用してテストします(新しいラベルまたはブラウザウィンドウで開く必要があります).
ブラウザの有効な呼び出しには、図1のようなマイルメーターの欄があります.その横には、Webページのロードが完了すると、「YSlow」と数字が表示されます.数字は、ブラウザがWebサイトをロードするのにかかる時間(秒)を表します.私たちはこの数字ができるだけ低いレベルを維持することを望んでいます.
等級領域
各レベル要因を貫き、各レベル領域の短い秒速度と、これらの問題を解決して最適なパフォーマンスを実現する方法について説明します.
HTTPリクエストを減らす:Webページがサーバからファイルを取得すると、HTTPリクエストが発生します.範囲には、スクリプト、CSSファイル、ピクチャ、およびasynchroneousクライアント/サービス側リクエスト(Ajaxおよびその他の変更されたテクノロジー)が含まれます.これは性能に言及する際のポイントですが、体力を費やすだけで簡単に解決できます.たとえば、可能な限りスクリプト、CSS、および画像をマージして、ユーザーのマシン上でファイルをキャッシュするのに役立ちます.
追加期限ヘッダ:80%のページロード時間はダウンロードスクリプト、画像、CSSに関係する.多くの場合、これらの要素はユーザーのマシンでは変更されません.htaccessにコードキャッシュをユーザーのローカルマシンに追加します(後述します).
Gzipコンポーネント:Gzipingまたは圧縮JSファイル、ピクチャ、HTMLドキュメント、CSSドキュメントなど.ユーザーは、より小さなファイルバージョンをダウンロードし、Webページのロード速度を増加させることができます.これにより、サーバの消費量を削減できますが、解凍コンポーネントは、ユーザーのブラウザに応じてページ応答を遅くする可能性があります.
CSSを最上位に置きます:CSSファイルをウェブサイトの最上位に置いて、ウェブサイトができるだけ同時に他の部品をロードすることができて、例えば画像と文字.
jsを下端に置く:CSSをドキュメントのヘッダに置く、
CSS式の使用を避ける:私はCSS式(ダイナミック特性と呼ばれる)を使用したことがありません.これはIE固有のプログラミング概念(制御/条件付き構造など)を追加したCSS特性にすぎません.IE 8まで、三叉戟レイアウトエンジン(IEで使用される)はサポートされていません.どうせ彼らを使うのはいい考えがない.ある程度、PHPスクリプトを使用して、乱数、1日の時間、ブラウザなど、異なる条件に基づいて異なるCSSスタイルルールをロードします.
外部呼び出しJSとCSS:JSとCSSファイルを外部ファイルに配置し、ブラウザは呼び出しのたびにページのロード速度が速くなることをキャッシュします.
DNS検索を減らす:ユーザーがブラウザのアドレスバーにドメイン名を入力すれば、ブラウザはいつもDNSを実行してIPアドレスを検索し、ウェブサイトが多くの入り口の位置を持っていれば、必要なDNS検索も多くなる.DNSクエリは、可能な限り低いレベルを維持し、平均60〜100ミリ秒で行われる.
縮小JS:一般的なgzip圧縮とは異なり、縮小jsドキュメントは不要なスペース、tabs、その他の中と楊の選択文字を除去し、ファイルの総サイズを減らし、小さなページはより速いロード速度を得ることができ、JSMINを使用してJavaScriptを縮小することができます.
リダイレクトを回避:サーバ側ヘッダリダイレクト、jsリダイレクト、またはHTML要素リダイレクトにかかわらず.あなたのサイトは空白のページのヘッダをロードし、新しいページをロードします.ユーザーは必要なページを得るためにますます多くの時間を費やしているので、すべての代価を惜しまないでこのような状況を避けなければなりません.
重複スクリプトの除去:ブラウザが同じスクリプトをロードすると、ページのロード時間が増加します.これは非常に簡単な数学的な問題で、より多くのファイルはより多くのロード時間に等しいです.あなたのサイトをよくチェックして、jQueryや他のスクリプトを2回か3回呼び出していないことを確認します.
2.CSS精霊を使用してHTTP要求を減らす
CSS SpritesはTeslaが電流を発明してから最もcoolなことかもしれない.ええ、エジソンという意味です.
ええ、大きくありませんが、とてもコンパクトです.
CSS spritesは、cssの背景画像を統合することで、ページからサービスへのHTTPリクエストを削減し、ページのロード時間を簡単に削減することができます.
3.まずCSSをロードし、最後にJavaScriptをロードする
一部のサイトでは、機能を乱すHTTPリクエストを避けることはできません.
この点では、以下のいくつかの提案があります.
<head> にCSS </body> が閉じる前にJavaScriptをロードする.何が起こるの?ウェブページはユーザーのマシンに表示をロードするので、彼らの目は提供された内同をスキャンし始め、この時JavaScriptはちょうどバックグラウンドでロードするのに間に合った.i
ヒント:JavaScriptタグを移動したくない場合は、Webサイトの動作を台無しにすると思います.
deferプロパティを使用することをお勧めします.使用法は次のとおりです. <script defer='defer'>
4.サブドメイン名による同時ダウンロード
ファイルのダウンロードを増やすと、並行してダウンロードします.ページを開いてフッターのステータスバーを開くと、他のサイトをロードするとstaticが同時に表示されます.domain.comとc 1.domain.comが要求する.
これは非常に優れた負荷性能を最適化する方法である.単純な食用サブドメイン名であり,コンテンツは同じサーバ上にあるが,ブラウザは独立したサーバとして扱われる.
このような設定を行います.
JavaScriptファイルは現在使用されており、2つ以上の同時実行はありません.
5. Adding an Expires Header
一部のWebサイトは非常に豊富で、上記のテクノロジーを使用してもパフォーマンスが向上するようです.
ユーザーがあなたのサイトにアクセスし、必要なページ、画像、スクリプトなどのHTTリクエストを生成します.
Expires Headerを使用すると、ユーザーのローカルマシンでこれらの要素をキャッシュすることができ、アクセス速度を向上させるだけでなく、帯域幅を節約することができます.Expires headerは、すべての画像、スクリプト、cssで使用できます.
あなたのサイトのルートディレクトリだけが必要です.htaccessファイルにコードを1行加えると簡単にできます.(ない場合は、テキストエディタで.htaccessとして保存し、ルートディレクトリにアップロードすることができます.)
下のhtaccess.icoです.pfd, .flv(Flashタイプファイル),.jpg, .pngなどは2010年の満期までの遠い期限を設けている.
<FilesMatch "/.(ico|pdf|flv|jpg|jpeg|png|gif|js|CSS|swf)$">
Header set Expires "Thu, 15 Apr 2010 20:00:00 GMT"
</FilesMatch>
注意:あまりにも遠いexpiresヘッダを設定すると、ファイルを更新するには名前を変更する必要があります.そうしないと、キャッシュを使用するユーザーは更新を見ることができません.
たとえば、avaScriptファイルを更新する必要がある場合は、バージョン番号を使用して古いバージョンのファイル(javascriptfile-1.0.js、javascriptfile-1.1.js)をすべて更新します.
原帖住所:http://www.20ju.com/content/V93677.htm