Adding Performance Optimization to an Oracle JET Application

The table below shows specific steps that you can take to optimize the performance of your Oracle JET application, with links to additional information as needed. The table also identifies steps that it is up to you as the application developer to implement.

Performance Tip Details

JavaScript Optimization

  

Send only the JavaScript code that your application needs.

The Oracle JET framework includes modules that you can load with RequireJS. For additional information, see Using RequireJS for Modular Development.

Send minified/obfuscated JavaScript.

Oracle JET provides minified versions of the Oracle JET library as well as third-party libraries when available. By default, these libraries are specified in the Oracle JET RequireJS bootstrap file included with all Oracle JET distributions.

requirejs.config({
  // Path mappings for the logical module names
  paths: {
    'knockout': 'libs/knockout/knockout-3.3.0',
    'jquery': 'libs/jquery/jquery-2.1.3.min',
    'jqueryui-amd': 'libs/jquery/jqueryui-amd-1.11.4.min',
    'ojs': 'libs/oj/v1.1.2/min',
    'ojL10n': 'libs/oj/v1.1.2/ojL10n',
    'ojtranslations': 'libs/oj/v1.1.2/resources',
    'signals': 'libs/js-signals/signals.min',
    'crossroads': 'libs/crossroads/crossroads.min',
    'history': 'libs/history/history.iegte8.min',
    'text': 'libs/require/text'
    'promise': 'libs/es6-promise/promise-1.0.0.min',
    'hammerjs': 'libs/hammer/promise-2.0.4.min'
  },

For additional information about using the RequireJS bootstrap file in your Oracle JET application, see Using RequireJS to Manage Library, Link, and Script References.

If your application isn't using RequireJS, you can specify the links to the minified libraries in your main application file. For additional information, see Specifying Library, Link, and Script References Without RequireJS.

Minimize the number of trips to retrieve the JavaScript.

Oracle JET doesn't provide support for minimizing the number of trips, but RequireJS has an optimization tool that you can use to combine modules. For additional detail, see r.js.

Use lazy loading for JavaScript not needed on first render.

You can use RequireJS to manage lazy loading. For additional information, see Using RequireJS for Lazy Loading Modules in an Oracle JET Application.

You can also lazy load content that is not needed on first render. For example, you can configure the ojTree component to retrieve child node data only when requested. For an example, see the Lazy Loading (ojTree) Oracle JET Cookbook example.

Compress or zip the payload.

Oracle JET has no control over the server, and this recommendation is up to you to implement. For some additional information and tips, see https://developers.google.com/speed/docs/best-practices/payload#GzipCompression.

Set cache headers.

JET has no control over the server, and this recommendation is up to you to implement. For additional information about cache optimization, see https://developers.google.com/speed/docs/best-practices/caching.

CSS Optimization

  

Send only the CSS that your application needs.

You can control the CSS content that goes into your application. For additional information, see Controlling CSS Content.

If you're using the Oracle JET grid system, you can also control which responsive classes get included in the CSS. For details, see Controlling the Size and Generation of the CSS.

Send minified/obfuscated CSS.

By default, Oracle JET includes minified CSS. However, if you want to modify the CSS to send only what your application needs, you can use Sass to minimize your output. For additional information, see the :compressed option at: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#output_style.

Minimize number of trips to retrieve the CSS.

You can create styles in partial files which you can then aggregate into a single file using the Sass @import directive. For an example, see Using Import Control to Define CSS Content. For additional information about the Sass @import directive, see http://sass-lang.com/documentation/file.SASS_REFERENCE.html#import.

Oracle JET Component Optimization

  

Use Oracle JET components only when needed.

Build your page in HTML, and add only the Oracle JET components you need. If your application only needs the component briefly, add it and then remove it as soon as your application no longer need it.

Follow Oracle JET component best practices.

Consult the API documentation for the Oracle JET component. The JavaScript API Reference for Oracle® JavaScript Extension Toolkit (JET) includes a performance section for a component when applicable.

Limit number of Oracle JET components to 50 per page.

For optimal performance, limit the number of Oracle JET components on your page to 50. In addition, some Oracle JET components impose additional limitations:

  • 10 components per page: oj*Gauge, ojInputDate, ojButtonset, ojRadioset, ojCheckboxset, ojPagingControl, and ojAccordion

  • 5 components per page: ojTab, and ojToolbar

  • 2 components per page: oj*Chart with fewer than 100 data points, ojTable, and ojTree

  • 1 component per page: oj*Chart with more than 100 data points and fewer than 1000. If your data contains more than 1000 data points, Oracle JET components may suffer a performance or usability hit.

REST Request Optimization

Limit the number of REST requests to 10 on a page and the number of dependent REST calls to at most 2.

For additional performance tips, see the Google Developers documentation at: https://developers.google.com/speed/docs/best-practices/rules_intro.