帯域幅が増加するにつれて、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 を記述するときに、次の文のような冗長なステートメントを使用することがあります
。
マージン右: 20px;
マージン-ボトム: 10px;
margin-left: 20px;
次のよう
に簡略化できます:
margin: 10px 20px 10px 20px;
<p class="decorated">装飾されたテキストの段落</p>
＜p class="decorated">第 2 段落＜/p>
＜p class="decorated">第３段落＜/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 ツールを使用できます。
たとえば、サーバーがこのようなアドレス要求を受信した場合、
URL の後にスラッシュを追加します
。このアドレスでファイルの種類を判断するには時間がかかります。 Web がディレクトリの場合は、URL の後にスラッシュを追加して / に変更すると、サーバーがディレクトリ内のインデックスまたはデフォルト ファイルにアクセスしたいことが一目で明確にわかるようになり、保存できるようになります。ロード時間。
5. 高さと幅をマークすること
は非常に重要ですが、多くの人は怠け者やその他の理由で常にそれを無視します。 Web ページに画像や表を追加するときは、その高さと幅、つまり高さと幅のパラメーターを指定する必要があります。ブラウザがこれら 2 つのパラメータを見つけられない場合、画像のダウンロード中にサイズを計算する必要があります。画像が多数ある場合、ブラウザは常にページを調整する必要があります。これは速度に影響するだけでなく、ブラウジングエクスペリエンスにも影響します。
以下は比較的わかりやすい画像コードです:
<img id="moon" height="200" width="450" src=" />
ブラウザが高さと幅のパラメータを知っている場合、画像を表示できない場合でも、一時的に、ページは画像用のスペースも解放し、その後、次のコンテンツの読み込みを継続します。その結果、読み込み時間が短縮され、閲覧エクスペリエンスが向上し
ます
。
Web ページ上に多数のオブジェクトがある場合、ブラウザはネットワーク遅延に応じて大量のオブジェクト リクエスト (画像、スクリプトなど) を発行します。この処理には時間がかかることがあります。
したがって、http リクエストの負荷を
軽減するにはどうすればよいでしょうか。2.
2
つの隣接する画像を 1 つに結合します。
次の 3 つの CSS をロードする必要があります。
＜リンク rel="stylesheet" type="text/css" href="/body.css" />
＜リンク 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. 統計コードはページの最後に配置されます。