片方の動き：http圧縮を開く現在主流のWebサーバはすでにgzip圧縮をサポートしています。これは、html、css、javascriptなどのテキストコンテンツを圧縮できます。通常の状況下では、gzip圧縮はトラフィックの60％以上、特定の圧縮率を節約することができます、私たちはウェブマスターの家によって提供されるツールを通して識別することができます。
2番目のトリック：ブラウザ側でページを生成する
HTML規格自体のため、Webページには目に見えないタグが多数含まれており、これらのタグの転送には多くの帯域幅が必要です。 JavaScript /AJAXテクノロジを使用することで、ユーザーに表示されるコンテンツが送信され、ページがクライアントのブラウザでリアルタイムに生成されます。これにより、ページのダウンロード速度が向上するだけでなく、サーバーへの負担も軽減されます。平均的なページはトラフィックの1/3以上を節約することができ、トラフィック節約はフォームのような再フォーマットされたページのために80％以上にもなることがあります。 3番目のトリック：JavaScriptの最適化
コード
現在のWebページには多くのJSファイルとCSSファイルが含まれています。手書きファイルでもツール生成のJSファイルでもCSSファイルでも、コンテンツには多くの空白行、スペース、コメント情報、長い変数名などが含まれています。これらはツールによって最適化できます。 JSファイルは、JSminなどのツールを使用して最適化でき、元のJSファイルサイズは2463バイト、圧縮後は1115バイト、httpのgzip圧縮後は640バイトになります。元の26％。 CSSオンライン圧縮ツールを使用すると、元のCSSファイルサイズは2289バイト、圧縮後は1753バイト、httpのgzip圧縮後は最終的に612バイトになり、CSSファイル全体のサイズは27％になります。私たちの目標は余分なバイトをすべて抽出することですが、JSファイルとCSSはそれを変更する必要があるかもしれません。そのため、圧縮率を制御する必要があり、トラフィックの変更コストを増加させません。 4番目のトリック：画像の最適化
画像は、Webサイトに求められる番号の1つにする必要がありますWebサイトでは、ますます多くの写真が使用され、ますます大きくなっています。 Omeletteのホームページを見てみると、全41枚の写真があり、その合計は1311KB、ページサイズ全体の90％を占めています。画像の最適化は、ページの読み込み速度を向上させるだけでなく、Webサイトのユーザーエクスペリエンスを向上させるだけでなく、Webサイトの帯域幅も節約できます。次の図を見ると、画質に影響を与えずに、ファイル形式によって圧縮率が異なることがわかりますが、画像ファイル間の差は依然として非常に大きく、最大および最小画像は図のように6倍異なります。必要な形式で画像を保存してから、Smush.itのようなツールを使用して画像をさらに詳細に最適化します。同時に、ブラウザのズーム機能を借りるのではなく、サムネイルを使用できるところではどこでもサムネイルを使用するようにしてください。画像が表示領域にスクロールされたときにのみ、画像の遅延読み込みが動的に背景から画像を取得します。すべての写真を一度に1か所で撮影する必要がないため、ページの読み込み速度が大幅に向上するだけでなく、ユーザーエクスペリエンスも大幅に向上します。現在多くのJSライブラリがサポートされており、一般的なものはJQueryです。 5番目の対策：外部の無料リソースの賢い使用
現在のクラウドコンピューティングテクノロジは急成長しており、多くのウェブサイトで一定量の無料トラフィックが提供されています。これらの無料クレジットを使用するとウェブサイトのコストを削減できます。現在、Alibaba CloudのOSSは10Gの無料トラフィックを提供しており、300KBの画像に変換すると35,000回見ることができます。あなたが同時に複数の無料サービスを借りれば、あなたはたくさんのお金を節約することができます。 第6のコツ：モバイルデバイスの最適化
現在、スマートフォンはますます普及しており、モバイルインターネットアクセスの割合は常に拡大しています現在のほとんどのモバイル端末ディスプレイは、PC端末と比較できません。したがって、ウェブページによって提供される可視領域が携帯端末の表示領域よりも大きい場合、それは見えないかまたはズームされる。現在のモバイル機器のほとんどは依然として2Gおよび3Gネットワークを使用しており、ダウンロード速度は非常に制限されているため、モバイル端末の最適化はWebサイトのネットワーク帯域幅を減らすだけでなく、ユーザーエクスペリエンスも効果的に高めます。現在の携帯端末のブラウザの機能はすでに非常に強力ですが、それはデバイスの計算能力と画面サイズによって制限されるので、Webページは大きな画像を使用しないようにし、巨大なJSライブラリを使用しないようにします。 7番目の秘訣：HTML5に追いつく
傾向
HTML5が登場！現在、主要なブラウザベンダーはすでにHTML5をサポートしており、IE6の市場シェアは8％未満であり、国内市場でも20％未満です。あなたは隠されたデータストリームに気付かないかもしれません：クッキー、このデータ量は大きくはありませんが、あなたがウェブページにアクセスする度に、あなたは前後にそれを送る必要があります。ユーザーの入力を容易にするために、多くのWebサイトでユーザーエクスペリエンスを向上させ、ユーザーの入力を自動的に保存します。保存するたびに、ページを送信して更新する必要があります。 Webアプリケーションの一部のデータは静的にキャッシュすることができるため、更新されるたびにユーザーに再ダウンロードさせる必要はありません。 HTML5のローカルストレージ機能を使用して、これらのローカルに保存されたデータをブラウザ側でキャッシュすることができ、1回のインタラクションあたりのデータ量を減らし、Webサイトの帯域幅使用量に大きく影響します。技術はコストを下げることができますが、技術の変革は一晩ではできません。ネットワーク帯域幅の料金を削減するための現在の最も効果的な方法は、動的な帯域幅を使用して、ビジネスニーズに基づいて、毎日または1時間ごとに実際のネットワークトラフィックを支払うことです。現在、Alibaba Cloudのような多くのクラウドコンピューティング会社はそのような動的な帯域幅の変更を提供しています。それはウェブマスターの帯域幅のコストをより合理的にします。