グループ化による画面表示速度の改善方法

（著者：サイボウズ 性能検証担当）

はじめに

大量のフィールドを設置したアプリを利用、または作成したことのある方の中には、
「アプリを開く時に画面の表示速度が遅い」と感じた経験をお持ちの方もいらっしゃるかと思います。

1アプリに対して設置できるフィールドは500フィールドまでという制限はありますが、
設置するフィールドの種類によって画面表示が完了するまでに時間がかかる場合があります。 

そのような場合「グループフィールド」を用いることで、画面表示速度を改善できることがあります。
この記事では、グループフィールドを使うことで、実際にどのくらい表示速度が速くなったかをご紹介します。

検証実施

検証環境

・OS：Windows10

・メモリ：4GB

・CPU：Intel(R) Core(TM) i5-4590S CPU @3.00GHz

・ブラウザ：GoogleChrome

前提条件

・アクセス権限を設定しない

検証対象画面

・アプリの設定画面

・レコード作成画面

・レコード詳細画面

測定方法

・HTMLドキュメント解析完了時間：デベロッパーツールのDOMContentLoaded

・レンダリング完了時間：ストップウォッチ

ストップウォッチの開始と終了のタイミングは以下です。

アプリの設定画面

開始：レコード一覧画面の歯車アイコンクリック時

終了：設定画面のローディングアイコンが消えた時

レコード追加画面

開始：レコード一覧画面の「＋」ボタンクリック時

終了：レコード追加画面のフィールドが表示された時

レコード詳細画面

開始：レコード一覧画面の詳細表示アイコンクリック時

終了：レコード詳細画面のローディングアイコンが消えた時

用意したアプリ

条件	フィールド
実運用想定（グループ化なし）	チェックボックス × 164個 ドロップダウン × 166個 文字列複数行 × 164個 数値 × 3個 文字列１行 × 3個
実運用想定（グループ化あり）	チェックボックス × 159個 ドロップダウン × 160個 文字列複数行 × 159個 数値 × 3個 文字列１行 × 3個 グループ × 16個
文字列１行500個（グループ化なし）	文字列１行 × 500個
文字列１行500個（グループ化あり）	文字列１行 × 490個 グループ × 10個
文字列複数行500個（グループ化なし）	文字列１行 × 500個
文字列複数行500個（グループ化あり）	文字列１行 × 490個 グループ × 10個
リッチエディター500個（グループ化なし）	文字列１行 × 500個
リッチエディター500個（グループ化あり）	文字列１行 × 490個 グループ × 10個
数値（グループ化なし）	文字列１行 × 500個
数値（グループ化あり）	文字列１行 × 490個 グループ × 10個
ラジオボタン（グループ化なし）	文字列１行 × 500個
ラジオボタン（グループ化あり）	文字列１行 × 490個 グループ × 10個
チェックボックス（グループ化なし）	文字列１行 × 500個
チェックボックス（グループ化あり）	文字列１行 × 490個 グループ × 10個
複数選択（グループ化なし）	文字列１行 × 500個
複数選択（グループ化あり）	文字列１行 × 490個 グループ × 10個
ドロップダウン（グループ化なし）	文字列１行 × 500個
ドロップダウン（グループ化あり）	文字列１行 × 490個 グループ × 10個
日付（グループ化なし）	文字列１行 × 500個
日付（グループ化あり）	文字列１行 × 490個 グループ × 10個
時刻（グループ化なし）	文字列１行 × 500個
時刻（グループ化あり）	文字列１行 × 490個 グループ × 10個
日時（グループ化なし）	文字列１行 × 500個
日時（グループ化あり）	文字列１行 × 490個 グループ × 10個
リンク（グループ化なし）	文字列１行 × 500個
リンク（グループ化あり）	文字列１行 × 490個 グループ × 10個
ユーザー選択（グループ化なし）	文字列１行 × 500個
ユーザー選択（グループ化あり）	文字列１行 × 490個 グループ × 10個
組織選択（グループ化なし）	文字列１行 × 500個
組織選択（グループ化あり）	文字列１行 × 490個 グループ × 10個
グループ選択（グループ化なし）	文字列１行 × 500個
グループ選択（グループ化あり）	文字列１行 × 490個 グループ × 10個

検証結果

・アプリの設定画面、レコード追加画面において、グループ化なしの時に比べ グループ化あり の方が早く画面操作が可能になっていることがわかります。

・レコード詳細画面はフィールドを多く配置しても表示速度はあまり遅くなりませんでした。

※DOM Loaded：HTMLドキュメント解析完了時間

※Rendering：レンダリング完了時間

最後に

検証結果からフィールドを多く配置していて表示までに時間がかかる画面において、
グループ化を行うことでレコード追加画面とアプリ設定画面の表示速度が改善される可能性があることが分かりました。

画面の表示速度が課題となった場合には、検討してみていただければと思います。

また、本検証を通して配置するフィールドの種類によっては、沢山配置することで表示速度が遅くなることも分かりました。
フィールドを沢山配置する場合は、アプリを分割することも検討してみてください。

注意事項

本記事の内容は、確実な画面表示速度の改善をお約束するものではございません。
お使い頂いている環境（ブラウザ、アプリ構成、権限設定など）によっては、改善が見込まれない場合があります。

このTipsは、2018年12月版 kintoneで確認したものになります。