AMP stands for Accelerated Mobile Pages and is an open source initiative put forth by Google to create a unified way to make sites load faster on mobile devices by an order of magnitude. AMP should prove to be a great way to make the web better on mobile, especially for those on slow connections.
AMP restricts certain parts of HTML, CSS and JavaScript to ensure a fast experience. To make up for the extra restrictions, it also comes with components to let you do things like embed videos, integrate carousels and a bunch of other neat things. AMP will be used by outlets such as Twitter, Pinterest and Google to link to a super fast version of a page on mobile. Try out a demo of AMP pages in Google here.
Start your AMP HTML pages like the following:
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<link rel="canonical"
href="https://path/to/regular/page">
<meta name="viewport"
content="width=device-width,
minimum-scale=1,initial-scale=1">
<style amp-boilerplate></style>
A few things to keep in mind:
<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>
With this inline CSS boilerplate, the content will be hidden at first, then displayed when the assets are loaded. This way, you’ll prevent a flash of unstyled content (FOUC) that happens when loading fonts asynchronously.
After the head section, your AMP HTML pages will mostly be just plain old html, with a few key exceptions. For example, img tags aren’t supported and amp-img should be used instead:
<amp-img src="../alligator.svg"
width="400"
height="150"
layout="responsive"
alt="Dead Gator">
</amp-img>
For amp-img, you define both the width and height. Browsers will be smart enough to downsize proportionally if needed.
Here’s a list of a few more components that are available with AMP HTML: amp-accordion, amp-instagram, amp-sidebar, amp-youtube, amp-audio…
For most of these additional components, you’ll need to load an extra JavaScript file in the head section. For example, for the amp-instagram component:
<script async
custom-element="amp-instagram"
src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js">
In order for your AMP HTML pages to be served, they first need to be valid. Simply add #development=1 at the end of an AMP page and the JavaScript console will be in debug mode and let you know if anything is wrong.
The next step is to make sure that you include a rel tag on your original page that points to the AMP version like this:
<link rel=”amphtml”
href=”https://alligator.io/some-post.amp.html" />
Here are some good resources to learn more about AMP HTML and to get involved:
Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.
Sign up