Cloudinary Blog

Optimizing web performance and your bottom line

Optimize your website and app for maximum user engagement

Time is money

Patience is not a virtue for website visitors and online shoppers. Every fraction of a second counts when it comes to keeping – or losing – a visitor to your website.  
 
Loading time is a major contributing factor to page abandonment, according to an infographic on the Kissmetrics blog using statistics from Akamai and Gomez. Because the average web visitor has no patience for a page that takes too long to load, abandonment increases as a percentage with every second of load time. Nearly 40 percent of users will abandon a page after 3 seconds, the blog noted. Mobile Internet users probably experience the most frustration with this issue –  73 percent noted that they’ve encountered a website that was too slow to load. 
 
The page load problem directly impacts the shopping behavior of website visitors. The Kissmetrics blog noted that 79 percent of shoppers who were dissatisfied with website performance are less likely to buy from the same site again. Nearly half of consumers expect page to load in 2 seconds or less, and a 1 second delay will decrease customer satisfaction by 16 percent. The consequences of these delays translate into real money. In a Fast Company article,  ecommerce giant Amazon revealed that a page load slowdown of only 1 second would cost it $1.6 billion in sales revenue. Similarly, Google noted that a slow-down of just four tenths of a second in its search results would result in a loss of 8 million searches per day, which translate into millions less in online advertising. 

page load speed

Getting to the Heart of the Problem

The biggest contributing factors impacting load time are images, videos and graphics on today’s websites. Today’s websites incorporate more visuals, and less text, to draw in visitors. According to HTTP Archive, nearly 64 percent of a website’s average weight is images, while video accounts for another 8 percent.
 
Since these types of media account for nearly three quarters of the website size, it’s important for you to more effectively managing images and videos on your site to improve performance and conversion rates. Let’s look at some steps you can take to reduce the impact of images and video on your website’s performance.
Image formats

Use More Efficient, Modern Image Formats

Google has added support for its WebP image format to Chrome browsers, and Microsoft has done the same for JPEG-XR in most of its Internet Explorer and Edge browsers. But many developers have still not embraced these changes, sticking with the same JPG and PNG formats, rather than taking advantage of how the modern formats can optimize their sites. Ideally, you should convert images to the WebP and JPEG-XR when appropriate, and adjust compression quality to balance between the formats. It’s important to also detect the specific browser that accesses each image and deliver a version of the image optimized to the respective browser. Doing so will enable you to ensure users receive the best images possible, in terms of visual quality and file size optimization, without slowing down your site.

Eliminate Wasteful Browser-side Resizing 

Developers often use browser-side image resizing as a shortcut, rather than resizing images on the server-side. While the end result looks exactly the same on modern browsers, the impact on bandwidth is quite different. With browser-side resizing, website visitors waste precious time downloading an unnecessarily large image and you waste bandwidth delivering it to them. For older browsers, the problem is even more pronounced as their resizing algorithms are usually sub-par. You need to make sure your images perfectly fit their required website dimensions. It’s well worth creating different thumbnails of the same image rather than delivering a large image and relying on the browser to resize it. There some tools available that can assist with this, such as an open source image resizer like ImageMagick or a cloud-based solution like Cloudinary.

Use Correct Image File Types 

JPEG, PNG and GIF are the most common file formats used on websites today, but each one has very different roles. Use the wrong format and you’re wasting your visitors’ time and your own money. A frequent mistake is using PNGs to deliver photographs. There is a common misconception that PNGs, as lossless formats, will yield the highest possible reproduction for the photos. While this is generally true, this is also quite an unnecessary optimization. It’s important to keep in mind what image format should be used for the content shown. PNG should be used for computer generated images (charts, logos, etc.) or when you need transparency in your image (image overlays); JPEG when you are showing a captured photograph; and GIF when animation is needed (Ajax loading animation, etc.). 

Don’t Use a Single Image Size Across All Delivery Mediums 

Your website is being viewed by many different devices, particularly as smartphones, tablets and smartwatches have become preferred by consumers. Often developers offer the same images across all device resolutions, using client-side resizing for the images. The images may look great, but visitors waste time loading unnecessarily large images to their devices and you pay for redundant bandwidth usage. This is particularly unfair to 3G users and roaming users who pay a large extra to download the uselessly extra high resolution images. To avoid these issues, you should identify visitors’ mobile devices and resolution using their user agent and optionally additional client-side Javascript code. With the correct resolution in hand, retrieve the best fitting image from your servers. This requires that you make available a set of thumbnails for each of your original images. There are excellent Javascript packages available that will automate this process. 

