ウェブサイトができるだけ早くロードすることが非常に重要です。ユーザーは、見たいページをすばやく表示したいと考えています。満足できない場合は、他の場所で探します。この記事では、Webページをスピードアップするための5つのシンプルで効果的なテクニックの議論をご覧ください。
Webサイトの読み込み時間を知ることは、何がうまくいかないかを決定する前の最初のステップです。また、Webサイトのスピードアップに変更を加える必要があるかどうかもお知らせします。
開始する前に、YSLOWをまだインストールしていない場合は、インストールしてください。 Mozilla Firefoxの延長です。以下のリンクから見つけることができます。
まず、6つのRevisions Webサイトを閲覧しましょう。同じ例を使用してテストします(新しいタブまたはブラウザウィンドウでのみ開く必要があります)。
ブラウザには、走行距離計の列があります(図1に示すように)。その隣に、Webページが読み込みが終了したときに、YSLOWと数字が表示されます。番号は、ブラウザがWebサイトをロードするのにかかる時間(秒単位)を表します。この数値をできるだけ低くしたいと考えています。
図1:Webページの読み込み時間を示すYSLOWアイコンと走行距離計
ほとんどの場合、Webページの長い読み込み時間を引き起こす1つまたは1つの理由は次のとおりです。
これらについては後で説明します。
自分のウェブサイトの読み込み時間が表示されるようにするには、いくつかのWebサイトを閲覧してください。 Google、Facebook、および好きなブログやWebサイトをご覧ください。 Webサイトが使用する画像が多いほど、JSページの応答時間が長くなることに気付くでしょう。
YSLOWは、どれだけ速く負荷がかかるかを測定することに加えて、ウェブサイトのパフォーマンスを向上させるためにできることや、ウェブサイトの負荷パフォーマンスの欠如のような詳細な洞察を提供します。
下の写真は「パフォーマンス」タブです(図2に示すように)。ただし、クリックすると、荷重時間と全体的なパフォーマンスに影響する各エリアの詳細が表示されます。
図2:パフォーマンスタグ
この分野では、最も主観的な選択は、CDN(コンテンツ配信ネットワーク)を使用することです。CDNは大規模なWebサイトに非常に効果的です。彼らがしていることは、さまざまな地域のサーバー全体にウェブサイトのコンテンツを広めることです。物理サーバーがウェブサイトをロードするユーザーに近いほど、ページが速くなります。したがって、基本的に、CDNを使用することは、サーバーから最も近いアクセスページユーザーにコンテンツを配布することです。
図3:パフォーマンスタグは文字(a、b、c、d、f)を使用して、グレードと現在のグレード(1-100)を表します。
CDN(コストがかかる可能性がある)を使用する以外に、他のすべては実行可能です。
各レベル係数を実行しましょう。各レベルフィールドの短い2番目の速度と、これらの問題を解決して最適なパフォーマンスを実現する方法を示します。
HTTP要求の削減:Webページがサーバーからファイルを取得すると、HTTPリクエストが生成されます。範囲には、スクリプト、CSSファイル、写真、および非同期クライアント/サーバーリクエスト(AJAXおよびその他の変化するテクノロジー)が含まれます。これは、パフォーマンスについて話すときの重要なポイントですが、ほんの少しの努力で簡単に解決できます。たとえば、ユーザーのマシンにファイルをキャッシュすることができるだけのスクリプト、CSS、および画像をマージすると、多くの場合役立ちます。
用語ヘッダーの追加:ページの読み込み時間の80%は、スクリプト、写真、CSSのダウンロードに関連しています。ほとんどの場合、これらの要素はユーザーのマシンで変化しません。ユーザーのローカルマシンの.htaccessのコードをキャッシュできます(記事の後半で操作する方法について説明します)。
GZIPコンポーネント:GZIPINGまたは圧縮されたJSファイル、写真、HTMLドキュメント、CSSドキュメントなど。ユーザーは、小さなファイルバージョンをダウンロードして、Webページの読み込み速度を上げることができます。これにより、サーバーの消費が減少する可能性がありますが、解凍コンポーネントは、ユーザーのブラウザに応じて、ページの応答を遅くすることもあります。
CSSを上部に置く:CSSファイルをWebサイトの上部に置きます。これにより、画像やテキストなどの他の部品を同時にロードできます。
JSを下部に置く:CSSをドキュメントの頭に置くと、<Boby>を閉じる前にJSを挿入する必要があります。これらのスクリプトはバックグラウンドにロードされていますが、ユーザーは最初に一見完全なページを取得します。
CSS式を避けてください:CSS式(動的特徴と呼ばれる)を使用したことはありません。これは、プログラミングの概念(コントロール/条件構造など)を追加するCSS機能であり、IE8のように、トライデントレイアウトエンジン(IEで使用)はサポートされなくなりました。とにかく、彼らは使用するのが良い考えを持っていません。ある程度、PHPスクリプトを使用して、乱数、時刻、ブラウザなどのさまざまな条件に基づいて、さまざまなCSSスタイルルールをロードします。
JSおよびCSSへの外部呼び出し:JSおよびCSSファイルを外部ファイルに配置し、ブラウザは各通話よりも速いページの読み込み速度でそれらをキャッシュします。
DNS検索の削減:ユーザーがブラウザのアドレスバーにドメイン名を入力する限り、ブラウザは常にIPアドレスを検索するDNSを実行します。ウェブサイトの入力場所が多いほど、必要なDNS検索が必要になります。レベルをできるだけ低く保ち、平均60〜100ミリ秒でDNSクエリを実行します。
ズームインJS :一般的なGZIP圧縮とは異なり、JSドキュメントのズームは、Zhonghe Yangの不必要なスペース、タブ、およびその他の選択文字を削除し、ファイルの合計サイズを縮小し、小さなページを削減することが速くなる可能性があります。 JSMINを使用して、JavaScriptをズームインできます。
リダイレクトを避ける:サーバーヘッダーリダイレクト、JSリダイレクト、またはHTML要素リダイレクトであるかどうか。あなたのウェブサイトは、空白ページのヘッダーをロードし、次に新しいページをロードします。ユーザーは、必要なページを取得するためにますます多くの時間を費やすため、これを避ける必要があります。
重複したスクリプトを削除する:同じスクリプトを読み込むブラウザは、ページの読み込み時間を増やすと、非常に単純な数学の問題であり、ファイルが増え、ロード時間が増えます。 Webサイトを再確認して、JQueryに2回または3回、または他のスクリプトに電話しないようにします。…それがたくさんあったとき、あなたのウェブサイトのパフォーマンスを向上させるために他のいくつかのテクニックに入る直前にYslowの次のタブに進みましょう。
図4:パーツラベル。
パーツタグ(図4に示すように)は、ウェブサイトの読み込み速度の増加の影響に関する洞察を提供できます。ここでは、現在のドキュメントがロードする必要がある時間、これらのファイルが圧縮されている場合、応答時間、ユーザーのマシンでキャッシュされているかどうか、キャッシュの有効期限が切れているかどうかを確認できます。これは、パフォーマンスと速度の最適化を測定するウェブサイトの適切な評価です。最後に、すべてのHTTP要求、ドキュメントが同時にダウンロードされたドキュメント、およびファイルがキャッシュされた統計タグ(図4に示すように)。空のキャッシュは、ブラウザがレンダリングページをダウンロードするために必要なファイルを表示します。一方、プライミングされたキャッシュには、ユーザーのブラウザキャッシュに既に存在するファイルのリストが表示されるため、ファイルをもう一度ダウンロードする必要がないようにブラウザのリクエストを保存します。
図5:統計タブ。