How To Optimize Website For Mobile: Top 06 Actionable Tips

I. How Mobile Performance Can Skyrocket Your Sales

Some people treat their mobile phone like another limb. Where they go, their mobile phone goes. In fact, some people check their phones up to 150 times a day! Mobile eCommerce sales account for 34.5% of total eCommerce sales in 2017, and by 2021, that number is expected to hit 54%.

In this article, we will go over valuable tips that no one says out loud about mobile optimization and show you how to optimize your store on mobile to boost sales and profits.

II. Fast page load

Speed is a killer.

According to Hubspot, 64% of smartphone users expect pages to load in less than 4 seconds. To be more specific, if your site makes $100,000/day, 1 second improvement in page speed brings $7,000 daily. Kissmetrics even produced an infographic to trace out the percentage of customers who abandon a page based on longer load time: by the time your page load time hits 4 seconds, you’ve lost a fourth of all visitors – a potential quarter of conversions. As the team digged a little deeper, they found out that 40% of customers will leave the site after 3 seconds. 

There are some tools you can use to assess the current status of your site, including:

• TestMySite: This tool measures the site’s performance across devices, from mobile to desktop, providing them with a list of specific fixes that can help their business connect more quickly with people online, producing free reports on the test.

The all-time simple and intuitive design of TestMySite

• PageSpeed Insight: This tool measures the performance of web pages, assigns a Page Speed Score to evaluate how the page is performing (ranging from 0-100, with 85+ is good), and suggests how to speed up the page. 
• WebPage Test: This open-source tool will run speed tests from multiple locations across the world, across consumer connection speeds to provide rich insights including resource loading waterfall charts, page speed optimization checks, and suggestions for improvements.
• Mobile-Friendly Test: Designed specifically for mobile sites, this tool analyzes exactly how mobile-friendly the site is, and focuses on elements beyond speed as well.

2.1. Optimize files

Visual contents are extremely effective to convey ideas and summarize your points, so apparently they should always be included in one way or another. However, they can be an exceptional challenge for mobile websites since they take longer to load than normal text.

To optimize website for mobile, make sure the images you upload are sized properly. It means if your site uses large or wide images, determine the largest pixel required and try not to exceed that. One of the easiest ways to reduce image file sizes is to crop your images to the correct size. For example, if you want an image to appear as 570px wide, resize the image to that width.

Don’t just upload an image that is 2000px wide and set the width parameter the size you want. This requires your page to load the full image, then adjust it to the appropriate size, slowing your page. You can also downsize the pixel, if necessary, with the help of pixel-based photo editing software such as Photoshop. Always use image optimizer tools like Shopify Online Image Resizer, tinypng.com or imagecompressor.com

2.2. Optimize front-end codes

When it comes to page load time, front-end optimizing is an indispensable part. Your page’s load speed depends mostly on the technical processes that form the performance of a website. Front-end optimizing even covers file optimizing: You are optimizing your front-end when optimizing files.

Simply put, front end optimizing means reducing file sizes and minimizing the number of requests needed for a page to be loaded. Along with files optimizing, a couple of other techniques are also applied to optimize front-end code:

• Reducing HTTP requests
• File Compression
• Cache Optimization
• Code Minification
• Image optimization

Take a look at this article about Reducing Page Load Time to dig deeper into how to implement the techniques for an optimum Front-end code.

2.3. Reduce external scripts and the number of plugins on your site

It’s worth noting that the system running your store can greatly influence the load time. 

If you’re running a Shopify store, chances are you are using tons of apps to design the store, run marketing promotions, create effects, etc. They make your life easier (and richer), plus extremely easy to install. Unfortunately, the number of apps that you install makes a remarkable impact on site speed. The more apps you have, the slower the pages become, due to tons of Javascript code embedded in them. Even if you don’t have many apps, it’s a good idea to evaluate the ones you have installed on a regular basis

To optimize website for mobile, stay informed and selective when it comes to installing apps. Deleting any that are unnecessary can improve the overall speed and make maintenance easier in the long run. If you want to be extra-cautious and data-driven, you can run a selective sped test to check how each app is affecting your site. This can be a tedious process but can show you the difference each one makes.

2.3. Use a CDN (elite option)

Beyond the server that hosts your site (Shopify server), you can also use other networks of servers to decrease load times for your visitors. With a CDN (Content Delivery Network), you cache your site on a global network of servers. When a visitor’s browser requests files from your site (loading certain page, image or data in general), that request is routed to the closest server. 

An easy-to-use option is to use Shopify Files as it is a CDN. It can be found in Settings on your Shopify Admin.

III. Mobile-smooth Display and Function

3.1. Primary content first

While the desktop offers a grand place to go creative, mobile needs all the space-optimized. Responsive design is becoming a too familiar concept. Instead, we are witnessing the rise of mobile-first design. To achieve this goal, we need to first understand user behaviors on mobile. According to Google’s research, users who surf the internet on mobile devices are usually goal-oriented. They want to easily and immediately reach to what they are looking for, without having to waste time on jumping from one page to another.

