1. Developing Applications with Oracle JET
  2. Optimizing Performance
  3. Adding Performance Optimization to an Oracle JET Application

Adding Performance Optimization to an Oracle JET Application

Most tips for optimizing performance of web and hybrid mobile applications also apply to Oracle JET applications. However, there are some steps you can take that apply specifically to Oracle JET applications to optimize JavaScript, CSS, Oracle JET components, REST calls, and images.

JavaScript Performance Tips

Performance Tip Details

Send only the JavaScript code that your application needs.

Oracle JET 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.4.2',
    'jquery': 'libs/jquery/jquery-3.3.1.min',
    'jqueryui-amd': 'libs/jquery/jqueryui-amd-1.12.1.min',
    'promise': 'libs/es6-promise/es6-promise.min',
    'hammerjs': 'libs/hammer/promise-2.0.8.min',
    'ojdnd': 'libs/dnd-polyfill/dnd-polyfill-1.0.0.min'
    'ojs': 'libs/oj/v5.2.0/min',
    'ojL10n': 'libs/oj/v5.2.0/ojL10n',
    'ojtranslations': 'libs/oj/v5.2.0/resources',
    'signals': 'libs/js-signals/signals.min',
    'text': 'libs/require/text',
    'css': 'libs/require-css/css.min',
    'customElements': 'libs/webcomponents/custom-elements.min',
    'proj4': 'libs/proj4js/dist/proj4'   
  },

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

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 lazy load content that is not needed on first render. For example, you can configure the oj-film-strip component to retrieve child node data only when requested. For an example, see the Lazy Loading (oj-film-strip) 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 Performance Tips

Performance Tip Details

Send only the CSS that your application needs.

You can control the CSS content that goes into your application. For additional information, see Using Variables to Control 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.

Oracle JET Application and Component Performance Tips

Performance Tip Details
Configure your application to load bundled JET modules and libraries using Oracle CDN and the bundle configuration support it provides for JET. Leveraging the Oracle Content Delivery Network (CDN) and bundle configuration support optimizes the application startup performance of enterprise applications and also ensures that your application builds with the module and library versions required for a particular Oracle JET release. Referring directly to the bundles within the application is not recommended and that includes adding or modifying links that make direct reference to the configuration of the bundles. For additional information, see Configuring the Application for Oracle CDN 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. For example, see the ojDataGrid—Performance section.

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, oj-input-date, oj-buttonset-*, oj-radioset, oj-checkboxset, oj-paging-control, and oj-accordion

  • 5 components per page: oj-tab-bar, and oj-toolbar

  • 2 components per page: oj-*-chart with fewer than 100 data points, oj-table, and oj-tree*

  • 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 Performance Tips

Performance Tip Details

Limit number of REST requests.

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

Image Optimization

Performance Tip Details

Reduce image size.

Reducing the size of the images will result in faster downloads and reduce the time it takes to render the content on the screen. For example, Scalable Vector Graphics (SVG) images are usually smaller than Portable Network Graphics (PNG) images and scale on high resolution devices.

There are also a number of third-party tools that you can use to reduce the size of your images. The tool that you select will depend on the image type, for example:

  • pngcrush: Utility to compress PNG images

  • svgomg: Utility to compress SVG images. You can use this tool online or download svgo to work with the images on your own system.

Reduce the number of round trips between client and server.

There are a number of techniques that you can use to reduce the number of round trips, and here are some examples:

  • Icon fonts

    Icon fonts are useful when your icon uses a single color.

    Oracle JET uses icon fonts, and you can see examples of them at: Icon Fonts.

    You can find utilities on the Internet such as IcoMoon that you can use to generate icon fonts.

  • Image Sprites

    An image sprite is a collection of images combined into a single image, reducing the number of server requests. You can find examples of them at http://www.w3schools.com/css/css_image_sprites.asp.

  • Lazy loading

    You can use lazy loading to defer the loading of images not in the user’s viewport. You can find many examples and utilities on the Internet that use this technique.

  • Base64 Encoding

    You can use Base64 Encoding to inline image data. They are commonly used in data Uniform Resource Indicators (URIs), and you can find additional information about them at https://developer.mozilla.org/docs/Web/HTTP/data_URIs.

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