インターネットの帯域幅はますます広くなり、Web ページの読み込み速度が質的に飛躍的に向上しているようです。実際にはそうではありません。帯域幅の増加に伴い、Web ページ上のオブジェクトがますます増えているため、Web ページを開く速度を高速化することが依然として重要な問題です。 Web ページを開く速度を高速化するには 3 つの方法があり、1 つはネットワーク帯域幅を増やすこと、もう 1 つはユーザーのローカル マシンを最適化すること、そして 3 つ目は Web サイトのデザイナーが Web ページをある程度最適化することです。この記事は Web サイト デザイナーの観点から書かれており、Web ページの読み込み速度を最適化するためのヒントをいくつか紹介します。
1. 画像を最適化する
画像のない Web ページはほとんどありません。 56,000 匹の猫の時代を経験している人は、写真がたくさんある Web サイトを好まないでしょう。なぜなら、そのようなWebページを読み込むにはかなりの時間がかかるからです。
現在でも、ネットワーク帯域幅は大幅に改善されており、56,000 個の猫は徐々にフェードアウトしています。Web ページを高速化するには、画像を最適化する必要があります。
画像の最適化には、画像数の削減、画質の低下、および適切な形式の使用が含まれます。
1. 画像の数を減らします: 不要な画像を削除します。
2. 画質を下げる: 必要がない場合は、特に jpg 形式で画質を下げるようにしてください。品質の 5% の低下はそれほど大きな変化ではないように見えますが、ファイル サイズの変化は比較的大きくなります。
3. 適切な書式設定を使用します。次の点を参照してください。
したがって、Photoshop が面倒だと思う場合は、アップロードする前に画像を編集する必要があります。オンラインの画像編集ツールを試してみてください。編集するのは面倒だけど、写真に特殊効果を加えたいですか? JavaScript を呼び出して画像効果を実現してみてください。
2. 画像形式の選択
Web ページで使用される画像形式は、一般的に jpg、png、gif の 3 つです。 3 つの形式の具体的なテクニカル指標はこの記事の内容ではありません。Web ページの読み込み時間を短縮するにはどの形式をいつ使用する必要があるかを知ることだけが必要です。
1. JPG: 一般的に、風景、人物、芸術的な写真などの写真作品を展示するために使用されます。コンピューターのスクリーンショットで使用されることもあります。
2. GIF: 提供する色が少なく、Web サイトのロゴ、ボタン、絵文字など、色の要件が高くない場所で使用できます。もちろん、gif の重要な用途はアニメーション画像です。ルナピックで作った反射写真みたいな。
3. PNG: PNG 形式は透明な背景を提供でき、Web ページ表示用に特別に考案された画像形式です。通常、透明な背景表示や高画質要件が必要な Web ページで使用されます。
3. CSS の最適化
CSS カスケード スタイル シートにより、Web ページの読み込みがより効率的になり、ブラウジング エクスペリエンスが向上します。 CSS を使用すると、テーブル レイアウトを廃止できます。
ただし、
CSSを
記述するときに、次のような冗長なステートメントを使用することがあります。
これを次
の
ように簡略化します
。
10px 20px 10px 20px;
または次の文:
<p class="decorated">装飾されたテキストの段落</p>
<p class="decorated">2 番目の段落</p>
<p class= ”decorated”>3 番目の段落</p>
<p class="decorated">4 番目の段落</p> は
div に含めることができます:
<div class="decorated">
<p>装飾されたテキストの段落</p>
<p>2 番目の段落</p>
<p>3 番目の段落</p>
<p>4 番目の段落</p>
</div>
CSS を簡素化すると、冗長な属性が削除され、操作効率が向上します。 CSS を作成した後に簡略化するのが面倒な場合は、CleanCSS などのオンラインの簡略化 CSS ツールを使用できます。
4. URL の後にスラッシュを追加します。
「www.kenengba.com/220」などの一部の URL では、サーバーがそのようなアドレス要求を受信すると、このアドレスのファイル タイプを判断するのに時間がかかります。 220 がディレクトリの場合は、URL の後にスラッシュを追加してwww.kenengba.com/220/にすることもできます。これにより、サーバーは、ディレクトリ内のインデックスまたはデフォルト ファイルにアクセスしたいことが一目でわかります。ディレクトリに保存されるため、ロード時間が節約されます。
5. 高さと幅をマークすること
は非常に重要ですが、多くの人は怠け者やその他の理由で常にそれを無視します。 Web ページに画像や表を追加するときは、その高さと幅、つまり高さと幅のパラメーターを指定する必要があります。 ブラウザがこれら 2 つのパラメータを見つけられない場合、画像のダウンロード中にサイズを計算する必要があります。画像が多数ある場合、ブラウザは常にページを調整する必要があります。これは速度に影響するだけでなく、ブラウジングエクスペリエンスにも影響します。
以下はわかりやすい画像コードです:
<img id=”moon” height=”200″ width=”450″src
=”” <p class=”pictext”>alt=”moon image” />
</p>
ブラウザは高さと幅のパラメータを認識しているため、画像を一時的に表示できない場合でも、ページ上に画像用のスペースを確保し、次のコンテンツの読み込みを続けます。その結果、読み込み時間が短縮され、ブラウジング エクスペリエンスが向上します。
6. http リクエストを削減します。
ビューアが Web ページを開くと、ブラウザはネットワーク遅延に応じて多くのオブジェクト リクエスト (画像、スクリプトなど) を発行します。ページ上に多くのオブジェクトがある場合、これには時間がかかることがあります。
したがって、http リクエストの負荷を軽減する必要があります。負担を軽減するにはどうすればよいですか？
1. 不要なオブジェクトをいくつか削除します。
2. 隣接する 2 つの画像を 1 つに結合します。
3. CSS をマージします。
次のコードを見てください。
<link rel=”stylesheet” type=”text/css” href=”/body.css” />
<link rel=”stylesheet ” type= ”text/css” href=”/side.css” />
<link rel=”stylesheet” type=”text/css” href=”/footer.css” />
これを 1 つに結合できます。
< link rel= ”stylesheet” type=”text/css” href=”/style.css” />
これにより、http リクエストが削減されます。
7. その他のヒント
1. 不要なアドオンを削除します。
2. 他の Web サイトのウィジェットが Web ページに埋め込まれている場合、選択肢がある場合は、必ず高速なものを選択してください。
3. フラッシュの代わりに写真を使用するようにしてください。これは SEO にも効果的です。
4. 一部のコンテンツを静的にできる場合は、サーバーの負荷を軽減するために静的にします。
5. 統計コードはページの最後に配置されます。