Why you need to implement Accelerated Mobile Pages for your Magento site

Magento AMP integration

Business is going to be completely mobile. Over 10 Billion mobile connected devices are currently in use. Talking about statistics on mobile e-commerce in the United States in 2016 we see that:

  • 125 million U.S. users own smartphones
  • 50 million U.S. users own tablets
  • 62% of smartphone users have made a purchase online using the mobile device
  • 80% of buyers used a mobile phone inside of a shop to either view product reviews, compare prices or find alternative store locations.

Thus if you don’t want to be behind, you would better to start customizing your eCommerce website to suit mobile visitors.

Responsive website design or a mobile theme are not enough. Why? Let’s find out…

Probably you were in the situation when you begin browsing an information, a text starts appearing in overview, then you see ads and images and you still keep scrolling until you see the info you really need. It takes 8+seconds to load. What do you usually do when you are tired of waiting? In common, you drop off the page.

So other users do. In case you are store owner, you have not time to show the stuff you are selling, indeed.

What is a solution for downloading your store content faster?

Successful customer experience is above everything else, as always. More than half of the world's web traffic comes from mobile phones. So, we should be thinking mobile first.

Website loading speed is a key to success. Everybody knows that the faster the page response the better the user experience. So, there should be an efficient solution that provides users with fast and rich performance on mobile devices. We are sure that you know some tools speeding up your website.

Do you know about the most innovative one?

This is Google Accelerated Mobile Pages (AMP) project.

As soon as Google started building AMP pages, this improvement of their search results on mobile devices churns faster. The main goals of AMP are:

  • Reduce page load time
  • Simplify the requests a browser should make.
  • Diminish the amount of data required to bring the improvement to the browsing experience

We're determined to earn our users' satisfaction by providing them with AMP integration. If you want to join us, keep reading...

What is AMP and how it works

In fact, AMP is another set of rules and scripts to display web pages. We recommend you to comply with these rules to ensure a quick work site on a mobile device. While applying this set for your website, you are allowed to use a list of available html-tags and finished components.

Let us consider two situations.

Number 1

We enter the search query in search field, then see a few results. We click and wait about 2-3 seconds while navigating to another page.

Number 2

With AMP we enter the search query in search field and we see the results with green lightning bolt icon that highlights the information stories on AMP-enabled websites.

Then we choose an article or a story we’re looking for, click and keep reading the AMP version of a story. You'd be surprised how quickly AMP-page content is displayed here. Please notice, that we still stay in Google that loads the content of a selected page not from server the content is from, but the stored content from the server closest to you. So, don't worry if you are on other side of the world - Google cares about you.

Technically speaking there are three basic parts in AMP:

AMP HTML. This is a kind of HTML language includes a new set of custom tags and properties related to AMP.

AMP JS. This is completely new Javascript structure for mobile pages that enables asynchronous loading. Please note: third-party JavaScript is not permitted with AMP.

AMP CDN (Content Delivery Network). This will cache your AMP-optimized content for fast delivery.

There are some nuances you can be interested in:

  • The cards with the relevant AMP-pages will be displayed at the beginning of search results.
  • A web-page available in AMP version will be marked by a small lightning bolt next to a search result.
  • There is always a button on AMP-page you can use to return to the search page.
  • If Google has not found enough number of AMP-pages that are relevant to your query, then the search results with a lightning bolt will not be displayed.

What if the content is updated?

During indexing Google caches the content on their servers. When you click on the AMP-card page, the cache automatically requests updates in order to serve and show already-date version of the page for the next visitor. In other words, Google sends a request to your site to see if a required page is refreshed.

Are you ready to implement AMP for your Magento website? Continue reading the post.

How website speed, traffic and search ranking are impacted by AMP

Before you start adding Accelerated Mobile Pages to your website, let’s discover the priorities of using Google AMP project.

AMP benefits for SEO

  • Accelerated Mobile Pages are specially useful to people who promote a content. It's news sites, blogs, educational portals, online magazines, etc. Nevertheless no matter what is your online business, you'd better create the additional AMP pages in your store to encourage SEO.
  • AMP project is not in itself a ranking factor. However the mobile-friendliness is a ranking factor. Plus we know the more visitors come to your website for reading a content, the more time they spend on site, the higher Google rates your website.
  • Moreover, Google reported, that fast downloads AMP-page will be marked with a special label «Fast» in the search results. Therefore a website including AMP will load much faster than conventional HTML-resources. What else is needed for a higher position in Google SERP.

