Improve Squarespace speed by modifying ImageLoader
When it comes to delivering the right image variant to your website visitors, the srcset attribute is an advanced technique that allows for responsive image delivery. This post will introduce a method to intercept Squarespace ImageLoader to limit the largest image variant displayed on the main page, excluding those in backgrounds, banners, lightboxes, and fullscreen slideshow sections. This trick allows you to upload the best possible image without bothering to resize it to suggested dimensions.
The post will explain the mechanism, and you can find the code at the bottom of the article.
Understanding srcset Attribute
From my observation, the srcset attribute takes higher priority over data-src by Squarespace ImageLoader, enabling browsers to choose the most appropriate image variant based on the screen size and resolution.
Why Manipulate the srcset?
Manipulating the srcset in Squarespace serves to strike a balance between image quality and performance. By default, Squarespace supports image variants up to 2500px wide, ensuring high-quality visuals but potentially slowing down load times and consuming more bandwidth. Limiting the maximum variant to 1500w is advantageous, especially if your page width is set to 1500px or smaller. This approach optimizes load times by reducing image file sizes while still maintaining sufficient quality for most display purposes, ensuring a smoother user experience and improved site performance overall.
By limitting the maximum variant to 1500w, you can:
Follow best practices to keep your image sizes small, saving time from manually resizing and reuploading old large images.
Upload the best image size to your website while optimizing delivered variants, ensuring high-resolution images are not wasted except where necessary (e.g., banners, background images, fullscreen slideshows, and lightboxes).
Deliver the best images for Squarespace lightbox zoom while providing a suitable variant for gallery images.
Approach
The script will run before the ImageLoad trigger, so it needs to be injected into the DOMContentLoaded event to regenerate the srcset attribute.
Handling Images
Regardless of whether the image has the srcset attribute or not, the script will regenerate the srcset attribute to limit the maximum variant available for body images at 1500w. By default, the largest image variant is 2500w.
For Lightbox Studio users, rest assure that your lightbox images will be display using the 2500w variant, ensure the best zoom quality possible.
Testing
Use the Chrome network tab to check the total size of delivered images on the site. An aggressive test limiting image variants to 100w can show the impact on performance, but in production, a limit of 1500w or 1000w is ideal for balancing quality and performance.
| Default ImageLoader | Intercepted ImageLoader | |
|---|---|---|
| Image Requests | 25 | 25 |
| Resources Loaded | 8.5 MB | 2.0 MB |
| DOMContentLoaded | 2.54s | 1.82s |
The code
To let the solution to work, follow these steps
Copy the code snippet below
Paste them in your Footer code injection
Save the change
<!-- sqs:image-loader-helper -->
<script>
document.addEventListener('DOMContentLoaded', function () {
const LIMIT_VARIANT_SIZE = 1500;
// Save a list of images container to be excluded
const EXCLUDED_IMAGES = [
".section-background",
".gallery-fullscreen-slideshow-item",
".gallery-lightbox-outer-wrapper",
".yui3-lightbox2 .sqs-lightbox-slideshow"
];
const validImageSelector = EXCLUDED_IMAGES.map(selector => `${selector} img`).join(', ');
const validImages = document.querySelectorAll(`img[data-src]:not(${validImageSelector})`);
// const firstSrc = document.querySelector('img[srcset]').getAttribute('srcset');
Array.from(validImages).forEach((image) => {
const src = image.dataset.src;
const sizes = [100, 300, 500, 750, 1000, 1500, 2500];
let overridenSrcSet = sizes.map(size => {
// Limit the size to 1500, skip the 2500 variant
const actualSize = size === 2500 ? LIMIT_VARIANT_SIZE : size;
return `${src}?format=${actualSize}w ${size}w`;
}).join(', ');
// Skip override if image already load
if (image.complete) {
return;
}
image.setAttribute('srcset', overridenSrcSet);
});
});
</script>
<!-- /sqs:image-loader-helper -->Room for Improvements
Smaller Variants for Galleries: Adjust the code to load smaller variants (such as 1000w or 750w) for gallery images displayed in multiple columns. This can be achieved by detecting the gallery layout and setting an appropriate maximum size.
Adaptive Loading Based on Viewport: Modify the script to adjust the image size limit based on the viewport size. This ensures that larger images are only loaded when necessary, optimizing performance for smaller devices.
Conclusion
By intercepting the Squarespace ImageLoader and limiting the maximum image variant to 1500w, you can significantly enhance your website's performance without compromising on visual quality. This approach balances the need for high-resolution images with the importance of fast load times, particularly for non-fullscreen images.
Implementing this technique helps avoid the tedious process of manually resizing and reuploading old images, making it a practical solution for managing a large image library. For optimal results, consider this method for all images except those in banners, backgrounds, lightboxes, and fullscreen slideshows.
