⚡ Do you know 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
- AMP JS
- AMP CDN
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 AMP CDN (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>body {opacity: 0}</style><noscript><style>body {opacity: 1}</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.
AMP CDN
The AMP CDN is a proxy-based CDN for delivering all valid AMP documents. It fetches AMP HTML pages, caches them, and improves page performance automatically. When using the AMP CDN, the document, all JS files and all images load from the same origin that is using HTTP 2.0 for maximum efficiency.
AMP’s CDN 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.
-------------------------------------------------------------------------------------------------------------------
Accelerated Mobile Pages Overview(FAQ)
What is the Accelerated Mobile Pages project?
The Accelerated Mobile Pages (“AMP”) Project is an open source initiative that came out of discussions between publishers and technology companies about the need to improve the entire mobile content ecosystem for everyone – publishers, consumer platforms, creators, and users.
Today, the expectation is that content should load super fast and be easy to explore. The reality is that content can take several seconds to load, or, because the user abandons the slow page, never fully loads at all. Accelerated Mobile Pages are web pages designed to load instantaneously – they are a step towards a better mobile web for all.
What are the benefits of Accelerated Mobile Pages?
Speed matters and instant is the ideal. Research shows that the bounce rate can be as high as 58% for web pages that take nearly ten seconds to load. Using the AMP format will make it far more compelling for people to consume and engage with more content. But this isn’t just about speed and performance. We also want to promote enhanced distribution so that publishers can take advantage of the open web’s potential for their content to appear everywhere quickly – across all platforms and apps – which can lead to more revenue via ads and subscriptions.
How do Accelerated Mobile Pages work?
Accelerated Mobile Pages are just like any other HTML page, but with a limited set of allowed technical functionality that is defined and governed by the open source AMP spec. Just like all web pages, Accelerated Mobile Pages will load in any modern browser or app webview. AMP files take advantage of various technical and architectural approaches that prioritize speed to provide a faster experience for users. The goal is not to homogenize how content looks and feels, but instead to build a more common technical core between pages that speeds up load times.
In addition, AMP files can be cached in the cloud in order to reduce the time content takes to get a user’s mobile device. By using the AMP format, content producers are making the content in AMP files available to be cached by third parties. Under this type of framework, publishers continue to control their content, but platforms can easily cache or mirror the content for optimal delivery speed to users. Google has stated that it will provide a cache that can be used by anyone at no cost, and all AMPs will be cached by Google’s cache. Other companies may build their own cache as well.
In summary, the goal is that that the combination of limited technical functionality with a distribution system built around caching will lead to better performing pages, and increased audience development for publishers.
Who will be able to use Accelerated Mobile Pages?
The project is open to all players in the ecosystem - publishers, consumer platforms, and creators. In this early stage of the project, a group of publishers and platforms have come together to demonstrate how Accelerated Mobile Pages can transform the mobile web experience. They include platforms like Twitter and Google, tech players like ChartBeat and WordPress.com and publishers like Vox, The New York Times, The Guardian and Globo.
By using the AMP format, content producers are making the content in AMP files available to be crawled & indexed (subject to the robots exclusion protocol), displayed (subject to access restrictions), and cached by third parties.
What type of content will work best using Accelerated Mobile Pages?
The goal is for all published content, from news stories to videos and from blogs to photographs and GIFs, to work using Accelerated Mobile Pages.
Get Amp-Source Code - https://github.com/ampproject/amphtml
This is great post......
ReplyDeleteAccelerated Mobile pages development
ReplyDeleteHello,
we provide affordable and result-oriented SEO services, please give a chance to serve you.
Thanks
Admin: E07.net