The future has arrived: your website must be ready to achieve mobile-first Google ranking.

It is now official: Google has announced they are migrating from desktop-first to mobile-first indexing (MFI) algorithms. This summer, the company will launch a robust MFI. Google continues to encourage online businesses to become more mobile friendly to stay relevant and also to provide website developers and administrators tools to create great business websites.

Here is a more granular approach on how you can adjust your WordPress-based website to a mobile-first world.

What is MFI?

MFI is an algorithm developed by Google to create and rank search results based on a mobile version of content, and also including ranking positions for desktop users.

The difference: pre-2015, desktop results took precedence. The situation changed when Google specialists observed that the number of users who searched from mobile devices topped the charts. Google then started improving the mobile experience step-by-step.

What steps did Google’s take towards a mobile-first world?

  • February 2015 – announced updates for a mobile-friendly search algorithm to rank mobile-friendly websites higher in mobile search.
  • April 2015 – kicked off mobile-friendly algorithm.
  • July 2015 – started AMP (Accelerated Mobile Pages) project to boost content availability for mobile users.
  • April 2016 – announced it had started experimenting with mobile-first indexing.
  • October 2017 –started downgrading mobile websites using obnoxious off-page advertising.
  • June 2018 – plan to start MFI working to full extent.

mobile-friendly search algorithm

What are the main strategies for mobile-oriented websites?

There are four main strategies to create a mobile-friendly website:

  • Responsive and adaptive website
  • Mobile version of a website
  • PWA (Progressive Web Apps)
  • AMP (Accelerated Mobile Pages)

Responsive and adaptive websites

In 2018, responsive and adaptive websites are the foundation of website development. CMSs like WordPress offer responsiveness by default.

Responsive websites tend to detect client type and adjust their layout based on the screen size of user device based on CSS code.

Adaptive websites use more advanced techniques making it possible to tailor the websites to the device itself, not just to its screen size. Adaptive website design provides greater flexibility with visual content like high-resolution videos, 3D models, and so on.

The main complaints about responsive websites are their sluggish response time (Google states average download time equals 22 seconds) and lack of usability. They are not always practical for the use on mobile devices.

Mobile websites

A special website version designed for smartphones and tablets differs from the main website and has a different URL. When there is a mobile website and the main website detects a user trying to access it from a mobile browser, it redirects user to a mobile version.

Usually, a mobile website is a simplified version of a desktop website. It works faster, consumes fewer resources and has less traffic.

The problem is often inconsistency.

Some sections on a webpage might be displayed incorrectly due to smaller screen sizes. In this case, developers tend to hide these sections in order to maintain high user experience. As a result, websites often hide relevant content visible on a full (desktop) version. For example, when you google something on a desktop, the search result is often unavailable when searching on a smartphone – a frustrating experience. Users cannot find information they have previously seen on desktop.

Conversely, business owners introduce mobile websites targeting their smartphone and tablet audience by creating mobile-only features unavailable from a desktop.

What does Google offer to improve user experience?

To help mobile users access content they want anytime, anywhere, without long loading time and browser errors, Google offers web developers two extra technologies: PWA and AMP.

PWA (Progressive Web Apps)

Progressive Web Apps are web pages or web apps that look like mobile apps with similar elements for interaction and navigation.

Good news: you can create an app from your WordPress website, right here, right now with minimal time and input, whether it’s a blog, an online store or a news portal and ready for offline usage—just like a native mobile app

Users download the DOM structure, save a website favicon on the screen and access the website through it.

pwa are web pages

PWA is comprised of three main components:

  • HTTPS – PWA supports only https; http is possible only for localhost.
  • Service Worker – a script the browser launches in the background separately from the app. You can maintain it in off-line mode, push notifications, background synchronization, etc.
  • Manifest – a simple JSON file with predefined fields. It permits specifying display parameters (full-screen mode, search line, start URL, etc.)

The following figure illustrates how PWA algorithm works:

PWA algorithm
During the design stage when planning website layouts, the application shell must be taken into account: What does the screen display? What UI components are crucial for the app? What resources does the shell require? This makes it possible to adjust content and make user experience native like.

Depending on planned user interactions, there are the following caching strategies:

  • Network or cache
  • Only cache
  • Cache and update
  • Cache, update, and upload
  • Built-in parked page

Also, PWA has many mobile features available through Web API, including but not limited to:

  • Web Audio
  • Web Speech
  • Web Bluetooth
  • Web Sockets
  • Geolocation
  • Battery Status
  • Vibration API

Now you can build a WordPress-based fitness tracker and a smart home!

PWA permits quickly downloading content, support features otherwise unavailable offline, compatible with many devices, easily update information, and more.

PWA is supported by all popular browsers, except Opera. Also, Microsoft creates its own store of PWA apps.

PWA mobile features

Regarding drawbacks:

  • Not all devices completely support it
  • Some features are still only available on native platforms
  • There are few smooth WordPress plugins for PWA, although WooCommerce will definitely help.

How business owners benefit from PWA:

  • Mobile app for minimum investment
  • In the longer term, more interaction with the website and increased conversion rates
  • Increased website download speed
  • Decreased abandonment
  • Improved ranking
  • Improved SEO
  • A tool to work with client base

Some successful PWA projects include:

  • Housing.com, an apartment renting service, decreased the abandon rate by 40% and increased conversion by 38% after  the launch of PWA.
  • Washington Post aimed to improve download time of its WordPress-powered website. Using PWA, the download time decreased by 80%.
  • AliExpress introduced PWA for its custom website. Conversion grew by 104%.

AMP

Accelerated Mobile Pages (AMP) is an open-source technology created to decrease download time of web pages—even with a slow network speed.

Business owners usually maintain their websites on their own servers or in the cloud. Depending on user location, it takes time to deliver content. This can be problematic when customers live on different continents. Previously, either additional servers (=extra costs) had to be located in the same geographical zone as users or users had to accept longer response time.

Now Google provides their own servers throughout the world to cache pages businesses want to be cached and users can download from Google servers in 0.7 sec. or less.

AMP algorithm looks like the following:

AMP drawbacks

Users get the page with a special AMP link. However, Google lets users see the original link of the AMP page, share it and download the original page. Google Analytics has a special section for AMP pages from where all statistics are visible.

Advantages of AMP

  • Easily cached and downloaded
  • Supports ads
  • Download time under 1 second
  • Best choice for static content
  • Chance to reach Google top stories

AMP drawbacks

  • No JavaScript allowed except the special AMP library
  • Lazy loading
  • Requires a simplified cascade version of tables
  • No monitoring of user behavior possible on AMP pages
  • Not suitable for online stores

On the bright side, Google continues working on AMP to make it more convenient for ecommerce, too. For example, displaying advertising was impossible six months ago. This is no longer true.

In conclusion. Google keeps investing in development tools to make mobile Internet a more convenient place. While there are responsive/adaptive and mobile websites, Google considers introducing new tools, PWA and APM, to improve user experience.

PWA helps create an app-like website and make it available from offline, decreasing download time and ensuring low power consumption: a great benefit for ecommerce.

AMP helps create special pages available for download from anywhere in the world within less than a second serving the needs of informational pages.