ページの読み込み速度を上げるための10のヒント

ページの読み込み速度が多くの要因に影響することは誰にとっても秘密ではないと思います。 誰かが知らない場合、簡単に言うと次のとおりです。ダウンロード速度は、訪問者がサイトがロードされるまで待つかどうかだけでなく、SEOの最適化にも影響します。 実際、今日、多くの検索エンジンは、サイトをランク付けするときに、ページの読み込み速度を考慮し始めています。 したがって、サイトの読み込みが高速になるほど、検索エンジンからより多くの訪問者を獲得できるため、これからより多くのお金を稼ぐことができます。

そのため、この記事では、Webページとサイト全体の読み込み速度を上げる方法に関するトップ10のヒントを収集することにしました。 この記事は天才であると主張するものではなく、初心者を対象としています。

それでは、行きましょう：

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

ページの読み込みの80％は、ページコンポーネント（スクリプト、写真、CSSファイル、フラッシュ）の読み込みに集中しています。 HTTP / 1.1仕様では、ブラウザは単一のホストから2つ以下のWebページコンポーネントを同時にダウンロードすることを推奨しています。 これらのコンポーネントの数を減らすことにより、サーバーへのHTTPリクエストの数が減り、結果としてページの読み込み速度が向上します。

しかし、ページの外観に影響を与えずにサーバー要求の数を減らす方法はありますか？

実際にはいくつかの方法があります。

• CSSスプライトを使用します。 CSSスプライトは、背景画像と背景位置のプロパティを使用して、目的のページ要素に適切なタイミングで切り取られるいくつかの小さな画像を含む結合画像です。
• インライン画像の使用。 インライン画像はdata ： URLスキームを使用して、ページ自体に画像を埋め込みます。 ただし、これにより、HTMLドキュメントのサイズが大きくなります。 スタイルシートにインライン画像を埋め込むことにより、サーバー要求を減らし、HTMLサイズは同じままになります。
• 複数のファイルを1つにマージします。 ページに複数のcssまたはjsファイルが接続されている場合は、それらを1つに結合できます。 これは非常にシンプルですが、サーバーへのhttpリクエストの数を減らす効果的な方法です。 オンザフライでこれを行う方法については、 「サイトを加速する。 その場でのcssおよびjsファイルの静的圧縮»

2. CSSファイルをページの上部に配置します

ページヘッダーにcssファイルへの接続を配置することにより、ページの段階的なレンダリングを取得します。 ページは徐々に読み込まれます-最初にタイトル、次に上部のロゴ、ナビゲーションなど。 -そして、これは、ユーザーのページ読み込みの優れた指標として機能し、サイトの全体的な印象を改善します。

CSSファイルをページの下部に配置すると、多くのブラウザーがページを徐々にレンダリングするのを防ぎます。 これは、ブラウザがページの読み込み後にスタイルを変更する可能性のある要素を再描画したくないためです。 そのため、すべてのCSSファイルを常にページ上部のHEADセクションに含めてください。

3.ページの下部にJavaScriptを配置します

ページの下部にjavascriptファイルを配置することにより、ブラウザーは最初にコンテンツを含むページをロードし、その後にのみJavaScriptファイルのロードを開始します。 サイトが常に最新であり、可能なすべてのインタラクティブな「ガジェット」を含んでいる場合、これらのjavascriptファイルがいくつか存在する可能性があり、数百キロバイトになる可能性があるため、ページをロードする前に、すべてのjavasciptファイルがロードされるまでユーザーを待たせます。

さらに、外部.jsファイルは並列読み込みをブロックします。 HTTP / 1.1仕様では、ブラウザは単一のホストから2つ以下のWebページコンポーネントを同時にダウンロードすることを推奨しています。 したがって、サイトのイメージが異なるホストにある場合、2つ以上の並行ダウンロードを取得できます。 また、スクリプトが読み込まれると、ブラウザは他のホストからでも他のダウンロードを開始しません。

4. CSSとJavaScriptを最小化する

