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. 

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 e-commerce platform offering a transparent and complete e-commerce 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.
 

Recent Blog Posts

Build the Back-End For Your Own Instagram-style App with Cloudinary

Github Repo

Managing media files (processing, storage and manipulation) is one of the biggest challenges we encounter as practical developers. These challenges include:

A great service called Cloudinary can help us overcome many of these challenges. Together with Cloudinary, let's work on solutions to these challenges and hopefully have a simpler mental model towards media management.

Read more

Build A Miniflix in 10 Minutes

By Prosper Otemuyiwa
Build A Miniflix in 10 Minutes

Developers are constantly faced with challenges of building complex products every single day. And there are constraints on the time needed to build out the features of these products.

Engineering and Product managers want to beat deadlines for projects daily. CEOs want to roll out new products as fast as possible. Entrepreneurs need their MVPs like yesterday. With this in mind, what should developers do?

Read more

Your Web Image is Unnecessarily Bloated

By Christian Nwamba
Your Web Image is Unnecessarily Bloated

As a developer, it seems inefficient to serve a 2000kb JPEG image when we could compress images to optimize the performance without degrading the visual quality.

We are not new to this kind of responsibility. But our productivity will end up being questioned if we do not deliver fast. In order to do so, the community has devised several patterns to help improve productivity. Let's review few of these patterns based on their categories:

Read more

Google For Nigeria: We saw it all…

By Christian Nwamba
Google For Nigeria: We saw it all…

Note from Cloudinary: Christian Nwamba, a frequent Cloudinary contributor, recently attended, and was a main speaker, at the Google Developer Group (GDG) Conference in Lagos, Nigeria. Christian led a session teaching more than 500 developers how to “Build Offline Apps for the Next Billion Users.” The stack he used included JS (Vue), Firebase, Service Workers and Cloudinary. Below is his account of the conference and his talk.

Read more
Viral Images: Securing Images and Video uploads to your systems

When was the last time you got paid $40,000 for a few days of work? That is what happened last year to Russian independent security researcher Andrey Leonov, who discovered that if you upload a specially constructed image file to Facebook, you can make Facebook's internal servers, nested deep within their firewalls, run arbitrary commands to expose sensitive internal files in a way that could easily lead to a data breach.

Read more