We’ve all experienced the frustration of waiting for a site to load—and on mobile, when you’re typically in a hurry to get information, it’s even worse. A recent Aberdeen report has an alarming statistic: on average, sites suffer a seven percent loss in conversions for every one second of delay in loading the page. Mobile sites are particularly vulnerable because of their less-powerful processors and potential bottlenecks in bandwidth. This isn’t holding back the mobile shoppers, though. Sixty percent of online shopping time is spent on mobile devices, and the Adobe Digital Index reports 33 percent of average mobile users have used mobile-assisted shopping in store. More recently, we see 60 percent of local searches originating from mobile. Despite the limitations of the platform, mobile users expect the same performance they get on their desktops.

That page delay can really add up. If you look at page load speeds for leading mobile sites, that industry-average seven seconds must be costing a lot of conversions. The industry leaders have sites loading in one to two seconds, less than one-third of the average, and reclaiming many of those conversions.

Typically, images and video can be the main culprits in slow page load times. However, they are critical to a great experience. Here are some best practices to optimize your experiences and minimize your page weight.

Optimize the image format to improve page performance

A handy design feature is to have product detail shots on transparent backgrounds so that they can be shown on any page no matter what background color is on the page. JPEG files don’t support transparency, so companies are using PNG files on their sites. The problem is that png files are much bigger and a page full of product details will load slowly.

The best practice here is to use JPEG files and then create image presets to fill in the background color. The final image is rendered dynamically and placed on the page as it is requested. You are not limited to one color or a solid background. Your preset can overlay onto another image or you can script a color change in the preset. Check out these before and after demo pages, one using transparent PNGs and the other using JPEG optimization. The page weight of the JPEGs is about 10 percent of the PNGs, and the page loads much faster.

Speed up with lazy loading

You’ve probably seen this before. You access a page full of images, perhaps a search results page, and as you scroll down the page, the images appear just as you get to them. This is lazy loading. Facebook and LinkedIn do this well. Images are not loaded until they are actually needed, when that section of the page comes into view. In this way, the page shows results quickly and the customer can interact with the page sooner. You can see a demo of lazy loading at this webpage.

Deliver mobile-specific images on demand with the responsive image library

On a desktop, you can give shoppers a large selection of images on your category pages. Each product image is small, but the screen is large so the product is visible. If you try to shrink this down to a tablet-sized screen, the product images become too small. Instead, you should load fewer, larger images to give the tablet-based shopper a better look at the product. On a smartphone-sized screen, a smaller version of the tablet-sized image can work.

Optimize SEO for media viewers

Media viewers cannot have tags and keywords, leaving video content invisible to search engines. Media viewers load well and provide a great experience, but your customers will not find them in a search. On this page at Verizon you will see that the webpage loads a placeholder image while the media viewer loads behind the scenes. This image has alt tags and keywords that can be indexed by search engines. The media viewer shows when it is fully loaded, and now the customer can zoom, see a 360 spin view, and watch a product video.

This article was written by Vebeka Guess from Business2Community and was legally licensed through the NewsCred publisher network.

business2communitycustomer experienceeCommercemediamobilesearchstrategyux