ウェブアプリケーション高速化
ウェブアプリケーションを高速化したい
表示、処理速度は早ければ早いほど嬉しい
vue 関連が多いが、様々なものに応用できるはず
測定 計測 レポート作成
高速化のために、まずは何がネックになっているのかを測定する
ビルド時に生成されるjs css等のレポートを作成する
Webサイトのページ表示速度測定&改善案提案サービス
PageSpeed Insightの診断を参考に少しずつ修正していくと良い
施策一覧
Vue / webpack Bundle
画像
画像圧縮でサイズ削減
Vuetify/Icon
Cache
Jsonデータの持ち方を工夫して高速化
遅延読み込み
Vue / webpack Bundle
Vue / webpack Bundle
適切なサイズのBundleに分割し、ページの表示に必要になったら必要な分だけのBundleを取得する
モダンなブラウザ用のBundleを作成する。ビルドされるコードは古いブラウザに対応してくても良い（モダンなコードで書ける）ためコード量が減る
画像
画像
画像圧縮でサイズ削減
Spriteイメージ
50枚画像があるとHTTPリクエストを50回繰り返さなければならない
オーバーヘッドが発生する
50枚の画像を1枚にまとめた画像ファイルがあればHTTPリクエストは1度で済む
webp
jpgやpng等の画像フォーマットの1つとしてwebPがある。
Vuetify/Icon
Vuetify/Icon
Vuetify（CSSフレームワーク）
CSSフレームワークを使う場合は不必要なコンポーネントはimportしないようにする
CSSフレームワーク付属のCSSの中で使用していないCSSを取り除く
vuetify付属のアイコンセットが重すぎる
アイコンセットは使わずに、必要な分だけアイコンのコンポーネントを作る
Vuetifyは必要な分だけのimportに対応していた
アイコンを選んでBundleするみたいなサービスも使える
フォント
webフォントは font-display のswapを使うと、fontのロードを待たずに初期表示を行う
CSS
使用していないCSSを自動で取り除く
参考