In many aspects of life, speed is everything. In IT, we rely on this concept even more heavily. Your PC must be fast, your smartphone must be fast. You don’t want to wait to see an email on your phone, you just want the email. The same is true for web pages because we don’t want to see the page to load at all. Of course, some loading must happen, but it must be faster than we can notice. Milliseconds. There are many ways to make a web page faster, but in this AMP tutorial, we will see how to do that with AMP.
What do I need to know to start this tutorial? Well, ideally some basic HTML skills are enough to enjoy this reading. As you can imagine, this post is meant for people who already have a website or are starting to have one.
Introducing AMP Tutorial
Why making a website faster, anyway?
Of course, to do something – anything – you need to have a reason. Of course, a fast website is better than a slow website, but is it worth it? Well, if the increase in speed is significant, the user experience will improve.
Better user experience means users actually remain on the website (lower bounce rate) and read your content. In other words, you improve user engagement. Ultimately, whatever the purpose of your site is, a faster website will get you there – well – faster.
How to make a website faster?
There is no recipe to make a website faster, but instead, we have four levers that we can pull. Remember that, in the end, visiting a web page means downloading a set of files over the Internet.
- Increase network capacity – downloading the file is like getting water from a pipe. You can get more water if you enlarge the pipe. However, the reality is more complex than that. You don’t have just a pipe between your website and the user. Instead, you have a complex network of pipes – the Internet. Some of this is under your responsibility and means you can get a larger server or a better hosting contract. However, this is something you typically do for larger applications. Even more, you only address a part of the issue here. Is the user on a slowly 3G network? Nothing you can do here.
- Get your server close to the user – if the user is close to the server latency is lower and speed is better. You can typically do this with a Content Delivery Network (CDN), a technique of caching. AMP operates here.
- Reduce the number of files – since visiting the page is downloading multiple files if you have fewer files to download it will take less time. AMP operates here.
- Reduce the size of files – like in the previous point, the smaller the file, the faster you can download it. AMP operates here as well.
As we will see, with AMP we can pull the three most important levers to make a website faster. And, better yet, all of that for free. Furthermore, we can even use AMP to improve the user experience on search engines (particularly Google).
Okay, but what is AMP?
Before we dive into our AMP tutorial, we should spend a few words talking about what is AMP.
AMP is a web components library that forces you to follow the best practices of developing a website. How does it do that? It limits what you can do to only things that can be amazingly fast.
You can think of AMP as a new approach to writing HTML, CSS, and Javascript. Thus, if you worked with any of those, you will have to rethink a little bit how you write them.
While AMP is an open-source project, its major sponsor is Google, which even automatically caches AMP pages to make AMP sites even faster. Furthermore, Google prefers AMP sites to non-AMP sites in the search result, so this AMP tutorial may be also a great boost to your SEO.
If you are curious, this is the official website for the AMP project.
The AMP Tutorial
Your first AMP file
Starting with AMP is so easy it can take as little as 5 minutes. You will see it simply by following this AMP tutorial. Before we dive in, just know that AMP must run over HTTPS. If your side isn’t HTTPS, you won’t be able to enjoy AMP at its best.
The first thing you want to do is to create the classic index.html file for your website. First, you must define the <!doctype html>, which is mandatory. Then, you don’t simply open a <html> tag. Instead, you add the amp attribute inside the <html> tag.
You should also include the “amp boilerplate” which is a set of predefined styling for AMP.
After that, you include as early as possible the AMP script in the <head>. You must also define the viewport and the charset, which must be UTF-8. Furthermore, you should include a link to the non-AMP equivalent of this page like so <link rel="canonical" href="non-AMP-URL">. If you plan on doing just AMP, which is fine, you can make a link to the page you already are in.
Instead, if you do want to have both non-AMP and AMP pages, add the same tag in the non-AMP page. However, here the relationship is not “canonical”, but “amphtml”.
In the end, your file should look something like this.
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Hello, AMPs</title>
<link rel="canonical" href="https://amp.dev/documentation/guides-and-tutorials/start/create/basic_markup/">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<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>
</head>
<body>
</body>
</html>
And if you test this file out in your browser… it will just be a blank page! But not for long, read on.
AMP Tutorial: Inside the Body
You must have a body tag, otherwise, your AMP won’t be valid. After all, why wouldn’t you have the body tag anyway? That’s where the content goes.
Inside the body, you can use most (but not all) your normal HTML tags.
AMP Images
One of the most important things you want to know is that you cannot use <img>. Instead, you have to use the AMP equivalent <amp-img>.
Unlike the <img> tag, this tag must be closed. And, you have to specify width and height, so that the browser can start to allocate the right space even before the image loads.
<!-- NOT valid! --> <amp-img src="picture.jpg" alt="Welcome" height="400" width="800"> <!-- Valid --> <amp-img src="picture.jpg" alt="Welcome" height="400" width="800"></amp-img>
If you can, a good option is to use srcset to provide multiple versions of the same image at different sizes. This is something browsers love, and search engines love as well. If you want more information about this tag, read the official documentation here.
AMP Supported HTML tags
As stated earlier in this AMP tutorial, AMP does not support all HTML tags. So, what are the HTML tags supported in AMP? What are the ones forbidden? Read the list below.
scriptis forbidden, unless you use this unless the type isld+jsonortext/plain.base,picture,applet, everything about frames,embed,object,paramare all prohibited.- The media tags
img,video,audioandiframeare replaced with theiramp-equivalents. - You can use most input types, except image, button, password, and file.
- You can also use forms, but you must include
amp-form. Read more here. - Everything else is okay.
After all, you don’t have many limits here. If you want to read more about this topic, the official documentation about this is on this page.
Custom CSS
You can provide custom CSS with AMP. However, you can’t include an external stylesheet, nor provide an inline style to your tags. Instead, in the head and after the AMP boilerplate, you can include some custom AMP style, like the following.
<style amp-custom>
/* any custom style goes here */
body {
background-color: black;
}
amp-img {
background-color: gray;
border: 1px solid white;
}
</style>
Just one remark here. Never use the * selector, because AMP doesn’t like that. Also, the !important directive is something AMP doesn’t welcome. Well, to be honest, is something that you shouldn’t be using already. If you do, now is the time to change.
Anyway, you can reference external stylesheets only if they provide fonts. So, don’t worry, you still can use Google Fonts!
AMP Tutorial on Metadata
Metadata means data about data. What does it have to do with this AMP Tutorial? Well, AMP allows you to specify some metadata for all your pages. Such metadata are simply small chunks of information that search engines can easily interpret. They are then often used to show rich snippets, the kind of preview of search results you view on the Google page.
You can define many flavors of metadata, but the way of doing it is always the same: a simple JSON object.
Include in your HTML head something like this.
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Open-source framework for publishing content",
"datePublished": "2015-10-07T12:02:41Z",
"image": [
"logo.jpg"
]
}
</script>
As you can see, this is a simple JSON contained in a script tag. This defines the information for a news article, but there are many different ones: books, recipes, you name it! If you want to see some examples, head to this GitHub project.
When to use AMP?
AMP is great to make websites faster. However, is not always the best way to go. As a golden rule for this AMP tutorial, if the purpose of your website is to show information then you should use AMP. Blogs of any kind, guides, knowledge bases, forums, they can all use AMP.
The more your application is complex and rich in feature, the more AMP starts to be a limit. So, if you have a web application more than a website, maybe you should not go for AMP. Instead, go for a PWA. The good news is that you can follow this tutorial on how to build a PWA in 10 minutes.
In Conclusion
In this brief AMP tutorial, we saw how to use AMP to rewrite our website and make it faster. Hopefully, in a few minutes, you will be able to create some amazing AMP pages. If you do, my tip is to use the Google Chrome AMP extension to validate your AMP code and troubleshoot errors. It will boost your productivity!
But remember, there is more to AMP than just websites. You can use it for example to create AMP stories, ads, or even emails. Probably, the AMP team will add more features with the time, so AMP is not something you want to miss out on!
