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

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>

view raw AMP-Hello-World.html hosted with

by GitHub

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.

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!

Source : https://greenido.wordpress.com/2016/01/12/accelerate-your-mobile-pages-its-easy/

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.

4 comments:

Unknown23 May 2017 at 02:38
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.
WelderReview.com12 July 2019 at 09:15

Hello,

we provide affordable and result-oriented SEO services, please give a chance to serve you.

Thanks
Admin: E07.net
about sports9 January 2020 at 23:58
Personally I think overjoyed I discovered the blogs.

সেরা বাজেটের মোবাইল
PANDUAN PKV GAMES7 January 2021 at 10:59
Pastikan untuk mengerti panduan permainan yang ada di PKV Games terlebih dahulu untuk lebih mudah dalam bermain. Sehingga dengan begitu member akan lebih mudah meraih kemenangan karena tahu cara bermainnya.

- Panduan PKV GAMES
- Judi Online
- PKV GAMES

Gabung sekarang juga dengan situs terpercaya yang memang sudah terpercaya, aman, dan pastinya AMANAH!!!

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