Follow

How can I optimize the loading time of the Web SDK?

In order for the end user to access scanning functionality, the Scandit library (~1MB) needs to be downloaded and initialized in the browser. The speed with which this can happen depends on both the internet connection and the processing power of the device.

By default, the library is cached in the browser (browser and server permitting) and does not need to be redownloaded. It is then compiled, cached and loaded into memory to be used. The library must be loaded from cache on each page where it is to be used.

We recommend the following approaches to minimize perceived waiting time for the user:

Serve compressed files and cache them

Ensure the JavaScript assets and the `scandit-engine-sdk.min.js` and `scandit-engine-sdk.wasm` files are served compressed and with caching enabled by your web server.  (You should serve the files yourself instead of using CDN)

Preload and precompile the library

Load the library as soon as the page with scanning functionality is loaded. See example_background.html sample included with the npm download.

Create the picker in advance

Create a hidden and paused `BarcodePicker` in the background and simply resume scanning and switch its visibility to "show" when needed instead of creating it on the fly.

Reuse the picker

Reuse `BarcodePicker` objects whenever possible by hiding/pausing and showing/resuming them instead of destroying and recreating them.

Distract and obfuscate

To avoid any perception of wait time, hide the UI for scanning until the scanner is ready. If the above are not viable options, animate the loading indicator in an entertaining manner.

 

NOTE 1: the load and compile time on Firefox is a fraction of the time in Chrome and Firefox due to streaming compile of the library.  We expect that other browsers will eventually implement similar improvements.

NOTE 2: the folks at Chrome are working on Streaming Compile that will make the load time on Android significantly faster, and potentially on par with Firefox.  You can already test the current feature by enabling chrome://flags/#enable-webassembly-baseline.

 

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request