パフォーマンスガイド
概要
Bubbleでは、様々なアプリケーションを開発できるだけでなく、複雑なワークフローや大量のデータを活用することで、より高度なアプリケーションも構築できます。
しかし、アプリケーションが複雑になればなるほど、性能の低下などの問題が発生する可能性が高まります。
それらの問題を避けるために、パフォーマンスの向上が必要です。
この記事では、パフォーマンスに関する概要を説明した上で、具体的な改善方法について詳しく解説します。
パフォーマンスとは？
一般的に「パフォーマンス」とは、あるタスクの実行の質、および速さを指す言葉です。
Bubbleにおいてのパフォーマンスは、複数の要素の組み合わせによって決まります。この要素とは、Bubbleのソフトウェア、Amazonのハードウェア、ユーザーのデバイス、アプリの設計、および心理学等に関連してきます。言い換えれば、効率的なアプリを構築するには、これらのすべての要素をバランス良く考慮し、適切に調整する必要があります。
ここでの「パフォーマンス」とはアプリの様々な部分がユーザーにとってどの程度スムーズに動くのか、ということです。例えば、
・ページの読み込み
・ボタンが押された時の挙動
・スクロール中のアニメーションなどの動き
・アプリのナビゲーション
・データベースへの保存処理
などが挙げられます。
ハードリミットとソフトリミットとは
Bubbleを利用する上で、「ハードリミット」と「ソフトリミット」という、2つの制限が存在します。
パフォーマンスに影響を及ぼす具体的な原因を解説する前に、ハードリミットとソフトリミットについて簡単に説明します。
◎ソフトリミットとは
・その制限を超えても動作は可能ですが、パフォーマンスや安定性に影響を及ぼすような制限です。ソフトリミットは、アプリケーションの構造や料金プランなどに基づいて設定されます。
・たとえば、大規模なデータベースレコードを含むアプリケーションでは、検索パフォーマンスが低下する可能性があります。
◎ハードリミットとは
・超えることができない固定の制限です。ハードリミットの中には、より高い料金プランにアップグレードすることで引き上げることができるものや、最適化によって回避できるものも存在します。
| ソフトリミット | ハードリミット | |
| 意味 | 制限を超えると、パフォマンスが落ちる | 制限を超えることができない |
| 具体例 | ・SVG画像サイズの制限 ・:advancedを使った検索など | ・CSVアップロードのサイズ制限 ・ワークフローのタイムアウトなど |
タイムアウトについて
タイムアウトは、特定のアクションが完了するまでに時間がかかりすぎてシステムによって終了された場合に発生することがあります。これらは、単一のリクエストまたはアプリがサーバーやリソースを独占するのを防ぎ、共有サーバー上のすべてのアプリケーションの応答性とパフォーマンスを維持するために起こる事象です。
タイムアウトの発生は稀ですが、予測が難しく、プロセスが終了する前に中断されることでデータの損失やその他の影響が生じる可能性があります。つまり、長時間かかる処理が途中で中断されることがあるため、注意が必要です。
ページを読み込む時に何が起きているのか
Bubbleがページを読み込む時に何が起きているのか、その注意点を理解することで、パフォーマンスの向上が期待されます。
ページ読み込み時の一般的な流れ
1, Bubbleサーバーから全ての要素（表示要素、非表示要素の両方）のコードが送信される
2, Web上でコードを解釈し、現在のページのすべての表示要素を画面に書き出す（レンダリング）
3, 表示要素に必要な”dynamic data”を取得
上記の”非表示要素”と”読み込み速度”について、以下に補足します。
非表示要素でも読み込みに影響を与える場合がある
一般的な流れにもある通り、非表示要素はコードの送信はされるものの、画面には書き出されません。
この場合だと、非表示要素についてはコードの解釈が行われないので、読み込みに影響は与えません。
しかし、表示要素が非表示要素のデータを参照する場合は、実際に画面上には見えませんが、その要素のコードの解釈は行われます。
つまり、非表示要素だとしてもデータを参照される場合は、ページ読み込みに影響を与えます。
読み込み速度は要素の数が大きく関係する
要素の種類よりも、要素の数の方がパフォーマンスには大きく影響します。
どの種類の要素でも、基本的にはパフォーマンスの観点では大きな違いはありません。しかし例外が2つあります。
◎RepeatingGroup
・レイアウト、スタイル、プロパティに応じて読み込むデータの量が変わってきます。
・RGの各セルにある要素が多いほど、画面表示にかかる時間が長くなります。
・RGの中に別のRGが配置されている場合、{中のRGのcell数} × {外のRGのcell数}の影響を与えます。
◎Plugin
・インストールしているPluginは利用しているか否かに関わらず、読み込みが行われます。
・これはパフォーマンスへの影響はそれほど大きくはありませんが、通常使用していないPluginはアンインストールしておいた方が良いです。
どうしたらパフォーマンスを向上できる？
パフォーマンスを向上させるための基本的な考え方をご紹介します。
データ取得を最小限に抑える
大抵の場合、ページを表示するためには何かしらのデータを取得する必要があります。その際に取得するデータの量が多ければ多いほど、読み込みに時間がかかります。同様に、数値のようなシンプルなデータ型を取得するよりも、MB単位のデータを取得する方が、読み込みに時間がかかります。
必要なデータを最適化し、読み込み時に取得するデータを最小限に抑えることが重要です。
1ページごとの内容をシンプルにする
複雑なページは取得データが多くなってしまう可能性があり、その結果読み込みに時間がかかってしまうことがあります。そのため、少ないページ数で一つ一つが複雑になってしまうよりも、多いページ数で一つ一つをシンプルにした方が、ページ読み込み時のスピードは速くなります。
ページ数とそれぞれのページの複雑さのバランスを考えることが重要です。
“sort”や”filter”は他の操作より前が効率的
データベースからデータを取得し、”sort”や”filter”の操作をする際は、他の操作よりも前に組み込むことで、より効率的になる傾向があります。
“filter”はできるだけシンプルに
データを取得し、それを特定の条件で絞り込むという操作は、大まかに2つあります。
1つ目は、”Do a search for”を使用し、データベース自体でソートやフィルタリングする方法です。こちらの処理はデータベースが直接データを絞り込むため、一般的には高速になります。
2つ目は、”filter”を使い、データベースから初期データを取得し、その後に追加のフィルタリングをアプリケーション内で行う方法です。この方法は一般的には遅く、大量のデータを扱ったり、複雑なフィルタリング条件があると特に遅延する可能性が高くなります。
さらに”filter advanced”を使用すると、より高度なフィルタリングが可能になりますが、処理の内容としては重くなってしまうため、こちらも速度は遅くなることがあります。
高度なフィルタリングは必要最低限にできるように最適化することで、パフォーマンスの向上を目指すことができます。
検索を複数回並べる場合、注意が必要
検索を複数回並べる処理をする場合、それらは順番に実行され、同時には実行されません。つまり、最初の検索が多くのデータを返す場合、それが2番目の検索を遅くさせる可能性があり、後に続く検索にも同様の影響を与えます。このため、検索の効率を保つためには、複数回並んだ検索をさせる処理に注意が必要です。
Bubbleは既にパフォーマンス最適化を行っている
Bubbleはデータベース上でクエリを実行し、サーバー上で画像をリサイズし、必要な場合にはJavaScriptをキャッシュするように指示するなど、さまざまなパフォーマンスの向上策を導入しています。
したがって、比較的シンプルでデータの取得量が比較的少ないはずのクエリが非常に遅い場合、アプリケーションのデータ階層やクエリに関して、パフォーマンスを最適化する余地があるかどうかを確認することが重要です。
クエリをシンプルにすると速くなる
全てにおいてそうとは言えませんが、クエリをシンプルにすることで、処理速度が速くなる可能性は高いです。
ページの読み込み時にデータを毎回変更せず、要素の状態を変更する
データベースへのアクセスは、通常、リソースと時間を消費し、ページの読み込み速度に悪影響を及ぼす可能性があります。一方、要素の状態を変更することは、クライアントサイド（ブラウザ内）で処理され、データベースとの通信を避けることができ、パフォーマンスを向上させます。
例えば、ユーザーが特定のボタンをクリックした場合、そのボタンの色やテキストを変更する必要があるとします。この変更はデータベースの内容に依存しない場合、データベースへの新しいクエリを実行せずに、要素の状態だけを変更しましょう。これにより、ページの読み込み速度の向上が見込まれます。
高コストな計算はバックグラウンドで実行する
バックグラウンドでスケジュールされたワークフローは、クエリ実行後、その結果を後で使用するために保存することができます。これは、高負荷のクエリをページ読み込み時に実行するよりもパフォーマンスが向上します。
高コストな計算や処理は、バックグラウンドで実行し、結果を事前に保存しておくことで、ページの読み込み速度が向上が見込まれます。
“Make changes to a list of X” アクションは要注意
このアクションは短いリストに素早く変更を加える場合には便利ですが、リスト内の数が増えると、ワークフローがタイムアウトになるリスクが高まります。
タイムアウトしてしまう場合の改善案としては、”Schedule API Workflow on a list”を使用してみましょう。
これは、リストを取得し、リストの各項目に対して個別に実行する API ワークフローをスケジュールするため、よりパフォーマンスが高くなります。
- Bubbleでの具体的なパフィーマンス向上方法はパフォーマンス向上のTipsをご覧ください。
参考文献
・https://manual.bubble.io/help-guides/maintaining-an-application/performance-and-scaling#hard-vs-soft-limits
・https://docs.airdev.co/bubble-development-guide/steps/develop/optimize-speed
