The most common culprits of poor performance in websites are images and videos, which often mean sending several megabytes of data across the wire for a single asset. When the network conditions are less than ideal, this can have a huge impact on load times and potentially make the website unusable.
To get around this, developers typically resort to lazy loading, a technique that involves sending a tiny image with the initial payload, usually a blank pixel, which is then replaced when the real image, fetched asynchronously, is ready to be used. This means that users won’t have to wait for a large asset to be dpwnloaded before they start seeing content on the screen, which is an improvement in perceived performance.
Using a placeholder
As an alternative to a blank pixel, we can use a placeholder generated from the original asset, as long as it’s still small enough to have a marginal impact on the size of the initial payload. This creates a more pleasant visual effect, as users start seeing something that resembles the image they’re expecting instead of just a blank slot.
For example, we can take the original image and drastically reduce its dimensions and compression quality, bringing down the file size immediately. To avoid getting a terribly pixelated image, we can add a blur effect to mask the imperfections.
Here’s how it looks like:
Original image (203 KB)
100px wide placeholder (1 KB)
Placeholder stretched to 650px
Using CDN recipes
We could use CDN to generate a placeholder from any image using a set of URL parameters.
A more convenient way is to use recipes (click here for a video where I talk about them). Just copy the following recipe file to your workspace directory.
And then you can generate a placeholder for any file by prepending its path with /placeholder , like https://cdn.somedomain.tech/placeholder/samples/leaf.jpg.
Depending on how large your image slots are, you might want to adapt the recipe settings to better fit your needs. In particular, you can experiment with the width, quality and blur settings.
In the following pens I’ve used this technique to lazy load large images using in conjunction with a small placeholder.
See the Pen DADI / CDN: Lazy loading a large image with a placeholder by Eduardo Bouças (@eduardoboucas) on CodePen.
See the Pen DADI / CDN: Lazy loading images with placeholders by Eduardo Bouças (@eduardoboucas) on CodePen.
Visit https://dadi.tech/cdn/ to learn more about DADI CDN.