Adaptive.js Performance Best Practices

Performance best practices specific to Adaptive.js

Adaptive.js sites generally require all the same planning for performance as any site, but here we list a few specific tips and tricks.

Load only the assets you need for mobile

Adaptive.js will automatically strip out all stylesheets from your site, but will include all scripts by default. You should filter out scripts that are not applicable in a mobile context. For instance, you would exclude a jQuery carousel plugin script used only on your desktop site. Images are not automatically removed by Adaptive.js, but it can be worthwhile to replace desktop images with mobile-specific images.

Your adaptation should load instantly

Think of your adaptation as the "back-end" of your site, and the UI as the "front-end". The adaptation should serve the base HTML of the site, with interaction progressively added to the UI. This means that you should try and ensure that the adaptation is processed fast and doesn't block rendering of the user interface.

An example of an anti-pattern in your adaptation would be a blocking AJAX request in your view. This will block rendering until the view fires off the AJAX request, receives a response and renders it to the screen. Instead, you could defer the AJAX request to the UI, showing a placeholder in its place at load.

Since your entire site bundle needs to be downloaded, processed and rendered before any content is displayed, it should be as lightweight as possible. Be careful about require-ing in tools, utilities, etc. into your adaptation files, since they will be included in the initial bundle that needs to be downloaded.

Edit in GitHub