Image formats

Leverage Responsive Design

Each device that a visitor is using to access your site has different resolution. A website's markup must adapt itself to look perfect on all the different devices and in various resolutions, pixel densities and mobile device orientations. Managing, manipulating and delivering images, is one of the main challenges of responsive design that web developers face. Due to these challenges, many websites are built with the highest resolution images that may be needed and simply scaled down client-side depending on the breakpoint. This process is inefficient and harms performance. But there are options, such as the open source tool responsivebreakpoints.com, which can help you generate all the image sizes you will need, as well as the appropriate html code.

Utilize Content Delivery Networks (CDNs)

CDNS typically have servers strategically deployed around the world to shorten content round-trip times. CDNs allow images to be served more quickly to users and reduce the likelihood of crashes, enhance SEO performance, and improve the user experience. When you are choosing a CDN, you will need to consider its level of global coverage, the caching rate, ability to run logical operations at the edge, average response times, and other metrics, such as average invalidation times. 

The Impact of Change

By employing these best practices, you can truly make a difference in the user experience, encouraging visitors to stay longer, browse more, engage and make purchases. Consider the results of these companies: 
 
Apartment List, an online resource that helps individuals search for rental housing, found itself dealing with a variety of different image formats and resolution as it picks up data feeds of images from the various apartment communities featured on its site. By transforming all of these images into optimal images for presentation on mobile devices of various sizes, as well as desktops, as well as leveraging responsive design techniques, the company saw an increase of nearly 20 percent in its conversion rates. 
 
KartRocket, a SaaS-based eCommerce platform offering a transparent and complete eCommerce ecosystem that helps SMBs to quickly and easily create online stores, needed to find a way to ensure quality of images while not impacting load time or site performance for its clients. It leveraged tools to dynamically control images, so that they were optimized for small thumbnails, large banner images and main product images. This approach enabled KartRocket to achieve a 100x increase in response time for image loading. 

Enhanced speed for website

The Bottom Line

When time is money, website owners can’t afford not to take all the necessary steps to improve their visitors’ experiences. Even a fraction of a second delay in loading a page could translate into lost revenue and confidence, on the part of the consumer. Considering that images and videos are the biggest bandwidth hogs on most websites, you need to take a serious look at your web design and image formats, then take the steps necessary to ensure that media is optimized so your site – not to mention your revenues and customer perceptions – don’t suffer as result.
 

Further Reading on Image Optimization


Recent Blog Posts

Transitioning JPEG-Based to JPEG XL-Based Images for Web Platforms

When the JPEG codec was being developed in the late 1980s, no standardized, lossy image-compression formats existed. JPEG became ready at exactly the right time in 1992, when the World Wide Web and digital cameras were about to become a thing. The introduction of HTML’s <img> tag in 1995 ensured the recognition of JPEG as the web format—at least for photographs. During the 1990s, digital cameras replaced analog ones and, given the limited memory capacities of that era, JPEG became the standard format for photography, especially for consumer-grade cameras.

Read more

Amplify Your Jamstack With Video

By Alex Patterson
Amplify Your Jamstack With Cloudinary Video

As defined by Amazon Web Services (AWS), Amplify is a set of products and tools with which mobile and front-end web developers can build and deploy AWS-powered, secure, and scalable full-stack apps. Also, you can efficiently configure their back ends, connect them to your app with just a few lines of code, and deploy static web apps in only three steps. Historically, because of their performance issues, managing images and videos is a daunting challenge for developers. Even though you can easily load media to an S3 bucket with AWS Amplify, transforming, compressing, and responsively delivering them is labor intensive and time consuming.

Read more
Cloudinary Helps Move James Hardie’s Experience Online

While COVID has affected most businesses, it has been particularly hard on those that sell products for the physical ‘brick and mortar’ world. One company that literally fits that bill is our Australian customer James Hardie, the largest global manufacturer of fibre cement products used in both domestic and commercial construction. These are materials that its buyers ideally want to see up close, in detail. When customers have questions, they expect personal service.

Read more
How to Build an Enhanced Gravatar Service, Part 2

Part 1 of this post defines the capabilities of an enhanced Gravatar service, which I named Clavatar, and describes the following initial steps for building it:

This post, part 2 of the series, explains how to make Clavatar work like Gravatar and to develop Clavatar’s capabilities of enabling requests for various versions of the images related to user accounts.

Read more