AMP benefits for speed

Site speed factor is one of the crucial for site ranking. Accelerated Mobile actually increase webpage loading speed on mobile devices. In other words, this Google project is a speed optimization for Mobile Web.

AMP benefits for traffic

There are a few reasons why AMP affect the traffic to your website.

  • AMP results (not the organic) will appear at the top of search results first . So if you even have a number one ranking in organic, your results will be dropped down if you don’t have AMP.
  • With AMP your web pages with rich content like video or graphics alongside ads will load much faster than ever. As soon as visitors estimate your site content, they will remember your interesting webpages as fast and easy loaded. Be sure that satisfied clients will come back to your site again.
  • The traffic improvement is also caused by fast loading of mobile pages. There is no reason to click off the page that loads immediately.

How to implement AMP

With Google AMP you receive a second mobile theme optimized for AMP. In case you integrate AMP, the non-AMP pages of your Magento site will include a reference to notify Google that your store is AMP friendly. Once Google re-indexes your website, your AMP pages will be available via Google cache. They will load much faster than regular mobile pages. That is a main difference between mobile theme and AMP version.

Actually there is no need to translate all pages in AMP-format. It would be better to apply the AMP set of scripts only to the pages where a content plays first fiddle.

How to get started...

First you have to visit official AMP project site and learn how to create AMP page. You can see some samples of valid AMP HTML code there. However Accelerated Mobile Pages can be difficult to implement if you are not a developer especially to your ecommerce site. This is much easier to enable AMP for your site using a module.

And furthermore, if you are Magento user, you have to know that both Magento and Magento 2 do not provide a support of AMP right out of the box. So, you will have to create a special theme that will generate AMP code for all main pages.

It’s a kind of hard to do this. Isn’t it?

Fortunately, there are ready to use AMP solutions in e-commerce software market. Today we offer to check the next module...

AMP solution for Magento

If you are still wondering how to integrate AMP in Magento project, we have a solution. Welcome to try out Accelerated Mobile Pages extension - one the best AMP modules developed for Magento platform.

This module is an AMP package for Magento. It consists from AMP theme that brings lightweight CSS styles powered by SASS, and AMP module that automatically converts all known tags and blocks into amp compatible elements.

What can you do with Magento AMP plugin?

  • You can add AMP pages to your eCommerce site.
  • Design fully-functioning AMPed product page. All product types are supported with and without custom options.

  • Create the homepage that is rendering for AMP site.
  • Create separate AMP pages for category, product comparison pages, catalog search and CMS pages.
  • Use integrated Wordpress blog Fishpig_Wordpress module.
  • Track user activity on AMP pages via integrated Google Analytics.
  • Upload unique logo for AMP theme.

Finally, you can follow how your website is getting to the top of Google search results.

Testing AMP

To be or not to be AMP valid, that is the question. We suppose your answer is in the affirmative. Then it’s time to ask:

How to check whether the page is written in valid AMP HTML?

May the Google help you. Fortunately, a new AMP testing tool within the Google Search Console has been launched. All you need to do enter the AMP page URL and see the results.

This tool is quite friendly and helpful.

  • It is absolutely mobile friendly
  • If issues are found, you can click on them to see details.
  • The errors will be shown both in summary and in the source code.
  • Pieces of code with errors will be highlighted
  • There is a link to a preview of how your visitors see your AMP pages within the mobile search results.

There are also a bit more ways to check if your web page will be indicated by Google as AMP. Try to use the following AMP validators.

Conclusion

If you haven’t integrated AMP yet with your website, it's time to do it. If you are still hesitated, there is a little incitement for you:

Google is going to implement a mobile-specific index that is separate from the desktop index. So, we hope Google will give a search rank preference on mobile devices to sites with AMP.

By creating more streamlined experience for your mobile visitors, you will actually keep up with the time. The mobile ecommerce is overtaking desktop- it is only matter of time.

Enable AMP. Stay with us and monitor your progress.

Popular Magento Themes & Extensions

Leave a Reply