サイトの帯域幅要件の削減

• 四月 29, 2024

成功すると殺される可能性があります。すべてのウェブマスターが心に留めておくべきことは格言です。

インスタントコミュニケーションのこの時代では、人気のある（インターネット用語で「バイラルになります」）Webページは、訪問者に夢中になります。ほとんどのウェブサイトの所有者にとって、これは夢の実現です...サーバーがヒットの雪崩に耐え続けるのに苦労するか、サイトの帯域幅を増やすために必死に入札してウェブホスティング会社にお金を投げかけるまで。

少し前もって計画を立てておけば、突然の人気の可能性を抑え、日々のホスティングコストを最小限に抑えることができます。

まず、サイトの画像をご覧ください。一般的なWebサイトでは、画像ファイルが帯域幅の消費の大半を占めています。

画像帯域幅の使用量を削減するための究極の方法は、サイトから完全に削除することです。それは、サイトをテキストのみに変換することを意味しません。低価格の画像共有サイトを利用して、画像をホストすることができます。サービスにコミットする前に、小規模で試してから、さまざまな場所からサイトをチェックアウトしてください。一部のファイアウォールは、特に訪問者がオフィスのコンピューターからWebを巡回している場合、人気のある共有サイトからの画像を自動的にブロックします。

HTMLを使用して、画像を実際よりも小さく表示していますか？これは、訪問者がページに必要とされるよりもはるかに多くの帯域幅を使用して、訪問ごとにブラウザに完全な画像を（実際のサイズで）読み込むため、Webデザイナーにとっては大したことではありません。代わりに、画像編集プログラムを使用して、ページレイアウトに合わせて画像をトリミングおよび縮小します。

また、画像が非常に小さい場合は特に、外観を損なうことなく低解像度で画像を保存できることもあります。解像度が高いほど、各ピクセルに詰め込まれた詳細が多くなるため、帯域幅を使用してすべての情報をブラウザにロードします。

画像が帯域幅を占有しないようにする別の方法は、CSSで設計されたテキストを優先して画像を捨てることです。この手法は、背景色、境界線、および：hover疑似クラスで非常に多くのことができるため、ボタンや他の派手なリンクでうまく機能します。 CSSとHTMLを使用してインタラクティブメニューを開発する方法に関する今後のシリーズについては、後で調整してください。

画像を四角にしたので、テキストを引き締めましょう。多くの場合、HTMLコードから余分な空白の一部を削除できます。コードのセクション間の空白行は読みやすさを向上させることができますが、bodyタグとコードの最初の行の間に多数のキャリッジリターンがある場合は、少しやり過ぎです。

可能な限り、JavaScriptおよびCSS用の外部ファイルを使用してください。訪問者が訪問した最初のページと一緒にファイルをダウンロードすると、そのファイルはサイトを探索する際にブラウザーのキャッシュに残ります。すべてのページでコードを新たにロードするのではなく、インラインまたはヘッダーコードで発生します

独自のサイトをホストしている場合、HTTP圧縮により帯域幅を大幅に節約できます。 Webページの圧縮バージョンを一時ディレクトリに保存することで機能し、圧縮されたブラウザを使用して訪問者に提供されます。サーバー設定を調整して、静的ページ、アプリケーション、またはその両方を圧縮できます。

サイトを強化することで、訪問者の猛攻撃、サービス拒否攻撃から保護したり、ホスティングコストを最小限に抑えることができます。また、サイトがきちんと整然とコーディングされており、最大限のコンテンツを可能な限り迅速に配信できることを忘れないでください。

動画の説明: 【Microsoft Digital Trust Summit 2019】マイクロソフトだから実現できる生産性を犠牲にしない​セキュリティ対策とクラウド ネイティブ ネットワーク (四月 2024).