Unleash Google AMP for fast-loading mobile pages

With mobile traffic now accounting for the majority of web viewing, thinking ‘web first’ has become the industry standard. Google AMP is here to help


With mobile traffic now accounting for the majority of web viewing, thinking ‘web first’ has become the industry standard. Google AMP is here to help



With mobile traffic now accounting for the majority of web viewing, thinking ‘web first’ has become the industry standard. When it comes to mobile viewing, user behaviour is noticeably different to that of desktop browsing. Mobile users don’t hang around for more than a couple of seconds waiting for pages to load. Mobile speed is therefore extremely important for building and maintaining a mobile user base. This is where Google’s Accelerated Mobile Pages comes into play.

AMP is a strict and feature limited extension of HTML, focused solely on speed. So how does it do it? Firstly by limiting features that are known to slow down a browser, for example limiting JavaScript, as no custom JavaScript code is allowed in AMP. Another way AMP speeds things up is by replacing native elements. Img tags for example are replaced with amp-img tags, where size dimensions are no longer optional, but a requirement. AMP then loads in amp-imgs after the page itself, enabling lightning-fast page loads.

In this tutorial you will be introduced to the restrictions imposed by AMP, as well as the extensions that allow for richer features, enabling us to produce a quick loading article that doesn’t feel like we are moving backwards in mobile web development.

1. Create blank HTML file

AMP as a technology is an extension of HTML, so to get started, we need to create a new blank HTML file. In this case, we are going to call it ‘amp.html’, and add in the basic markup for a HTML document.

2. Modify from HTML for AMP

Now to turn this into an AMP document, we need to modify the HTML tag. There are in fact two ways to do this, but both simply involve adding an empty attribute to our base tag. It’s possible to either add the unicode high voltage symbol (not shown here) or the word amp.

<html lang=”en” <⚡>
<html lang=”en” amp>

3. Add in standard meta tags

As this is a standard HTML document in a lot of ways, its important to declare the standard meta and title tags. So go ahead and add the code on FileSilo accompanying this step between our head tags

4. AMP-specific header content

For the page to function as an AMP document, we need a few specific lines of code in the head of our page. These can be copied as is from

<style amp-boilerplate>…</style>
<style amp-boilerplate>
<script async src=“”></script>

5. Schema markup

While not a requirement for AMP, it is beneficial to describe your page in schema markup. This lets search engines and other sites to quickly and easily pull out relevant information about your article. It gives the added benefit of complete control over how your page is seen.

