AMP - Accelerated Mobile Pages Archives

Understanding The Google AMP Cache

AMP is a way to build web pages for static content that render fast. Accelerated Mobile Pages (AMP) is an open content ecosystem which aims at giving the user a great reading and surfing experience.

Speed has always been the main quality criteria for Google as page load speed is the first impression that the user gets about the website.
The AMP ecosystem works entirely on the concept of caching. Hence, understanding the importance of the AMP cache is imperative for every SEO and online marketer who, advocate the implementation of AMP to their clients.

amp-project

AMP in action consists of three different parts:
• AMP HTML
• AMP JS
• Google AMP cache

AMP HTML

AMP HTML is a subset of HTML for authoring content pages such as news articles which helps improve UX by reducing the page load time.

AMP JS

To avoid the delay in page rendering AMP manages resource handling and asynchronous loading but third-party JavaScript is kept out of the critical path.

Google AMP Cache

The Google AMP Cache is a proxy-based content delivery network for delivering all valid AMP documents. It fetches AMP HTML pages, caches them, and improves page performance automatically.

What is a Cache server?

A cache server is a dedicated network server or service acting as a server that saves Web pages or other Internet content locally. By placing previously requested information in temporary storage, or cache, a cache server both speeds up access to data and reduces demand on an enterprise's bandwidth.

What is Google AMP Cache?

The Google AMP Cache is a cache of validated AMP documents published to the web. It is available for anyone to use. Google products, including Google Search, serve valid AMP documents and their resources from the cache to provide a fast user experience across the mobile web.

The concerns regarding AMP Cache are:

• The major concern for many is that their pages are served from a cached server which is out of their control.
• Many are also worried about the fact that the cached version served to the user may vary from the original version.
• Analytics attribution is another concern regarding AMP.

But, in fact there is no reason to worry about the AMP Cache delivery network.

• Every time the AMP content is served from the AMP Cache, the content is auto updated, and the updated version is served to the next user.
• The AMP cache uses the "stale-while-revalidate" model. It uses the original server caching headers, such as Max-Age, to judge the freshness of the content.
• The AMP cache model attributes the traffic to the publisher through the <amp-analytics> tag. The AMP supports a large number of analytics providers.
• When the AMP page is requested from the AMP cache, it is validated first. The page will not be served to the user if any problems are detected. Hence, it ensures quality pages are displayed on the user’s device.
• The main reason for a fast and user friendly experience is the pre-rendering feature. Due to pre-rendering the pages are served instantly.
• This is pre-rendering undoubtedly can be done from origin servers instead of the AMP cache but that uses up the bandwidth, CPU resources and battery of that server. This may affect the speed and contradict the main purpose of hosting AMP pages.
• The AMP cache also ensures security against XSS as in does not allow Cross-site scripting in the main document.
• Moreover, AMP is a win-win for users, publishers and advertisers. When you search on a search platform, the AMP pages as they come from the cache they do not associate the search term to it.
Optimizations, Modifications And HTML sanitization

The Google AMP Cache performs optimizations and modifications, such as the following:
• Validates if the content meets all the AMP norms.
• The AMP Cache along with the document caches images and fonts too.
• Optimizes image dimensions to prevent memory issues and poor responsiveness.
• The amp-img tag removes the EXIF data and some metadata which can create issues or may be invisible.
• Converts GIF, PNG, and JPEG format images to WebP in browsers that support WebP.
• Serves over a secure channel (HTTPS) and uses the latest web protocols (SPDY, HTTP/2).
• In making the above transformations, the Google AMP Cache disregards the “Cache-Control: no-transform” header.
• All HTML comments are removed.
• Tag and attribute names are rewritten in lowercase.
• Attribute values are consistently quoted and escaped.
• All tags are closed, except for HTML5 void elements.
• Whitespace inside tags is removed.
• Text is escaped.
• Encoded text characters are simplified, using UTF-8 equivalent characters.
• Elements that can only be in the body get moved into the body.
• Outbound links are made absolute so that they continue to work when the document is served from the Google AMP Cache origin instead of the publisher origin.

