×

If there’s any doubt in your mind about the importance of a speedy, well-functioning mobile site for your online business, consider the following:

  1. As of June 2016, more people made their purchases online instead of in a brick-and-mortar store.
  2. As smartphones and tablets become ubiquitous, more and more eCommerce activity occur on mobile devices.
  3. Site performance is strongly correlated with customer satisfaction, which influences things like brand perception, customer loyalty, and ultimately, conversion rates.

With that said, what do you need to consider to build a mobile site that draws customers? What makes a site mobile-friendly, and how do you implement those features? This article will answer these questions so you can deliver a good digital experience for mobile users.

Image credit: Shutterstock

Considerations for Mobile Development

The use cases of mobile users are quite different from those who use laptops or desktops, so you’ll need to take this into account when designing and building your mobile site.

One of you biggest concerns should be speed. Mobile devices typically operate over cellular data networks, which are slower than those available to laptops and desktops. However, users expect their experience on your mobile site to be comparable to what they would get if they were using a desktop or laptop — they want all of the features they want to be available, they want them to work, and they want them to work quickly.

Secondly, mobile devices tend to be less powerful. This factor isn’t as big a concern as the network speed issue mentioned above, but it is certainly something to keep in mind especially if your site requires high resource utilization.

Improving Your Mobile Site

Now that we know we have to provide a full-featured site that operates well on less-powerful devices than run on slower data networks, let’s cover the tips and techniques you can use to ensure your mobile site meets the needs of your on-the-go users.

Optimize Your Images

As an eCommerce site, the images you display are of utmost importance. They’re obviously very influential on users, so you want to display the best possible images. However, images are inherently large files, so this is one area where,when optimized correctly, you can gain significant savings in terms of page load times without sacrificing quality.

You can gain serious speed by compressing your images.

Depending on the types of images you use, there are different options available to you in terms of compression. You’ll want to ensure that the file size you’re sending is as small as possible. You can also do this by sending over the smallest file necessary for mobile devices — there’s no reason to send a large, HD photo meant for desktop users to mobile users. You may need multiple versions of a given image so that your server can deliver the appropriate one for a given device size, but the speed improvements you’ll see make this task a worthy investment.

Cache Your Resources

Any cached resources don’t have to be sent from the server while the user waits. As such, anything that you can cache should be cached for as long a time period as possible. Generally speaking, the resources that are the best candidates for caching are those that are static for extended periods of time, such as your business logo, company information page, and so on.

You might also look into caching API calls as well. For example, if you have a Google Maps widget that displays the location of your brick-and-mortar store or your company’s headquarters, you might cache this information to reduce the number of HTTP calls required to build your site.

Reduce the Assets Your Site Requires

For each asset (such as file or image) that your site requires, the browser has to make a request to your server. By reducing the number of assets required to fully load your site, you decrease the number of HTTP calls the user’s browser makes to the server. There are three primary ways you can reduce the number of assets your site requires:

  1. Combine Files: If your site requires multiple CSS stylesheets or JavaScript files, you might combine them and serve to your users one larger file instead of multiple smaller files.
  2. Use Inline Scripts and Styling: If your stylesheets or JavaScript files are small or are used only in select places, you might consider embedding them into the HTML itself. This does make your HTML slightly larger, but this is offset somewhat by the need for fewer calls.
  3. Remove the Asset Completely: Mobile users tend to be on the go, and they’re probably looking to complete some task on your site. If you have decorative features on your desktop site, you might consider eliminating this from your mobile site. Yes, your mobile site may be less attractive than your desktop site, but you’ve eliminated extraneous material on your site and made it easier for your task-oriented mobile user to do whatever it is they wanted to do.

If you’re using a third party framework, such as Bootstrap, be sure that all of the external resources your site calls are actually used. If not, remove all references to them.

Minify Your Assets

For the assets that you do serve up as part of your webpage, minify as much as possible. Minification is the process of removing unnecessary lines in code while not changing its functionality at all. Things that can be removed include:

  • Whitespace
  • Newline characters
  • Comments

Basically, anything used to add readability to the code, but not required for execution, can be removed.

Enable Compression

Compression allows you to take large files, make them smaller, send them to the user’s web browser, and then, upon receipt, the receiving browser decompresses the resource.

While there is some delay associated with the decompression process, there are gains to be made by sending a smaller file to a device that’s probably using a slower data network. However, be sure that you’re only compressing large files; due to the decompression time requirement, compressing really small resources ends up hurting your page load times.

Takeaways

There is no question that site performance predicts customer satisfaction. One of the biggest aspects of site performance from the user’s perspective is how fast or how slow it loads. Improving your mobile site so it works well on devices that are typically less powerful and run on slower data networks ensures that you provide a great user experience for your visitors. Well-performing, speedy sites are an absolute must if you’re doing business online, so don’t wait to make sure that you’re meeting the expectations of your customers.

For additional information on how Rigor can help you improve your mobile site’s performance with customized monitoring and optimization recommendations, contact us today!

Suggested Blog Posts

The Perception Gap for Poor Web Performance

E-commerce revenue continues to grow,as consumers turn away from shopping in brick-and-mortar stores to shopping online.  However, many businesses are not prepared for this growth because they do not fully understand the market and how to invest in...

Read More

Measuring Cross-Browser Performance

In recent years, client-side browsers have been more involved with processing code before it reaches the user's desktop, shifting away from a reliance on servers handling the bulk of this burden. Websites and applications now rely more on a user's br...

Read More

Using Browser Trends to Maintain a Better Site

Because of the multifarious nature of web clients today, it’s important to consider the usage statistics when designing, implementing, and managing your site. However, misconceptions often arise when determining what browsers to design for an...

Read More

Finding Causes of Intermittent Errors from Google Webmaster Tools

Google Webmaster Tools is a web service that allows webmasters to view the status of their sites as seen by Google and the Googlebot crawlers. In addition to indexing your site structure and content, the Googlebot crawlers also record data on perform...

Read More