フロントエンドのチューニング部分は実務で担当したことがなかったため、個人的に難問と感じた。
同じ問題が出るとは考えづらいが、学ぶきっかけになったので記録しておく。
静的ファイルの最適化とは
最終目的はブラウザ上で、極力速くレンダリングを行うこと。
静的ファイルのレンダリングにおいて、一番時間のかかるのが、Webサーバーから送られてくるデータの送受信。
そのためにHTMLやCSSなどのサイズを小さくする必要がある。
ファイルをgzipで圧縮する
HTMLには同じような文字が多い（タグ）。
それらの文字を置換することによって、サイズを圧縮するのがgzip。
圧縮はサーバー側で行う。CDNを利用している場合はCDNが圧縮する。
解凍するのはブラウザ。
圧縮可能な画像フォーマットを使用する
BMPはフルカラーに対応していたり、圧縮に対応していないことでサイズが大きい。
なので、圧縮に対応しているJPG、PNG、SVG（XMLで表現された画像）を使う。
各ファイル内の不要なコメント、改行、空白を削除
シンプルにファイル内の記述を減らすことでサイズを小さくする。
なんでもかんでも圧縮すればいいわけではない
圧縮・解凍するということはサーバ・クライアント、双方のCPUに負担がかかるということ。
結果として処理が遅くなることもある。
なので、適切なコンテンツのみを圧縮し、合計ファイルサイズを小さくすることを心がける。