Less than 15 seconds. That’s the average time spent on a website. And that’s how long you have to capture someone’s attention on your website.
First impressions is everything and this week I landed on a slow E-comm website with blurry pixelated imagery. People want the best experience or they’ll move on, and that’s exactly what I did. The website had great products with a great company ethos, but the user experience irritating and after waiting patiently for pages to load I decided to close the site and look elsewhere.
The speed of the site could have been for a number of reasons, it could be a lot of dormant code, some features loading in the background before presenting the side, the size of the images…the list is endless.
Smaller is always better
I’m talking images, image file sizes and page speed across pages play a massive part into the user experience, having a faster website with faster load speeds helps towards better ranking, increased traffic and hopefully more revenue.
A lot of content management systems (CMS) have compression tools built in. Having these tools within the website can be hugely helpful, automatically compressing, reducing the file size and quality of the image. Years ago I would have to do a bulk edit in Adobe Photoshop, creating an action and exporting out each image. Using Photoshop would take longer but could make sure the images looked good before export. The downside with the compression tools is that they normally churn out the images with no real preview. When using the tools within CMS make sure you have all the right settings set. Do a few tests to make sure that you have optimised the images, making them look their best and smallest size possible.
WebP images can be around 26% smaller in size compared to PNGs and 25-34% smaller than comparable JPEG images.
Most of you are probably familiar with JPEG, PNG and GIF, but there’s a file type that you might not be that familiar with, WebP. WebP is a modern image format that provides superior compression holding most of the image quality. WebP images can be around 26% smaller in size compared to PNGs and 25-34% smaller than comparable JPEG images. A lot of modern browsers should be compatible with WebP, but it’s worth doing your research in Analytics to make your audience’s most popular browser is compatible.
Brands are launching higher definition (4k- 8k) displays with providers increasing the speed of internet packages. Having these available in the market, but need to make sure we have both normal sized images and retina compressed images so people with a 8k monitor don’t get presented with pixelated imagery. If your site is pretty light with not much functionality (typically a brochure site) you can afford to have some larger higher quality images, but not all. Whereas if you have a large site with a lot of images and features / code running in the background, it would be better to have smaller WebP images which will hugely help towards the load speed. If you still have to compress your images manually have a look some of the image compression tools out there, it’s just a matter of figuring out which one is right for you.
Is your website performing as good as you’d wish? Does it load quickly, are the images fuzzy? If you were a customer would you be happy with the experience?