ファイルの最小化とは、ファイルのサイズを縮小し、ロードを高速化するために、コードからすべての非必須文字を削除することです。 最小化されたファイルでは、すべてのコメントと意味のないスペース、改行、タブが削除されます。 ここではすべてが簡単です。 ファイルサイズが小さいほど、ブラウザがダウンロードする時間が短くなります。 また、 CSSコードを圧縮および最適化するこれらの24のオンラインサービスは 、 コードの最小化に役立ちます。
5.並列ダウンロードにサブドメインを使用する

前述したように、HTTP / 1.1仕様によれば、ブラウザーは同時にロードされるサイトコンポーネントの数、つまり1つのホストから2つ以下のコンポーネントに制限を課します。 したがって、サイトに多くのグラフィックスがある場合は、1つまたは複数の個別のサブドメインに配置することをお勧めします。 あなたにとって、それは同じサーバーになりますが、ブラウザにとっては異なります。 作成するサブドメインが多いほど、ブラウザが同時にダウンロードできるファイルが多くなり、サイトのページ全体の読み込みが速くなります。 写真のアドレスを新しいものに変更するだけです。 非常にシンプルだが効果的な方法。

6.ブラウザのキャッシュを使用する

キャッシングは、JavaScriptとCSSの広範な接続を使用する最新のWebサイトにとって重要になっています。 実際には、訪問者が初めてサイトにアクセスすると、ブラウザーはすべてのjavascriptファイルとcssファイルをダウンロードし、すべてのグラフィックとフラッシュもダウンロードしますが、Expires HTTPヘッダーを正しく設定すると、ページコンポーネントがキャッシュ可能になります。 したがって、訪問者が再びサイトにアクセスするか、サイトの次のページに移動すると、ブラウザのキャッシュには必要なファイルがすでに含まれているため、ブラウザでそれらを再度ダウンロードする必要はありません。 したがって、サイトの読み込み速度が向上します。

したがって、可能な限り、数日または数か月前にExpires HTTPヘッダーを設定してください。 Apache Webサーバーが推奨事項に準拠するExpires HTTPヘッダーを提供するには、サイトのルートフォルダーにある.htaccessファイルに次の行を追加する必要があります。

<IfModule mod_expires.c> Header append Cache-Control "public" FileETag MTime Size ExpiresActive On ExpiresDefault "access plus 0 minutes" ExpiresByType image/ico "access plus 1 years" ExpiresByType text/css "access plus 1 years" ExpiresByType text/javascript "access plus 1 years" ExpiresByType image/gif "access plus 1 years" ExpiresByType image/jpg "access plus 1 years" ExpiresByType image/jpeg "access plus 1 years" ExpiresByType image/bmp "access plus 1 years" ExpiresByType image/png "access plus 1 years" </IfModule> 

Apache Webサーバー構成ファイルのこのフラグメントは、mod_expiresモジュールの存在を確認し、mod_expiresモジュールが使用可能な場合、Expires HTTPヘッダーの配信を有効にします。これにより、ブラウザーおよびプロキシサーバーのキャッシュ内の上記オブジェクトの有効期間が最初のロードの瞬間から1年に設定されます。 このブラウザキャッシュの有効期間を設定すると、ファイルの更新が困難になる場合があります。 したがって、cssファイルまたはjavascriptファイルの内容を変更し、これらの変更をブラウザーキャッシュで更新する場合は、ファイル自体の名前を変更する必要があります。 通常、ファイルバージョンはファイルの名前に追加されます。例：styles.v1.css

7. CDNを使用して一般的なJavaScriptライブラリをロードする

サイトでjQueryなどの一般的なjavascriptフレームワークを使用している場合、CDNを使用して接続することをお勧めします。

CDN （コンテンツ配信ネットワーク）は、地理的に分散した多数のWebサーバーであり、クライアントへのコンテンツ配信の最大速度を実現します。 ユーザーにコンテンツを直接配信するサーバーは、いくつかの指標に基づいて選択されます。 たとえば、中間の希望数が最も少ないサーバー、または応答時間が最も短いサーバーを選択します。 さらに、ブラウザはjavascriptファイルをキャッシュします。このメソッドを使用するサイトにアクセスした場合、このライブラリは既にブラウザのキャッシュにあり、再度読み込まれません。