The Google AMP cache not only ensures optimization of web pages but also validates them. Regarding Ads. Last year the Google AMP team laid out four core principles i.e speed, beauty, security and how to use all these 3 together.

If the AMP pages are being served from the cache then how will the ads be displayed?

The AMP Project announced the open source AMP for Ads initiative in July to work on the UX regarding ads on AMP pages. The initiative’s goal is to fix the foundation of digital advertising on the web, applying the principles of AMP to advertising and making ads faster, more beautiful and secure.

Since the announcement, AMP Ads have come a long way. Publishers across the world like The Washington Post, The Guardian, and USAToday have been testing AMP Ads experience for Publishers and users.

If the AMP pages are being served from the cache, then, what about the ads on the AMP pages?

There is still a long way to go and Google is yet exploring the use of AMP for ads.
According to Google, In the future:
• ads will be statically analyzable to be safe and behave well,
• they will be able to use a common set of functionality to significantly reduce bandwidth consumption,
• CPU usage will be limited to on-screen ads, maximizing battery life,
• and ads will be coordinated with the page making sure that primary content and functionality can always be buttery smooth at 60 frames per second.

Google says, we are trying to build a user-experience-first ecosystem for advertising on the web and, looking at the success of AMP in publishing, it might just work.

The Benefits of Combining Accelerated Mobile Pages (AMP) & Progressive Web Apps (PWA)

Google's core principle is: "Focus on the user and all else will follow." Page load time is a website's first impression for the user. That impression is directly correlated to the bounce rate of traffic to that website. User experience starts when the page loads and continues to be enriched with every tap or click. When each subsequent page loads like you are flipping a magazine, the user forms a positive impression of the whole experience of browsing that website. Undoubtedly, a seamless browsing experience leads to engaged users and results in more clicks, repeat visits, and more sales.

As traffic increasingly comes from mobile devices now, site speed is a crucial aspect of any website.

Google has been working on speeding up Google websites and has also been encouraging website owners to improve site speed with their latest developments: AMP and PWA. Both are different but can deliver amazing user experience when implemented together.

Accelerated Mobile Pages (AMP) are lightweight pages designed to load quickly on mobile devices. AMPs are served from the Google AMP Cache, which is a proxy-based content delivery network for delivering all valid AMP documents. It fetches AMP HTML pages, caches them, and improves page performance automatically.

AMP can ensure instant page load but cannot retain the same performance in case of complex functions like online payments and other dynamic functionality. That is where Progressive Web Apps (PWA) come to the rescue.

PWA adds the advantages of a native app to the website. PWA uses features like Service Workers, Push Notifications, and Web App Manifests.

What Is a Service Worker?

A Service Worker is a scriptable intermediate layer between the web page and the network. It is a script that the browser runs in the background, separate from a web page. It includes features like push notifications and background sync.

A Service Worker gives access to an API that provides a programmable network proxy within the client-side context. It makes it easier to create web applications that can handle network requests offline while browsing in varying network speeds. At times, an HTTP request is made but a response is not received on the mobile devices, which can happen when the user goes through a tunnel, or the network varies from 2G to 3G, or the user automatically joins a saturated WiFi network. The Service Worker allows developers to cache assets when connected and offers a seamless experience when offline so user experience is maintained.

Things to Note About a Service Worker

A Service Worker is not HTML or XML. It is a JavaScript Worker. Hence, the Service Worker does not access the DOM directly. The script communicates with the relevant pages by responding to messages sent by using the postMessage interface, and those pages can then access the DOM if required.
A Service Worker is basically a proxy server which serves between apps, browsers, and the network when available. It allows you to control and handle network requests from the pages.
The Service Worker script does not run when not in use, and restarts when it’s next needed. Hence, you cannot rely on global state handlers. If there is information that you need to reuse on restart, service workers do have access to the IndexedDB API, which stores data inside the user’s browser.
Service Workers use Javascript Promises on a large scale. Technically, a Promise is a proxy for a value not necessarily known when the promise is created.
The browser needs to support Service Workers. Service Workers are supported by Firefox and Opera. Microsoft Edge is now showing public support.

Web App Manifests

The web app manifest is a JSON file. It is a simple text file which has the metadata for the app. This JSON allows you:

