• Registered: 2018-01-26
  • Posts: 5

Topic: Speeding up Juicebox load

Hi, I am trying to improve the performance of my website page that contains our Juicebox slideshow. The Chrome audit function tells me it is being held up by "blocking scripts" and points at juicebox.js as the culprit.   I tried putting "async" on the load of my juicebox.js script and the result was just that the slideshow would not display at all.  Are you aware of any way to work around the fairly long load time involved with starting up Juicebox?

Thanks,

Richard

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Speeding up Juicebox load

The Chrome Audit results are certainly useful pointers towards attaining an ideal performance score for a web page but the audit does not know the nature of the web page and that it is imperative for the 'juicebox.js' file to be loaded into the web page before the JavaScript embedding code is parsed. The 'juicebox.js' file cannot be deferred or loaded asynchronously, otherwise, as you have discovered, the gallery will not work.

There are several contributing factors which can affect the speed of a gallery:
(1) The speed of the web server hosting the site.
(2) The speed of your own internet connection.
(3) The file size of the gallery images.
(4) The value of the imagePreloading configuration option.

You have little or no control over #1 and #2 but you do have control over #3 and #4.

Make sure your image file sizes are not too large.
When creating a gallery with JuiceboxBuilder-Pro using the default settings (of 1024px x 768px at 80% quality), the resulting images will be approximately 120KB each.
This is usually a good compromise between file size and image quality for web gallery use.
If your gallery images are much larger than this, then try reducing their file sizes and they should certainly load much faster.
You might also like to create a Multi-Size Image gallery whereby you can provide Juicebox-Pro with three different sets of images (small, medium and large) for use in the gallery. Juicebox-Pro will use the most appropriate size depending on the device being used to view the gallery. Please see here for details.

Also, you could try changing the imagePreloading configuration option (in JuiceboxBuilder-Pro's 'Customize -> Main Image' section) from the default value of 'PAGE' to 'NEXT' so that when the gallery is initially loaded, only the next image in the gallery is downloaded and cached by the browser (rather than all the images in the current thumbnail page). This should minimize the load on the browser when the gallery is first displayed.
A short description of imagePreloading and its possible values can be found here.

I hope these notes help.