The article directories

  • AMP is introduced
    • AMP HTML
    • AMP Runtime
    • AMP Components
  • AMP analysis
    • Positioning: To solve a single problem
    • Model selection: Pure Web technology solution
    • Implementation: resource scheduling and control
    • Viewpoint: It is very instructive

Web Performance Optimization (WPO) is an old topic, and I’ve written a lot about “Performance Optimization.” Recently, a team at Google launched a technology called Accelerated Mobile Pages (AMP) that promises to dramatically speed up the rendering of Mobile Pages and improve the overall experience. This article takes you through the new technology.

AMP is introduced

Accelerated Mobile Pages (GitHub) Accelerated Mobile Pages According to the official notes, the AMP showed a 15% to 85% performance improvement in the Speed Index (average first screen display time) test, which was performed on a 3G network and simulated the Nexus 5 (details).

Aside from how AMP can dramatically improve page performance, let’s take a look at what it is. According to the official website, AMP is mainly composed of AMP HTML, AMP Runtime and AMP Components.

AMP HTML

AMP HTML is a subset of HTML and only a limited number of tags are allowed in AMP HTML. Tags such as and

can be used directly without any restrictions; Some tags allow limited use. For example, the
tag cannot use http-equiv; Tags like
and

For a full explanation, see the AMP HTML document on the official website. Here is an example of AMP HTML from this document:

<! Doctype HTML > < HTML ⚡> <head> <meta charset=" utF-8 "> <title>Sample document</title> <link rel="canonical" href="./regular-html-version.html"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui"> <style amp-custom> h1 {color: red} </style> <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "NewsArticle", "headline": "Article headline", "image": [ "thumbnail1.jpg" ], "datePublished": "2015-02-05T08:00:00+08:00" } </script> <script async custom-element="amp-carousel" SRC = "https://cdn.ampproject.org/v0/amp-carousel-0.1.js" > < / 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>Sample document</h1> <p> Some text <amp-img src=sample.jpg width=300 height=300></amp-img> </p> <amp-ad width=300 height=250 type="a9" data-aax_size="300x250" data-aax_pubname="test123" data-aax_src="302"> </amp-ad> </body> </html>Copy the code

As you can see, AMP HTML isn’t much different from regular HTML. Save the above code as an.html file and it will work fine in a browser. Here are some formatting requirements:

  • The DTD must be:<! doctype html>;
  • The top-level tag must contain an AMP attribute, such as:⚡ < HTML > 或 <html amp>(make it easy for other programs to recognize that this is AMP HTML);
  • Must be placed in the HEAD region<link rel="canonical" href="$SOME_URL" />Tag to specify the URL of the common version of the document; If there is only one version, use the current URL (tell the search engines it’s a different version of the same page, or you might get caught cheating).
  • Must be<meta charset="utf-8">Place it at the beginning of the HEAD section (in fact, normal HTML should do the same);
  • You must include this ViewPort in the HEAD section:<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">;
  • Must be<script async src="https://cdn.ampproject.org/v0.js"></script>As the last element of the HEAD region;
  • The following code must be included in the HEAD area:<style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>;

AMP Runtime

In the AMP HTML code above, the last JS introduced by the outer chain of the HEAD field is the AMP Runtime. AMP Runtime provides support for Custom Elements, coordinates load timing and priority of resources, and provides debugging functions such as validators.

When accessing AMP HTML, append #development=1 to the end of the URL to open developer mode. AMP Runtime will automatically load the validator and display the position of the page that does not comply with the AMP specification on the console.

AMP Components

AMP Components is a component that uses browser Custom Elements to replace HTML tags such as and

1) Built-in components, including: AMP-IMG, AMp-Audio, AMp-Anim, AMP-AD, AMp-Pixel, amp-Video, after the introduction of AMP Runtime, these built-in components can be used directly.

2) Extension components, including: AMP-Carousel, AMP-Lightbox, AMP-Iframe, AMP-Instagram, AMP-Twitter, amP-youtube. To use an extension component, you need to import the corresponding file for that component in the AMP HTML. For example, to use amP-Carousel, you must import the following files (async and custom-Element properties are required) :

< script async custom - element = "amp - the carousel" SRC = "https://cdn.ampproject.org/v0/amp-carousel-0.1.js" > < / script >Copy the code

Here is a page written in accordance with the AMP HTML specification, you can directly open the browser to view: AMP example (note: in order to ensure the speed of domestic opening, I host AMP JS locally, actually do not comply with the specification).

AMP analysis

Positioning: To solve a single problem

After the introduction to AMP, you must be wondering why AMP HTML has so many restrictions and constraints, and what kind of scenarios this emasculated HTML can apply to. In fact, AMP is only focused on one thing — improving the performance of static pages.

