今のプロジェクトが 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