Skip to main content
OutSystems

パフォーマンスのベストプラクティス - ユーザーインターフェイス

応答速度の遅い高速なアプリケーションというものはありません。利用を促進し、エンドユーザーを常に満足させるためには、アプリケーションはすばやく応答する必要があります。ユーザービリティに関する問題を切り捨てるわけにはいきませんが、データの表示方法を改善するためだけにパフォーマンスを犠牲にしないようにします。

画面アクションでPreparationデータを使用することは避ける

説明

画面アクションでPreparationデータを使用することは避けます。多くの場合、単純にデータを再取得するほうが適切です。

ソリューション

画面のPreparationで作成されたデータを画面アクションで使用することは避けます。たとえば、TableRecordsのレコードデータを使用する代わりに、行のIDのみを使用してデータベースからデータを再取得します。

重要事項

ページサイズが増えるとフォームの送信時間が長くなるため、ユーザビリティに影響を及ぼします。画面アクションで画面のPreparationデータを使用すると、ページのビューステートにそのデータが保存されます。ビューステートはページの一部であるため、リクエストされたページごとにクライアントに送信されます。ビューステートはポスト、ポストバック、Ajaxリクエストでもサーバーに送信されます。ページのサイズと読み込み時間が大幅に増えるため、画面アクションでPreparationデータを使用することは避けます。

Ajaxは慎重かつ控えめに使用する

説明

Ajaxはユーザービリティとユーザーエクスペリエンスを向上できる優れたツールですが、パフォーマンス上の問題を避けるため、慎重に使用する必要があります。

ソリューション

新しいページを設計するときにAjaxを乱用しないようにします。ユーザーインタラクションに関する改善点を明確にしてから、ローカライズされたAjaxパターンの追加を開始します。サーバーへのAjaxリクエストごとにページのビューステート全体が取得されるため、ビューステートに不要なものが含まれないようにする必要があります(Preparationのレコードやリストレコードを画面アクションで使用しないなど)。

重要事項

パフォーマンス上の問題の多くは、エンドユーザーに及ぼす影響が原因となって検出されます。他のベストプラクティスでは、サーバー側の処理時間や使用リソース(プロセッサ、データベースなど)の量を減らすことで、エンドユーザーが体感するパフォーマンスを改善します。一方、このベストプラクティスは、サーバーのパフォーマンスの低下と引き換えに、エンドユーザーが体感するパフォーマンスの改善を最大化しようとするものです。そのため、他のベストプラクティスを使用して最適化できることがなくなった場合、Ajaxを使用して処理時間をユーザーに意識させないようにすることができます。

注意事項

Ajaxは強力な武器であるため、細心の注意を払って使用する必要があります。使用する際は、使いすぎによるリスクが高く、逆効果になったり、パフォーマンスとユーザビリティが悪化することがあることに留意します。

大きい画面を分割する

説明

大きい画面を分割すると、ビューステートのサイズとPreparationのクエリの数が減ります。

ソリューション

大きい画面(サーバー側のタブを使用する画面など)を分割するとページの情報が減るため、ビューステートのサイズとページ自体のサイズが減ります。

重要事項

レコードやレコードリストを大量に使用すると、ページのビューステートが大幅に大きくなり、HTML描画ページサイズ、ページのネットワーク送信時間、画面の処理時間が増加します。これらがすべて重なると、ページの生成中やサーバー側での送信時にレコード/レコードリストがシリアル化および逆シリアル化されるため、画面が遅くなります。

注意事項

画面を分割する際は、顧客のニーズとアプリケーション全体のロジックを考慮する必要があります。ロジックを再利用する必要があり、画面を半分に分割するだけではうまくいかないことがあります。2つ以上に分割したり、不規則に分割したりすることが、最も効果的な方法となる場合があります。

キャッシュを活用する

説明

繰り返し使用しても結果が同じになる場合は、キャッシュされたWebScreen/WebBlockを使用し、画面/ブロックを何度も処理するコストを省きます。これは、検索データを取得するAjaxクエリで特に役立ちます。

ソリューション

Web画面を使用してオペレーションを実行する場合、画面のコンテンツ全体をキャッシュします。これはパラメータに基づいており、これらはできるだけ変化しないようにする必要があります。検索のように長期にわたるデータの取得に使用するAjaxクエリで特に役立ちます。

重要事項

リクエストの処理をキャッシュで行うとクライアントへの応答が高速になります。また、重要な点として、サーバーの消費リソースが少なくて済むため、リソースを他のリクエストへの応答に使用できます。

注意事項

