Performance is key for all sites. Not only does it improve SEO, but it increases sales and customer happiness. But companies must recognize the challenges that are involved. In this series, we’ll go through the main areas of site performance, how you can improve the performance of your site, and the trade-offs you’ll have to make when it comes to performance versus customer experience.
Images often make up the biggest portion of the transferred data size. If you deliver too many images or if they’re are too large, this degrades the performance, especially on slow connections and devices. And most importantly, optimized image delivery is a key metric in the Lighthouse score. But we’ve got a few tricks that you can implement to reduce the transfer size of images to the absolute minimum, and we’ll discuss all of them in this post.
How to prevent lazy loading
An important aspect when using lazy loading is that image elements should know their size to not cause layout shifts once the image is loaded. For this, we set dimensions for all images rendered through the standard components. This can be tricky in some circumstances, but our test suite is supposed to cover all these cases and also allows for optimal image sizes.
How to optimize image sizes
If you don’t specify the dimensions of an image we retrieve the dimensions of an image element from the DOM, but this only works in the client. Together with the dimensions of the image element or a specified crop-ratio, we then calculate the dimensions an image should be used in. On the server side, we guess the current device size and assume sensible default dimensions based on that.
Based on this, we can calculate the width and height of an image in most cases. For all images managed in the Frontastic media library, this is always possible since we have access to the image dimensions during the rendering process. This allows us to create image elements in the HTML with fully-specified size but also allows us to fetch the image in the minimal necessary size from the CDN. We also use an src-set to provide variants of the image for retina displays, but the browser will only load one of these images.
The only case where this doesn’t work is for remote images from outside of our CDN, where neither height nor crop-ratio is specified. Since there’s no quick way to determine the aspect ratio of a remote image, we then can’t set the height of an image. This means that these images might cause layout shifts when they’re loaded.
How to choose the optimal image format
On top of fetching images in the optimal size and only when the user actually sees an image, our CDN also delivers images in the optimal format for the current browser. For example, if a browser supports WebP, we deliver images in WebP. For older browsers, we still use PNG or JPEG.
How to handle resizing
Another interesting topic is how you can handle resizes of images. This is a feature mostly used by developers testing the responsive layout during development, but a page resize also happens when a user rotates their mobile phone or resizes their browser.
If you rotate your phone or tablet, you could go beyond certain breakpoints you’ve set. So you might render your frontend components differently or even render images with different aspect ratios.
Frontastic detects these resizes and our components check if those resizes cause a relevant dimension change and will only load new images in those cases. If the aspect ratio changes we always load a new image, but if the size of an image only increases a little we leave it to the browser to scale it up to reduce the bandwidth and increase the user-perceived performance.
How Frontastic helps with optimizing image delivery
Frontastic does everything out of the box to deliver your images in the most optimal way possible. You can extend the given functionality but usually, you can strike this off the list of things to think about when launching a new storefront.
Catherine’s the Technical Writer at Frontastic. She’s worked in many different positions at different levels but always with a customer focus and is always looking to create the best experience for users.
Stay In The Loop
Subscribe to our newsletter to keep up to date on all the latest Frontastic news.
Companies are breaking up their monolithic IT systems on a grand scale. Instead, they're starting to rely on an ecosystem of technologies based on microservices. They're thinking API first, using cloud-based Software-as-a-Services, and going headless. But what does it take to make your digital experience project successful?
https://www.frontastic.cloud/wp-content/uploads/2021/01/checklist.png10782048Helenhttps://www.frontastic.cloud/wp-content/uploads/svg/Frontastic-Logo-Gradient.svgHelen2021-03-03 07:28:192021-03-02 09:31:51Checklist: How to make your digital experience project successful
Performance is key for all sites. Not only does it improve SEO, but it increases sales and customer happiness. But companies must recognize the challenges that are involved. In this article, we'll go through how to optimize your data.
https://www.frontastic.cloud/wp-content/uploads/2021/02/data_optimization.png6301200Helenhttps://www.frontastic.cloud/wp-content/uploads/svg/Frontastic-Logo-Gradient.svgHelen2021-02-25 12:47:312021-02-25 14:18:09Performance optimization: How to optimize your data
Technology never stands still. In all industries, businesses have to adapt quickly if they want to stay ahead of the competition, and in 2021 that means putting the customer first by offering a flawless online experience. Our partner emporix shares interesting insights in this blog post.
https://www.frontastic.cloud/wp-content/uploads/2021/02/pillars.png6301200Helenhttps://www.frontastic.cloud/wp-content/uploads/svg/Frontastic-Logo-Gradient.svgHelen2021-02-24 09:44:092021-02-24 09:46:49The four pillars of eCommerce: Creating a flawless online experience