Preparing Your E-Commerce Site for the Mobile-First Index

Gavin Hirst
12 min read
Dec 8, 2017
  • Post on Twitter
  • Share on Facebook
  • Post on LinkedIn
  • Post on Reddit
  • Copy link to clipboard
    Link copied to clipboard
Google mobile first index

With 2018 just around the corner, we wanted to make sure you were prepared for some big changes that are coming in the New Year. If you manage an ecommerce site, or you have clients who have an ecommerce site, this post is going to outline how you can be preparing now for Google’s shift to a mobile-first index in 2018.

What is the mobile-first index?

Google first announced that they were moving to a mobile-first index way back in 2016. Since then, there has been a lot of speculation about when the index would swap out from the current desktop index to the mobile index, but as yet, we still don’t have a fixed date.

Back at SMX Advanced in June, Google’s Gary Illyes suggested it would be rolled out in early 2018 and later reports suggest it will be an extremely soft roll out which may have already started.

The mobile-first index is a huge shift for Google (and webmasters, developers, designers, SEOs). When the mobile-first index rolls out, Google’s index (how websites are ranked) will be based off the content on the mobile version of your website, not the desktop as is currently the case.

What does this mean for SEOs and marketers?

The move to the mobile-first index means probable changes. We have to assume that everyone by now has a mobile-friendly website; a site that can be accessed on a mobile device without the need to pinch and zoom. There are a couple of ways of doing this: responsive website design and a specific mobile website (usually an m. site).

If you have a fully responsive ecommerce website design, the chances are that the impact of moving to the mobile-first index will not be as big. Theoretically the responsive version of your site that Google sees on mobile is exactly the same as desktop. Sometimes, however, designers and developers like to tweak the content that is seen on mobile in order to deliver a better UX so it is still worth carrying out a parity audit of both your desktop and mobile versions to make sure you are not missing a trick.

If you have a separate m. site, then you need to pay close attention. Chances are you set up that site for a reason. To deliver a pared down version of your site on mobile to improve the UX. If there is a big disparity between the content on your desktop version and your mobile version, however, you could find yourself dropping in the rankings when the new index kicks in.

Anyone not jumping on board with this is going to get left behind, especially now that mobile traffic has overtaken desktop traffic and that trend is only going in one direction.

So, what can you be doing now to prepare for the mobile-first index and what are going to be the main things to focus on.

Let’s take a look.

Site/Page Speed

This is going to be one of the key factors that Google will take into consideration when ranking sites in their mobile-first index. Google is desperate to speed up the mobile web. Faster sites offer a much better user experience (UX) so improving your site and page speed on mobile will help you to rank better in their new mobile-first index.

Ecommerce sites in particular need to look at the experience they are providing to users on a mobile to ensure that more conversions are carried out on a mobile device rather than just researching a product on mobile and completing the transaction on a desktop.

Here are a few of the ways you can speed up your ecommerce site:

1. AMPThe Accelerated Mobile Pages (AMP) Project is an open source initiative to improve the mobile ecosystem. Thanks to the pared-down HTML that is used by AMP, it allows you to load your web pages much faster than regular HTML. Google also caches your content on their own cache to speed up load time even more. All this results in a much faster, sleeker user experience and should, in turn, lead to improved visibility in the search results.

Whilst this was originally targeted at publishers, we are now starting to see ecommerce sites slowly moving over to AMP. There have been big leaps in supporting the purchase path for users on an AMP site and whilst we are not quite there yet, it is only a matter of time before ecommerce sites can feel the full benefits of going AMP.

Benefits of AMP landing page

2. PWA Progressive Web Apps (PWAs) are an alternative to moving to AMP. Their main selling points include:

You can find out more about PWAs on the Google Developers Website or watch this cool video.

3. PWAMP(!) - a term first introduced by Google’s Gary Illyes at SMX Seattle, PWAMP is a combination of a PWA built on AMP HTML, JS and CSS. Whilst PWAMP sites may not validate as AMP pages, they are lightning fast and provide all the benefits of a PWA as listed above. They could be the future and one to keep an eye on. Read more about PWAMP here.

