ウェブデザイナーは3つの側面からウェブページを最適化する必要がある

帯域幅の増加に伴い、Web ページ上のオブジェクトも増えているため、Web ページのオープンを高速化することは依然として重要な課題です。 Web ページの起動を高速化する方法には 3 つあります。1 つ目はネットワーク帯域幅を増やすこと、2 つ目はユーザーがローカルコンピューターで最適化すること、3 つ目は Web サイトデザイナーが Web ページを最適化することです。この記事では、Web サイトのデザイナーの観点から、Web ページの読み込み速度を最適化するためのヒントをいくつか紹介します。
1. 画像を最適化する 画像のない Web ページはほとんどありません。 56K モデムの時代を生きてきた人なら、画像の多い Web サイトは絶対に好きではないでしょう。そのような Web ページを読み込むには、かなりの時間がかかるからです。
ネットワーク帯域幅が大幅に改善され、56K モデムが徐々に廃止されつつある現在でも、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 ページや、画像の品質に対する要件が高い Web ページで使用されます。
3. CSSを最適化する
CSS カスケードスタイルシートにより、Web ページの読み込みが効率化され、ブラウジングエクスペリエンスが向上します。 CSS を使用すると、レイアウト方法としてテーブルを廃止できます。
しかし、CSS を記述するときには、次のようなより長い文を使用することもあります。
上マージン: 10px;
右マージン: 20px;
下マージン: 10px;
左マージン: 20px;
次のように簡略化できます。
マージン: 10px 20px 10px 20px;

あるいはこれ:
装飾されたテキストの段落
2 番目の段落
第 3 段落
第 4 段落
div を使用して以下を含めることができます:
<div class="装飾">
装飾されたテキストの段落
2 番目の段落
第3段落
第4段落
</div>
CSS を簡素化すると、冗長な属性が削除され、運用効率が向上します。 CSS を記述した後に縮小するのが面倒な場合は、CleanCSS などのオンライン縮小ツールを使用できます。

前のページ1 2 次のページ全文を読む

<<: 色の16進数カラーコード表表示と16進値の比較表示で簡単に検索できます

>>: 主軸上のFlex子要素の比率を制御する方法