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

In order for the end user to access scanning functionality, the Scandit plugins need 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
• Preload and precompile the library
• Create the picker in advance
• Reuse the picker
• Distract and obfuscate 

Serve compressed files and cache them

Ensure the JavaScript assets and the `scandit-datacapture-sdk*.min.js` and `scandit-datacapture-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 (important for versions <5.0)

Load the library as soon as the page with scanning functionality is loaded. 

Create the scanner instance in advance (important for versions <5.0)

Create a hidden and paused scanner instance in the background with `setEnabled(false)` method and not switching camera to the `On` frame source state. 

Then simply run the below methods: 

await camera.switchToDesiredState(SDCCore.FrameSourceState.On);
await barcodeCapture.setEnabled(true);

when needed instead of creating the scanner on the fly. 

Reuse the scanner

Reuse the created scanner instance 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.

WebSDK 5.X(Legacy)

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
• Preload and precompile the library
• Create the picker in advance
• Reuse the picker
• Distract and obfuscate 

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 (important for versions <5.0)

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 (important for versions <5.0)

Create a hidden and paused (for this set to `true` the `scanningPaused` parameter of the create() method, and to `false` the `accessCamera` parameter) `BarcodePicker` in the background and simply accessCamera() and resumeScanning() and switch its visibility to "show" when needed instead of creating it on the fly. You can also set the `accessCamera` parameter to true if you do not mind about accessing the camera early in the process.

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.