"Helping Businesses Create, Optimize & Grow."

Vorbly Blog

BE IN THE KNOW. IT'S FREE!

Digital Marketing Best Practices.

Learn How To Grow Your Business.

Loading...

Accelerated Mobile Pages (AMP): A Definitive Guide

Updated: Apr 6, 2018

Google's Accelerated Mobile Pages Project

Google recently organized a series of AMP Roadshows around the world to promote their Accelerated Mobile Pages (AMP). The roadshow was designed to enable web developers and marketers to build beautiful, user-friendly and interactive webpages.


We were invited to attend the AMP Roadshow at Google Chicago on the 27 March, 2018. In this article, we have summarized the content of the roadshow and created A Definitive Guide for Accelerated Mobile Pages (AMP).




The Agenda

  1. Introduction To Accelerated Mobile Pages (AMP)

  2. How To Personalize & Add Interactivity For AMP Webpages?

  3. AMP In Production

  4. AMP & Progressive Web Apps (PWA)

  5. What's Next For AMP?

  6. Q&A With Speakers

  7. Getting Started With AMP (Beginner Code Lab)

  8. AMP Code Book



1. Introduction to Accelerated Mobile Pages (AMP)


What Is AMP?


AMP is a library to build fast and user-friendly webpages. Is AMP new to you?



How AMP Evolved?


The AMP Project was launched to make content webpages faster, beautiful and more user-friendly. In 2018, the focus has shifted to monetizing AMP with AMP Ads and enhancing e-commerce websites.

AMP Project Timeline

Upcoming Developments


Key Mobile Statistics


As consumers use mobile devices to search for information and shop online, businesses need to work towards optimizing their websites and providing the best mobile experience.

Key Mobile Marketing Statistics


Which Industries Can Benefit Most?


Highly competitive industries such as e-commerce, travel, food and review websites can benefit the most from the AMP project. Brands need to understand how mobile has changed consumer behavior. Mobile devices have empowered consumers to choose which products and media to consume and as a result, increased customer expectations.

"If you as a brand can’t provide that service to them when they want it, they will move on quickly. They find another brand or another experience.” - Amy Pascal, VP and Head of U.S. Marketing for Lego
AMP Focus Industries For 2018.

How Marketers Can Implement AMP Webpages?


Implementing AMP webpages for your business does not have to be all or nothing. You can choose to build,

  1. Entire Websites (e.g. AliExpress)

  2. Only Landing Pages (e.g. Rakuten)

  3. Part Of Your Website (e.g. business blog)

Let's get started with AMP! The following sections will guide you through the steps of implementing AMP for your business and provide case studies from businesses who have successfully implemented AMP webpages.




2. How To Personalize & Add Interactivity For AMP Webpages?


In 2018, AMP is focused on developing faster and better e-commerce websites. As the e-commerce industry develops, customers have higher expectations and are less forgiving. And e-commerce marketplaces have to provide a fast, seamless and user-friendly online shopping experiences in order to be successful.


In this section, we will show examples of how you can customize your e-commerce website and illustrate it with a real-life example from AliExpress.



AliExpress


AliExpress is one of China's biggest online marketplaces made up of small businesses offering products to international consumers. In 2017, AliExpress converted its entire mobile website to AMP and here are the results.

AMP allows businesses like AliExpress to create functions such as autocomplete, shopping carts, filters, product customization and recommend related products. Giving customers a personalized shopping experience.



How To Personalize Your AMP Webpages?


<amp-selector>

For product customization, the amp-selector component allows users to choose from a list of option (e.g. product color). View code.


<amp-list> + <amp-mustache>

Recommend related products to your customers. Use both amp-list and amp-mustache components to fetch dynamic content from your database (JSON) and show it in a simple, structured template. View code.


<amp-bind> + <amp-selector>

Add custom interactivity to your webpages. For example, the amp-bind component allows you to change the UI of product pages if users select items that are not available. View code.


<amp-bind> + <amp-mustache> + <amp-date-picker>

For booking and reservation websites. Allow users to choose a single date or period. block certain dates, set minimum days and deal days. You can customize the date picker by adding an information panel that shows selected dates. View code.


<amp-form> + <amp-bind>

Create your own customized e-commerce checkout form. Collect user's name, email address and delivery information with a simple and easy-to-use form. View code.