キャッシュはもろ刃の剣です。特定のオペレーションのパフォーマンスを大幅に向上できますが、情報がキャッシュされることに常に留意する必要があります。その情報に対する変更が必要になった場合、利用できるまでに時間を要するか、あるいはキャッシュを無効する仕組みを導入します。また、キャッシュではロジックが実行されないため、キャッシュされた要素に対する更新は実行されません。

画面パラメータを最小限にする

説明

画面パラメータの数を減らしてそのサイズを最小限にすると、パフォーマンスとメモリが向上します。

ソリューション

画面パラメータを使用して大量の情報を渡すことは避けます。画面間ではエンティティ識別子とユーザー入力のみを渡すようにすると、パフォーマンスが向上します。

重要事項

画面入力パラメータを使用して大量のデータを渡すと、ページリクエストが増え、それに伴いページサイズも増えます。その結果、ユーザーエクスペリエンス全体が低下します。これは、ネットワークレイテンシに対応しているときやサーバー側のメモリ不足に悩まされているときに特に重要です。

注意事項

エンティティ識別子のみを渡す場合、必要なデータを取得するにはデータベースへのクエリを別に実行する必要があります。このため、ページサイズが大きくなることと、データベースへのクエリが増えることのメリットとデメリットを比較検討する必要があります。

JavaScriptをファイルに配置する

説明

画面の式内でJavaScriptを使用することは避けます。JavaScriptコードをファイル内に配置し、拡張機能またはeSpaceリソースを使用してファイルを含めるようにします。

ソリューション

画面の式内で大きなJavaScriptを使用することは避けます。常にファイル内に配置し、拡張機能またはeSpaceリソースを使用してファイルを含め、ファイルへのリンクスクリプトを配置します。

重要事項

画面の式にJavaScriptコードの大きな塊を配置すると画面サイズが大幅に増え、ページ読み込み時のユーザーエクスペリエンスが低下します。

注意事項

これは、eSpace間での再利用とJSロジックのカプセル化が可能になるため、よいアイデアです。JavaScriptフレームワークでは常に使用してください。ただし、カスタムJavaScriptでは、ローカルウィジェットIDを使用する必要がある場合に問題が発生することがあります。

JavaScriptの読み込みを遅らせる

説明 

読み込み時に不要なJavaScriptをページの一番下に移動し、ページの読み込みを高速化します。

ソリューション

読み込み時に不要なJavaScriptをページの一番下に移動し、ページの読み込みを高速化することを検討します。

重要事項

JavaScriptをページの最後に移動すると、ブラウザで必要な情報が先に表示され、JavaScriptが後で読み込まれるようになります。

注意事項

これは、特に読み込み時間を短くする必要があるトップページにおいて基本のルールです。メンテナンスが難しくなることもありますが、その価値は十分にあります。静的リソースマネージャーを使用してファイルの取り込みを処理できます。ファイルが読み込まれる前にそのファイルを必要とするJavaScriptが実行されないように注意する必要があります。

CSSスプライト画像

説明 

CSSスプライトを使用して画像を置き換え、サーバーリクエストの数を減らし、画面の読み込み時間を改善します。

ソリューション

同じ画面でよく使用される画像を1つの画像(CSSスプライト)にまとめ、CSSのbackground-imageプロパティとbackground-positionプロパティを使用して必要な画像セグメントを表示します。 

詳細については、この手法の詳細な説明をご覧ください。

重要事項

スプライトを使用すると画像取得のためのHTTPリクエストの数が大幅に減り、画面の読み込みを高速化できます。

注意事項

このベストプラクティスは、大量の画像を含み、トラフィックの多い公開されたアプリケーションでのみ実践してください。

CSSスプライトの作成とメンテナンスに必要な作業は少なくありません。また、CSSスプライトを使用すると、個別画像を使用するよりもエラーが発生しやすくなります。

JavaScriptのミニファイ化

説明

可能な限り、ミニファイ化されたJavaScriptを本番環境で使用するようにします。

ソリューション

すべての主要なJavaScriptライブラリでは、ミニファイ化されたバージョンが提供されています。カスタムJavaScriptの場合は、Dean Edward's Packerなどのミニファイ化ツールを使用してミニファイ化されたバージョンを入手できます。

重要事項

ミニファイ化では不要な文字を削除することでJavaScriptのサイズを減らします。また、圧縮時にもサイズに影響があります。

注意事項

ミニファイ化されたJavaScriptは非常に読みにくいため、本番環境でJavaScriptの問題を診断するのが特に難しくなります。また、開発バージョン(ミニファイ化なし)と本番バージョン(ミニファイ化あり)の管理に伴う手間が発生します。JQueryやPrototypeなどの安定したJavaScriptライブラリでは問題は発生しません。カスタムJavaScriptの場合、トラフィックの多い公開されたアプリケーションでのみこの手法によるメリットが得られます。