ウェブページの読み込み速度を上げる簡単なヒント

Web ページの読み込み速度は、Web サイトの品質を評価するための重要な指標です。その理由は、ほとんどのユーザーがウェブページの読み込み時間を数秒しか許容できないからです。訪問者の許容範囲を超えると、容赦なくウェブページを閉じてしまうため、ウェブページの読み込み速度はウェブサイトのトラフィックと訪問数に大きな影響を与えます。以下では、Web サイトの読み込み速度を大幅に向上できるいくつかの簡単な予備的なテクニックをまとめています。Web サイトの読み込み速度が遅いという問題がある場合は、これを参考にして Web ページを予備的に最適化することをお勧めします。

Web ページの読み込みを高速化 - Web ページの画像ファイルを最適化<br />Web ページには画像が必要ですが、Web ページを読み込むときに、特にカラフルな背景画像や大きな広告画像などの画像の合計サイズが最も大きくなることがよくあります。そのため、一般的には、同じ画質を維持しながら、画像サイズを可能な限り縮小する必要があります。 Photoshop では、Web 画像として保存するオプションを試すことができます。画像によく使用されるファイル形式もいくつかあります。たとえば、JPEG は通常、写真やスクリーンショットなどのフルカラー画像を保存するために使用されます。 GIF 画像形式は JPEG よりも色数が少なく、ボタンやロゴなどの小さな画像に適しています。また、GIF は動的効果もサポートしています。 PNG は GIF に似ていますが、サイズが大きく、GIF よりも多くの色をサポートし、背景の透明度をサポートします。 PNG や JPEG を GIF に変更するなど、別の形式で画像を保存してみることもできます。

ウェブページの読み込みを高速化 - 画像に高さと幅の属性を使用する<br />各画像に高さと幅の属性を追加しますか?これら 2 つの属性により、ブラウザは画像を読み込む前に画像の長さと幅を認識し、画像が読み込まれた後に表示される指定された長さと幅を予約できます。これら 2 つの属性がないと、ブラウザは画像を正常に読み取った後にページレイアウトスタイルを再度処理する必要があり、Web ページの読み込み速度が間違いなく低下します。したがって、画像サイズが固定されている場合は、length 属性と width 属性を使用するのが最適です。

ウェブページの読み込みを高速化 – CSSファイルの圧縮とスリム化
DIV+CSS は、Web ページをレイアウトするためのスムーズな方法になりました。DIV は要素を定義し、CSS は表示効果を制御します。そのため、CSS を 1 つ以上の外部リンクされた CSS ファイルに書き込むことが多く、CSS ファイルコードにも多くの行が含まれます。いくつかの CSS 圧縮ツールを使用して、CSS ファイル内の不要な冗長コンテンツ (繰り返しのスタイル定義、スペースなど) を削除し、サイズを縮小することができます。 CleanCSS ツールを使用して CSS ファイルを圧縮してみることもできます。

ウェブページの読み込みを高速化するには、ディレクトリアドレスの後にスラッシュ（/）を追加します。
たとえば、訪問者が https://www.jb51.net/web のようなディレクトリアドレスをクリックすると、このディレクトリ内の index.html ドキュメントが開きます。サーバーがリクエストを受信すると、それがファイルであるかディレクトリであるかを分析するのに時間がかかります。ただし、最後にスラッシュ (/) を追加すると、サーバーはディレクトリアドレスにアクセスしていることを認識し、デフォルトのドキュメント index.html または index.php を直接読み込みます。この方法により、サーバーはアドレスの分析に時間を費やす必要がなくなり、一定の加速効果も得られます。

Web ページの読み込みを高速化 - CSS および JS ファイルを統合して HTTP リクエストの数を削減します<br />今日の Web ページには、複数の画像、CSS 外部ファイルリンク、および Javascript 外部スクリプトリンクが含まれています。したがって、Web ページにアクセスする場合、ブラウザはサーバーにこれらのファイルを複数回要求する必要があります。リクエストと読み込みの間には、かなりの時間差が生じます。特に、小さな画像やアイコンボタンが複数ある Web ページの場合、ブラウザーは画像の数と同じ数の小さなファイルを要求する必要があります。これらの小さな画像ファイルを何度も要求すると、Web ページの読み込み速度が明らかに低下します。そのため、できるだけ小さな画像を大きな PNG 画像に結合し、座標を通じてアイコンを表示する必要があります。大きな画像を一度リクエストする方が、小さな画像を複数リクエストするよりもはるかに高速です。同様に、ページの読み込みを高速化するには、CSS と JavaScript を可能な限り 1 つのファイルにまとめるのが最適です。

結論として、ここではいくつかのシンプルで基本的なヒントのみを説明します。これらは最も簡単に実行できる最適化方法だからです。次に、Web ページのコード (php または aspx) が最適化され効率的であるかどうか、サーバーの応答速度、サーバーの帯域幅が十分であるかどうか、その他のより深い要因も考慮する必要があります。しかし、上記の点がうまく行えば、Web ページの加速速度は大幅に向上すると思います。

<<: ES6 Promiseの使い方の詳細な説明

>>: Win10でのJDKのインストールと環境変数の設定に関する詳細なチュートリアル