Accelerate your mobile pages, it’s easy! #AmpHtml #AmpCDN, #AmpJS


AMP-Accelerated Mobile Pages
In October, Google announced a new open source project calledAccelerated Mobile Pages, which aims to dramatically improve the performance of the mobile web.
Why it is important?
Well, one look at the history of these posts will prove you that there is a real need for speed!
The project relies on AMP HTML, a new open framework built entirely out of existing web technologies, which allows websites to build light-weight web pages.  
The basic ‘hello world’ version of your HTML page will look like:
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<title>Hello, AMPs</title>
<link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Open-source framework for publishing content",
"datePublished": "2015-10-07T12:02:41Z",
"image": [
"logo.jpg"
]
}
</script>
<style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<h1>Welcome to the mobile web!</h1>
<p>Read more on the latests new APIs in
<a href="https://greenido.wordpress.com/?s=mobileweb">
Ido's posts on the mobile web
</a>
</p>
</body>
</html>

AMP HTML documents MUST contain

  • Start with the doctype <!doctype html>.
  • Contain a top-level <html ⚡> tag (<html amp> is accepted as well).
  • Contain <head> and <body> tags (They are optional in HTML).
  • Contain a <link rel="canonical" href="$SOME_URL" /> tag inside their head that points to the regular HTML version of the AMP HTML document or to itself if no such HTML version exists.
  • Contain a <meta charset="utf-8"> tag as the first child of their head tag.
  • Contain a <meta name="viewport" content="width=device-width,minimum-scale=1"> tag inside their head tag. It’s also recommended to include initial-scale=1. But I guess you are doing both already, right?
  • Contain a https://cdn.ampproject.org/v0.js tag as the last element in their head (this includes and loads the AMP JS library). More about its functions below.
  • Contain <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript> in their head tag.
You can start with this AMP guide to get up to speed and create your first AMP page. It’s quick & easy.

Preview and Validate

Validation is key to the format, so it’s important to understand theAMP format specification and to learn what is allowed and disallowed. The AMP runtime can be placed into a development mode for any page. Development mode will trigger AMP validation on the embedded page, which will emit the validation status and any errors to the javascript developer console. Development mode may be triggered by appending of #development=1 to the URL of the page.For example:
http://localhost:8000/released.amp.html#development=1and open the Chrome DevTools console and check for validation errors.
You can see it in action in the image below. You can click on it to enlarge it.
amp in devtools

What is the AMP runtime?

The AMP runtime is a piece of JavaScript that runs inside every AMP document. It provides implementations for AMP custom elements, manages resource loading and prioritization and optionally includes a runtime validator for AMP HTML for use during development. The AMP runtime is loaded via the mandatoryhttps://cdn.ampproject.org/v0.js tag in the AMP document <head>.

AMP HTML Extended Components

You could extend AMP HTML. Check AMP’s extended componentsto see how AMP makes it easy to add additional elements like video player embeds and social media content to pages. For more details check this AMP talk or the AMP Anatomy.
Last but not least, just in case you think “who is crazy enough to try it?” Many of the world’s top publishers (e.g WordPress) have announced their intention to support AMP when it goes live in Google Search as soon as February 2016, and many other companies (e.g Twitter, LinkedIn and Pinterest) are also building support for the framework.
Mobile web rock!
Share on Google Plus

About SLU Injection Blog

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.

2 comments:

  1. Tks very much for your post.

    Avoid surprises — interviews need preparation. Some questions come up time and time again — usually about you, your experience and the job itself. We've gathered together the most common questions so you can get your preparation off to a flying start.

    You also find all interview questions at link at the end of this post.

    Source: Download Ebook: Ultimate Guide To Job Interview Questions Answers:

    Best rgs

    ReplyDelete
  2. Yes you are absolutely correct.

    With the help of AMP technology you can load your website faster along with all images and content easily in desktop and mobiles.
    Normally every developer is focusing on this as Google recommends website which has implemented AMP to rank higher in SERP.

    A new technology- AMP for Mobile app developers.

    ReplyDelete

Ho Ho Ho ! Please Do not Spam ! Happy Blogging to all

Enter some text in the fields below, then press the "Submit form" button to submit the form.

First name:
Last name:

Form

Search: Search