見出し画像

Angularアプリケーションのパフォーマンスを改善する上で行ったこと

株式会社マキシム

こんにちは。マキシムのサービス開発部でエンジニアマネージャーをやっている井川です。

マキシムでは神戸レタス公式サイトのフロントエンドにAngularを採用しています。
2023年の4月末にサイトをリニューアルしてからもうすぐ1年になりますが、公開直後はサイトの動作が重く操作がしづらくなるなど、改めてご迷惑をおかけしてしまい大変申し訳ありませんでした。

ただこの1年間の取り組みでサイトの表示速度はかなり改善されています。Angularパフォーマンスの改善方法はすでにたくさんの記事で公開されていますが、この記事ではマキシムで実践した改善方法を紹介します。


改善前の環境

  • リリース時のAngularバージョンは12。

  • Server Side Rendering（SSR）を使用。

  • 商品情報などはバックエンドのAPIサーバから情報を取得している。

実施したこと

Angularの最新バージョンを使用する

まずはなんといってもバージョンアップを行うことです。
特に近年のAngularはSSRを実行した時のパフォーマンスが改善されており、バージョンアップ時に main.ts のサイズが小さくなることもままあります。そのため最新のバージョンにするだけでもパフォーマンスがかなり改善されます。
マキシムでは執筆時点（2024/04/09）では最新のv17までバージョンアップを行なっています。

遅延ロードを行う

サイトのURLをたくさん作っていくとルーティングファイルにたくさんのコンポーネントを設定することとなり、初回ロード時にたくさんのコードを読み込むことになります。
それを解消するために遅延ロードを行い、アクセス先URLとは関係ないコン
ポーネントの読み込みを行わないようにしました。
これにより、初回ロード時に読み込むコードの量を減らし、アプリケーションの初期表示速度を改善しています。

Stand Alone Componentを使用する

v14でのプレビューを経て、v15から正式リリースとなりました。
コンポーネントをNgModuleなしで宣言し使用することができる新しい機能ですが、記述するコード量がかなり減ります。今回挙げた中では、この対応を行うことで最もパフォーマンス改善につながりました。
既にNgModuleで作成されたコンポーネントを運用していましたが、コンポーネントを変換するコマンドも公式で用意されているため移行はかなりスムーズに行えています。
今後、Angularでコンポーネントを作成する時はStand Alone Componentがデフォルトの記述方法になります。そのためパフォーマンスだけでなく、今後の開発体験・機能追加もよりスムーズになるのではないかと考えています。

OnPushを使用する

現在のサイトでは主に静的な情報を掲載している箇所は ChangeDetectionStrategy のOnPushを指定して変更検知の対象外としています。
Angularはアプリケーションに変化がおこると、全てのコンポーネントに対して変更検知を行います。ただ静的な情報は検知しても意味がないので、変更検知の対象外としています。
上記の対応を行うことで不要な変更検知の回数が減るため、ページ表示・ページ遷移時のパフォーマンスの改善に繋がりました。

画像のサイズ・配信の最適化

神戸レタスのサイトは多くの画像を掲載しているため、デザイナーが画像をアップロードしている時点で複数パターンのサムネイル画像を生成するようにしています。またこの時 webp の形式にすることで従来の jpg 形式の画像よりも軽量化を行なっています。

そして生成された画像はCDNを通して配信することで、ブラウザの画像ダウンロード速度を向上しています。

これらの最適化処理はAngular本体の機能とは関係ないですが、画像読み込み速度を改善することでAngularアプリケーションのパフォーマンスの改善につながっています。

APIの速度改善

こちらもAngularアプリケーションの処理ではないですが、APIのレスポンス返答速度が遅いとAngularアプリケーションの表示処理も遅くなります。
そのためAPI側のプログラムにて下記を改善しています。

  • 実行時間が長いクエリの改善

  • キャッシュ利用によるデータ参照速度改善

上記を行うことでAPIのレスポンス速度の改善を行なっています。

今後

Angularは年に2回（5月、11月）メジャーバージョンをリリースしており、今後もパフォーマンス改善、開発体験の改善につながる機能のリリースを控えています。
マキシムでは継続的にバージョンアップを行い、引き続きアプリケーションの改善を行なっていきます。

参考

Angular v14 is now available!
Angular v15 is now available!
Angular v16 is here!
Introducing Angular v17


マキシムではワクワクドキドキできるものづくりを一緒に行う仲間を募集中です。

ご興味がございましたら、以下のURLからカジュアル面談のお申込みやご応募等お気軽にご連絡ください。