This “static” does not mean a page without server participation, but rather a content-oriented resource page without complex interaction. A typical example is the news detail page. Now there are many types of websites, such as games, videos, e-commerce and so on. Each type of website has its own characteristics and optimization strategies are also different. It is impractical to solve all problems with one solution. So the AMP project focuses on content-type pages that are easier to optimize and most effective.

Model selection: Pure Web technology solution

There are many different approaches to Web optimization, each of which has its own scope. Some of the most profitable optimization methods have some limitations: for example, optimization for specific business logic is difficult to generalize; Deployment of Google’s PageSpeed module and other server-side optimization schemes, the use of high cost; Client-side optimizations, such as the popular WebView container acceleration scheme on mobile, are limited to specific apps and can even lead to slower access using a common browser (interesting topic, but more on that later).

Most performance of content-based news details page is consumed in the loading of media resources such as pictures and videos as well as third-party functions such as advertisements and social components. Replacing these with AMP Components, avoiding resources being loaded by default, and coordinating and managing them with AMP Runtime is a generic, low-cost compromise that benefits all browsers. In addition, the AMP solution is not dependent on any specific server or client and can host the page directly in the CDN, further improving user access speed.

Implementation: resource scheduling and control

Browsers have their own policies for loading and preloading different resources, and we have some control over preloading, but in general this is a very difficult area for developers to control. For example, browsers load multiple images in parallel by default, but on phones with small screens, slow Internet connections, and poor performance, it’s probably better to load images sequentially from top to bottom.

There is a big gap between mobile devices and PC in network, CPU, memory and other aspects. Many problems that can be ignored on PC have to be taken seriously on mobile terminal. For example, we all know that images are loaded asynchronously, and DOMContentLoaded event is triggered by the page without waiting for the image to finish loading. However, on the mobile terminal, performance overhead caused by a large number of images loading will greatly delay the timing of DOMContentLoaded. The following is the time comparison of DOMContentLoaded in a mobile product after delayed loading processing of pictures. Obvious changes can be seen:

After replacing images, videos and other tags and third-party functions with AMP Components, AMP Runtime can automatically handle lazy loading, on-demand loading and other logic to ensure the first screen performance. In order to avoid page jitter caused by delayed loading resources, developers must set the height and width properties for each AMP Components, and each component supports multiple layouts. Under the responsive layout, Components will automatically adjust the size according to the initial height and width ratio.

In addition, some resources, such as GIFs and videos, are very performance intensive, and AMP Runtime can destroy elements while they are invisible, freeing resources. In short, with the AMP solution, you are hosting page resources to the AMP Runtime management, and can enjoy all subsequent policy upgrades with one change.

Viewpoint: It is very instructive

That’s about the end of this article. After the above introduction, we should have a certain understanding of AMP project. Finally, my thoughts:

The AMP project imposes a number of restrictions on written code, such as the fact that all resources can only be hosted for AMP Runtime loading; JS other than AMP Runtime and AMP Components is not allowed. Inline JS is not allowed; Only limited inline CSS styles can be used; JS and Web Font must use the specified CDN and so on, all in preparation for later optimization strategies. The overall principle is not complex, the difficulty is the establishment of supporting facilities, and how to persuade the site to transform the code. However, it’s likely that Google will later claim rights to pages that use AMP, which will give people an incentive.

Amp-compliant pages will not be faster than pages optimized by WPO experts, it is a generic technique that certainly contains a lot of code logic that the business does not use, and there are many optimizations that it does not provide. But for sites that don’t know how to WPO, AMP is a great option.

However, I don’t think AMP can be used directly in domestic projects. First, as mentioned, AMP Runtime and Components must be loaded from cdn.ampproject.org; Web Fonts must be loaded from fonts.googleapis.com. The idea is to be more controllable and share caching between websites, but these domains are difficult to access in China or even blocked. Secondly, according to the existing extension components of AMP, instagram, Twitter, YouTube and other services commonly used by foreign media cannot be used in China, and the built-in AD component does not meet the national conditions.

However, the AMP project is still useful for mobile Web optimization. In fact, your pages load control resources, handle the response type element to avoid jitter, take the initiative to release resources, such as strategy, we in the project has its own attempt and experience, but our solution either rely too much on the server, or not abstract into a general pattern, cause cannot be extended to more products, these are all can efforts in the direction of the follow-up, and AMP standard and code implementation, Will be the best reference.

Link to this article: imququ.com/post/amp-pr… , join the comments »

–EOF–

Posted on 2015-10-10 01:47:24 and tagged “Performance Optimized, Google”. View this article Markdown version »

This site uses “Signature 4.0 international” creation and sharing agreement, related description »

Warning: This article was last updated 520 days ago and the information described in this article may have changed. Use with caution.

Did this article help you? Welcome to join the front End learning Group wechat group: