This recipe discusses optimizing Galleria by using various methods that help to improve the performance of Galleria.
Since this recipe is just discussing various techniques to improve the performance of Galleria, we'll not use a specific example to walk through. The following techniques can be applied to any of the galleries created throughout the book.
For images deployed to a website, always use sizes complementary to the size of the gallery. If the image is drastically larger than the gallery, a visitor to the site will be downloading larger images than what is necessary and this can slow down the performance.
Always provide thumbnails for galleries as we've done so far in this book. Thumbnails are much smaller versions of the original images that are shown in the carousel. Galleria will only preload (a parameter that can be customized) a couple of non-thumbnail images ahead of time; however, if no thumbnail is provided, all of the larger images will be loaded since the thumbnails will always be shown.
The ideal thumbnail size will depend on the size utilized in the theme.
Always use minified versions of JavaScript and CSS resources on live sites so visitors are only required to download the smaller version of the files. A minified version of a resource is one where the contents of the file are optimized for small file sizes. Galleria ships with minified versions of all its resources—these are resources with filenames that end with .min.js or .min.css.
In addition, merge multiple JavaScript and CSS resources into single files. The advantage of this is that a site visitor has fewer requests to make for resources before it can finish rendering a page.
Some CMS platforms, such as Plone, will provide this merging and minification automatically. So if you are developing in those platforms, make sure CSS and dependent JavaScript resources are merged along with the rest of the site's resources.
For dynamically loading Galleria images, it is not advised to create large galleries (those over 30 images). Especially for non-modern browsers, this can affect performance. In the following recipe, we'll discuss how to dynamically load more images as the gallery is being browsed.
Modern web servers provide features that help improve website performance. For example, make sure to enable compression on assets being delivered by your web application. Most web servers, for example Nginx and Apache, support gzip compression by default. In addition, make sure to configure your web server to set appropriate cache headers.
There are free online tools for minifying resources to use if minification is not provided on the utilized platform. For CSS, tools are available at http://www.minifycss.com/. For JavaScript, tools are available at http://www.minifyjavascript.com/.