そのようなCDNの1つがGoogle Librariesです。 これは、人気のあるオープンソースJavaScriptライブラリのCDNです。 Google Librariesから人気のあるJavaScriptフレームワークをダウンロードすると、ページの読み込み速度を上げ、サーバーへのトラフィックを減らすことができます。

GoogleリポジトリからjQueryをダウンロードする方法については、この記事「GoogleリポジトリからjQueryをロードすることでページのロード速度を向上させます」で説明しました 。

8.画像を最適化する

画像に適した形式を決定する必要があります。 間違った画像形式を選択すると、ファイルサイズが大幅に増加する可能性があります。

• GIF-ロゴなど、複数の色を持つ画像に最適です。
• JPEG-写真など、色の多い詳細な画像に最適です。
• PNGは、透明度のある高品質の画像が必要な場合に選択します。

画像を最適化するには、インターネット上のプログラムまたはオンラインサービスを使用して画像を圧縮する2つの方法があります。 前者の場合、特定のプログラムを使用するには特定の知識が必要ですが、誰でもオンラインサービスを使用できます。 必要な画像をダウンロードするだけで、サービス自体がそれらを最適化し、既に圧縮されたファイルをダウンロードするためのリンクを提供します。

オンライン画像最適化サービスの一部を次に示します。

• www.punypng.com
• Smush.it
• www.jpegmini.com

9.画像を拡大縮小しないでください

タグの幅と高さの属性を使用して、またはCSSを使用して画像のサイズを変更しないでください。 これは、ページの読み込み速度にも悪影響を及ぼします。 500x500pxのサイズの画像があり、100x100pxのサイズの画像をサイトに挿入する場合は、Photoshopグラフィックエディターなどを使用して元の画像のサイズを変更することをお勧めします。 画像の重みが小さいほど、ダウンロードにかかる時間が短くなります。

10. gzip圧縮を使用する

調査が示したように、95〜98％のケースでテキストファイルを「オンザフライ」でgzip圧縮すると、ファイルをブラウザに転送するのにかかる時間を短縮できます。 アーカイブされたファイルのコピーをサーバー（プロキシサーバーのメモリまたは単にディスク）に保存すると、一般に接続が3〜4倍速く解放されます。

HTTP / 1.1プロトコルバージョン以降、Webクライアントは、HTTP要求でAccept-Encodingヘッダーを設定することにより、サポートする圧縮の種類を示します。

Accept-Encoding：gzip、deflate

Webサーバーがリクエストでそのようなヘッダーを検出した場合、クライアントによってリストされたメソッドのいずれかを使用して応答圧縮を適用できます。 Content-Encodingヘッダーを介して応答を発行すると、サーバーは、応答が圧縮されたメソッドをクライアントに通知します。

コンテンツエンコーディング：gzip

この方法で送信されるデータは元のデータの約5倍小さく、これにより配信が大幅に高速化されます。 ただし、1つの欠点があります。Webサーバーの負荷が増加します。 ただし、サーバーの問題はいつでも解決できます。 したがって、これには注意を払いません。

サイトでGZIP圧縮を有効にするには、.htaccessファイルに次のコード行を記述する必要があります。

 <IfModule mod_deflate.c> AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/css <IfModule mod_setenvif.c> BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html </IfModule> </IfModule> 

このメソッドが機能した場合は、問題がなければ、次のようにこのコードを試すことができます。

 <IfModule mod_deflate.c> AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/javascript text/css application/x-javascript BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4.0[678] no-gzip BrowserMatch bMSIE !no-gzip !gzip-only-text/html <ifmodule mod_gzip.c> mod_gzip_on Yes mod_gzip_item_include file \.js$ mod_gzip_item_include file \.css$ </ifmodule> </IfModule> 

ただし、このコードはすべてのサーバーで機能するわけではないため、ホスティングプロバイダーのサポートサービスに連絡して、この問題を明確にすることをお勧めします。

さて、私が伝えたかったのはそれだけです。 この記事では、Webページの読み込み速度を上げるために、クライアント最適化のすべての主要な方法をリストしようとしました。 クライアントの最適化に加えて、サーバーの最適化もあります。 しかし、これは別の記事のトピックです。

あなたが何かを見逃したか、何か追加したいことがあるなら、この投稿へのコメントにあなたの意見を書いてください。 ご清聴ありがとうございました！