Bubbleでページ応答速度を上げる方法
Bubbleとはノーコード開発ツールの一つです。
コードを使用することなくWeb開発を行うことができるので、素早く簡単に安価で作成することができます。
また、ノーコード開発ツールでありながらも様々なプラグイン（拡張機能）が用意されており自由度が高いのも特徴です。
しかし、明らかにコード開発に負けている点についてページの応答速度が遅いということがあげられます。
それは本当にそうでしょうか。
実際、エンジニア側のスキルによってBubbleで作成したWebシステムでも応答速度は大幅に上昇させることができます。
今日は、私の知っている限りの全てのBubbleの応答速度を上げる方法について紹介します！
キャッシュの活用
キャッシュを設定することでブラウザにデータを保存しておくことができます。これにより再度ページにアクセスする必要がなくなり、ページ読み込みが高速化されます。
頻繁に変更されないようなページであればブラウザに保存しておくほうが良いでしょう。
ただキャッシュはセキュリティが甘くなってしまいますので、ユーザーにとって重要な情報や個人情報といったものはキャッシュされないように大いに気を付けましょう。
不要なプラグインを削除
これも気を付けないとやってしまいます。
例えば、決済機能を付けるつもりでStripeをインストールしたが、実際は決済機能はつけないことになったもののStripeのアンインストールを忘れていたというパターンです。
Stripeやicon系、API Connectorといった「とりあえず入れておく系プラグイン」は実際には使用されていないのにインストールされたままになっていることが多々あります。自分含めて気を付けたいところです。
Do a search forはできるだけ避ける
repeating groupなどで表示したいデータを絞る際によく使用するDo a search forですが、なんとなくわかる通りこの処理は応答速度を遅くします。
全データから、指示された条件に該当するデータだけを抜き出すわけですからね。
ですからデータ同士を繋げる場合は、CreaterがUserと繋がっているようにデータ名とデータ名で繋げるようにしましょう。
DataのField数は少なくする
以下はBubbleの公式フォーラムでの回答です。
Bubbleにて一つのデータにfieldは999までつけることができますがパフォーマンスのために100以下にしておいてくださいねということが記載されています。
fieldがそんな数になることはめったにないとは思いますが、もしもそうなった場合はデータを２つにわけることをお勧めします。
例）「予約」という１つのDataに予約店舗、予約店舗の住所、予約時間、予約コース、予約コース値段
とするのではなく、
「予約」は予約店舗、予約時間、予約コースと１つのデータにしておいて「予約店舗」というDataに予約店舗、予約店舗情報、予約店舗詳細
「予約コース」というDataに予約コース、予約時間、予約コース値段
としてそれぞれのDataを繋げてあげましょう。
このときも予約店舗名でDo a search forするのではなくてちゃんとデータ名とデータ名でリレーションしてあげてください！！
スタイルはこまめに設定しよう
様々なエレメントのレイアウトを設定（登録）できるスタイルという機能ですが、これは決してエンジニアの利便性のためだけに存在するものではありません。
スタイルを設定しておけば、スタイルを１回読み込むことで、そのスタイルを採用しているエレメント全てのレイアウトを読み込むことができるのです。
しかし、スタイルを設定していなければ同じレイアウトでも１回１回読み込まなければなりません。
なので、スタイルは設定しておくようにしましょう。
ページ数は少なくする
エレメントのconditionalにてvisibleの条件を設定することで複数のページを行き来することなく表示するエレメントを設定することができます。
例えば、プロフィール登録画面にて
名前
年齢
性別
趣味
職業
プロフィール
などを項目順に登録する場合に、一つの項目を登録するごとに次のページへ移動するのではなく各inputエレメントにvisibleのcondtionalを設定しておくことで順に登録させることができます。
具体的にはページにcustom statesをnumber型で設定しておきます。
ボタンをクリックするごとにDataの登録とcustom statesを＋１するようにしておきます。
custom statesが１のときは名前を登録するinputエレメントだけ表示するようにします。２のときは年齢を登録するinputエレメントだけ、というように各エレメントにcustom statesによってconditionalを設定します。
項目を１つだけ表示して順に登録させるときくと、ついつい項目を変更させるたびにページ移動をする必要があると思われそうですが、custom statesとconditionalを設定することで実装することができます。
repeating dataで表示するデータについても複数のrepeating dataエレメントを用意してconditionalにて表示するエレメントを設定すれば実現できます。
こうすることでページを移動しているようで実際にはしていないので、結果読み込み速度が速くなります（実際には読み込んでいないが、はやくなっているように見える）
求められる応答速度はどんどん早くなる
ネイティブアプリにしてもWebシステムにしても競争は激化しているのでユーザーフレンドリーなシステムというものは必須のものになっています。
また、SEOの観点から見てもページの応答速度については重要視されています。
つまり、UIやUXについてだけでなく応答速度にまで気を付けることはもはや当たり前の時代なのです。
僕について
僕は、ノーコード開発ツールBubbleのエンジニアです。
これまで数々の案件を受注し開発してきました。
作成したいシステムがある場合は
までご連絡いただければご相談に乗らせていただきます。
お問い合わせはもちろん無料ですし、作成したいシステムの要件について教えていただければ無料でテストを開発してお見せすることもできます。
実際に開発となれば相場はだいたい通常のコード開発の５分の１から半分程度になります。
ぜひお願いします。
この記事が気に入ったらサポートをしてみませんか？