レスポンシブダッシュボードでのウィジェットの表示時間の最適化Issue <!-- /*NS Branding Styles*/ --> .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: #000000; } span { font-size: 12pt; font-family: Lato; color: #000000; } h2 { font-size: 24pt; font-family: Lato; color: black; } h3 { font-size: 18pt; font-family: Lato; color: black; } h4 { font-size: 14pt; font-family: Lato; color: black; } a { font-size: 12pt; font-family: Lato; color: #00718F; } a:hover { font-size: 12pt; color: #024F69; } a:target { font-size: 12pt; color: #032D42; } a:visited { font-size: 12pt; color: #7057C7; } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: block; max-width: ; width: auto; height: auto; } } ダッシュボードのタイプの概要 ダッシュボードには、レスポンシブでないの 2 種類があります。使用しているタイプを確認するには、ダッシュボードで 編集をクリックします。 レスポンシブダッシュボードには、左上にコンテキストメニュー (「ハンバーガー」) ボタンがあります。編集権限を持つユーザーには、ウィジェットを追加 () ボタンと クイックレイアウト () ボタンが表示されます。レスポンシブでないダッシュボードでは、編集権限を持つユーザーに レイアウトを変更 ボタンが表示されます。すべてのユーザーには、 リンク アイコン、 お気に入り アイコン、および 更新 アイコンが表示されます。 レスポンシブダッシュボードの利点 レスポンシブダッシュボードは、ダッシュボードコンテンツの作成と管理を改善します。(Istanbul より前は) デフォルトで有効になっていないため、アドミンが有効にする必要があります。glide.cms.enable.responsive_grid_layout システムプロパティを true に設定します。このプロパティが存在しない場合は作成できます。 イスタンブール以降の新規顧客に対しては、レスポンシブダッシュボードがアクティブになり、デフォルトで有効になっています。以前のバージョンから Istanbul 以降にアップグレードしたお客様は、システムプロパティを true に設定して、レスポンシブダッシュボードを手動で有効にする必要があります。 レスポンシブレイアウトを使用する多くの利点には、次のようなものがあります。 ウィジェットをドラッグして移動およびサイズ変更する機能。 レポート、パフォーマンスアナリティクス、およびその他のウィジェットをダッシュボードから直接作成および編集するには、ウィジェットのエディターページを表示するウィジェットの鉛筆アイコンをクリックします。 [ウィジェットを追加] ペインを使用して、ダッシュボードに追加するウィジェットをすばやく見つけてプレビューします。 クイックレイアウトを使用して、事前定義されたレイアウトにウィジェットをスナップし、必要に応じてレイアウトを調整できます。 権限システムはすべてのダッシュボードとすべてのユーザーに適用され、他のユーザーがダッシュボードを表示または編集できるように明示的に共有する必要があります。 遅延ロード:表示されているウィジェットのみがロードされます。システムの負荷を軽減し、初期ウィジェットのロードを高速化するために、ユーザーが下にスクロールするにつれてロードされるウィジェットが増えます。 ウィジェットのロード方法を最適化する方法 ダッシュボードの全体的なパフォーマンスを向上させるために、 glide.canvas.grid.widget_render_concurrent_max システムプロパティを使用してウィジェットのロード方法を最適化できます。 注意: このシステムプロパティは、レスポンシブダッシュボードにのみ適用されます。 タイプ:整数 デフォルト値:プロパティが手動で設定されていない場合 3。このプロパティーを手動で設定する場合の最小値は、2 です。 場所: システムプロパティ [sys_properties] テーブルに追加します。 [Behavior (動作)]： ダッシュボードに同時に表示されるウィジェットの最大数を定義します。値が小さいほど、個々のウィジェットセットのロード速度が向上します。値が大きいほど、サーバーへの要求が少なくなります。 画面の外にあるウィジェットは、スクロールするまでまったくロードされません。 この値を小さい値に設定すると、遅いウィジェットによってブロックされるウィジェットの数が少なくなります。サーバーに送信される要求が増えるため、ダッシュボードに表示されるウィジェットのロードに少し時間がかかります。値を 2 未満に設定すると、ページの「フォールド」の上に表示されるすべてのウィジェットが一度にロードされます。 例:非常に大きなモニターで一度に 10 個のウィジェットを表示できる場合、1 回のリクエストで 10 個のウィジェットがロードされます。モニターが小さい場合や、ブラウザーウィンドウを縮小して一度に 4 つしか表示できない場合は、1 回のリクエストで 4 つのみ読み込まれます。一度に 10 個のウィジェットを表示でき、プロパティの値を 4 に設定した場合、4 個のウィジェット + 4 + 2 個の 3 つの要求を使用して、10 個のウィジェットすべてがロードされます。ページをスクロールすると、追加のウィジェットが同じ方法で読み込まれます。ページの一番下まで非常に速くスクロールすると、すべてのウィジェットがロードされます。 この値を大きな数値に設定すると、ロードの遅いウィジェットが 1 つあるだけで多数のウィジェットのロードがブロックされます。サーバーに送信される要求が少なくなるため、ダッシュボードに表示されるウィジェットのロードが少し速くなります。 ベストプラクティス 最も頻繁に使用するダッシュボードがロードされた際に表示されるウィジェット数の半分に、このプロパティの値を設定します。たとえば、ダッシュボードに 6 つのウィジェットが表示されている場合は、このプロパティの値を 3 に設定します。 これらのプロパティーに使用する値は、インスタンスのパフォーマンスおよびそのダッシュボードのコンテンツによって異なります。 ダッシュボードの全体的なパフォーマンスは、すべてのウィジェットのパフォーマンスの合計によって決まります。各ウィジェットが行うデータ要求のパフォーマンスを最適化することは、ダッシュボードのパフォーマンス向上に大いに役立ちます。 Release<!-- /*NS Branding Styles*/ --> .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: #000000; } span { font-size: 12pt; font-family: Lato; color: #000000; } h2 { font-size: 24pt; font-family: Lato; color: black; } h3 { font-size: 18pt; font-family: Lato; color: black; } h4 { font-size: 14pt; font-family: Lato; color: black; } a { font-size: 12pt; font-family: Lato; color: #00718F; } a:hover { font-size: 12pt; color: #024F69; } a:target { font-size: 12pt; color: #032D42; } a:visited { font-size: 12pt; color: #7057C7; } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: block; max-width: ; width: auto; height: auto; } } Resolution<!-- /*NS Branding Styles*/ --> .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: #000000; } span { font-size: 12pt; font-family: Lato; color: #000000; } h2 { font-size: 24pt; font-family: Lato; color: black; } h3 { font-size: 18pt; font-family: Lato; color: black; } h4 { font-size: 14pt; font-family: Lato; color: black; } a { font-size: 12pt; font-family: Lato; color: #00718F; } a:hover { font-size: 12pt; color: #024F69; } a:target { font-size: 12pt; color: #032D42; } a:visited { font-size: 12pt; color: #7057C7; } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: block; max-width: ; width: auto; height: auto; } }