Skip to main content

What Is AMP(Google’s Accelerated Mobile Pages)?

-

What Is AMP?


AMP is a way to build web pages for static content that render fast. AMP in action consists of three different parts:
AMP HTML is HTML with some restrictions for reliable performance and some extensions for building rich content beyond basic HTML. The AMP JS library ensures the fast rendering of AMP HTML pages. The Google AMP Cache (optionally) delivers the 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 (see also HTML Tags in the AMP spec). These custom elements, called AMP HTML components, make common patterns easy to implement in a performant way.
For example, the amp-img tag provides full srcset support even in browsers that don’t support it yet. Learn how to create your first AMP HTML page.

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 not just the optimizations but the 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.
Learn more about testing your AMP HTML pages.

Comments

Post a Comment

Popular posts from this blog

"Fast Traffic Secrets" ebook give away

-
Image
Are you struggling with generating traffic for your business, your website or your blog? This ebook teaches you exactly that. Not only it reveals you the secrets of generating fast and quality traffic, but also show you many methods to get them, a lot of them for free.      This is a great book and here you can download for free: http://www.reviewinfobase.com/app/freebonusemba.php?BID=5023a030e0932 It is a PDF ebook and I read it during the weekend, very easy to understand and would love to share with everyone. Hope that you find it useful to your business. The download link might be removed any time (that is where I get it too), so act fast!
Read more

Download of the Day: Magnetic Affiliate Marketing eBook: Mind Map (pdf guide)

-
Image
"Financial free" is a nice word and it is the final goal of most of marketers. We don't have to be tied to our work. I can decide when we can work, when to take vacation, when to spend time with our family and we don't need to worry about living cost. That is nice, isn't it. But unfortuntely, there is not free lunch in this world. Before we reach that point, we still need to do a lot of work. In this book, which is the third book of this serail: Magnetic Affiliate Marketing - Mind Map will guide us through this process. From hard work to smart work, from tons of work to little work, from no profit to small profit, to biggger sucess or finally financial free. It gives us a better undering this affiliate marketing in a business perspective. So grab it before it is gone .
Read more

Free Download: Build Your eCommerce Store - Cheat Sheet (pdf guilde)

-
Image
This is the second book of building your eCommerce Store serial. If you don't have the first one, make sure check my older post to find the first book. After the first book, you already have the basic idea of how to build eCommerce store. In this book, it cut all the corners and direct you right into the final path. If you have any questions, you might need to go back to read the first book. Remember, this is the main action book and you do need to take actions on it. Once you have your store set up and ready to go, we will go through other tips like the mind set we need while we build our business, and how to market our business etc. But before we get into those, grab this onewhen it is still available . And the best part is, it is free right now. Enjoy!
Read more