<script type=”application/ld+json”>
“@context”: “”,
“@type”: “NewsArticle”,
“headline”: “Speed up the loading time of your articles with Googles AMP”,
“datePublished”: “2016-03-18T18:15:20Z”,
“image”: [

6. Build a header for our article

Now we have a valid AMP document structure in place, we can go ahead and start building the article itself. Starting with the header, we are going to add a title, category, author and publish date. No surprise here as this is all typical HTML markup.

<h1>Welcome to the mobile web</h1>
<p>By Jamie Druce <br />
<time datetime=“2016-03-18T18:15:20+00:00”>
Mar 18, 2016 6:15 pm

7. Add an image the AMP way

Now to bring the header alive, we are going to add a feature image immediately after the opening header tag. When it comes to images, standard img tags are forbidden, instead we use the AMP alternative of amp-img. With this element, it is a requirement that size attributes are present, however, to achieve a responsive image. We can set the layout attribute to responsive.

<amp-img src=”welcome.jpg” alt=”Welcome”
height=”400” width=”800” layout=“responsive”>

8. Add the body of our article

There are a limited number of standard HTML elements available to you, so to build out the body of our article, it is important to remember we cannot use any JavaScript, or elements where there is an AMP alternative such as images or iframes. For now we are just going to add some paragraphs and headings containing some text.

9. Bring it alive with components

If all we could do is add text and images, we wouldn’t have a very exciting article! This is where components come to the rescue. There are a whole host of components that perform various tasks like enabling you to embed a tweet, display a video from Vine or embed a web font. All these components are opt in, this means we need to include an extra link tag in the head of our page for each type of component we wish to use. So go ahead and add the following tags immediately after the AMP script tag:

<script async custom-element=”amp-carousel”
<script async custom-element=”amp-youtube”
<script async custom-element=”amp-analytics”

10. Add an image carousel

Now to make use of the component we just added to the head of our document, we are going to build an image carousel. Using amp-carousel we can build a container for our images. This is the attribute that will automatically add the interactivity, so drop it into the body of our article. We will set the type attribute to slides as this type supports a responsive layout, and we will add the loop attribute so that users can swipe past the end slide, back to the first slide.

<amp-carousel width=960 height=640 type=”slides”
layout=”responsive” loop>

11. Populate the carousel

Next we need to add some images to the carousel. Just like before, we need to use the amp-img tag. As a requirement of this tag we must add a height and width attribute, but to ensure our carousel is always 100 per cent width we can make use of the layout attribute once again by setting it to responsive.

12. Embed a YouTube video

Another commonly used component is the YouTube embed. As with most AMP components, the YouTube embed requires a size attribute to reduce the workload on the browser, contributing to the pick up in speed. In addition, a simple ID is required. This can be found by navigating to the YouTube video you want to embed and copying the ID from the end of the URL

13. Add analytics

It’s important to be able to track the content you make available online, and with so many solutions it’s quick and easy to do. Analytics is handled slightly different in AMP. However, the analytics component is simple to use and comes with many standard analytics providers baked right in. The code accompanying this step on FileSilo uses Google Analytics to track page views. So add this to the body and be sure to swap in your own account ID!

14. Style our article

When it comes to custom CSS styling you are able to use all the standard syntax with a few exceptions. Firstly, all CSS must be inlined in the head of the page – no linked stylesheets or inline style attributes on elements. Secondly, no !important tags. We will write a few styles to get our page looking more like an article!

15. Style components

As well as styling our standard HTML elements, we can also override the styling of AMP components in much the same way. We are going to add a simple background colour to our carousel, so when the page loads in, we get a nice block area instead of white space before the carousel is loaded.

background-color:#333; }

16. Work around limitations

The limitation of no JavaScript can seem like a huge deal to a lot of users, and understandably so. But as previously explained, the reason for its omission is speed. JavaScript blocks the rendering of the page and therefore has a direct impact on page-loading times. While this tutorial shows you how to build a fully functional article without JavaScript, it is possible to build more advanced elements through the use of an amp-iframe, the content of which is rendered after page load, thus avoiding any impact on speed.

<amp-iframe width=300 height=300
sandbox=”allow-scripts allow-same-origin”
<!— Custom code including JS can go here —>

17. Validate your code

With a lot of custom elements and restrictions in place, validating you code is an extremely important step. Luckily for us there is debug functionality already baked into our page! It’s time to open up our newly created page in a browser. Once open, you need to open up your web console and add #development=1 to the end of your URL and you should then see some messages in your console confirming the page is valid.

Powered by AMP ⚡ HTML – Version 1457721872758
AMP validation successful.

18. Common issues

If you have been following this tutorial step by step, your page should validate fine. However, there are some common errors you will likely see when expanding the article with your own content. The AMP debugger is very helpful, and as always, the console is your friend here. The most common errors will be from using a non-valid element or not using the required attributes for an element. As you can see here, these are clearly highlighted by the debugger:

The tag ‘img’ may only appear as a descendant
of tag ‘noscript’. Did you mean ‘amp-img’?
The mandatory attribute ‘height’ is missing
in tag ‘amp-img’

19. Link to a non-AMP article

As we’re sure you are quickly becoming aware, AMP is a stripped-down minimal approach. It likely would not make sense to build a desktop article using AMP. Instead you would produce a richer user experience. So if you have a fully featured desktop article, and this AMP version, it is important to link the two. This way we ensure a browser can load the appropriate page for the device. This also has the benefit of informing search engines that both pages contain the same content and this can be done via a single meta tag on each page.

<!— Put this tag on your desktop page —>
<link rel=”amphtml” href=““>
<!— Put this tag on your AMP page —>
<link rel=”canonical” href=“”>

20. View it on a mobile

You can view your newly created AMP page in the same way you view a standard HTML page: by simply opening it in a browser. However, you may find certain features don’t work due to failed HTTP requests, so it’s best to fire up a local server. This has the added benefit of allowing you to browse to your computer’s IP on a mobile device to preview it on a device.


21. Finish up

Now all that’s left to do is admire the outcome of your hard work! As mentioned before, there are a lot of additional components that provide further interactive elements to spice up your article, why not have a go at implementing some of these yourself? Remember to visit for all the requirements of the various components and for solutions for common debug errors.