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

Analyze and auto tag images with Amazon Rekognition

Knowledge is power. And if you allow your users to upload images, you also probably want to better understand what their images contain. Whether a photo is of a building, people, animals, celebrities, or a product, image processing and analysis can assist in further comprehension. The benefits of this knowledge can go beyond "merely" categorizing your content and making your image library searchable: drawing insights from user generated content can be very useful! What better way to learn more about your users than to analyze the images they upload and find out what they care about and then have the ability to display relevant content to them according to their interests or even match them with other users that share similar interests.

Read more
Automatically moderate your user uploaded images

Allowing your users to upload their own images to your website can increase user engagement, retention and monetization. However, allowing your users to upload any image they want to, may lead to some of your users uploading inappropriate images to your application. These images may offend other users or even cause your site to violate standards or regulations.

Read more
Cloudinary Uses Scale API to Focus on Image Compression

Here at Cloudinary, we provide a cloud-based tool that enables our users to compress images and video for their websites and apps. Our goal is to preserve the visual integrity of the content, but deliver the smallest file size to any device or browser to ultimately optimize website performance and end user satisfaction.

Read more
CloudinaryAndroid SDK

Developing applications for mobile consumption requires facing, and overcoming, some difficult challenges. Apps need to limit their RAM, CPU and battery usage while still performing the required tasks in a reasonable time frame. If too many background tasks are running, the mobile device can become sluggish, with the battery running out very quickly. Coordination with other apps is crucial to keep the device responsive and make the battery last longer.

Read more
forLoop: Nigeria Event on Building for The Next Billion Users

TL;DR

Since Google shared their intent for the next billion internet users, some African developers thought this was pointing right at them and they needed to act fast. The mission to bring the next billion users from Africa to the internet kicked off a storm of enthusiasm. This community event turned into a success story and this is a summary of what happened.

Read more