7 Reasons Why Your Mobile Site Isn’t Converting

7 Reasons for Poor Mobile Conversions

  • Internet connections are usually faster for desktops, which means web pages load quickly on home and office computers, especially for hardwired connections. Public Wi-Fi connections are on the rise, but so are the people who use them. And data carriers are still trying to figure out ways to serve those customers.
  • Bigger screens allow for more defined details on navigation, search, and menus. Most menus are, by default, collapsed on smartphones, which means shoppers have to tap to see all the categories and filters. This makes it easy to miss key menu items. Larger screens also make for better zooming.
  • More products per page on categories and search results help convert. The maximum number of products per row on a smartphone is two, typically. On desktops, web pages can typically display 4 to 6 products horizontally. The ability to display several products on a single screen increases the chance of a sale; if shoppers don’t like the first two items, they may see something else that interests him. On smartphones, this requires scrolling.
  • Desktop browsers have a more standardized way of fetching and delivering content. Smartphones manufacturers are trying to find the best ways to handle the content load. Some are better than others. For example, certain mobile devices require a cache dump for users to continue surfing their favorite websites or completing recurring tasks. This can be problematic if the user (i) doesn’t understand what’s wrong and (ii) doesn’t know how to clear the browser’s cache.
  • Mobile devices run out of space more frequently. According to Remo Software, a producer of tools for mobile devices, 90 percent of smartphones have no more than 32 GB of storage. More than half of them run out of space due, mainly, to photos and videos. The “out of space” interruption can prevent ecommerce sales.
  • Many mobile sites maintain a desktop-style design. Experienced website designers and developers have difficulty optimizing for mobile. Simply put, mobile site design is comparatively new. The transition from desktop to mobile has been cumbersome. (Contributor Charles Nicholls’ piece, “3 Ways to Narrow the Mobile Commerce Gap,” is a must-read.)
  • Mobile device users have more distractions. Smartphones make it easier to find information on-the-go. But they have distractions in the form of notifications, tone alerts, and text and other messages, such as from Snapchat.

While we cannot combat every issue that causes mobile shopping sessions to convert less, there are steps we can take to decrease the impact.

UX Priorities

  • Speed and performance. The best way to kill a potential sale is to serve up a slow site. Use proper tools to compress images, scripts, CSS, and HTML.

No matter the platform, every web page must load multiple server requests — text, media, scripts, processes, and third-party tools, such as shipping calculators and personalization platforms. The more requests, the more time it takes to load the page. Don’t let page size alone fool you. A heavier web page with fewer requests can load faster than a smaller one with more requests.

  • Optimize category and search results. Find ways to fit product thumbnails into two columns to minimize scrolling.
  • Allow for cross-device shopping and persistent carts. This allows shoppers to pick up where they left off on the same or different device.
  • Implement clear calls-to-action as well as user-verification actions. Confirming that a user has successfully added an item to the cart is as important as the add-to-cart button. Don’t leave a shopper guessing if the process worked.
How To Make Images Load Faster

Images impact the load time of a website. The faster the site, the better the user experience, leading to conversions and profits.

Eliminate Unnecessary Images

In 2019, a typical web page may request between 28 and 32 images when it loads, according to a report from the HTTP Archive. Those images may be necessary.

For example, one would expect numerous images to appear on a product category page of an ecommerce website. These pictures are usually critical.

The sorts of images that may be eliminated could include:

  • Pictures of text,
  • Decorative images,
  • Stock images that don’t communicate something.

There is also data that indicates having fewer images on a web page leads to more sales.

“On a typical retail page, graphic elements such as favicons, logos, and product images can easily comprise up to two-thirds (in other words, hundreds of kilobytes) of a page’s total weight,” wrote Daniel An and Pat Meenan in a 2016 Think with Google article. “The result: cumulatively slow page loads throughout a session. In fact, … sessions that converted users had 38 percent fewer images than sessions that didn’t convert.”

A report from 2016 indicates that relatively complex and slow pages (which often include lots of images) convert at a lower rate than faster pages with fewer images.

Load Lazy Images

When a typical web page loads, it requests every image listed in the page markup, even when many of those images are off screen and will only appear when or if the user swipes and scrolls down the page.

Lazy loading of images is the process of loading an image only when it is needed. When a web page first loads, it requests only those images that will be immediately visible on the screen. Subsequent images load when the user moves down.

The HTTP Archive reported that a mobile web page’s median kilobytes of image data transferred could drop from 843.5 KB to 426.7 KB when lazy loading off-screen images. This might reduce the initial page load time by 25 percent in some cases.

A variation of lazy-loading images injects a low-resolution version of an image initially and then updates it with a high-quality version after a user can see it. This approach also significantly reduces how long it takes a page to load.

Lazy loading typically requires JavaScript. A business could have its developers write a lazy-loading script tailored to the company’s needs or use any one of several available scripts.

In an article about shaving seconds from a site’s initial load time, contributor Hamlet Batista recommended Andrea Verlicchi’s LazyLoad script. Katie Hempenius, a software engineer at Google, recommends using Alexander Farkas’ Lazysizes script. Both of these solutions are examples of the many scripts for lazy loading.

Compress Images

Raster formats — such as .jpg, .png, .webp, and .gif — make up many of the images on a typical web page. In some cases, these images can be compressed to make them load more quickly without a noticeable difference in quality.

Compressed images can look nearly identical to much heavier uncompressed images. The image on the left is 169.5 KB. The image on the right is much smaller 39.5 KB but is similar in quality. Photo: Robert Bye.

One can compress images manually using software such as Adobe PhotoshopImageOptim, or Squoosh, to a name a few options. Or one could optimize automatically via a number of solutions, including content delivery networks, application programming interfaces, and scripts or packages.

This example from Imgix, an image-optimization CDN, shows an original 3.5 MB photo reduced to 26.36 KB.

In an article about image optimization, the Google Developers site recommended several solutions.

Image optimization CDNs:

Image optimization APIs:

Imagine optimization scripts, packages, and command line tools:

 

Load The Proper Size

Deliver the proper size image for a user’s screen. Wasted pixels add unnecessary weight.

A 100 x 100 pixel uncompressed raster image is 40,000 bytes (10,000 x 4). To convert bytes to kilobytes, divide by 1,024. So 40,000 bytes works out to be about 39 KB.

Imagine that you have an image that will be displayed on the screen at 360 x 200 pixels. At this size, the uncompressed raster image would be 72,000 pixels. Each of these pixels requires 4 bytes, for a total of 288,000 bytes or about 281 KB uncompressed.

An oversized image at, say, 396 x 220 pixels would be much heavier. Specifically, the 396 x 220 image would occupy 87,120 pixels. That is 15,120 extra pixels (87,120 – 72,000). Those wasted pixels still require 4 bytes each for a total of 60,480 bytes or 59 KB.

This example is for uncompressed raster images. And there are many ways to compress the image’s size in bytes without impacting its pixel resolution. Regardless, serve the proper size image whenever possible.