This column is authored by Sam Williams, Digital Marketing Expert, Purenet
Mobile eCommerce is rapidly rising to become the dominant force in the online retail industry, with over 2 billion people using their mobile phones for eCommerce transactions by the end of this year. In the US, it is estimated that mobile eCommerce sales will grow by 40% between now and 2018. It is therefore imperative for those with any kind of online retail business to cater for this growing industry. As far as eCommerce is concerned there are three main areas that store owners should look to improve to ensure a smooth, future-proof mobile website:
• Mobile usability
• Mobile speed
• Optimising for Google’s Mobile-first index
Screen sizes on mobile and tablet devices, being far smaller than a desktop, can rapidly become frustrating for users if they have to constantly resize their screen to click on tiny links to navigate the site, and if they can’t read text because it’s too small. A site that is mobile-friendly needs to be something a mobile user can easily navigate around and use, whether that be on a Samsung smartphone or an iPad.
When it comes to having a mobile version of a website, the options are broadly split into 3 categories:
• Responsive website
• Mobile subdomain (m.examplewebsite.com)
• Dynamically served content, where different content is served to users/search engines depending on the device
Helpfully explained by this graphic from Google:
It is preferable to use responsive design where possible, as this simply dynamically rescales the content of the screen to fit whatever device the user is utilising, with no additional changes to the code or structure of the site. Other options such as mobile subdomains and dynamic serving can also work (with the potential loss of functionality) where responsive design is not always an option given the infrastructure certain frameworks have. Others such as WordPress are responsive by default.
The oft-quoted statistic about Amazon losing 1% of sales per 100 milliseconds of site latency is well-known, as is the decreasing revenue associated with slow loading times. The modern internet user has a very short attention span, and web pages are now more complex than ever for browsers to render. Between 2012 and 2014 the average size of webpages doubled, and this had risen a further 30% by 2016. With all of this comes a need to ensure that webpages load as fast as is reasonable, to give customers as smooth as experience as possible. Some advice about this has already been given on iamwire before.
Achieving customer-friendly loading times
The most-often used tool to help site owners measure the performance of their sites and find possible improvements for them is the Google Pagespeed tool; at PureNet we tend not to use it simply because it doesn’t actually measure how fast your site is! (It scores sites based on rigid criteria that don’t take into account real-world conditions and often makes impossible-to-implement recommendations) it also doesn’t simulate a user visiting your site from your country, which can be an important consideration. Lastly, the criteria list is not as detailed as it could be. Instead, we prefer to use a combination of GTmetrix and Webpagetest (the latter being free, the former does have a free version which has one North American test location enabled)
The output from the tools can look complicated, although much can be made of the findings as will be discussed below. The waterfall, for example, is simply a timeline which gives a breakdown of how long a page takes to load by each individual part of the page’s code.
Easy fixes vs. Technical fixes
When it comes to making a webpage load as efficiently as possible, many changes will by necessity require development work, although there are always ways and means to greatly improve this without needing to get technical:
• Hosting-quite often cheap, shared hosting can impact on load times; changing to a good quality dedicated hosting provider by contrast can have a substantial positive impact.
• Images-a very common issue we see is uncompressed images, which can easily take up a lot of page space. These can easily be reduced in size by using a tool such as optimizilla.com. Also, try and avoid rescaling images in a WYSIWYG editor (do them offline) as otherwise browsers will have to redraw the images when loaded.
• WordPress updates-for those using it, updating WordPress and its associated plugins, and removing unused plugins can considerably help load times. The P3 plugin profiler can assist with this.
More technical fixes-examples
Most of these will require some form of development knowledge, but in the long run are worth the investment.
• Gzip compression (at server level) a form of compression that can save a lot of page size and therefore loading time.
• Caching-when users store the pages from your site and reload them when they revisit, this saves a lot of processing time for the site being visited.
• Enable keep-alive-Enabling persistent connections allow the same connection to send and receive multiple HTTP requests, which means less waiting time.
• Minimising redirects-the less redirects that have to happen, the more loading time improves.
• CDN’s-a content delivery network stores files from your website on their servers, which can greatly reduce the strain on your own. Only recommended for large websites with a lot of media files.
Optimising for Google’s Mobile-first index
In 2016, Google officially announced the creation of what is termed a ‘mobile-first index’ for its search engine. Previously, Google’s bots have viewed the web through the perspective of a desktop device, but with the increasing use of mobile technology throughout the world, they are gradually transitioning to crawling and indexing the web’s content through a mobile lens. Although not due to launch fully until 2018, it’s wise for store owners to consider this now.
Why should I care about a mobile-first index?
Google’s Desktop and Mobile User-agents, or bots, are not the same, and will view content differently depending on the website. It’s entirely possible that content visible on a desktop may not be visible on mobile, which may lead to users not finding their experience as satisfying, and may even lead to a loss of Google rankings. In extreme cases, if resources are inaccessible to Google’s Mobile bots, they may not be able to index a site at all!
Being ready for mobile-first
Fortunately, it’s not too difficult to be ready for mobile-first. It is possible, by making sites responsive (all site builds done by our ecommerce developers are responsive by default) and fast, as above, to mitigate a number of problems easily. As far as accessible content is concerned, by using Google Webmaster Tools webmasters can use the ‘fetch and render’ tool to simulate a visit by either version of Googlebot, which will show if any content is blocked or will not be rendered, or read, by Google.
Google will helpfully show how it physically ‘sees’ the page and how a user would see it, and also lists any resources that could not be loaded. The ‘Fetch’ tab shows detailed technical information about the page requested. Aside from the SEO benefits, this is helpful for debugging the configuration of a mobile page and any errors it may contain.
There is also the Mobile usability report, which gives an overview of any issues detected:
With a little preparation, it’s perfectly possible to adapt to the growing mobile Ecommerce industry and position one’s company in an advantageous position. Many small and medium-sized businesses have been slow on the uptake where mobile is concerned, and the business owner who views it as an opportunity, not a problem, and who is proactive may find themselves with a considerable competitive advantage in the fullness of time.