This explains why building simple and clear website design and showing primary content first are very vital in M-commerce. People hate to zoom in and pinch on tiny elements and buttons on the website that are designed especially for a desktop website to be able to read them. Secondary content should be available whenever users need it.

Show image and hide text appropriately: To ensure that this decision-making process isn’t overly complicated for users, try to limit the amount of text on product pages to the absolute essentials.

Many even argue that customers need a whole different experience on mobile, not just responsive layout compared to laptop or desktop version. It’s because in many cases, responsive or stacking desktop/laptop designs are not necessarily primary content that you want to display for mobile users.

Cut down on copy to only product name, price, variant option, and CTA. Hide additional information from a permanent view with a collapsible menu. This technique not only greatly improves the user’s “window shopping” experience but also brings their attention on the most important page element: product images.

Also, there is a Typecast’s amazing proportional method for mobile friendly websites that helps you understand how big or small font size you should use. According to this proportional method, your titles should be twice the body font size and the subheadings should be 1.625 times the body font size, which is rather close to the golden ratio. Follow the method and improve your conversions in no time.

Try some of these tactics on your forms:

• Use larger, ‘tappable’ buttons.
• Vertically align form fields to make navigation easier.
• Remove menus and complicated multi-step checkouts.
• Make date selection easier by using the phone’s native date selection UI.
• Reduce the number of images to make form faster to load on mobile connections.
• Leverage mobile UI elements such as increment selectors or buttons instead of drop-down menu to select quantity.

3.2. Highlighted navigation bar and CTA button

As proven earlier, mobile users are goal-oriented, so you have to provide them a direct route to the CTA. Not only will this help ensure that the vital information is always in view, but it also simplifies a user’s flow through the website. 

A website should offer easy and convenient navigation to its users by integrating easy to locate navigation bar, a search bar and other important elements of a website. You can shrink your navigation bar down to the fewest possible options or add a sticky navigation bar to the top of your website for better navigation.

As with all CTAs, it’s important that these key links stand out from the rest of the elements on the page. Color and size can be used to create a contrast

3.3. Optimize keyboards

Typing on mobile device has high interaction costs. It requires lots of time and efforts from users, even with a full keyboard and touchscreen. So minimize typing effort as much as possible, allow user to pick from a list, check a box, use a default picker instead of typing, or swipe to see a slide image. 

3.4. Utilize basic touch gestures

One of the things that makes using mobile devices better and more convenient than desktop is the touch gestures. You have not only scroll up and down but also swipe, drag, zoom, etc. They enable us to engage with technology through our sense of touch. Eliminate steps and allow users to perform gestures naturally, this will really pull off a comfortable experience.

ASOS allows users to use different touch gestures to navigate between their site

You can check out the Touch Gesture Reference Guide, which details dozen of actions and how they work. 

Some of the most common user gestures are:

• Tap: Touch surface briefly
• Double tap: Touch surface with two quick motions (often to zoom)
• Drag: Move along surface without breaking contact
• Pinch/spread: Touch surface with two fingers to move in (pinch) or out (spread)
• Press: Touch surface and hold
• Flick: Scroll quickly

These gestures need to be within reach for the user as well. One thing to keep in mind when designing for gestures is thumb placement, or the “thumb zone”. While it’s not always the case, most people hold their phones with one hand and use one thumb to navigate. So the most common actions happen with a thumb movement – that’s how much space you have to work with across the device.

Read more: Build The Perfect Mobile-Friendly Store

3.5. Convenient mobile checkout

According to Forrester, mobile devices will account for more than one-third of retail sales in 2018, so make sure to optimize website for mobile devices, especially your vital pages like Checkout Page or Product Page.

Tapping into device-specific capabilities like using smartphone camera to scan payment cards and showing best keyboard for form field is a huge plus. Plus, big thumbs and small screens can cause accidental clicks, which waste time and lead to frustrated users, so it’s important to minimise this risk. So form fields, CTAs, and form fields need to be the right size, and given enough space so that fields and links aren’t too close together. The size of “buttons,” for lack of a better description of gesture-based controls, is vitally important. Each button needs to be large enough to activate with ease, regardless of finger size.

According to thenextweb, gesture targets should be at least 44 points wide and tall, with experiment showed that 30 points is the absolute minimum. With bigger screens, the fat finger rule expands to 70 points, which also makes thumb reach that much easier. 

Make the checkout process as fast as possible for customers, such as using address predictor tools, which suggest matching addresses as shoppers type. Google Autofill comes in handy for you in this case. With the rise of “1-click” buy button, you can try to connect to digital wallets like PayPal, Apple Pay, Amazon Pay, etc.

The checkout process is never perfect, and should never be considered the finished article. Changes in technology and customer expectations mean that the checkout user experience is constantly evolving, and retailers need to keep pace.

To summarize

In order to encourage mobile conversions, the most important thing to remember is to satisfy the needs of the mobile user. Mobile users want fast experiences that are equally as robust and enjoyable as desktop experiences, so the key to getting more conversions lies in continually meeting and exceeding those expectations.

Related article: Profitable eCommerce Model You Might Miss Out On