Quick Things to Know about Google’s Accelerated Mobile Pages

Date:Mar 26, 2016 Ages: Price: Type: Location:

With a huge chunk of search queries coming from mobile devices, it was a matter of time that search algorithms would be tweaked in that direction. You may have been hearing a lot about Google’s Accelerated Mobile Pages, but what’s the hoopla all about? Let’s talk about that and some singular elements that need attention.

What’s Google’s Accelerated Mobile Pages?

Google vs Facebook, the war is onGoogle introduced accelerated Mobile Pages or AMP in October 2015, which is an accessible framework that will allow creating pages that would load swiftly on mobiles and tablets. All of these started when Facebook came up with Instant Articles, which allowed hosting content in a faster way on its infrastructure for faster access on mobile devices. However, Google took its time to come with AMP, which is intended to be the ultimate open-source initiative for easy mobile content publishing.

Here’s a quick definition:

This past October, Google announced Accelerated Mobile Pages (AMP), a very accessible framework for creating fast-loading mobile web pages. The open-source initiative is designed to enable publishers to easily improve speed (and consequently, the user experience) for their mobile readership without sacrificing any ad revenue that they may rely upon.
Although experienced developers can often achieve similar results through intensive performance optimizations, publishers often neglect this due to resource constraints. AMP allows these optimizations to be easily achieved without altering the primary mobile web experience. SearchEngineLand

Time Calling For AMP

Now, Apple (With Apple News) and Facebook started the initiative, and by time, Google is a tad behind. However, it is essential to understand why Google’s Accelerated Mobile Pages is essential.
1.    Firstly, mobile pages on many CPU-constrained devices are taking ages to load. Constant ads further burden the experience, and many users don’t have fast access to Wi-Fi, which does impact the overall viewing experience.
2.    Secondly, most of the responsive design elements do tend to be heavy when checked on mobile. No matter the skills of the developer, it may be hard to make browsing as smooth on mobiles with the same design as compared to desktop.

While most responsively designed websites look fine on screens of all sizes, they often contain a lot of the baggage of desktop websites when viewed on mobile. When Paul Irish did a performance audit of Reddit, he discovered that a great deal of the overhead could be traced back to an asset called SnooIcon, the Reddit mascot rendered in SVG so that it could be animated (by a third-party library, meaning more overhead) on mouseover — not a situation in which assets frequently find themselves on mobile devices. SmashingMagazine

How does AMP Work?

Pretty obvious, Google just wants to better mobile viewing experience with Accelerated Mobile Pages, but how does it work? In the simplest words, AMP is like a subcategory to HTML, which will only have very little JavaScript components. The focus is more on creating HTML readable content than interactive content. Also, you are not allowed to use third-party JavaScript, and all form elements are gone.  Here’s a quick take.

So as Will said, it’s like a diet HTML. So certain tags of HTML you just can’t use. Things like forms, that are out. You also need to use a streamlined version of CSS. You can use most of CSS, but some parts are falling under best practice and they’re just not allowed to be used. Then JavaScript is basically not allowed at all. You have to use an off-the-shelf JavaScript library that they provide you with, and that provides things like lazy loading.
So the idea is that the whole platform is designed just for pure readability, pure speed. Things such as images don’t load until they’re scrolled into view, and the JavaScript does all that for you. We anticipate they’re going to be at the point where the JavaScript library is built into certain operating systems so you don’t even need that either. And then all of this is designed to be really heavily cached so that Google can host these pages, host your actual content right there, and so they don’t even need to fetch it from you anymore. Moz.com

How to start with AMP?

get started with google accelerated mobile pagesThere are always a few things that are considered to be standard implementations to any page. The list includes forms, comment sections and query sheets. These things cannot be a part of AMP. So, developers will have to create two versions of every article page – one with all features, and another for AMP. There is also a strong need to understand the use of images and multimedia, which has an enormous impact on the mobile viewing experience.

It is also likely that you will have to rewrite your site template to accommodate the restrictions. For example, all CSS in AMP must be in-line and be less than 50KB. Due to loading-intensiveness of custom fonts, they must be loaded using a special amp-font extension, in order to better control that loading.
Multimedia must be handled specially. For example, images need to utilize the custom amp-img element and must include an explicit width and height. (When converting a legacy website to an AMP template, this can be a major pain if the width and height attributes aren’t already being used). Additionally, if your images are animated GIFs, you need to use the separate amp-anim extended component. SearchEngineLand

Final word

Now, AMP is different from Facebook Instant Articles and Apple News, for the fact that it doesn’t work like a standalone app but tends to focus on web-based experience. Instead of focusing on interactive patterns, AMP leans towards performance, which may help it, surpass the other two giants in a short time.