Google’s Accelerated Mobile Pages initiative is getting a lot of exposure since its launch in early October. Let’s see what it is, how it works, and you can publish your own AMP HTML pages.
Speed Matters
In this age of speed, a page that takes more than a few seconds to load is losing its appeal, and this is especially important on mobile phones.
Many studies have shown that page load has a direct impact on sales. For instance, conversion rates drop 27% after one second, and bounce rates drop 56% after the same amount of time.
On the SEO side, page speed is one of the many ranking factors for Google, hence your site’s visibility is at risk if it’s too slow.
Therefore, user experience, business goals, and findability are all impacted by site speed.
Responsive web design and carefully-crafted sites with performance in mind are part of the solution. While working on these issues, we can’t blame others, or we’ll soon get closed inside walled gardens.
Facebook’s Instant Articles and Apple News are answering these issues in their own way. Fortunately, the AMP Project, while promoted by Google, is an open-source project and you should give it a try.
An Overview of AMP’s Features
Performance best practices are built-in with AMP: asynchronous calls and lazy-loading on components, no repaint while loading the page, no FOUC effect, inlined critical CSS, no extensive use of the CPU and GPU, minimal JavaScript usage, a CDN by default for scripts, and a minimal tracking footprint.
Everything that we should keep in mind when developing fast rendering pages has been enforced for us:
- A subset of HTML with a few new tags to be handled by the JavaScript runtime renderer;
- Only a subset of CSS allowed;
- One JavaScript to rule them all, and only a few allowed scripts for the extensions, all of them delivered through Google’s CDN;
- Each component width and height declared to prevent any repaint when loaded asynchronously.
Anatomy of an AMP Page
Here is a minimalist AMP page:
[code language=”html”]
<!doctype html>
<html amp lang=”en”>
<head>
<meta charset=”utf-8″>
<link rel=”canonical” href=”__CANONICAL_URL__” >
<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>
<style amp-custom>
__YOUR_OWN_CSS__
</style>
<script async src=”https://cdn.ampproject.org/v0.js”>
</script>
</head>
<body>
Your actual content.
</body>
</html>
[/code]
As you can see, there is a default style to which you can add your own inline CSS, and an asynchronously-called script hosted on a CDN. We also have a viewport meta tag and a canonical link. And that’s about it.
Styles
You can add your own styles within the <style amp-custom> element. However, not all features are allowed.
JavaScript
The AMP JavaScript library includes built-in components and handles the loading of external resources behind the scenes, extensively lazy-loading as much as it can. It is also responsible for the painting of the page.
Continue reading %An Introduction to Google’s Accelerated Mobile Pages (AMP)%
Source: SitePoint