はじめに
「Flutter Webで作ったページを開くまでに時間がかかるのはなぜ？」
「ボタンを押したあとや画面を切り替えたときの動きが重いけれど、どこを直せば速くなるの？」と困っていませんか。
開発中は問題なく動いていたのに、ブラウザで公開したページを確認すると、最初の画面がなかなか表示されなかったり、画像の多いページで操作がもたついたりすると、何から見直せばよいのか迷いますよね。
この記事では、Flutter Webが遅くなる主な原因を整理したうえで、読み込み時間や画面操作を改善するための最適化手順を順を追って説明していきます。
Flutter Webのパフォーマンスが低下する原因は？
Flutter Webの動作が遅い場合は、ページを開くまでの初期読み込みだけでなく、ビルド後のファイルサイズや画面描画の処理も確認する必要があります。
まずは、初期読み込み、ビルドサイズ、レンダリング、画像・リストの4つに分けて原因を確認していきましょう。
初期読み込みが遅くなる原因
Flutter Webでは、初回アクセス時にJavaScriptやWasm、フォント、画像などをブラウザへ読み込むため、ファイル容量が大きいほど表示までに時間がかかります。
特に初回はキャッシュを利用できないため、通信速度が遅い環境ではダウンロードに時間がかかり、アプリの起動が遅く感じられます。
ビルドサイズが大きくなる原因
Flutter Webのビルドサイズは、使用するコードやパッケージ、フォント、画像などが増えるほど大きくなります。
使っていないパッケージや容量の大きいアセットが含まれていると転送するデータ量も増えるため、読み込み速度が低下しやすくなります。
レンダリングやウィジェットの再構築が重くなる原因
画面全体に影響する状態を頻繁に更新すると、変更が必要ないウィジェットまで再構築され、ブラウザ側の描画処理が増えます。
再構築する範囲や回数が多くなるほど処理の負担が大きくなり、スクロールのカクつきや操作への反応の遅れにつながります。
画像・アセットや長いリストが負荷になる原因
高解像度の画像や容量の大きいアセットは、ダウンロードや画像処理の負担を増やします。
また、長いリストを最初からすべて生成すると、画面外の項目まで構築されるため、初回描画が重くなりやすくなります。
画像を表示サイズに合わせ、リストを必要な項目から生成すると負荷を抑えやすくなります。
Flutter Webのパフォーマンスを改善する方法
Flutter Webのパフォーマンスを改善するには、初期表示と操作中の描画の両方で負荷を減らす必要があります。
ここからは、Flutter Webで実施できる改善方法を順番に確認していきましょう。
リリースビルドで不要な処理を減らす
Flutter Webを公開するときは、flutter build web --releaseでリリースビルドを作成します。
デバッグビルドより開発時の処理を抑えられるため、本番環境ではリリースビルドを使用することで実行時の負荷を軽減できます。
ウィジェットの再構築を減らして描画負荷を抑える
状態を更新するときは、setState()の影響範囲を絞り、変更が必要なウィジェットだけを再構築するようにします。
値が変わらないウィジェットにはconstコンストラクタを使うなど、不要な再構築を減らすことで操作時の描画負荷を抑えられます。
画像・アセットを最適化して読み込みを軽くする
画像は実際に表示するサイズに合わせ、必要以上に大きなファイルを読み込まないようにします。
たとえば幅400pxで表示する画像に幅2,000pxの画像を使うと不要なデータまで転送されるため、解像度やファイル容量を調整すると読み込みを軽くできます。
長いリストの描画負荷を抑える
項目数が多いリストでは、すべてを最初に生成せず、ListView.builderなどを使って必要な項目から生成します。
画面に表示される項目を中心に構築することで、一度に処理するウィジェット数を減らし、初回描画の負荷を抑えられます。
遅延読み込みで初期表示を軽くする
起動直後に使わないデータや機能は最初から読み込まず、必要になったタイミングで読み込む方法があります。
初期画面に必要なデータを優先して取得することで、起動時の通信や処理を減らし、初期表示を軽くできます。
コード分割やキャッシュで読み込みを改善する
deferred importなどで必要なコードを必要なタイミングで読み込むと、初回に取得するデータ量を抑えられます。
また、静的ファイルをブラウザやCDNでキャッシュしておけば、2回目以降のアクセスで同じファイルを取得する通信も減らせます。
キャッシュを設定しても配信元の応答が遅い場合は、CDNを使うとどのように表示速度を改善できるのか確認してから導入を検討するとよいでしょう。
▶CDNとは？仕組みとWebサイトの表示速度を改善する方法
Flutter WebのレンダラーとWasmをどう使い分けるか
Flutter Webでは、使用するレンダラーやWasmの有無によって、描画速度や対応できるブラウザ環境が変わります。
ここでは、レンダラーによるパフォーマンスの違いから、Wasmを検討するケースと導入前の確認点まで順番に見ていきましょう。
レンダラーによるパフォーマンスへの影響
Flutter Webでは、使用するレンダラーによって描画方法が異なるため、スクロールやアニメーションの滑らかさに差が出ることがあります。
描画する要素が多い画面では、実際のアプリでフレーム時間や操作時の動きを計測し、利用環境に合った構成を選びましょう。
Wasmを検討するケース
Wasmは、計算量や描画負荷が大きく、現在の構成で処理に時間がかかっている場合に検討します。
ただし、Wasmに変更すれば必ず高速化するわけではないため、同じ操作をそれぞれのビルドで計測し、処理時間や描画が改善するかを比較して判断しましょう。
Wasmを導入する前に確認したいこと
Wasmを導入する前に、利用するブラウザで正常に動作するか、使用中のFlutterパッケージやWeb向けライブラリが対応しているかを確認します。
JavaScriptとの連携も含めて主要な画面や操作をテストし、問題なく利用できることを確かめてから導入すると安心です。
症状別に見るFlutter Webの改善ポイント
Flutter Webの動作が遅い場合は、どの場面で遅さを感じるのかによって確認するポイントが変わります。
ここでは、発生している症状ごとに確認したい原因と改善ポイントを順番に見ていきましょう。
初回表示が遅い場合
初回表示が遅い場合は、最初に読み込むJavaScriptやWasm、フォントなどのファイルサイズを確認します。
起動直後に不要なコードやデータまで読み込んでいる場合は、遅延読み込みやコード分割を取り入れ、初回に取得するデータ量を減らしましょう。
スクロールや画面操作が重い場合
スクロールや画面操作が重い場合は、操作のたびに広い範囲のウィジェットが再構築されていないか確認します。
長いリストにはListView.builderなどを使い、状態更新の範囲も必要な部分に絞ることで、再構築や描画の負荷を抑えられます。
ページ遷移やデータ表示が遅い場合
ページ遷移やデータ表示が遅い場合は、画面側の処理とAPIからのデータ取得に分けて原因を確認します。
同じデータを何度も取得している場合は、必要なデータだけを取得し、再利用できるものを保持することで表示までの待ち時間を短くできます。
画像やアセットの表示が遅い場合
画像の表示が遅い場合は、実際の表示サイズに対して解像度やファイル容量が大きすぎないか確認します。
表示サイズに合わせて画像を縮小し、必要な画像から読み込むことで、転送するデータ量を抑えて表示を軽くできます。
Flutter Webのパフォーマンスを計測する方法
Flutter Webの改善を進めるときは、体感だけで速くなったか判断するのではなく、数値を確認しながら遅い処理を特定することが重要です。
ここでは、ボトルネックの特定から改善前後の比較まで、パフォーマンスを計測する流れを順番に確認していきましょう。
DevToolsでボトルネックを特定する
Flutter DevToolsのPerformance画面で、スクロールや画面遷移など重さを感じる操作を計測します。
60Hzでは1フレーム約16.7msが目安になるため、処理時間の長いフレームを確認し、UIや描画のどこに負荷がかかっているかを調べましょう。
ビルドサイズと読み込み時間を確認する
リリースビルド後は、build/web内にあるJavaScriptやWasm、画像、フォントなどのファイルサイズを確認します。
ブラウザのDevToolsにあるNetworkパネルも使い、容量が大きく読み込みに時間がかかっているファイルから原因を絞り込みましょう。
どのファイルが初期表示を遅くしているのか判断しにくい場合は、ブラウザのNetworkパネルで読み込み時間やファイルサイズを確認する方法も押さえておくと原因を絞り込みやすくなります。
▶Chrome DevToolsのNetworkパネルの使い方｜読み込み速度を確認する方法
改善前後のパフォーマンスを比較する
改善効果は、同じ端末やブラウザ、操作手順など、できるだけ同じ条件で計測して比較します。
通信状況や端末の負荷による差もあるため、同じ操作を複数回試し、読み込み時間やフレーム時間が安定して改善しているか確認しましょう。
Flutter Webのパフォーマンス改善で優先すべき順番
Flutter Webのパフォーマンス改善は、効果を確認しやすい項目から順番に進めることが重要です。
Wasmなど構成への影響が大きい対策は最初から導入せず、基本的な改善を行ったあとに必要性を判断しましょう。
DevToolsでボトルネックを特定する
Flutter DevToolsのPerformance画面で、スクロールや画面遷移など重さを感じる操作を計測します。
60Hzでは1フレーム約16.7msが目安になるため、処理時間の長いフレームを確認し、UIや描画のどこに負荷がかかっているかを調べましょう。
ビルドサイズと読み込み時間を確認する
リリースビルド後は、build/web内にあるJavaScriptやWasm、画像、フォントなどのファイルサイズを確認します。
ブラウザのDevToolsにあるNetworkパネルも使い、容量が大きく読み込みに時間がかかっているファイルから原因を絞り込みましょう。
改善前後のパフォーマンスを比較する
改善効果は、同じ端末やブラウザ、操作手順など、できるだけ同じ条件で計測して比較します。
通信状況や端末の負荷による差もあるため、同じ操作を複数回試し、読み込み時間やフレーム時間が安定して改善しているか確認しましょう。
まとめ
Flutter Webのパフォーマンスを改善するときは、まずDevToolsで遅さの原因を確認し、初期表示や描画など問題がある部分から見直していくことが大切です。
ビルドサイズの削減や再構築の見直し、遅延読み込みなど基本的な対策を進め、それでも改善が足りない場合はWasmも検討するとよいでしょう。
一度にすべてを変更するのではなく、改善前後を同じ条件で計測しながら進めると、効果のある対策を判断しやすくなります。
まずは気になる場面を計測し、負荷の大きい部分から少しずつ改善してみてください。
