With the mobile-first index fast approaching, we wanted to take a look at some of the options available to webmasters when it comes to readying yourself for the switch to the mobile-first index.
Announced way back in November 2016, the mobile-first index will see Google shift from ranking websites based on their desktop content, to their mobile content. Whilst no official date has been set by Google for the change, Google’s Gary Illyes announced at SMX Advanced in Seattle back in June 2017 that this is likely to start rolling out in early 2018.
TL;DR
If you don’t have time to read the whole article, feel free to skip to the bits that you are most interested in:
- What is the mobile-first index?
- Why is Google moving to a mobile-first index?
- How to prepare for the mobile-first index
- 3 ways to speed up your mobile website
- Accelerated Mobile Pages (AMP)
- Progressive Web Apps (PWAs)
- PWAMP (Progressive Web Apps with Accelerated Mobile Pages)
- Summary
What is the mobile-first index?
For those of you who may not know what the mobile-first index is or what it will mean for webmasters, here’s a quick summary. From early 2018, the way Google indexes the content on the internet will be based off the mobile version of your website and not the desktop.
But what does that mean for my website?
Well, for many people, there won’t be much to do. If you have a mobile responsive website, where the content on a mobile is exactly the same as on the desktop, then you’re good to go. If however, you have a separate m. website for mobile or you choose to show users less information on a mobile device compared to desktop to deliver a better user experience, then you need to start looking at your options.
Why is Google moving to a mobile-first index?
With the number of mobile searches overtaking those carried out on a desktop, it’s no secret that Google is working hard to improve the mobile web. The way websites are delivered to a mobile user has long been a focus for Google. From improving the speed at which they load to the way people engage with content on your mobile site – Google wants designers and developers to think of the mobile user first.
By pushing us towards an index that is based on mobile content, Google is forcing webmasters, designers and developers to change their thinking. Whilst many people might say they design and develop ‘mobile first’, the reality is that most still focus on the desktop first and then convert to mobile.
How to prepare for the mobile-first index
If you already have a mobile-responsive site that mirrors your desktop, there is not a lot you have to do. Ensuring your pages are fast loading is an area where there are potential marginal gains to be made. Fast loading sites on mobile tend to be more engaging. In a 2016 article, Think with Google suggested that mobile sites should load in under 3 seconds. They found that the average e-commerce site in the US was taking 6.9s to load. Clearly, there are improvements that can be made here and site speed and UX are two clear areas where improvements can be made.
So what now?
We recommend focusing on site speed as one of the main areas where you can improve your mobile experience and optimise for the mobile-first index. There are of course other elements for designers and developers to consider. In a recent guest post on Mango Matter, we took a deeper dive into 5 key areas for designers and developers to work on but in this post, we want to focus on speed.
3 ways to speed up your mobile website
Whilst your page load speed may be a ranking factor (and has been since 2010) there are very marginal gains when it comes to fast vs super-fast websites. If your page score 85/100 in the Google Page Insights Test or 100/100, there is going to be very little difference in your ability to rank. There are however big benefits in terms of user experience:
- Improve conversion rate
- Customer retention
- Reduce bounce rate
Let’s take a look at 3 ways to speed up your mobile experience.
AMP (Accelerated Mobile Pages)
An AMP Carousel. Credit: http://searchengineland.com/googles-amp-carousel-working-seo-insights-kanye-west-266412
The 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.
Here are some pros and cons of switching to AMP:
Pros
- It improves your server performance – if you are seeing a large volume of your traffic coming from mobile, switching to AMP will reduce the load on your servers and improve their performance.
- Improved UX – a faster loading mobile experience has the knock-on effect of improving the user experience. Sites that have moved to AMP have reported lower bounce rates, more time spent on page and importantly, increased conversions.
- Ad visibility – whilst there were some initial teething problems with the Ad delivery, this has been well and truly ironed out. A review of the performance of ads in AMP by Double Click last year showed that, compared to non-AMP pages, ads on AMP have led to:
- 80%+ of the publishers realising higher viewability rates
- 90%+ of the publishers driving greater engagement with higher CTAs
- The majority of publishers seeing higher eCPMs (Impact and proportion of lift varies by region and how optimised the non-AMP sites are)
Cons
- AMP has a small set of HTML, JavaScript and CSS – there are limitations to the amount of customisation you can do and stripping back your current site of some of the key HTML, JS and CSS elements can sometimes lead to pages that are not as ‘attractive’ to the end user.
- Time – whilst there are plugins available that will strip back your current content and make it AMP validating, there is going to be a time investment needed to get AMP right and get the most out of the move. If you already have a fast performing site on mobile, that time may be best spent elsewhere.
- Your content will be cached at google.com – meaning some restrictions to the analytics data you can pull out. Whilst Google is working on improving this, there are still limitations so if you really rely on detailed analytics data, then this will require further research.
PWAs (Progressive Web Apps)
PWAs are an alternative to moving to AMP. They are also a good alternative to traditional native mobile apps. They are relatively easy to manage and don’t require any ‘installation’ as they are essentially just web pages.
Here are some of the pros and cons of PWAs:
Pros
- Quick loading – Service workers allow your apps to load nearly instantly and reliably, no matter what kind of network connection your user is on. PWA pages can also be made available offline as content can be cached locally.
- Presence on the home screen – Web app install banners give you the ability to let your users quickly and seamlessly add your web app to their home screen, making it easy to launch and return to your ‘app’.
- Search engine friendly– Since PWAs are essentially websites, they are discoverable using search engines because of their W3C manifests and service worker registration, unlike native applications.
- Linkable and sharable – Since PWAs are essentially web pages, users are able to quickly and easily share and bookmark the URL, unlike native applications.
Cons
- Not all browsers are supported – While newer versions of Chrome, Opera, and Samsung’s Android browser support PWA, IE, Edge, Safari and many custom and proprietary default browsers do not. At this point, Safari alone has close to 50% of the mobile browser market.
- Not all native device software functionality is supported – PWA support is limited on Android devices, and they do not support functionality such as home screen shortcut prompting and notifications on iOS devices. In the U.S., iOS is about 50% of the mobile device market.
- There is no central downloadstore – If you are thinking of replacing your current native app with a PWA, be aware there is no need for the App store which could make discoverability more difficult. Alternatively, there is no barrier to entry of people having to go through an App Store to discover your PWA which could be a potential plus point.
You can find out more about PWAs on the Google Developers Website or watch this cool video.
PWAMP (Progressive Web App with Accelerated Mobile Pages)
PWAMP is a term that was first coined by Google’s Gary Illyes at SMX Advanced in Seattle in June 2017. In his opening keynote, Illyes talked about the importance of mobile site speed and suggested a hybrid mix of a Progressive Web App and Accelerated Mobile Page could deliver the faster experience for mobile users as well as delivering the best user experience.
A PWAMP site would basically use the pared-down AMP HTML, CSS and Javascript and be built as a PWA. Using the stripped back AMP code ensures that pages are ‘light’ which of course delivers a super-fast experience. Combine this with the benefits of a PWA and you have all the ingredients for a fast-loading super-site!
Let’s take a look at some of the potential pros and cons of building a PWAMP website:
Pros
- Super-fast loading – as PWAMPs would take all the best bits from AMP and PWAs, this will make them super-fast loading. Stripped back HTML, CSS and JS combined with the efforts of the service workers should deliver web pages to users in less than 1 second
- Accessible offline – as PWAMPs would be set up like a PWA, users would be able to cache content locally on their device for reading later, offline. This is great for business people who may be about to board a flight who can quickly cache the content from the daily newspapers to their device for reading on board.
- Search engine friendly – a PWAMP site is discoverable by all search engines meaning your fast loading content should rank extremely well. Whilst not all browsers currently support PWAs, this is likely to change. It will be interesting to see if Safari come on board with PWAs moving forward.
Cons
- Your pages won’t validate as AMP pages – whilst your PWAMP may be build using AMP HTML, CSS and JS, they will not validate as true AMP pages as it will break AMP rules elsewhere on the page. For most non-publishers, this is not an issue.
- Difficult to validate PWAMP sites right now – there are issues with validating PWAMP sites right now due to issues with JavaScript, however, Google is working on this.
At this moment in time, PWAMP is perhaps not a realistic option for most webmasters. Our recommendation would be to look at the implementation of AMP code (HTML, CSS and JS) to see how you can strip back on these elements on your web pages that take time to load.
Summary
Now is the time to evaluate your current mobile offering. Do you have a native app? Is your mobile site responsive or standalone? How fast is your current site on mobile? Once you have the answers to these key questions, you will be in a better position to decide whether switching to a PWA is worth the time investment.
If people are not downloading your native app. If your current mobile site is a standalone or if your current site is slow to load, it could be that a PWA offers a great solution that meets all your needs.
One thing that is clear is that there are exciting times ahead with plenty of opportunities in the mobile space. We urge you as webmasters, marketers, designers or developers to start thinking about this now and think seriously about the best options for your customers and the mobile experience you want to deliver.
We are more than happy to sit down over a coffee or a beer and talk you through these opportunities and make recommendations for you and your website moving forward. Just drop us a line and we will be happy to come and see you.