4. Do nothing – If your current mobile friendly, responsive ecommerce website is performing well, delivering a great UX and loading quickly, there may well be very little you can gain from moving to AMP or any alternative option. We would always recommend a full audit of your mobile site before deciding on any potential new path.

Conversion Rate Optimisation

We’ve already touched on this, however getting people to convert on a mobile device is a huge signal to Google that your site is delivering a great UX that meets the customer’s needs. For ecommerce sites, there is typically one goal: a sale.

There are lots of things you can be doing to improve that opportunity to convert but streamlining the checkout process is one that you can be working on now. Here are some tactics to help improve your conversion rate:

Note: Amazon’s Wish List is the perfect example. You can even make your wishlist public which can help with gift buying around Christmas and birthdays

Site Search

This is one of the most important elements of a great mobile-first site. When user access your website on a mobile device, you have a lossless screen to play with. That often means a lot fewer navigation options. In these instances, users will often resort to site search. Whilst burger menus tackle the navigation issue to some extent, a good site search is essential to successful ecommerce sites (both on mobile and desktop).

A quality internal site search function means that not only can the user find what they are looking for quickly and efficiently, but you can also gather data about the things that people are searching for, allowing you to refine your navigation, search function, and your content. Triple winner.

Site search settings

Things to consider with your internal site search include:

Gestures and Keyboards


This one may not seem like a big one, however, it can make a big difference to ecommerce sites. A mobile-first focussed website will often be one that tries to avoid the need for users to pinch and zoom, however in many cases, there is often both a need and a desire from users to pinch and zoom on an ecommerce site.

If you have products that people want to look at in more detail, it actually makes more sense to allow them to pinch and zoom that the auto-zoom that you find on a lot of sites. Giving the user the ability to go as small or as big as they want gives them much more flexibility to engage with your content and products.

A barrier to conversion in this instance is either the inability to zoom on a particular image, or worse still, a low resolution image that becomes badly pixelated when the user does zoom in.


Designing and developing an ecommerce site for the mobile-first index means thinking more carefully about the user experience on a mobile device. If a user is entering data into a field that is purely numerical, make sure you have enabled contextual keyboards that change based on the required inputs. The same goes for email fields, URLs as well as the standard text keyboard. Users install a wide variety of keyboards so don’t assume functionality – instead, preempt the user’s needs and meet their expectations.

Text Size, Tap Target and Padding and Scaling

Text Size

The User Experience on a mobile device is going to be crucial as we move towards the mobile-first index. Ensuring users can engage with every element of your content without the need to pinch and zoom helps to deliver a high-quality user experience.



Tap Target and Padding

Another key area for designers to focus on is the tap target and padding elements on the page. There is nothing more frustrating for a use than having to either pinch and zoom to click on a button on a page or worse still, clicking on a nearby button by mistake and have to click back. Either of these actions is likely to lead to a negative experience and the likelihood of a bounce off your site. Here are a couple of things you can do to ensure your tap targets are optimised:

1. Make tap targets at least 48px wide

2. Space tap targets at least 32px apart

Tap target settings


Scaling is another important element for responsive ecommerce site design. As we move to a mobile-first index, you should be designing for mobile first and then working out how that design will best transfer to a desktop. Your mobile-responsive designs should scale on a mobile device so they can accommodate both portrait and landscape device orientations. You should also allow your content and media to scale to the fill the device screen size, maximizing every inch of screen real estate – especially important considering the huge reduction in space available now.

Is your ecommerce site ready for the mobile-first index?

Hopefully, this post has given you some great ideas and insights into what needs to be done to prepare your ecommerce site for the move to the mobile first index. A lot of this comes down to design and development so speak to your agency or in-house team and find out what they are doing to ensure you are ready for the move. You can also check out this great post which looks at some of the elements that make up great website design.

If you don’t know where to start with all this, we recommend following these steps:

Whilst your website may be classed as mobile-friendly, is it really? Following these steps above will put you in a much stronger position and prepare you for the move to the mobile-first index.