Six Tips for a High-Performance Mobile Site

    It’s no secret that smartphones are overwhelmingly the most popular and fastest growing mobile access point to the Internet today. Just recently we learned that by the end of this year, mobile devices will outnumber the amount of people on earth, and by 2017, there will be over 10 billion mobile-connected devices. So how does this influence how you should approach your mobile site?

    Here are six tips, from Roland Campbell, director of solution engineering at Usablenet, for creating a mobile site focused on speed and ease of use.

    Six Tips for a High-Performance Mobile Site - slide 1

    Click through for six tips that can help you speed up your mobile website and improve customer experience, as identified by Roland Campbell, director of solution engineering at Usablenet.

    Six Tips for a High-Performance Mobile Site - slide 2

    Ensuring a speedy and efficient mobile experience is one of the most important factors in mobile development. Since mobile websites with long load times can be a determining factor between a positive and negative customer interaction, businesses need to ensure that their mobile site is not a data hog.

    If the mobile site has to download over one megabyte of data to view the home page upon loading, it’s likely that the page will take five to 10 seconds to load. The maximum time for a mobile web page to load should be two to three seconds. This can be achieved by:

    • Reducing images sizes
    • Reducing JavaScript use by instead using minimized versions of JavaScript or simply reducing the percentage of total JavaScript weight
    • Reducing CSS
    • Keeping the total weight of mobile pages below 200-300 kb

    Six Tips for a High-Performance Mobile Site - slide 3

    While wireless networks and mobile devices continue to improve, device processing power still does not match the desktop, and wireless networks are often fraught with interference. Most of us have experienced having three out of four bars of LTE service in a congested area and not being able to send a text, let alone browse a mobile website.

    Each IP request delivered on a mobile device represents an opportunity for a transmission error and a retry. Desktop sites typically make over 100 IP requests during a session. This is a lot of work for both a mobile device and a wireless network to handle. To maintain fast speeds, you must keep the number of IP requests at a minimum, ideally between 40 and 60.

    Six Tips for a High-Performance Mobile Site - slide 4

    On a desktop website, you have the flexibility to use large images. After testing them on one browser, you know they will look good everywhere, and you can bolster the image with text, buttons and the like. On mobile, you need to be more careful.

    In order to maintain a fast mobile UX, it is essential to limit the size of the image. Keep images as small as possible, while making sure they still look good. And be warned: Images might look great on a single density device, but on a retina device, they can look pixelated. Images with a lot of text will mostly be illegible on a smartphone, for example.

    With the ubiquity of mobile rising every day, it is worth developing specific images for a mobile site. Keep images simpler than their desktop counterparts and make sure they have less clutter, fewer subjects and brighter contrast. Images should be able to be seen clearly if the user is looking at them outside on a sunny day.

    Six Tips for a High-Performance Mobile Site - slide 5

    On mobile, perception is everything. And if you consistently make it easy for a user to seamlessly complete their tasks, your site will be perceived as fast and efficient — key mobile benchmarks. Successful mobile journeys need to be short and sweet: This is true no matter what type of experience you are trying to provide. Use finger-friendly navigation and consistent action colors that stand out and focus the user’s attention. Category navigation should not require multiple refreshes, for example, in order for the customer to access the add-to-cart button faster.

    Further, if you maintain a transactional site, the checkout process demands your acute attention. In order to drive conversions, reduce the number of steps and the amount of text that has to be entered throughout the checkout process. Consider digital wallet technologies, like MasterPass, Google Wallet, and PayPal to reduce the amount of steps users need to complete to transact.

    Six Tips for a High-Performance Mobile Site - slide 6

    There is no doubt that a content delivery network (CDN) will enhance the speed of your desktop website. But how about for your mobile site?

    CDNs can make mobile sites faster — especially for home page load times — although the results will not be as easily predictable as on the desktop, due to the variability of wireless network strength. The determining factor in achieving a fast mobile connection is the link from the tower to the device, which a CDN cannot impact whatsoever. However, some CDN providers can reduce the time to first connection with a mobile detect and redirect service. If you require a redirect to get to your mobile page, the redirect can be done at the edge-server level, saving valuable milliseconds.

    Six Tips for a High-Performance Mobile Site - slide 7

    In order to continually improve your mobile site’s performance, you must test constantly. While basic metrics and data can be achieved internally, you may want to consider engaging a third party that specializes in mobile performance testing and tests phones over a variety of appropriate networks. The two big players in this space are Keynote and Compuware (Gomez), both of which are reliable choices.

    Six Tips for a High-Performance Mobile Site - slide 8

    We’re clearly living in a mobile world, and it makes sense that the rallying cry of designing for “mobile first” would resonate. However, this idea should be adjusted to reflect an approach that starts with users’ needs first. The winning strategy is one where technology does not impose limitations, and experiences can deliver on business, brand and user goals in every channel and device.

    Get the Free Newsletter!

    Subscribe to Daily Tech Insider for top news, trends, and analysis.

    Latest Articles