2020-03-10
今のプロジェクトが 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圧縮、思いのほか強力でした。