AMP is fast to load and fast to create

AMP websites are great for serving up clean website content, really fast. AMP can both live on its own or help desktop-first sites live a second life as a mobile-first site.

With most website visitors coming from mobile devices, and load times turning away visitors, web developers can use AMP HTML to design for fast results. This blog post shows how to create an extremely light weight and responsive site using AMP.

The biggest optimization in speed, compared to desktop-first sites, comes from restricting our design decisions to the simple frameworks of HTML and CSS. With that in mind, it is also fast to setup.

Example code is provided at each step if you want to follow along. Additionally, you may view the GitHub page for this website. The entire site has been built AMP-first and optimized with structured data for search engine performance. Learn more about Jaehrlich.ca.

Follow these 6 steps to get up and running.

Step 1: Create a regular HTML file

Start by creating a regular HTML file and add the word 'amp', or the symbol '⚡', in the html tag.

AMP uses the <html ⚡ lang="en"> markup to label an HTML page as an AMP page. Then, add the usual <head> and <body> sections.

Step 2: Add the required AMP code to the Head element

The first child of the <head> tag needs to be <meta charset="utf-8"> to signify the encoding.

Next, load the JavaScript library for AMP by adding a script tag somewhere after: <script async src="https://cdn.ampproject.org/v0.js"></script>

After that, either add a link to the desktop version of the site, or a link to itself:

<link rel="canonical" href="www.yourwebsite.com/Example.HTML">

And finally, define a responsive viewport by adding:

<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

Step 3: Add the AMP boilerplate code to the Head element

Add the boilerplate code, towards the bottom of the head tag, to hide all content, until the AMP JavaScript is done loading. And don't worry, this code can live as a single line, to save space when editing your AMP page.

Step 4: Add your own style to the page

Although CSS files are not allowed, you are able to add a <style amp-custom> tag to the head to customize your own styles. In the example, I customize the H1 element to look like a card.

<style amp-custom> body { padding: 1em; } h1 { max-width: 550px; margin: auto; padding: 0.5em; box-shadow: 0px 3px 5px grey; }</style>

Step 5: Finish up your page with content in the Body

Although most usual HTML content is available in an AMP page, there are some restrictions, more info here. With all the required AMP code set, feel free to start adding HTML content as usual, but keep those restrictions in mind.

For instance, instead of using an <img> tag, you will need to use an <amp-img> tag, with an end tag </amp-img>. A height and width propery is also required, along with an alt tag. Here's an example:

<amp-img alt="Extremely descriptive description of the image" src="https://www.jaehrlich.ca/Pictures/Mountains.webp" width="1892" height="1060" layout="responsive"></amp-img>

One of the most notable rule is the restriction of additional JavaScript <script> tags. This means everything you create is going to be with HTML and CSS stylings.

Step 6: Validate your page and publish!

Once you've created your beautiful AMP page, or at any point along the development, you may want to validate your AMP page to be sure your code complies with the AMP standards.

While visiting your site in your web browser, append #development=1 to the end of the URL in the address bar. Press enter to load the page, then press F12 to open the development tools. Navigate to the Console tab where you will either find the text 'AMP validation successful.' or an error of some kind. Try your Google-fu or check out the AMP HTML specification here.

Get coding!

Thanks for reading. I hope your AMP sites turn out great. Let me know if you have any questions.

How to Create an AMP Website