17 Oracle JETアプリケーションのパフォーマンスの最適化
パフォーマンスおよびOracle JETアプリケーションについて
一般的に、Oracle JETアプリケーションは、クライアント側のHTML5アプリケーションのパフォーマンスを最適化するのと同じ方法で最適化できます。
パフォーマンスの最適化に関するヒントを提供するオンライン・リソースは多数あります。たとえば、Google Developers Webサイトでは、アプリケーションのパフォーマンスを向上するツールについて説明されています。
Googleツールに基づいて作成されたほとんどの推奨事項を実施するかどうかはユーザーが決めることができます。ただし、Oracle JETには、ペイロード・サイズ、およびOracle JETアプリケーションのCSSを取得するためのデータ転送数を減らす機能が含まれています。通常は、できるだけ次のガイドラインに従ってください。
- サーバーからのリクエスト数を減らすために、常にアプリケーション・リソースを縮小してバンドルします。
- ネットワーク使用量を最小限に抑えるため、Oracle CDNからリソースをロードするようにアプリケーションを構成します。
- CDN上のOracle JETライブラリを使用するようにアプリケーションを構成します。こうすると、
bundles-config.jsスクリプトが、縮小されたバンドルとモジュールをデフォルトでロードします。 - gzipでアプリケーションを圧縮してサイズを減らします(また、Webサーバーで圧縮を有効にします)。
- WebサーバーでHTTPキャッシュを有効にします。一部のリクエストの処理がサーバーからではなくキャッシュからできるようになります。常にサーバーから処理する必要があるファイルにはETagを使用します。
- HTTP/2を利用して、HTTP/1.1を使用する場合よりも速くページ・リソースを処理します。
- シングル・ページ・アプリケーションを使用して、アプリケーション全体の分解と再構築をブラウザが強制されないようにします。
- 単一ページに配置するデータ中心コンポーネントの数が多くならないようにします。
- グラフィック・イメージの最適化: ベクトル形式を優先します。提供される最適な全体の圧縮率に基づいて、適切なイメージ形式を選択します。
これらの最適化のヒントやその他の情報の詳細は、「Oracle JETアプリケーションへのパフォーマンスの最適化の追加」を参照してください。
Oracle JETアプリケーションへのパフォーマンスの最適化の追加
Webアプリケーションのパフォーマンスを最適化するためのほとんどのヒントは、Oracle JETアプリケーションにも該当します。ただし、JavaScript、CSS、Oracle JETコンポーネント、RESTコールおよびイメージを最適化するために、Oracle JETアプリケーションに特に適用するステップがいくつかあります。
JavaScriptパフォーマンスのヒント
| パフォーマンスのヒント | 詳細 |
|---|---|
|
予期されるJavaScriptフォルダ構造を維持します |
Oracle JETツールによって生成されたフォルダ構成を使用し、アプリケーション・ルート・ディレクトリの |
|
アプリケーションで必要なJavaScriptコードのみを送信します。 |
Oracle JETには、RequireJSを使用してロードできるモジュールが含まれています。詳細は、「モジュラ開発に対するRequireJSの使用」を参照してください。1つの方法は、アプリケーションで使用するJavaScriptモジュールをプリロードすることです。次のサンプルは、アプリケーションの
main.js内でrequire関数を変更する方法を示しています。 |
|
縮小/難読化されたJavaScriptを送信します。 |
Oracle JETには、Oracle JETライブラリの縮小バージョンおよびサード・パーティ・ライブラリ(使用可能な場合)が用意されています。デフォルトでは、アプリケーションのリリース・バージョンをビルドするときに、 "jquery": {
"cdn": "3rdparty",
"cwd": "node_modules/jquery/dist",
"debug": {
"src": "jquery.js",
"path": "libs/jquery/jquery-#{version}.js",
"cdnPath": "jquery/jquery-3.x.x"
},
"release": {
"src": "jquery.min.js",
"path": "libs/jquery/jquery-#{version}.min.js",
"cdnPath": "jquery/jquery-3.x.x.min"
}
},Oracle JETアプリケーションでRequireJSブートストラップ・ファイルを使用する方法の詳細は、「Oracle JETアプリケーションでのRequireJSについて」を参照してください。 |
|
JavaScriptを取得するためのデータ転送数を最小化します。 |
Oracle JETではデータ転送数の最小化がサポートされていませんが、RequireJSにはモジュールの結合に使用できる最適化ツールがあります。詳細は、RequireJSオプティマイザのドキュメントを参照してください。別の方法として、TerserなどのJavaScriptコード・ミニファイアを使用し、JavaScriptソースをバンドルして最小化します。 |
|
最初のレンダリングで不要なJavaScriptには遅延ロードを使用します。 |
最初のレンダリングで不要なコンテンツを遅延ロードできます。たとえば、 |
|
ペイロードを圧縮またはzipします。 |
Oracle JETはサーバーに対する制御がないため、この推奨事項を実施するのはユーザー自身です。追加の詳細およびヒントについては、https://developers.google.com/speed/docs/best-practices/payload#GzipCompressionを参照してください。 |
|
キャッシュ・ヘッダーを設定します。 |
JETはサーバーに対する制御がないため、この推奨事項を実施するのはユーザー自身です。キャッシュ最適化の詳細は、https://developers.google.com/speed/docs/best-practices/cachingを参照してください。 |
CSSパフォーマンスのヒント
| パフォーマンスのヒント | 詳細 |
|---|---|
|
予期されるCSSフォルダ構造を維持します |
Oracle JETツールによって生成されたフォルダ構成を使用し、アプリケーション・ルート・ディレクトリの |
|
必要なすべてのCSSのページを1回レンダリングします |
HTMLページのHEADセクション内のスタイル・シートにリンクします。すでにロードされたページの再レンダリングを回避するため、ページ本文のCSSリンクは使用しません。 |
|
アプリケーションで必要なCSSのみを送信します。 |
アプリケーションに送信されるCSSコンテンツを制御するには、カスタム・テーマを作成し、アプリケーションに必要なCSSに含める内容を制限します。「カスタム・テーマでのCSSの最適化」を参照してください。 また、Oracle JETグリッド・システムを使用している場合は、CSSに含めるレスポンシブ・クラスも制御できます。詳細は、「CSSのサイズおよび生成の制御」を参照してください。 |
|
縮小/難読化されたCSSを送信します。 |
Oracle JETでは、デフォルトで、縮小されたCSSが含まれています。ただし、アプリケーションで必要なCSSのみを送信するようにCSSを変更する場合は、Sassを使用して出力を最小化できます。詳細は、http://sass-lang.com/documentation/file.SASS_REFERENCE.html#output_styleで |
Oracle JETアプリケーションおよびコンポーネントのパフォーマンスのヒント
| パフォーマンスのヒント | 詳細 |
|---|---|
| Oracle CDNとOracle CDNがJETに提供しているバンドル構成サポートを使用してバンドルされたJETモジュールとライブラリをロードするように、アプリケーションを構成します。 | Oracleコンテンツ配信ネットワーク(CDN)とバンドル構成サポートを利用することにより、エンタープライズ・アプリケーションのアプリケーション起動パフォーマンスが最適化され、また、特定のOracle JETリリースに必要なモジュールとライブラリのバージョンを使用してアプリケーションがビルドされます。アプリケーション内でバンドルを直接参照することは、バンドルの構成を直接参照するリンクを追加したり変更することも含め、推奨されません。詳細は、「Oracle CDN最適化のためのアプリケーションの構成について」を参照してください。 |
| プレーンHTMLコンポーネントを使用する可能性を検討します。 | スタンプ・コンポーネント(表またはListViewなど)または宣言的なコンポーネント(コンポジット・コンポーネントなど)に対し、読取り専用入力コンポーネントやボタンなどの単純なOracle JETコンポーネントを組み込む場合は、かわりにプレーンHTMLコンポーネントを使用することを検討してください。プレーンHTMLコンポーネントは軽量化(DOMをより少なくすること)が可能で、コンポーネントがスタンプされる場合は追加することができます。ただし、プレーンHTMLでは、コンバータやバリデータなど、Oracle JETコンポーネントが提供する、組込みアクセシビリティ・サポートは使用できません。 |
|
Oracle JETコンポーネントのベスト・プラクティスに準拠します。 |
Oracle JETコンポーネントについては、APIドキュメントを参照してください。『Oracle® JavaScript Extension Toolkit (Oracle JET) APIリファレンス』には、コンポーネントのパフォーマンスに関する項があります(該当する場合)。例については、 ojDataGridのパフォーマンスに関する項を参照してください。 |
|
ページごとのOracle JETコンポーネントの数を制限します。 |
ページのコンポーネント数がページのロード時間に影響します。ロード時間を短縮するには、ページに配置するデータ中心コンポーネントの数を減らします。 |
|
|
表示する非表示のコンテンツがコンポーネントに含まれている場合、 |
|
コレクション・コンポーネントのフェッチ・サイズを制限します |
コレクション・コンポーネントの |
RESTリクエストのパフォーマンスのヒント
| パフォーマンスのヒント | 詳細 |
|---|---|
|
クライアントとサーバー間のデータ転送数を減らします。 |
データ転送数を減らすために使用できる技術は多数あり、ここではいくつかの例を示します。
|
イメージの最適化
| パフォーマンスのヒント | 詳細 |
|---|---|
|
予期されるimagesフォルダ構造を維持します |
Oracle JETツールによって生成されたフォルダ構成を使用し、アプリケーション・ルートの |
|
イメージ・サイズを縮小します。 |
イメージのサイズを縮小すると、ダウンロードが高速になり、画面にコンテンツをレンダリングする所要時間が短縮されます。たとえば、Scalable Vector Graphics (SVG)イメージは、通常、Portable Network Graphics (PNG)イメージより小さく、高解像度デバイス上でスケール変更されます。 イメージのサイズを縮小するのに使用できるサード・パーティのツールも多数あります。選択するツールは、次のようにイメージ・タイプによって決まります。 |
|
クライアントとサーバー間のデータ転送数を減らします。 |
データ転送数を減らすために使用できる技術は多数あり、ここではいくつかの例を示します。
|
パフォーマンスのその他のヒントは、パフォーマンスを監査する方法など、Webページの品質向上に関するGoogle開発者用のドキュメントを参照してください。
Oracle CDN最適化のためのアプリケーションの構成について
Oracleコンテンツ配信ネットワーク(CDN)およびCDNでサポートされるOracle JETディストリビューションを使用することにより、アプリケーションの起動時のネットワーク負荷を最小限に抑えるようにOracle JETアプリケーションを構成できます。
アプリケーション作成時のデフォルト構成では、Oracle JETの必須ライブラリとモジュールはローカルにロードされますが、その場合、Oracle CDNは使用されず、ブラウザで実行されているアプリケーションごとにライブラリとモジュールをスタンドアロン形式でロードする必要があるため、本番アプリケーションでは推奨されません。このデフォルト構成を使用できるのは、アプリケーションをローカルでビルドおよび提供する場合であり、テスト環境でアプリケーションをステージングしてネットワーク・アクセスをシミュレートする必要が生じるまでの間です。
Oracle CDN最適化を有効にするには、アプリケーションのpath_mapping.jsonファイルを構成します。パス・マッピング・ファイルの選択内容によって、アプリケーション全体のライブラリ設定とモジュール設定が決まります。このファイルを使用すれば、他のアプリケーション・ファイルで必須ライブラリとモジュールのパスURLを編集する必要はありません。CDN最適化のパス・マッピングを構成すると、ツールでmain.jsファイルのrequireブロックを更新する方法と、アプリケーションでモジュールとライブラリをロードする方法が次のように決定されます:
-
バンドル構成にアクセスせずにCDNを使用するようパス・マッピングを構成し、モジュールとライブラリがCDNから個別にロードされるようにすると、ツールによってパス・マッピング・ファイルから
main.jsのrequirejsブロックにURLが挿入されます。 -
CDNのバンドル・ロード処理を使用するようにパス・マッピングを構成すると、ツールによって
index.htmlファイルが更新され、次のスクリプト参照からバンドル構成スクリプト・ファイル(bundles-config.js)が実行されます。<body> <script type="text/javascript" src="https://static.oracle.com/cdn/jet/16.0.0/default/js/bundles-config.js"></script> .. </body>ノート: JETリリース9.0.0以降、先行文字"
v"を使用してリリース番号を識別する規則が変更されました。前述の例に示すように、リリース識別子は、16.0.0と指定されたsemver値(先行文字なし)になりました。
バンドル構成ファイルでは、CDNからバンドルされたモジュールとライブラリのセットとして読み込むためにアプリケーションが実行する独自のrequireブロックを指定します。このようにアプリケーションを構成すると、サード・パーティのライブラリで構成されたURLリストのみが表示されるようにmain.jsが更新されます。バンドル構成シナリオでは、main.jsに挿入されたrequireブロックは、リストに追加する必要のあるアプリケーション固有のライブラリに対応したプレースホルダになります。バンドル構成ファイルのrequireブロックとアプリケーションのmain.jsの間でURLの重複が生じる場合は、バンドル構成が優先され、CDNからのバンドル・ロード処理が優先的に実行されます。
ヒント:
Oracleでは各リリースの構成が保持されるため、Oracle CDNのバンドル構成スクリプト・ファイルを参照するようにアプリケーションを構成することをお薦めします。アプリケーションに現在のバンドル構成を参照させることにより、サポートされるライブラリとモジュールの最新バージョンを使用してアプリケーションを実行できます。
ライブラリおよびモジュールのバンドル・ロード処理の構成
Oracle CDN最適化では、CDNからバンドルされたライブラリおよびモジュールのセットをロードするバンドル構成スクリプトを使用できます。
バンドル構成スクリプトを使用してライブラリとモジュールのバンドル・ロード処理を構成するには、次のステップを実行します。
ライブラリおよびモジュールの個別ロード処理の構成
バンドル構成スクリプトにアクセスせずにCDNを使用するようパス・マッピングを構成すると、モジュールおよびライブラリがCDNから個別にロードされます。
main.jsのrequireブロックに基づいてライブラリとモジュールを個別にロードする処理を構成するには、次のステップを実行します。
main.jsは編集せず、かわりにpath_mapping.jsonファイルを編集して、バンドル・ロード処理の場合には、アプリケーションのindex.htmlファイルでbundles-config.jsのURLも編集します。変更を適用するには、アプリケーションを再ビルドする必要があります。path_mapping.jsonファイルおよびツールで実行される構成変更の詳細は、「パス・マッピング・スクリプト・ファイルと構成オプションの理解」を参照してください。
パス・マッピング・スクリプト・ファイルと構成オプションの理解
アプリケーションのビルド時、ツールによってpath_mapping.json構成ファイルが呼び出され、use要素に構成された設定に基づいて、Oracle JETモジュールとライブラリのURLパスが決定されます。
パス・マッピングのuse要素は、デフォルトでlocalに設定され、次の必須ライブラリの場所を指定します。
-
Oracle JETコア・ライブラリ(
ojs、ojL10n、ojtranslationsとして表示) -
サード・パーティの依存性ライブラリ(たとえば、knockout、jquery、hammerjsなど)
アプリケーションのビルド時、Oracle JETはデフォルトでアプリケーションのmain.jsのrequireブロックに指定されているローカル・アプリケーションからライブラリをロードします。各ライブラリURLは、パス・マッピング・ファイルで指定されたbaseUrl要素およびlib要素のpath属性から作成されます。
たとえば、knockoutライブラリのパス・マッピング定義の詳細は、次のようになります。
"baseUrl": "js"
"use": "local"
"libs": {
...
"path": "libs/knockout/knockout-3.x.x.debug"
}
また、ビルドまたは提供後、main.jsのrequireブロックには、次のURIが挿入されます。
/js/libs/knockout/knockout-3.x.x.debug
Oracleコンテンツ配信ネットワーク(CDN)に対応した構成の場合、main.jsのrequireブロックは、アプリケーションにローカルなパス・マッピング・ファイルに基づいてすべて決定されるか、バンドル・ロード処理の最適化の場合は、一部はパス・マッピング・ファイルから、一部はOracle CDNで保持されているbundles-config.jsファイルのrequireブロックから決定されます。main.jsのパス・インジェクタ・マーカーは、リリース固有のURLが表示される位置を示します。
CDNのシナリオ1: ライブラリとモジュールをバンドルとしてCDNからロードする場合、デフォルトではサード・パーティ・ライブラリのパス・マッピングのみがmain.jsのrequireブロックのURLライブラリ・リストに表示されます。
たとえば、knockoutライブラリのパス・マッピング定義の詳細は、次のようになります。config属性で、バンドル構成スクリプト・ファイルの名前はbundles-config.jsと指定されています。
"baseUrl": "js" <==ignored
"use": "cdn"
"cdns": {
"jet": {
"prefix": "https://static.oracle.com/cdn/jet/16.0.0/default/js",
"css": "https://static.oracle.com/cdn/jet/16.0.0/default/css",
"config": "bundles-config.js"
},
"3rdparty": "https://static.oracle.com/cdn/jet/16.0.0/3rdparty"
},
"libs": {
...
"cdnPath": "knockout/knockout-3.x.x"
}ビルドまたは提供後、main.jsのrequireブロックにはサード・パーティ・ライブラリのURLのリストがプレースホルダとして挿入され、次のコード・スニペットが示すように、index.htmlファイルはライブラリとモジュールをバンドルとしてCDNからロードするスクリプトを参照します。
<body>
<script type="text/javascript" src="https://static.oracle.com/cdn/jet/16.0.0/default/js/bundles-config.js"></script>
..
</body>bundles-config.jsファイルのrequireブロックに指定されているライブラリとモジュールは、main.jsのrequireブロックに重複したライブラリがある場合、その重複ライブラリに優先してロードされることに注意してください。ただし、必要に応じて、サード・パーティ・ライブラリのURLがmain.jsのrequireブロックに表示されないように、そのパス・マッピングを構成できます。これを行うには、各サード・パーティ・ライブラリのパス定義で、path_mapping.jsonファイルの"cdn": "3rdparty"を"cdn": "jet"を表示するように設定します。
CDNのシナリオ2: パス・マッピングURLを使用して場所を指定し、CDNからライブラリを個別にロードする場合、ライブラリURLのリストはすべてmain.jsのrequireブロックに表示されます。
たとえば、cdns要素を編集してバンドル構成スクリプト参照を削除すると、knockoutライブラリのパス・マッピング定義の詳細は、次のようになります。
"baseUrl": "js" <==ignored
"use": "cdn"
"cdns": {
"jet": "https://static.oracle.com/cdn/jet/16.0.0/default/js",
"css": "https://static.oracle.com/cdn/jet/16.0.0/default/css",
"3rdparty": "https://static.oracle.com/cdn/jet/16.0.0/3rdparty"
}
"libs": {
...
"cdnPath": "knockout/knockout-3.x.x"
}
ビルドまたは提供後、main.jsのrequireブロックには、次のURLが(その他すべてのベース・ライブラリとモジュールのURLとともに)挿入されます。
"knockout":"https://static.oracle.com/cdn/jet/16.0.0/3rdparty/knockout/knockout-3.x.x"
CDNのシナリオ3: アプリケーションでOracle以外のCDNにあるライブラリにアクセスする必要がある場合は、path-mapping.jsファイルを更新して、独自のCDNエンドポイントおよびライブラリ定義を指定します。
バンドル構成スクリプトを使用するかどうかによって、次のように、CDN名とエンドポイントURIをcdns定義に追加します。
バンドル構成スクリプトを使用してライブラリとモジュールをロードする場合:
"cdns": {
"jet": {
"prefix": "https://static.oracle.com/cdn/jet/16.0.0/default/js",
"css": "https://static.oracle.com/cdn/jet/16.0.0/default/css",
"config": "bundles-config.js"
},
"3rdparty": "https://static.oracle.com/cdn/jet/16.0.0/3rdparty"
"yourCDN": "endPoint to your own CDN"
},
...
または、(バンドル構成スクリプトを使用せずに)ライブラリとモジュールを個別にロードする場合:
"cdns": {
"jet": "https://static.oracle.com/cdn/jet/16.0.0/default/js",
"css": "https://static.oracle.com/cdn/jet/16.0.0/default/css",
"3rdparty": "https://static.oracle.com/cdn/jet/16.0.0/3rdparty",
"yourCDN": "endPoint to your own CDN"
},
...
その後で、ライブラリのリストにライブラリ・エントリを次のサンプルのように定義します。
"yourLib": {
"cdn": "yourCDN",
"cwd": "node_modules/yourLib",
"debug": {
"src": "yourLib.js",
"path": "libs/yourLib/yourLib.js",
"cdnPath": "yourLib/yourLib.js"
},
"release": {
"src": "yourLib.min.js",
"path": "libs/yourLib/yourLib.min.js",
"cdnPath": "yourLib/yourLib.min.js"
}
},