to control the look and feel of the app
to control how the app is launched
to display icons for the user home screen and splash screen which is displayed while the app is loading

When the app is launched, you can specify which page gets loaded as well as the screen orientation (portrait/landscape view).

Why Do We Need to Take PWA Seriously?

MobileApps ios-android

In 2013, according to Flurry Analytics, 80% of the mobile user’s time was spent inside apps and 20% on the mobile web.

With mobile devices becoming smarter, the time inside apps is surely going to increase.
The app needs to be installed on the mobile device which takes up a lot of storage space. PWA runs from the server leaving a lot of free space for the user on the mobile device.
According to a test, some native apps took up 460 MB of space whereas the PWA just needed 1 MB.
In the case of an app, the user needs to be notified to update it. The PWA lives on the server so there is no update distribution lag.
PWA can work offline.
PWA, being a website fortified with the benefits of an app, is linkable, searchable, and indexable.
flipkart.com had decided to discontinue their website and go app only, but that did not go well with the users. After their PWA named FlipKart Lite the statistics showed 40% returning visitors, +63 conversions from home screen visits, more time spent on FlipKart Lite. https://developers.google.com/web/showcase/2016/flipkart

The Mobile User Experience Journey From AMP to PWA

The Mobile user taps on the AMP search results and lands on the AMP page of your website.
The page loads instantly and the user starts reading the content.
The user taps on one the links on the AMP. This user gets navigated away from the AMP cache and is now served a page from the server.
The Service Worker script starts getting executed and an app-like experience is delivered to the user.
The user keeps reading the content as the script runs in the background and does not interfere with the user experience.
In fact, it enhances it by ensuring that the user is served the pages despite the network speed fluctuating. The user experience does not get affected in case the device switches to WiFi from Mobile Network or loses the internet connectivity for any reason. The PWA will further offer the option to the user to add the icon to the home screen just like a native app.
If the user adds the icon to the home screen, the user has access to app-like features and the website without installing the App.

Publications like the Washington Post have reported great success with PWA and AMP. The two technologies complement each other: “AMP is a way to start fast, and PWA is a way to stay fast and stay engaged."

AMP helps in getting content to users faster by improving page load performance. PWA uses modern web capabilities to deliver an app-like user experience. AMP is like putting the website on a diet to give a lean display, whereas PWA is the necessary protein given to the website for a continuous robust performance. AMP helps in creating the first positive impression but PWA helps in retaining it.

Image Credits

Featured Image: https://events.google.com

In post Images: http://flurrymobile.tumblr.com/

AMP - Accelerated Mobile Pages / SEO - 03/01/2017

How To Add Google Analytics To AMP Pages

AMP Pages are the future for mobile search results. Google has announced recently that they will be removing “mobile-friendly” labels from search results and they also announced that they are testing to show AMP pages with a AMP icon in the search results.

AMP-Preview-Results

Hence, soon the AMP pages will move out from the Top Stories section and will be a part of the SERPs. Considering how the mobile usage is exponentially increasing , making your site AMP compliant and tracking its performance is a necessity.

In order to add Google analytics to the AMP Pages, include the following script in the <head>, before the AMP JS library:

<script async custom-element="amp-analytics"
src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

Add the amp-analytics element to the body of your page. Then to enable the built-in support for Google Analytics, set the type attribute of the amp-analytics element to 'googleanalytics'. It is recommended to include an id attribute so that you can easily identify each amp-analytics element (e.g. debugging).

<amp-analytics type="googleanalytics" id="analytics1">
...
</amp-analytics>
Note: It is recommended that you set up and use a separate property for AMP measurement.

Some other vendors offering Analytics For AMP Pages are:

Adobe Analytics - marketing.adobe.com
AFS Analytics - afsanalytics.com
AT Internet - developers.atinternet-solutions.com
Chartbeat - support.chartbeat.com
Clicky Web Analytics - clicky.com
Cxense - wiki.cxense.com
Google Analytics - developers.google.com
INFOnline / IVW - www.infonline.de
Krux - help.krux.com
Linkpulse - docs.linkpulse.com
Lotame - mylotame.force.com
mParticle - docs.mparticle.com
Parsely - parsely.com/docs
Piano - vx.piano.io
Quantcast Measurement - quantcast.com

