読み込み速度が再び向上しました：ウェブサイト構築プログラムを詳細に記述します

この冬、人々に最も深い印象を残した2つのウェブサイトは、12306列車のチケット購入ウェブサイトとXiaomi携帯電話の公式サイトです。 2 つの Web サイトに共通する特徴は、同時アクセスのピーク時には速度が耐えられないほど遅くなることです。実際、この 2 つの Web サイトだけではありません。何万もの同時アクセスが発生すると、少なくとも 90% の Web サイトがクラッシュします。訪問者が少ない場合でも、多くの Web サイトの起動速度は耐えられないほどです。ウェブサイトの読み込み速度に影響を与える要因は、サーバーの構成、コンピュータルームの帯域幅の品質、インターネット回線など、数多くあります。しかし、著者は、ウェブサイトのプログラミングとリソースの統合もウェブサイトの実行速度に大きく影響すると考えていますが、多くの人がそれに十分な注意を払っていません。

1. ウェブサイトのリソースを統合する

鉄道省のチケット予約ウェブサイトは、なぜ同時アクセス数が多い時期にはあまり効果がないのでしょうか?好奇心旺盛な人たちがこのウェブサイトを徹底的に分析した結果、注文を送信するときにウェブサイトがサーバーにリクエストを大量に送信し、瞬間的なアクセストラフィックがすでに非常に大きく、アクセスリクエストがブロックされているという結論に達しました。実際、この問題は多くのウェブサイト、特に中小企業の企業ウェブサイトに存在しています。問題がどこにあるのかがわかれば、解決は簡単です。解決策は、サーバーに送信されるリクエストの頻度を減らすことであり、リソースをマージするのが最も効果的な方法です。このようにすることで、同じ呼び出しファイルの読み込み時間は毎回適切に延長されますが、アップストリームのダウンロード回数が削減され、コードの実行効率が向上します。

一般的なWebサイトが外部から読み込む必要のあるリソースは、CSSスタイルシート、JSスクリプトプログラム、画像素材の大きく3種類あります。これら 3 つを適切に組み合わせることで、Web サイトリクエストの数を最小限に抑えることができます。 CSS の目的は、Web サイトのスタイルを制御することです。すべての CSS を 1 つのファイルにマージする場合は、必ず <head> メタタグ内に配置してください。目的は、Web サイトに最初に CSS をロードさせることです。 JS やその他のスクリプトプログラムは、Web ページで特定の特殊効果を実現するために作成されています。呼び出し位置は適切に後ろに移動できますが、JS は CSS とは異なり、すべての JS を結合できるわけではないことを理解する必要があります。参照位置も重要であり、そうしないと、Web サイトの一部の機能が失敗する可能性があります。画像素材の結合は、Webサイトの背景などでよく見られ、2次元座標で画像が呼び出されます。ただし、結合した画像のサイズは2M以内に抑える必要があり、そうでないと読み込み時間が長くなり、ユーザーエクスペリエンスが悪くなります。

2. Webページの要素を圧縮する

ウェブサイトのリソースがすでに大きい場合は、それらを統合することで時間を短縮できますが、それでも問題を根本的に解決することはできません。ウェブサイトのリソースをマージする主な目的は、クライアントからサーバーへのリクエストの数を減らすことであるため、ウェブサイトのリソースのサイズはまったく変わりません。したがって、Web ページ要素を必要に応じて圧縮することは、Web サイトのアクセス速度を向上させるもう 1 つの近道です。 Web ページの要素を圧縮する最初の方法は、Web サイトのコードを書き換えることです。DIV + CSS を使用して Web サイトのプログラムをレイアウトすると、テーブルレイアウトに比べてコードを大幅に削減できることを知っておく必要があります。将来、HTML5 技術が普及すると、ウェブサイトのコード量はさらに圧縮されます。コードの冗長性を避けること、特に不要なコードを削除することは、ウェブサイトのサイズを縮小する優れた方法です。

