今のプロジェクトが Vue CLI + S3 + CloudFront の SPA な構成で、
そこそこの規模感があるのですが、デプロイされた js や css は Vue CLI によって最適に minify されているとはいえ、
一番大きいファイルで 2MB とか、かなり大きなものになっていました。

Lighthouse でパフォーマンスを遅くしている一番ネックな部分を調べていくと
Enable text compression
Avoid enormous network payloads
など、その 2MB とかのファイルたちをどうにかしてくれませんか、という結果に。。

対策として Lighthouse から gzip圧縮 が提案されていて、
調べていくと CloudFront の場合はボタン一つで設定出来るとのこと。
https://aws.amazon.com/jp/blogs/aws/new-gzip-compression-support-for-amazon-cloudfront/

記事の中には
「全体的なペイロードの削減は80％に達する可能性があります」
の記載も。

そんなに効果あるのかな？という感覚だったのですが、設定した後に計測しなおしてみると本当でした。

2.3MB -> 245KB !!

Lighthouse の Potential Savings には
2MB -> 1.8MB ぐらいに出来るかもしれません、の診断結果が書いてあったのですが、
実際に設定してみると確かに 80%ぐらい削減されていました。

ちゃんと gzip 圧縮されているかの確認は DevTools -> Network の Response Headers から可能です。

gzip 圧縮、思いのほか強力でした。

Enable text compression