概要
先日CyberAgentさんの主催するWebSpeedHackに参加しました。
その際にパフォーマンスチューニングについて感じたことをメモします。
重要だと感じた点
ライブラリの削除
webpack bundle analyzerを用いて、どのパッケージが大きな容量を占めているか確認します。
削除できるライブラリは使用せず、大きなパッケージから小さなパッケージに書き換えたりします。
画像ファイルの拡張子を変える
jpegの拡張子を持つファイルをwebpに置き換えます。
これによってファイルの大きさが小さくなります。
画像ファイルのサイズを調整する
画像のファイルサイズが大きいと、読み込みに時間がかかってしまう。
画像のサイズを小さくすると良い。
apiを用いたデータの読み込みを遅らせる。
すぐに用いるわけではないデータは、それを実際に使用するまで読み込むのをストップしておく。
それにより最初の画面の描画の速度が上がる。
感想
とても学びがあった。
パフォーマンスチューニングは、フロントエンドにおける深い知識を求められていると感じた。
ライブラリの表面だけを理解するのではなく、ソースコードを読み込むなどして、深い理解をする必要があると思った。