Mobile-first design: what you need to know
24.02.20 | Opinion
Not just from a user’s perspective, either; Google is looking at your site performance and Facebook is starting to punish slow mobile sites. In this article we will look into 10 ways to improve your websites eCommerce conversion rate.
According to Radware, every second of loading time equals a 7% loss in conversions, 11% fewer page views and 16% decrease in customer satisfaction. So it’s in your best interest to get your site running as optimally as possible.
But it’s difficult to understand where to start, with so much noise about the best way to go about squeezing every last drop of performance out of your store. – especially when you have marketing to think about, seasonal campaigns to cope with, let alone managing stock and staff.
With that in mind, we’ve collected together some practical tips to help give you a guide on what to look out for when you’re trying to increase your speed.
Don’t worry if you’re non-tech, some of these instructions may be a little in-depth but your site’s support team should be able to help you out with checking these to help increase your eCommerce conversion rate.
So, firstly, back to basics. If the actual machine serving up your website isn’t running as fast as it could, it’s going to be your biggest bottleneck.
Out of the gate, there’s a sanity check to take place here. If you’re relying on your site to generate income, shared hosting with the likes of GoDaddy, 123 Reg and similar is just not going to cut it. It may cost more but the gains of moving to a Virtual Private Server (VPS) under a virtualised hosting provider such as AWS, Rackspace or Digital Ocean will quickly outweigh the increased costs. This part of the list mainly focuses on optimising a Virtual Private Server, so if you’re not there, you should look to move to a new provider as soon as possible.
One immediate change you can make is to install mod_pagespeed. It’s an Apache / NGINX mod by Google, designed to automatically cache assets, optimise page loading and compress and optimise images with little to no configuration. Install and enable it on your server and out of the box, the module will start to serve optimised content to your users. You should prepare for traffic too, especially during campaigns.
Extra traffic, even small spikes during the holidays or because of an Adwords campaign, will put your server under additional pressure and downtime is lost revenue and Google rank, so it’s vital to stay online. Consider VPS providers that allow you to burst your server’s resource. For example, Digital Ocean allow you to put extra memory and processing power on your machine temporarily, giving you additional resource. This is known as vertical scaling – scaling up your resource on demand.
Better yet, consider horizontal scaling. For this, you’ll need a load balancer or a machine setup as a reverse proxy, and you’ll use multiple servers to handle traffic bursts. Each server is configured identically, and you would simply add additional servers behind the load balancer according to demand. We’ve done this with several clients, and it works seamlessly. From a customer point of view, they’ll get an incredibly fast connection. This is an advanced configuration, so requires a little bit of setup. But once it’s running, you’ve got maximum flexibility and (potentially) limitless resource to meet demand on even your most successful advertising campaign.
80% of sites and stores that contact us are loading additional assets that are never actually used, or are duplicated. For example, old CSS stylesheets from a previous version of the theme, analytics tools that no one reviews anymore or fonts that were part of the theme package, but never actually used. It’s not hard to track them down, you can do it via Chrome’s Developer Tools.
There’s a host of Content Delivery Networks out there. These services cache and serve your assets such as images and stylesheets from their own servers, reducing the pressure on your server, and optimising your delivery of assets.
What’s more, because you’re offloading your asset delivery to a different domain, web browsers load your content and the content from your CDN partner simultaneously. By doing this, assets are loaded faster, and your page is displayed quicker. Some new players in this market, such as CDN.net don’t charge much, and require very little setup, so they’re a great option.
But that’s not all. As well as reducing the pressure on your server, their servers are often spread across the globe, and your content is mirrored across some or all of these servers. This is known as “edge caching” and it means your content is served up to your user using the closest server to them, again, reducing the time to load. For example Akamai, one of the leading CDN providers, has over 100,000 servers in over 75 countries around the globe, which means they can intelligently route users to the fastest servers wherever they are.
SSL is not a luxury any more, it’s a necessity.
With Google penalising sites that don’t use SSL, your entire site needs to be behind SSL encryption. This includes any assets, stylesheets, images and scripts. Not only should this help to increase your Search Engine Optimisation efforts, it also helps to protect your user, particularly if they’re entering potentially personally identifiable information in any page.
If you’re not using compression, you’re wasting precious bytes and load time. Your assets should all be minified to remove excess whitespace – which can sometimes take up kilobytes of data – and other things such as comments not required for the user.
Once you’re minified, you should look to implement gzip compression for actually serving up the contents of those files. This uses GZIP to compress your files before sending them, and the browser handles the decompression. The idea being that the smaller the files are, the faster they will transfer.
Yahoo has found that enabling compression across a website can decrease page size by up to 70% and could dramatically increase your eCommerce conversion rate.
No matter how good your caching and compression is, if you’re sending huge images to your users, it’s going to kill your sites performance, reduce your eCommerce conversion rate and your users will leave.
It may take time, but using a tool such as Photoshop to resize the image and compress the image down to a reasonable file size will give you immediate and huge performance gains. More often than not, your product supplier will supply you huge, detailed product images, often in the megabyte sizes, and these are unnecessarily large. Also, this gives you an opportunity to artwork your images, repositioning the image to suit your store, as well as correcting issues such as oversaturation or colour imbalance.
This is more a training issue – it’s important for your store managers and editors to understand the importance of correctly editing images prior to upload, rather than relying on your framework to manage the process.
I’ve lost count of the number of eCommerce search engines that provide unrelated search results when looking for products, and it’s a navigation killer. With users expecting instant and accurate results, not providing them with the ability to find or filter the results will bring frustration and confusion.
Out of the box packages such as Magento provide a standard search result, but with anything more than a simple query, they start to struggle. Use a powerful search plugin such as Solr or ElasticSearch, designed to index your products and provide you with highly-relevant results fast. Along with the right results, your customers expect to be able to filter. We often recommend layered navigation, which allows your user to filter by attributes such as colour, price and size.
Packages such as Magento come with a basic layered navigation but there’s loads of plugins out there to enhance this with more powerful filters.
It’s very easy to add 12 analytics packages, 3 chat scripts, 5 user session trackers and 100 social plugins to your package, but you need to understand the tradeoff that these packages bring in terms of performance.
Loading from all these third parties takes time, as does executing the actual scripts required for the packages to work, so it’s important to regularly audit your store and ensure you only have tools installed that are:
Having a chat tool installed that is never online is 1000 times worse than not having a chat tool installed at all. So if you’re not using it, get rid of it.
We know the term ‘responsive design’ but what does it actually mean? It means taking care of users regardless of screen size, device or platform.
With 65% of online users predicted to be using mobile for casual browsing (and shopping) by 2021 it’s important to not just cater for them but to optimise their experience on your store. This means not just modifying, but redesigning interfaces for mobile users, removing functionality that’s not needed for that type of browser and ensuring that all the important information fits above the fold on a mobile device.
Have a look on your store on a mobile and check if functions like image zoom functions work, whether popup windows obscure the interface and whether your navigation menu is usable on smaller screens. All too often, we come across a huge mega menu containing hundreds of links, graphics and adverts that look excellent on a desktop but awful on mobile devices – even on landscape orientation.
Be aware that a responsive site is different to a mobile site.
Mobile sites are often a completely separate website to your main website, and cater only for mobile devices. Whilst this is better than no mobile capability, it’s important to aim for a fully responsive website, that adapts and changes according to screen size.
Google uses this as a key ranking factor, and clearly distinguishes between the two formats. You also need to be aware of the different limitations of mobile platforms. Mobile browsers are often using 3G or 4G data, so you should be careful not to load huge assets, big images and mammoth stylesheets. Instead you should be loading only the CSS required for the mobile display. Combined with using HTML5 tricks such as SRCSET to load only the images specific to that device size. – most of which are often much smaller and don’t consume bandwidth as the larger image sizes do.
Finally, another immediate gain is to enable a caching system on the server.
For the more technical audience, the load time has been shown to reduce by up to 90% by simply installing Varnish. Granted, to get Varnish setup on the server requires a little configuration, mostly to do with hole-punching dynamic information through Varnish’s cache. But, there are loads of links out there to explain how to do this, especially with Magento. In fact, there’s already a few modules out there such as Turpentine which take a fair amount of pain out of doing this. You should tackle this last, once you’ve finished the rest of the list, in an effort to squeeze those last moments of performance from your store.
By following the above steps, you’re well on your way to optimising your stores eCommerce conversion rate.
There are, however, still lots of steps you can do to increase your performance, and it’s essentially limitless as to how far you can take it. Stores like Amazon and eBuyer have entire campuses worth of teams dedicated to streamlining their stores for speed and usability. Maybe you don’t have the resource to go as far as these, but making some basic changes can position your store to better take advantage of higher rankings and an increased eCommerce conversion rate.