Web サイトのページを開く速度を向上させる 12 の提案_html/css

ユーザーは閲覧速度の速い Web サイトを好み、Web ページが開くまでにあまり長い時間を費やすことを好まないことを私たちは知っています。待ち時間が長すぎると、ユーザーは忍耐力を失い、Web ページを直接閉じてしまうことさえあります。イライラしているため、潜在的な顧客を失うことになります。

次に、SEO の観点から見ると、キーワードのランキングは Web ページの開く速度にも関係します。Google の Web 検索チームは、Web サイトの速度を PR (PageRank) の要素として使用することを公式ブログで発表しました。すべての条件が同じであれば、高速なサイトが低速なサイトよりも上位にランクされます。同時に、多くのウェブサイトが最適なページ最適化技術を使用しておらず、ページの読み込み速度に大きな欠陥があることも指摘されています。では、この問題を解決し、Web サイトのページの読み込み速度を向上するにはどうすればよいでしょうか?

1. JS ファイルと CSS を結合する

JS コードと CSS スタイルを共有ファイルに結合するこれは、コードを簡素化するだけでなく、JS ファイルが多数ある場合には、JS ファイルを実行するときにも必要です。 JS ファイルを結合すると、Get リクエストの数が自然に減り、読み込み速度が向上します (詳細については、Ma Haixiang のブログ「6 種類の Web サイト」を参照してください)。 Web サイトの速度を向上させるフロントエンドの最適化「メソッド」関連の紹介)。

ユーザーが CSS で設計された Web ページを開くと、CSS は通常、ユーザーのローカルコンピューターにダウンロードされます。CSS では、タグを表現する HTML 要素とは異なり、Web サイトの Web ページごとに 1 回だけ呼び出す必要があります。一度呼び出す必要があります!さらに、css は場所によっては画像を置き換えることができるため、div+css が現在推奨されています。

2. スプライト画像テクノロジー

スプリッティングは、ページに含まれるすべての散発的な画像を 1 つの大きな画像に含めて、CSS テクノロジーを使用して表示します。このようにして、ページにアクセスすると、読み込まれた画像が以前のように 1 つずつゆっくりと表示されることがなくなり、Web ページ全体の画像サイズを削減でき、CSSSprites の使用により Web ページのサイズを効果的に削減できます。 .http リクエストにより、ページのパフォーマンスが大幅に向上します。

CSSSprites は中国の多くの人々に CSS スプライトと呼ばれており、長い間存在しており、特にすべてのページに存在するいくつかのアイコンがより頻繁に使用されており、読み込みを大幅に改善できます。スピード。

3. テキストと画像を圧縮します

gzip などの圧縮テクノロジを使用すると、ページの読み込み時間を効果的に短縮できます。 HTML、XML、JSON (JavaScript Object Notation)、JavaScript、CSS などを含めると、圧縮率は約 70% になります。

一般的にはテキスト圧縮がより頻繁に使用され、通常はスペース内で直接オンにすることができますが、画像圧縮はよりカジュアルで、実際にはまだ多くの圧縮スペースが存在します。。

4. 表示領域外のコンテンツの遅延表示

ユーザーが表示領域の Web ページをより速く表示できるようにするために、ページの読み込みを遅らせたり、表示領域外のコンテンツを表示したりすることができます。変形する場合は、プレースホルダータグを使用して、正しい高さと幅を指定できます。

例: WP の jQueryImage LazyLoad プラグインは、ユーザーが最初の画面に留まっている場合、最初の画面の下にある画像情報をロードできません。これらの画像は、ユーザーがマウスを下にスクロールしたときにのみロードを開始します。これにより、表示領域の読み込み速度が明らかに向上し、ユーザーエクスペリエンスが向上します。

5. 機能的な画像が最初にロードされることを確認します

この Web サイトでは主に使いやすさを重視しており、ユーザーがダウンロードページにアクセスする際、ダウンロードには 5 秒しかかかりません。ダウンロードボタンを見つけるのに数秒かかります (解決策については、Ma Haixiang のブログの「Web ページの画像のプリロード効果を達成するための 3 つの技術的方法」を参照してください)。

注意が必要なもう 1 つの問題があります。画像の長さと幅を事前に設定できる場合、これらのマークは画像を開く前にブラウザーにサイズを通知することがよくあります。ブラウザーは Web ページ全体の表示を高速化するために領域を予約します。

6. CTA ボタンを再配置します