最近、多くのウェブサイトの読み込みが遅くなっていますが、これはウェブサイトで使用されている画像が大きすぎることに直接関係しています。特別な要件がない場合は、Webサイトの画像表示解像度を72dpiで制御できます。画像の表示品質が少し悪くても、半日読み込めないと感じるよりははるかに良いです。そのため、可能であれば、ウェブサイトの画像サイズは 200Kb 以下に抑え、ウェブサイトで使用する画像素材は、できるだけ高解像度、高品質のものを使用するようにしてください。サーバー経由で Gzip 圧縮を有効にすることも、Web ページのサイズを縮小する良い方法です。著者の個人的な経験では、Gzip 圧縮を有効にすると、サイズが約 50K の Web ページが約 10K に抑えられることがわかりました。ウェブページの圧縮率は 60% を超えるため、ウェブサイトが超高速で動作するのも不思議ではありません。

3. コードの位置を調整する

コードの場所もウェブサイトの読み込み速度に影響しますか?答えは「はい」です。簡単な例を見てみましょう。現在、多くの Web サイトには統計プログラムが備わっています。それらのほとんどは外部 js を呼び出すことによって実装され、統計プログラムは通常、Web サイトの下部に配置されます。その目的は、外部 js の読み込み速度が遅いために Web サイト全体のユーザーエクスペリエンスに影響を与えないようにすることです。ウェブページのヘッダーに大きなスクリプトプログラムを配置すると、ウェブサイト全体の読み込み速度が必然的に低下することは明らかです。ウェブサイトのコードの位置を調整する際は、2 つの原則を守る必要があります。1 つ目は、ウェブサイトの外部から呼び出されるコードは、外部コードは制御できないため、できるだけ後で読み込む必要があるということです。2 つ目は、比較的大きなスクリプトプログラム、特に一部の JS プログラムは、プログラムの後に読み込む必要があるということです。ウェブサイトの効果に影響を与えずに、できるだけ他のコードの後に読み込まれて実行されるように調整してください。

コードの場所には関係ありませんが、多くのプログラマーが簡単に見落としてしまう別の問題があります。それは、Web ページのレンダリングの問題です。たとえば、CSS コードには <style="border:none"> と <style="border:0"> があります。ページの視覚的な表示ではこの 2 つに違いはありませんが、ブラウザーの解釈とレンダリングには違いがあります。 <style="border:none"> は境界線がなく、境界線のレンダリングは不要であることを意味しますが、 <style="border:0"> は境界線があるが境界線の幅が 0 であることを意味します。実際、ブラウザがコードを解釈するときに、一度もレンダリングされません。同様に、ウェブサイトの画像サイズの制御もあります。多くのプログラマーは、画像サイズが標準と完全に一致していれば、画像の高さと幅を定義する必要はないと考えています。これにより、コードが十分に簡潔になります。実際、この理解は間違っています。定義がないということは、ブラウザが独自に識別してレンダリングする必要があり、このプロセスには時間がかかります。

プロのウェブサイト構築およびオンラインマーケティング代理店である Joyweb (http://www.joyweb.net.cn) は、特に人々がせっかちな今日の世界では、ウェブサイトのユーザーエクスペリエンスとマーケティング効果はウェブサイトの速度と密接に関係していると常に信じてきました。したがって、今日ではオンラインマーケティングがますます普及するにつれて、ほとんどの人が Web サイトがユーザーに与える印象にさらに注意を払うようになります。無視できない事実の一つは、現在、中国電信、中国聯通、その他のブロードバンド事業者が高速データレートを議題に上げているということだ。これは、一般のネットユーザーのインターネット速度がますます速くなり、ウェブサイトの速度の速さや遅さがオンラインマーケティングの有効性に与える影響がますます明らかになることを意味します。場合によっては、他社の Web サイトが自分の Web サイトより 0.5 秒早く開いたとしても、マーケティングの機会を失う可能性があります。したがって、可能であれば、たとえ 100 ミリ秒またはそれよりも短い時間であっても、Web サイトの読み込み速度を上げる方法を見つけてください。

原題: 読み込み速度が再び向上: ウェブサイト構築プログラムを詳細に記述する

キーワード: ウェブサイトの速度、プログラミング、詳細、ウェブマスター、ウェブサイトのプロモーション、収益化

<<: 丁道士：2012年はウェブマスターになるか、ウェブマスターから逃げるか？

>>: 最適化プロセスにおけるA5ソフト記事の役割の実践的な共有