Bubbleは、プログラミング不要でWebアプリケーションを開発できる強力なノーコードツールです。しかし、アプリの複雑さや規模が大きくなるにつれて、パフォーマンスの問題が発生しやすくなります。
後からパフォーマンスを改善しようとすると大きくアプリを作り直すことにもなるため、一番最初にこの内容を把握してから作り始めるべきだと考えています。
この記事では、Bubble開発におけるパフォーマンスの課題と、それを改善するための具体的な対策、そして開発開始時から考慮すべき事前対策について解説します。
1. Bubbleのパフォーマンス課題
Bubbleは、その手軽さゆえに、以下のようなパフォーマンス課題を抱えがちです。
- 複雑なアプリでの読み込み速度の低下: 要素やワークフローが増えるほど、ページの読み込みに時間がかかるようになります。
- 大量データ処理時のパフォーマンス低下: 大量のデータを扱う場合、データベースへのアクセスが増え、処理速度が遅くなることがあります。
- レスポンシブデザインへの対応: さまざまなデバイスでの表示に対応するためには、レスポンシブデザインを考慮する必要がありますが、これがパフォーマンスに影響を与える場合があります。
- サードパーティプラグインの影響: Bubbleは、機能拡張のためのプラグインが豊富ですが、これらのプラグインがパフォーマンスを低下させる可能性もあります。
実際、私が初めて開発した際も少ないデータ量では問題なく動作していてもデータベースの件数を1,000件以上に増やすと処理速度が遅くなり、そこからパフォーマンス改善にかなり時間を使ってアプリを改修しました。
2. パフォーマンス改善の重要性
パフォーマンスの改善は、ユーザー体験の向上だけでなく、アプリの成長とスケーラビリティ、開発コストの削減、SEO対策など、さまざまな面で重要です。
- ユーザー体験の向上: パフォーマンスの良いアプリは、ユーザーのストレスを軽減し、満足度を高めます。
- アプリの成長とスケーラビリティ: パフォーマンスがボトルネックになると、ユーザー数の増加に対応できなくなります。
- 開発コストの削減: パフォーマンスの問題は、後から修正するよりも、開発初期から対策しておく方がコストを抑えられます。
- SEO対策: Googleは、ページの読み込み速度をランキング要因の一つとしています。
3. 具体的なパフォーマンス改善策
ここでは、Bubbleアプリのパフォーマンスを向上させるための具体的な実践ステップとその理由を詳しく解説します。これらの対策は、開発初期から意識することで、後々のパフォーマンス問題を未然に防ぎ、より快適なユーザー体験を提供することに繋がります。
SPA (Single Page Application) 化
なぜ必要か？
従来のWebアプリケーションでは、ページ遷移のたびにサーバーとの通信が発生し、ページ全体の再読み込みが行われます。SPA化では、ページ遷移を減らし、必要なデータのみを動的に読み込むため、通信量とレンダリング時間を大幅に削減できます。これにより、ユーザーはページ遷移の待ち時間を気にすることなく、スムーズな操作体験を得られます。
対策:
- ルーティング機能の活用: Bubbleのルーティング機能を利用して、URLの変化に応じてコンテンツを動的に切り替えるように設定します。
- 条件付き表示の活用: 要素の表示/非表示を条件によって制御し、必要なコンテンツのみを表示するようにします。
- API Connectorやカスタム状態の活用: データの取得や更新を非同期で行い、ページ全体を再読み込みせずにコンテンツを更新できるようにします。
1ページの中にグループをページ単位に登録し、各グループ（ページ）の表示をConditionalで制御するイメージです。以下のようにURLにhttps://xxxxx.com/?pg=favのように設定し、conditionalでURLにfavが含まれていた際にい特定のグループ（例：お気に入り）をvisibleにします。
そうすることで実際の画面の遷移を伴わず、瞬時に画面が切り替わります。
データのプリロード
なぜ必要か？
必要なデータを事前に読み込んでおくことで、データベースへのアクセス回数を減らし、通信のオーバーヘッドを削減できます。これにより、ページの読み込み速度が向上し、ユーザーはストレスなくコンテンツにアクセスできます。
対策:
- ページロード時のデータ取得: ページの初期表示時に必要なデータを取得し、カスタムステートやRepeating Groupに保存しておきます。
データベース設計の見直し
なぜ必要か？
データベースの設計が適切でないと、データの読み書きに時間がかかり、パフォーマンスに悪影響を及ぼします。Bubbleではデータ読み込み時に全フィールドを読み込むので検索に使用しないこうもくが多数あると、表示速度が劣化します。
テーブル設計を見直すことで、取得する項目数を少なくでき、アプリ全体のレスポンスを改善できます。
対策:
- テーブル設計の最適化: 一つのテーブルに多くの項目を設定せず、関連性の高い項目ごとにテーブルを分割します。目安としては30件程度かと思います。
- リレーションシップの最適化: テーブル間のリレーションシップを適切に設定し、不要なデータの読み込みを回避します。そ
サードパーティプラグインの見直し
なぜ必要か？
サードパーティプラグインは、Bubbleの機能を拡張する便利なツールですが、インストールされているプラグインはすべてソースコードが読み込まれることになります。それによりパフォーマンスも劣化します。
対策:
- 未使用のプラグインのアンインストール: 未使用のプラグインがあれば小まめに削除します。
画像の圧縮
なぜ必要か？
画像ファイルはサイズが大きくなりがちで、ページの読み込み速度に大きく影響します。画像を圧縮することで、ファイルサイズを削減し、読み込み時間を短縮できます。
対策:
- 画像圧縮ツール/プラグインの活用: Bubbleには、画像圧縮機能を持つプラグインがいくつかあります。これらのプラグインを利用して、画像のサイズを最適化します。
pluginではImage Compression、Cropperなどが無料で利用できます。 - 適切な画像フォーマットの選択: 画像の種類に合わせてJPEG、PNG、WebP、SVGなどの適切なフォーマットを選択し、ファイルサイズを削減します。
特にSVG、WebPなどはかなり画像サイズの圧縮に有効かと思います。 - 事前に登録する画像データも圧縮：データベースやoption setに事前に登録しておくデータも圧縮しておきましょう。私のおすすめの圧縮サイトはSquooshです。圧縮っぷりがえげつないです。
Googleが発表していましたが、ページ全体として1.6MB未満、1画像200KBを目指して圧縮するのが良いと思います。
Styleの設定と再利用
なぜ必要か？
Bubbleでは、要素ごとにスタイルを設定できますが、要素が増えるほどスタイルの読み込みに時間がかかります。スタイルを定義し、それを複数の要素に適用することで、スタイルの読み込み回数を減らし、レンダリング時間を短縮できます。
対策:
- Styleの適用: Bubbleの要素にstyle設定を毎回実施するのではなく、登録したStyleを適用するようにします。それによりStyleが毎回読み込まれることを回避します。
これらの対策を総合的に行うことで、Bubbleアプリのパフォーマンスを大幅に向上させることができます。パフォーマンスの改善は、ユーザー満足度を高め、アプリの成功に繋がる重要な要素です。
まとめ
この記事では、Bubble開発におけるパフォーマンスの課題と、それを改善するための具体的な対策、そして開発開始時から考慮すべき事前対策について解説しました。パフォーマンスの改善は、Bubbleアプリの成功にとって不可欠な要素です。この記事で紹介した対策を実践し、快適で高速なBubbleアプリを開発しましょう。