AMP - Accelerated Mobile Pages

AMP is a way to build web pages for static content that render fast. AMP in action consists of three different parts:
  1. AMP HTML is HTML with some restrictions for reliable performance and some extensions for building rich content beyond basic HTML.
  2. The AMP JS library ensures the fast rendering of AMP HTML pages.
  3. The Google AMP Cache can be used to serve cached AMP HTML pages.

AMP HTML

AMP HTML is basically HTML extended with custom AMP properties. The simplest AMP HTML file looks like this:
<!doctype html>
<html ⚡>
 <head>
   <meta charset="utf-8">
   <link rel="canonical" href="hello-world.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
 </head>
 <body>Hello World!</body>
</html>

Though most tags in an AMP HTML page are regular HTML tags, some HTML tags are replaced with AMP-specific tags 

AMP JS

The AMP JS library implements all of AMP's best performance practices, manages resource loading and gives you the custom tags mentioned above, all to ensure a fast rendering of your page.
Among the biggest optimizations is the fact that it makes everything that comes from external resources asynchronous, so nothing in the page can block anything from rendering.
Other performance techniques include the sandboxing of all iframes, the pre-calculation of the layout of every element on page before resources are loaded and the disabling of slow CSS selectors.
To learn more about the optimizations and limitations, read the AMP HTML specification.

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. When using the Google AMP Cache, the document, all JS files and all images load from the same origin that is using HTTP 2.0 for maximum efficiency.
The cache also comes with a built-in validation system which confirms that the page is guaranteed to work, and that it doesn't depend on external resources. The validation system runs a series of assertions confirming the page’s markup meets the AMP HTML specification.
Another version of the validator comes bundled with every AMP page. This version can log validation errors directly to the browser’s console when the page is rendered, allowing you to see how complex changes in your code might impact performance and user experience.

Comments

Post a Comment

Popular posts from this blog

mWeb Testing - Low Bandwidth & High Latency

Image
It is important to look and feel how the website performs when connectivity is extremely bad. While designing or building mobile website, think about poor and unreliable network as key performance differentiator. Your service or website can be damn good, but if due to such network limitation it kills customer experience (for e.g. transactions are failing),  it just adds into bad remark on your part. So better to be ready building website which performs well even with such barriers. There are several tools available which can help you to emulate and simulate low bandwidth & high latency. #1: Emulate Network Throttling Chrome DevTools provide variety of options to test with different download/upload and round-trip time. Refer to previous blog on how to use "DevTools". #2: System Tools (macOS)  Network Link Conditioner on macOS when you are using Xcode for development. #3: Device Emulation Android Emulators provide way to simulate
Read more

Improving Mobile Site (mWeb/mHTML) Performance/Loading Speed

Image
Note: This blog is keeping current Chrome Version (57) in mind. Options may change upon Chrome version upgrades. Below are the four simple steps to be followed or performed before publishing Mobile Site (mWeb/mHTML). These steps will ensure that all basic checks have been performed to evaluate site performance under network throttle or site performance under low network speeds. Irrespective of, you are getting reports for slow response or you are doing "Performance Testing", I believe these are the steps to be followed by developers before committing code into the repository or before publishing website to the world. STEP1: Setup Browser for Analysis 1. Open Page you are designing or open page which is getting reports for slow response time. While the page is in focus, press Command + Options + I (if using mac machine) or press Control + Shift + I (windows/linux) This will open DevTools on the page within browser (DevTools are the mechanic p
Read more

Optimized Document Object Model (DOM) & Optimized CSS Object Model (CSSOM)

Image
Before the browser can render the page, it needs to construct the DOM and CSSOM trees. As a result, we need to ensure that we deliver both the HTML and CSS to the browser as quickly as possible. Let’s start with the simplest possible case: a plain HTML page with some text and a single image. How does the browser process this page? Conversion: The browser reads the raw bytes of HTML off the disk or network, and translates them to individual characters based on specified encoding of the file (for example, UTF-8). Tokenizing: The browser converts strings of characters into distinct tokens—as specified by the  W3C HTML5 standard ; for example, "<html>", "<body>"—and other strings within angle brackets. Each token has a special meaning and its own set of rules. Lexing: The emitted tokens are converted into "objects," which define their properties and rules. DOM construction: Finally, because the HTML markup defines relationships between
Read more