<amp-form> + <amp-bind-macro>

Customize your e-commerce checkout experience. For example, use substring (0,1) == 4 function to read the first digital of customer's credit card number to determine the payment method (e.g. Visa or MasterCard). TBC.


<amp-access> + <amp-mustache>

Personalize content and user experience for users who login to your website. Ideal for businesses that operate on a subscription model. View code.


<amp-list> + <amp-pixel>

Personalize content based on users' past behaviors (e.g. shopping history). View code.


<amp-list> + <amp-mustache>

Geolocation allows businesses to personalize content and experiences for customers based on location. For example, you can vary the shipping price by country. View code.


<amp-anim> + <amp-position-observer>

Perfect for creating floating and fixed navigation menus. You can also change the transparency of the navigation menu when users scroll through your webpage. View code.


Now that you are familiar with some of the basic components of AMP, we will look at how AliExpress used these AMP components in their mobile website.



How AliExpress Used AMP?


AliExpress used AMP components such as amp-form, amp-bind, amp-anim and amp-selector for their shopping cart.

AliExpress Mobile - AMP Webpages

Get more AMP codes.




3. AMP in Production


In this section, we will guide you through the 5 steps of implementing AMP webpages.


5-Step Process: Generate > Optimize > Validate > Measure > Distribute



Step 1: Generate


There are three options available for creating AMP webpages, 1) Hand Code, 2) Third-Party CMS (e.g. WordPress) and 3) Develop In-House CMS.


Using a third-party CMS provider is the best and easiest option for small businesses looking to create AMP webpages. Some CMS providers (WordPress and Drupal) also offer AMP plugins and converters to convert existing webpages.


When you use plugins and converters, do ensure that your webpages look correct after converting to AMP. In some cases, the look and feel of converted pages are vastly different from the original. In such cases, you will need to amend the AMPHTML code.



Step 2: Optimize


Optimize your AMP webpages by loading only scripts and CCS relevant to your pages. Loading irrelevant scripts may slow your webpages or result in errors. Although AMP has some image optimization features, you should still adopt best practices such as saving images in JPEG format and reducing image sizes to 20 - 30KB to increase page speed.



Step 3: Validate


If you use plugins and converters or if your website has user-generated content, errors and invalid pages might occur. You should continuous integrate webpages and monitor them to ensure that the AMP code is valid.


Uses these validators to check your AMPHTML code:

  • AMPHTML Validator.

  • AMPHTML Validator + Cron Job for user-generated content or pages without a search presence.

  • Google Search Console for webpages indexed by Google. You can also set alerts in Google Search Console to notify you of any errors.

Other tools to test the performance of your webpages:


Step 4: Measure


<amp-analytics>

Measure, collect and batch data for activities on your AMP webpages. The amp-analytics component supports events such as Pageview, Anchor Clicks, Timer, Scrolling and Carousel Changes.


<amp-experiment>

Allows users to conduct A/B testing or user experience experiments on AMP webpages. With this component you can test new AMP features and webpage layouts to understand user preferences and behavior. Note: You cannot use cookies for A/B testing of AMP pages because pages are loaded from AMP cache.

A/B Testing Example

Step 5: Distribute


AMP Pages can be distributed through various search engines (e.g. Google, Bing, Baidu) and social media platforms (e.g. Facebook, Twitter).


When users use mobile devices for search, AMP pages are more likely to be featured in Google's Search Carousel. The AMP icon helps users to quickly identify webpages that will load quickly and provide a good mobile experience.

Google's Search Carousel Features AMP Webpages.

AMP documents have three types of URLs, 1) Original URL, 2) AMP Cache URL and 3) Google AMP Viewer URL. The reason for having multiple URLs is that when users search for an AMP page, data is retrieved from AMP Cache to make pages load faster.


If your AMP page does not appear on Google Search, try using Google Search Console to identify issues. In some instances, there could be a content mismatch error between your non-AMP (canonical) and AMP pages. Ensure that both versions of your website have similar content to prevent content mismatch.




4. AMP & Progressive Web Apps (PWA)


AMP or PWA? Or Both?


What Are Progressive Web Apps (PWA)?


Progressive Web Apps are regular webpages or websites that appear to the user like traditional applications or native mobile applications. PWAs combine features offered by most web browsers with the benefits of a mobile experience.

"80% of people use top 3 mobile apps only"

As the trend shifts towards designing mobile websites, both AMP and PWA are often seen as competing technologies. According to AMP, AMP and PWA are complementary rather than competing technologies.


Do I need to build two websites with separate backend systems?


AMP pages are fast but lack many features (e.g. push notifications). While PWA pages are slower (hindered by Service Worker) but are more interactive and have more features. Is there a compromise?



AMP As An Entry To PWA


AMP webpages load almost instantly. A good strategy is to make landing pages (entry points) AMP pages, then run the Service Worker in the background and later upgrade users to PWA pages. This strategy will provide users with a fast, seamless mobile experience with all the features of PWA.


<amp-install-serviceworker>

The amp-install-serviceworker component enables service worker to be installed in the background and cache contents in advance. View code.


AMP As A Data Source For PWA


For small businesses with limited development resources, using AMP cache as data source for your PWA is a good strategy to reduce costs.


By using PWA as an App Shell (or Native App) to determine the layout, style, fetch and display content from AMP cache. Caching allows users to access content even when they are offline. And this solution allows content and app to be managed independently without a need for two separate backend systems.


<amp-shadow>

AMP can be used in a shadow-doc mode where a webpage (PWA) can open several AMP documents by accessing 1 library (AMP cache). View code.



Rakuten Case Study


After Rakuten implemented a hybrid AMP PWA strategy, their webpages saw higher average time spent, click-through rates and unique users.

Rakuten Performance Metrics After Implementing AMP.


5. What's Next for AMP?


In line with AMP’s mission to provide user first content, there are 5 main objectives that the AMP team has set out for 2018.


#1 Help publishers build best app like content consumption experience


The AMP project will continue to enhance performance and add new features for AMP webpages. In 2018, the AMP team plans to develop features such as infinite scrolling, video content and AMP stories.


Infinite scrolling is not a new feature in web design. But with AMP, marketers can customize content based on users' behavior. For example, if users scroll through the first page too quickly, you can customize content in subsequent pages to engage users.


Video content should be dynamic. Videos can be paused or slowed down at the right moments to give users an opportunity to read other content on the page.


AMP stories are visually appealing vertical videos (like Instagram stories) that will capture users attention. The next step for the AMP team is to monetize these AMP stories.



#2 Enable e-commerce developers to build a better user experience


The goal for the team is to improve every stage of online shopping; 1) Exploration, 2) Shopping and Checkout and 3) Delivery and Service.

AMP E-Commerce Strategy

Focus on AMP bind to increase the interactivity and personalization of e-commerce websites. And to scale e-commerce AMP webpages.



#3 Maintain web as a vibrant marketplace for brands and publishers


Improving AMP Ads with a UX-first format and compatibility with both non-AMP and AMP webpages. Google is working with IAB to position AMP Ads as the default industry standard. Is this a bid by Google to consolidate and monopolize the online ad market?


The 2018 goal is to make AMP webpages indistinguishable from other web content to users. Ironically, in Google search, AMP pages are tagged with the AMP logo to help users quickly identify AMP webpages that will load quickly


For now, it looks like Google is trying to consolidate all online advertisements with its solutions and promote their AMP webpages. What does it mean for marketers and businesses? Search marketing might become sharper but more expensive.



#4 Be a great citizen of the open web


There are plans to merge non-AMP and AMP URLs into a single publisher URL.


When AMP was first launched, speed was a priority and pages had to be pre-rendered. In order to preserve the privacy of users, cached pages could not be stored on publishers' domains. Publishers should not know what people are interested in until they click through to their webpages.


The solution is to implement Web Packaging for AMP cache. Web packaging preserves the privacy of users while maintaining publishers' URLs. However, this solution requires all web browsers to be enhanced and it may take some time to implement.


Keep AMP open source allows contributors, web developers, tech companies and advertisers to make it a better ecosystem. For example, initially GIFs were not support for AMP, but developers found a need and created a new functionality to display GIFs.


Embeddability and portable content is a crucial feature of AMP. By allowing developers to embed AMP code easily and retrieve content from the AMP cache, increases the flexibility and usability of AMP.



#5 Delight users with advanced features


Today, Gmail is implementing AMP for email. The new feature is a powerful way for marketers to create more engaging, interactive and actionable email messages. Imagine being able to make dinner reservations without leaving your email window.


When AMP was first launched, JavaScript was strictly prohibited. Since then, AMP has reversed their stance and soon developers will be able to use JavaScript in their AMP code. The solution developed is a Sandbox Thread that acts as an emulator for JavaScript elements.




6. Q&A With Speakers



The Speakers


Joey – Engineering Manager AMP (first from left)

Kris – Engineer (second from left)

Cathy – Software Engineer (middle)

Aaron – Software Engineer (second from right)

Daniel – Software Engineer (first from right)



AMP Questions & Answers


Will geolocation features at the browser API (user) level be added to AMP?


The issue with using browser API for geolocation is that it raises privacy concerns. Users will have to give permission before you can use their location information. And this could negatively affect the user experience. Alternatively, use Client_IP to identify user location.



How do I contribute to the AMP project?


Visit GitHub (AMP Project) and follow instructions on how to contribute to the AMP project.



How can I become a (data analytics) vendor? Are there any certifications required?


AMP is compatible with many data analytics solutions. Vendors will have to write a segment of code and submit it for code review before your service appears on the list. There are no certifications required to become a vendor.



Will AMP implement desktop cookies for personalization and user tracking?


No, webpages are served from AMP cache. However, user data from your domain can be reconcile with data from AMP cache to enable you to use cookies for personalization and user tracking. Alternatively, you can use Client_ID for personalization and analytics.



Are there plans to launch an AMP CMS solution?


No, not that the AMP team is aware of. The current approach is to partner with CMS providers like WordPress and Drupal.



How are AMP pages shown on Google Search or Twitter?


AMP pages will be treated the same as other webpages. With that said, some search engines have special UIs for AMP pages. For example, Google Search emphasizes AMP pages with an AMP logo.



How will AMP affect SEO and a webpage’s search ranking?


Google has said that AMP is not a search ranking signal. However, page speed and performance are used for both desktop and mobile search rankings.



Is Gmail the only AMP email provider?


For now, Gmail is the only email service provider that is offering AMP enhancements. However, it is possible that there will be more email providers on board in the future. As a fall-back option, marketers should create both AMP and non-AMP emails in case some email providers do not support HTML.



Can you use AMP HTML for non-AMP webpages?


Yes, you can use AMP features on non-AMP pages (also known as dirty AMP) by embedding AMP HTML in your JavaScript code. However, developers need to pay attention to run-time otherwise it won’t work.



Is it possible to use AMP for Augmented Reality (AR) or Virtual Reality (VR)?


Yes, it is possible. However, we have not seen a lot of interest in this space.




6. Getting Started With AMP (Beginner Code Lab)


We attended the beginner code lab to find out how easy is it to create an AMP webpage.


Google provided step-by-step guides on their AMP Projects website to help guide web developers and marketers to

  1. Create your first AMP page

  2. Convert HTML to AMP

  3. Add Advanced AMP Features


Note: You should have a basic knowledge of HTML, CSS and JavaScript before starting on these step-by-step tutorials. Alternatively, use AMP compatible CMS providers such as WordPress and Drupal.




7. AMP Code Book


We have compiled common used AMP codes for easy reference. Click on the links to view each code and various use cases.


Layout

<amp-accordian>

<amp-app-banner>

<amp_carousel>

<amp-fit-text>

<amp-font>

<amp-fx-flying-carpet>

<amp-image-lightbox>

<amp-lightbox-gallery>

<amp-position-observers>


Content

<amp-audio>

<amp-dailymotion>

<amp-gfycat>

<amp-img>

<amp-lightbox>

<amp-lightbox-gallery>

<amp-video>

<amp-youtube>


Social Media

<amp-facebook>

<amp-facebook-like>

<amp-instagram>

<amp-pinterest>

<amp-social-share>

<amp-twitter>



Interactions

<amp-anim>

<amp-bind>

<amp-date-picker>

<amp-form>

<amp-install-serviceworker>

<amp-list>

<amp-mustache>

<amp-selector>

<amp-sidebar>


Analytics

<amp-analytics>

<amp-experiment>

<amp-pixel>



Vorbly | Marketing Made Easy

Web Design Services For Small Businesses


Recommended Article:

3 Mobile Marketing Tips For Small Business