Validation

To check if the analytics code is correctly added one can validate the AMP pages on https://validator.ampproject.org/

Related Posts On AMP:

What Is AMP? All About Accelerated Mobile Pages By Google

AMP Pages To Be Shown In Main Google Search Results – Preview The Experience

Google To Remove Mobile-Friendly Labels and Keep Check On Interstitials For A Better Mobile Search Experience

AMP - Accelerated Mobile Pages / Mobile / SEO - 08/30/2016

Google To Remove Mobile-Friendly Labels and Keep Check On Interstitials For A Better Mobile Search Experience

Google recently announced on their blog that they will soon remove the “Mobile-Friendly” labels from search results.

Google said that they have found that 85% of all pages in the mobile search results now meet this criteria and show the mobile-friendly label.

This does not mean that mobile-friendly criteria is not a ranking signal. It will continue to be a ranking signal but the label will be removed from search results to keep the search results uncluttered. Google will continue providing the mobile usability report in Search Console and the mobile-friendly test to help webmasters evaluate the effect of the mobile-friendly signal on their pages.

Google also added:

“To improve the mobile search experience, after January 10, 2017, pages where content is not easily accessible to a user on the transition from the mobile search results may not rank as highly.”

Pages that show intrusive interstitials provide a poorer experience to users than other pages where content is immediately accessible. This can be problematic on mobile devices where screens are often smaller.

Here are some examples of techniques that make content less accessible to a user:

Showing a popup that covers the main content, either immediately after the user navigates to a page from the search results, or while they are looking through the page.
Displaying a standalone interstitial that the user has to dismiss before accessing the main content.
Using a layout where the above-the-fold portion of the page appears similar to a standalone interstitial, but the original content has been inlined underneath the fold.

Examples of interstitials that make content less accessible

Examples of interstitials that make content less accessible

By contrast, here are some examples of techniques that, used responsibly, would not be affected by the new signal:

Interstitials that appear to be in response to a legal obligation, such as for cookie usage or for age verification.
Login dialogs on sites where content is not publicly indexable. For example, this would include private content such as email or unindexable content that is behind a paywall.
Banners that use a reasonable amount of screen space and are easily dismissible. For example, the app install banners provided by Safari and Chrome are examples of banners that use a reasonable amount of screen space.

Examples of interstitials that would not be affected by the new signal, if used responsibly

Examples of interstitials that would not be affected

AMP - Accelerated Mobile Pages / News / SEO - 08/27/2016

AMP Pages To Be Shown In Main Google Search Results - Preview The Experience

Google posted on its official blog yesterday that the AMP pages shown in the “Top stories” section of

the Google Search Results page on mobile phones are now in the process of being shown across the entire search results page and not just the “Top stories” section. Google says, Since they started working on this mobile experience for users, they have seen incredible global adoption of AMP that has gone beyond the news industry to include e-commerce, entertainment, travel, recipe sites and so on. To date there are more than 150 million AMP docs in the Google index, with over 4 million new ones being added every week. The preview shows an experience where web results that that have AMP versions are labeled with . When you tap on these results, you will be directed to the corresponding AMP page within the AMP viewer. The “Who” page on AMPProject.org has a list of some of the sites already creating AMP content. Google says, they are starting with a preview to get feedback from users, developers and sites so that they can create a better Search experience when they make this feature more broadly available later this year. They also want to give everyone who might be interested in “AMPing up” their content enough time to learn how to implement AMP and to see how their content appears in the demo. And beyond developing AMP pages, Google invites everyone to get involved and contribute to the AMP Project. As the no. of searches from mobile handsets go on increasing at an alarming rate, AMP is

huge and is surely the future which no search marketer can ignore. Speed and optimum content display are the most important aspects for mobile users. Try it out for yourself on your mobile device by navigating to g.co/ampdemo. Please view the screen shot of the preview results as below: AMP-Preview-Results

The preview shows an experience where web results that that have AMP versions are labeled with . When you tap on these results, you will be directed to the corresponding AMP page within the AMP viewer. But if there are errors on the AMP page then the corresponding page is as below: AMP-Errors-Page