この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
こんにちは、新規事業統括部 ProfllyチームでProfllyの開発を担当していますおーしろです。
プロダクトが成長していくにつれてコード量や利用するライブラリが増え動作がもっさりと遅くなってしまうことがあります。 特にSPAは初回ページ読み込み時にコンテンツを一気にダウンロードするため時間がかかることがあります。 ProfllyのフロントエンドはNuxt.jsのSPAで開発されており、機能が増えていくにつれてそのような傾向が見られたためフロントエンドのパフォーマンスの調査を行いました。 その中で利用したツールや調査方法などを記載しました。
調査に利用するツール
LighthouseはGoogleが提供しているWebアプリのパフォーマンスなどを計測するサービスです。またパフォーマンスだけでなくSEOが最適化されているかなどの計測も行うことができます。今回はChromeのDeveloper toolsから利用しました。
Webpack Bundle Analyzerはwebpackを可視化するツールでバンドルファイルのサイズや構成などをひと目で確認することができます。
Lighthouse
調査方法・パフォーマンス低下の原因
Google Chromeを利用していればDeveloper toolsから利用することができます。
今回はパフォーマンスのみを計測したいのでPerformanceのみチェックし、DeviceはDesktopで計測しました。
あとはGenerate reportをクリックすると計測を開始しレポートが生成されます。
計測が完了し下記のようなレポートが生成されます。
今回計測した環境のProllyの総合スコアは81でした。
※ちなみにここのも記載しているようにインターネットトラフィックやブラウザ拡張機能、ウイルス対策ソフトの影響でその都度スコアが変動することがあるとのことです。
特に「Speed Index」の項目が「▲」となり改善が必要なようです。
レポートを更に見ていくと「OPPORTUNITIES(改善できる項目)」というレポート項目があります。 ここではLighthouseから改善方法が提案されています。 強く改善が提案されている項目は 「▲ Serve images in next-gen formats(短縮できる時間)」 が1.28sとうまくいくと大幅に改善できそうです。 詳細には下記のように記載されています。
「WebP や AVIF などの画像形式は、一般的に PNG や JPEG より圧縮率が高く、ダウンロード時間やデータ消費量が抑えられます。」
次の項目では上記についてどのような対策が必要なのか調べていきたいと思います。
対策
Profllyでは社員のプロフィール画像やアイコン画像にPNGの画像形式を利用しており、Lighthouseからの改善案は「PNGよりもWebPやAVIFの画像形式を利用したほうが1.28s改善されるよ」とのことでした。 WebPとはJPEGやPNGよりも圧縮率が優れており画像ファイルサイズが小さくなります。そのため初回ページ読み込み時のダウンロード速度が早くなります、AVIFはWebPよりも更に圧縮率が優れておりファイルサイズが小さくなるためAVIFの画像形式を利用することも提案されています。しかし、下記のように https://caniuse.com/ で対応ブラウザを調べるとWebPはIEに対応していないことや、AVIFはSafariに対応していないのが現状です。 そのため「各プロダクトの推奨ブラウザに対応しているか？」「Google Analyticsなどからよく利用されているブラウザに対応しているか？」などを事前確認し場合によってはJPEGやPNGの画像も用意しておく必要があります。
その他の対策方法としてはvue-lazyloadなどを利用し画像の遅延読み込みをすることで初回表示速度の改善が期待できそうです。
Webpack Bundle Analyzer
調査方法・パフォーマンス低下の原因
Webpack Bundle Analyzerを利用してビルド時に生成されたバンドルファイルを可視化し分析します。
分析結果を見てみるとApexChartsが圧倒的に大きいことがわかります。 そのため初回ページ読み込み時にバンドルファイルのダウンロードに時間がかかり結果としてパフォーマンスが悪くなる要因の一つになっていることがわかりました。
ちなみにApexChartsはチャートやグラフのライブラリで、Profllyではマイプロフィールのアクティビティからプロフィールのアクセス数やサンクスメッセージ数などを表示をするために利用しています。
対策
「ApexChartsよりも軽量な他のチャートライブラリの採用」や「ApexChartsをCDN経由で利用する」などの対策を行い、できる限りバンドルファイルのサイズを小さくし初回読み込み時のダウンロード速度改善の対策をすることができそうです。
また、Vue.jsの非同期コンポーネントという機能を利用しページごとに必要なときにコンポーネントをダウンロードすることで初回ページ読み込み時のダウンロードサイズを小さくし表示速度を早くすることができそうです。
おわりに
フロントエンドのパフォーマンス調査はいろいろな方法があり、今回は比較的手軽に利用できるLighthouseとWebpack Bundle Analyzerを利用しました。
Lighthouseを利用するとユーザー体験に近い形でパフォーマンスを分析し、具体的に改善策を提案してくれるのでとてもありがたいツールだなと感じました。
Webpack Bundle Analyzerはごちゃごちゃになってしまったwebpackの状態をビジュアル化しひと目で分かる状態にしてくれるのでどのライブラリがパフォーマンス低下の原因になっているかを簡単に把握することができました。
これらの結果をもとに次回は実際にパフォーマンス改善を行っていけたらと思います。
22