実際、これはどちらもユーザーエクスペリエンスの速度から始まり、Web ページの全体的な読み込み速度をスキップします。速度は変わっていませんが、一部のアクションボタンは通常、ページの下部に設計されており、購入ユーザーにとっては、下部が読み込まれるまで待つ必要があるのは必ずしも良いことではありません。「次へ」をクリックします。

CTA ボタンの位置を調整したり、多くの大手ショッピングウェブサイトでカートに追加するタイプのスライド式画像ボタンを使用したりできます。

7. 画像形式の最適化

不適切な画像形式は、読み込み速度を低下させる非常に一般的な原因です。適切な画像形式で保存すると、画像が数倍縮小され、帯域幅が大幅に節約され、処理時間が短縮され、ページの読み込みが大幅に高速化されます。

8. プログレッシブ JPEG を使用します

プログレッシブ JPEG 画像は、「Advanced JPEG」と呼ばれる JPEG 形式の特別なバリエーションです。 Advanced JPEG ファイルを作成する場合、画像が読み込まれると、最初はぼやけた画像のみが表示されますが、データが読み込まれるにつれて画像が徐々に鮮明になるようにデータが配置されます。これは、インターレース GIF 形式と同等です。写真。

高度な JPEG は、主にモデムを使用する低速ネットワークを念頭に置いて設計されています。通常、高速ネットワークを使用するユーザーは、通常の JPEG 形式の画像との違いに気づきません。これは、インターネット速度が遅いユーザーにとっては間違いなく良いエクスペリエンスです。

9. コードを簡素化します

これは最も直接的な方法と言え、Web ページのコードをスリム化し、不要なスペースや改行などの不要な冗長コードを削除します。 , JSコード内に無駄なコードを含むコメント等も削除する必要があります。

同じネットワーク環境下では、ページが小さいほどダウンロード時間は速くなります。そのため、妥当な範囲でページサイズを減らすことでダウンロード速度を最適化できます。ページのサイズは主に HTML コードの量によって決まります (もちろん、CSS または JS コードも含まれる場合がありますが、本体は依然として HTML コードです)。ページのサイズを削減したい場合は、HTML コードを最適化する必要があります。 W3C 標準に準拠した HTML コード。不要なコードや無意味なコードを削除します。

コメントコードのクリアについて誤解を持っている人もいるかもしれませんし、中にはキーワードを積み上げている人もいるかもしれません。

10. 必須ではないスクリプトの読み込みと実行を遅らせる

Web ページには、ページが完全に読み込まれる前に実行する必要のないスクリプトが多数あります。これらのスクリプトは、Web ページ上の重要なコンテンツのレンダリングへの影響を避けるために、onload イベントの後に実行できます。これらのスクリプトは、独自の Web ページのトルエンである場合もありますが、多くの場合、コメント、広告、インテリジェントな推奨事項、Baidu Cloud Atlas、共有およびクリック数の統計など、サードパーティのスクリプトが多数あります。詳細については、Ma Haixiang のブログを参照してください。「Web ページの読み込み速度に影響を与えるクリック数の問題を解決する方法」で提供されている解決策は、メインコンテンツの読み込み後に実行できます。

11. AJAX の使用

Web ページを開くのは、実際には非常に複雑なプロセスです。アプリケーションが Web ページを開き、Web サーバーの応答、コンパイルなどのアクションを経てブラウザに送り返されるまで、私たちの目の前にテキスト、画像、マルチメディアファイルなどが表示されます。そのため、応答の数をできるだけ減らしたいと考えており、現在はこの点で ajax がよく使用されています。もちろん、静的ページは例外です。静的ページの場合は、画像サイズと Web デザインに注意してください。

AJAX は「Asynchronous Javascript +XML」の略で、インタラクティブな Web アプリケーションを作成するための Web 開発テクノロジを指します。 AJAX を使用すると、バックグラウンドでサーバーと少量のデータを交換することで、Web ページを非同期に更新できます。

これは、ページ全体をリロードしなくても、Web ページの一部を更新できることを意味します。従来の Web ページ (AJAX を使用しない) でコンテンツを更新する必要がある場合は、Web ページ全体を再ロードする必要があります。

12. 自動ページパフォーマンスの最適化

自動ページパフォーマンスの最適化は、インターネット上で多くのツールを使用したことがあるかと思いますが、その具体的な効果を判断するのは困難です。こちらもあまり言うことはありません。