ファイルの圧縮

HTML/JS/CSSからなるサイトの多くは、ページが複雑であればあるほどロード時間が長くなります.
e高速ロードは、大容量のコードファイルを圧縮し、ネットワークを介してより速く転送することができる.
📌 データを圧縮/解凍する時間は、ネットワーク転送時間よりも速い.

Gzip

Gzipはすべてのブラウザでサポートされている最も有名なデータアルゴリズムです.
圧縮ファイルを要求するには、要求ヘッダに'Accept-Encoding: gzip'を送信し、サポートされている場合はGzipを使用して圧縮データをクライアントに送信します.クライアントは、'Content-Encoding: gzip'を介して応答ヘッダに送信し、対応する方法でデータを解凍することができる.

Brotli

汎用圧縮アルゴリズムでは最も高い圧縮率を有する.2015年にGoogleから紹介されました.圧縮ファイルを要求するには、要求ヘッダに'Accept-Encoding: br'を送信するだけでよい.同様に、応答ヘッダに'Content-Encoding: br'を送信すればよい.
CertSimpleによると、Javascript/HTML/CSSの圧縮容量はGzipに比べてそれぞれ14%/21%/17%減少した.
📌 BrotliはIEのサポートを受けません.

CDNの使用

Content Delivery Network
物理的距離の制限により、ネットワーク遅延が避けられない場合がある.
CDNは,これらの物理的制約を克服するために,コンテンツを世界中のサーバに格納し,物理的距離の制約を克服する技術である.
ユーザに近いデータセンターからデータを取得します.
📌 CDNはまた、コンテンツの種類に応じて特殊化サービスを提供する.CDNでイメージファイルを最適化すると、容量を40～80%削減できます.

Without CDN

With CDN

ブラウザ画像の最適化

ページ容量の大部分はHTML/CSS/JSなどのコードファイルではなく、画像などのメディアファイルです.
イメージ容量の減少または要求数の減少は、ネットワーク最適化およびUXを改善するための方法である.

イメージライト

使用する複数の画像を収集し、splight画像を作成する方法.
CSSの'background-position属性を使用して画像の一部を使用します.
一度のイメージリクエストは単独で使用でき、ネットワークのロード時間を短縮し、1つのイメージファイルを管理するだけで、管理が容易になります.

画像フォーマットを使用します。WebP, AVIF

既存のJPEGおよびPNGより圧縮率が高いフォーマットを使用
WebPはJPEG,PNGより26%,25−35%減少した.
AVIFはJPEG,WebPよりそれぞれ50%と20%減少した.
ただし、どちらのフォーマットも比較的新しいフォーマットであり、ブラウザの互換性に問題があります.
WebP-旧バージョンブラウザ、safariサポートX
AVIF-ChromeやOperaなど、少数のブラウザでサポートされています.

どのように使えばいいですか？

<picture>ラベルを使用できます.このタグは、img要素の複数の画像リソースのコンテナを定義するために使用されます.
次のように使用される場合、<source>タグ内のsrcsetに定義されたWebPフォーマットがサポートされているかどうかは、<source>が使用または無視されます.このプロパティを使用すると、複数のブラウザに基づいて画像フォーマットを最適化できます.

<picture>
  <source srcset="test.webp" type="image/webp"/>
  <img src="test.png" alt="test" />
</picture>

Reference

https://expeditedsecurity.com/blog/nginx-brotli/
https://www.alibabacloud.com/ko/knowledge/what-is-cdn
https://www.youtube.com/watch?v=YJGCZCaIZkQ&t=1010s