Open5
ファイルの圧縮によるパフォーマンス向上
m_03目標
サイトのパフォーマンスをlighthouseでチェックした時、改善できる項目として「テキスト圧縮の有効化」を推奨されたため、圧縮してパフォーマンスを向上させる。
環境
react(cra)で作成したアプリをビルドしs3に配置、cloudFrontで配信。
圧縮の方法
- 自前で圧縮
ビルドしたファイルをgzipコマンドで圧縮(js,cssファイル) - サーバーで圧縮
cloudFrontの圧縮機能を使って圧縮。
https://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/ServingCompressedFiles.html
m_03cloudFrontの圧縮の流れ
- クライアントからcloudFrontにアクセス(Accept-encodingヘッダーがリクエストに自動で含まれる)
- cloudFrontでリクエストされたオブジェクトの圧縮済みキャッシュの有無を確認
- あれば、クライアントへ送信。なければ、リクエストをオリジンに転送。
- 転送されたリクエストに対して、オリジン（ここではs3）が圧縮オブジェクト(content-encodingヘッダついている)を返却できる場合、返却する。cloudFrontは返却された圧縮オブジェクトをキャッシュする。
- オリジン（ここではs3）が非圧縮オブジェクト(content-encodingついてない)を返却する場合、その日圧縮オブジェクトが圧縮可能かcloudFrontが判断する。
- 圧縮可能な場合、cloudFrontにて圧縮をかけてキャッシュする。
cloudFrontの圧縮可否判定基準
- サイズが 1,000～10,000,000 バイトの場合
- content-lengthヘッダが含まれる場合
- httpステータスコードが200,403,404の場合
m_03結果
cloudFrontで圧縮をかけたら1.4MB（一番大きいファイル）あったファイルが333kb程度になった。
初回アクセスが時間にして3秒早くなった。
m_03ビューワーによってCloudFront側で自動でBrotliかgzipか判断してくれるらしい。
m_03画像の圧縮はできないので別でやる必要あり。