帯域幅の増加に伴い、Webページにはますます多くのオブジェクトがあるため、Webページの開くことをスピードアップすることは依然として重要なトピックです。 Webページの開設をスピードアップするには、ネットワーク帯域幅を増やすこと、2つ目はローカルマシンのユーザーを最適化することであり、3つ目はWebサイトデザイナーごとにWebページを最適化することです。この記事は、ウェブサイトデザイナーの視点に基づいており、Webページの読み込み速度を最適化するためのヒントを共有しています。
1。写真を最適化します
写真がないウェブページはほとんどありません。 56kの猫の年齢を経験した場合、多くの写真があるウェブサイトが好きではないでしょう。このようなWebページを読み込むには多くの時間がかかるためです。
今でも、ネットワークの帯域幅は大幅に改善されており、56K CATは徐々にフェードアウトしており、写真を最適化してWebページをスピードアップする必要があります。
画像の最適化には、画像の数の削減、画質の低下、適切な形式の使用が含まれます。
1.写真の数を減らす：不要な写真を削除します。
2。画質を下げる：それがあまり必要でない場合は、特にJPG形式を減らすことはあまり変わらないようですが、ファイルサイズの変更は大きくなります。
3.適切な形式を使用します：次のポイントを参照してください。
したがって、写真をアップロードする前に、Photoshopが面倒すぎると編集する必要があります。編集するにはあまりにも怠惰ですが、写真に特殊効果が必要ですか？ JavaScriptの呼び出しを使用して、画像の特殊効果を実装することを試みることができます。
2。画像形式の選択
一般的にWebページには、JPG、PNG、およびGIFの3つの画像があります。 Webページの時間。
1。JPG：一般的に、風景、キャラクター、芸術的な写真を表示するために使用される写真。コンピューターのスクリーンショットでも使用される場合があります。
2。GIF：提供された色は少なく、ウェブサイトのロゴ、ボタン、表現など、色が高い需要がない場所で使用できます。もちろん、GIFの重要なアプリケーションはアニメーションの写真です。 Lunapicで作られた反射絵のように。
3。PNG：PNG形式は透明な背景を提供でき、Webページディスプレイ用に特別に発明された画像形式です。通常、透明なバックグラウンドディスプレイを必要とするか、高い画質を必要とするWebページで使用されます。
3。CSSを最適化します
CSSオーバーレイスタイルシートにより、Webページにより、ブラウジングエクスペリエンスを読み込み、改善するのがより効率的になります。 CSSを使用すると、フォームレイアウトメソッドを廃止できます。
しかし、CSSを書くときに時々、この文のようないくつかの言葉の文章を使用します。
マージントップ：10px;
マージン右：20px;
マージンボトム：10px;
マージン左：20px;
あなたはそれを単純化することができます：
マージン：10px 20px 10px 20px;
またはこの文：
＜P class = "dorated">装飾されたテキストの段落/p>
＜P class = "dorated"> 2番目の段落＜/p>
＜P class = "dorated"> 3番目の段落＜/p>
＜p class = "dorated"> forth段落＜/p>
divを使用して以下を含めることができます。
＜div class = "decorated">
p>装飾されたテキストの段落/p>
p> 2番目の段落/p>
p> 3番目の段落/p>
p>ターボ段落＜/p>
＜/div>
簡素化されたCSSは、冗長属性を削除し、運用効率を向上させることができます。 CSSを書いた後に簡素化できない場合は、CleanCSSなどのオンラインで簡素化されたCSSツールを使用できます。
4. URLの背面にスラッシュを追加する
たとえば、サーバーがそのようなアドレスリクエストを受信する場合、一部のURLは、アドレスのファイルタイプを決定するのに時間がかかります。 Webがディレクトリである場合は、URLに追加のスラッシュを追加して、サーバーがディレクトリ内のインデックスまたはデフォルトファイルにはっきりとアクセスできるようにして、読み込み時間を節約できるようにすることもできます。
V.高さと幅を示します
これは重要ですが、多くの人々は怠lazやその他の理由のために常にそれを無視しています。 Webページに画像またはテーブルを追加するときは、高さと幅、つまり高さと幅のパラメーターを指定する必要があります。ブラウザがこれらの2つのパラメーターを見つけられない場合、画像のダウンロード中にサイズを計算する必要があります。これは速度に影響するだけでなく、閲覧体験にも影響します。
これが比較的フレンドリーな画像コードです：
＜IMGID = "voon" height = "200" width = "450" src = " />
ブラウザが高さと幅のパラメーターを知っている場合、当面画像を表示できなくても、画像はページで解放され、後続のコンテンツは引き続きロードされます。したがって、読み込み時間はより速く、閲覧体験が優れています。
6. HTTPリクエストを削減します
ブラウザがWebページを開くと、ブラウザは多くのオブジェクト要求（画像、スクリプトなど）を発行します。 Webページに多くのオブジェクトがある場合、これには多くの時間がかかる場合があります。
したがって、HTTPリクエストの負担を減らす必要があります。負担を軽減する方法は？
1.不要なオブジェクトをいくつか削除します。
2。近くの2つの写真を1つにまとめます。
3。CSSをマージします
次のコードを見てください。3つのCSSをロードする必要があります。
Rink rel = "styleSheet" type = "text/css" href = "/body.css"/>
relink rel = "styleSheet" type = "text/css" href = "/side.css"/>
relink rel = "styleSheet" type = "text/css" href = "/footer.css"/>
私たちはそれを1つに合成することができます：
relink rel = "styleSheet" type = "text/css" href = "/style.css"/>
これにより、HTTPリクエストが削減されます。
7。その他のヒント（翻訳者による追加）
1.不要なアドインを削除します。
2. Webページにある他のWebサイトからウィジェットを埋め込んだ場合、選択の余地がある場合は、高速なものを選択する必要があります。
3. SEOにとっても有益なフラッシュの代わりに写真を使用してみてください。
4.一部のコンテンツが静的になる可能性がある場合、サーバーの負担を減らすことは静的です。
5。統計コードはページの最後に配置されます。