カテゴリー内の他の記事

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

フォローする

(著者:サイボウズ 性能検証担当)

はじめに

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

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

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

検証実施

検証環境

・OS:Windows10

・メモリ:4GB

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

・ブラウザ:GoogleChrome

前提条件

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

検証対象画面

・アプリの設定画面

・レコード作成画面

・レコード詳細画面

測定方法

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

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

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

アプリの設定画面

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

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

レコード追加画面

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

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

レコード詳細画面

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

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

 

用意したアプリ

条件

フィールド

実運用想定(グループ化なし)

チェックボックス × 164個

ドロップダウン × 166個

文字列複数行 × 164個

数値 × 3個

文字列1行 × 3個

実運用想定(グループ化あり)

チェックボックス × 159個

ドロップダウン × 160個

文字列複数行 × 159個

数値 × 3個

文字列1行 × 3個

グループ × 16個

文字列1行500個(グループ化なし)

文字列1行 × 500個

文字列1行500個(グループ化あり)

文字列1行 × 490個

グループ × 10個

文字列複数行500個(グループ化なし)

文字列1行 × 500個

文字列複数行500個(グループ化あり)

文字列1行 × 490個

グループ × 10個

リッチエディター500個(グループ化なし)

文字列1行 × 500個

リッチエディター500個(グループ化あり)

文字列1行 × 490個

グループ × 10個

数値(グループ化なし)

文字列1行 × 500個

数値(グループ化あり)

文字列1行 × 490個

グループ × 10個

ラジオボタン(グループ化なし)

文字列1行 × 500個

ラジオボタン(グループ化あり)

文字列1行 × 490個

グループ × 10個

チェックボックス(グループ化なし)

文字列1行 × 500個

チェックボックス(グループ化あり)

文字列1行 × 490個

グループ × 10個

複数選択(グループ化なし)

文字列1行 × 500個

複数選択(グループ化あり)

文字列1行 × 490個

グループ × 10個

ドロップダウン(グループ化なし)

文字列1行 × 500個

ドロップダウン(グループ化あり)

文字列1行 × 490個

グループ × 10個

日付(グループ化なし)

文字列1行 × 500個

日付(グループ化あり)

文字列1行 × 490個

グループ × 10個

時刻(グループ化なし)

文字列1行 × 500個

時刻(グループ化あり)

文字列1行 × 490個

グループ × 10個

日時(グループ化なし)

文字列1行 × 500個

日時(グループ化あり)

文字列1行 × 490個

グループ × 10個

リンク(グループ化なし)

文字列1行 × 500個

リンク(グループ化あり)

文字列1行 × 490個

グループ × 10個

ユーザー選択(グループ化なし)

文字列1行 × 500個

ユーザー選択(グループ化あり)

文字列1行 × 490個

グループ × 10個

組織選択(グループ化なし)

文字列1行 × 500個

組織選択(グループ化あり)

文字列1行 × 490個

グループ × 10個

グループ選択(グループ化なし)

文字列1行 × 500個

グループ選択(グループ化あり)

文字列1行 × 490個

グループ × 10個

 

検証結果

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

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

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

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

最後に

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

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

 

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

注意事項

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

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

記事に関するフィードバック

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

Avatar
kin太郎

お世話になります。

グループフィールドの初期値の設定
「グループ内のフィールドを表示する」「しない」によっても
表示速度は変わるのでしょうか

 

Avatar
cybozu Development team

kin太郎 様

コメントありがとうございます。

本記事の検証環境においては、下記の結果となりました。

  • 追加画面:「グループ内のフィールドを表示しない」としたほうが早い
  • 詳細画面:「グループ内のフィールドを表示しない」としたほうが少し早い(ほぼ変わらない)
  • 設定画面:設定による差異はなし

「グループ内のフィールドを表示しない」とするほうが、表示が速くなる可能性があります。
※注意事項に記載の通り、すべての環境での速度改善をお約束するものではございません。

 

なお、本記事に記載されている検証結果は、「グループ内のフィールドを表示しない」という設定で行ったものです。

 

ログインしてコメントを残してください。