I recently learnt about something called AMP when the latest version of my blogging platform, Ghost, was released and added support. AMP is designed to make browsing the web on mobile insanely fast and after playing around with it, it seems to do just that!
Accelerated Mobile Pages
The AMP project is an open source project being driven by Google and you can read a load of information over on their site. I'm going to cover the basics here and show you what it's all about. Whilst the post is quite high-level, the goal is simply to introduce you to AMP and what it's capable of. It was launched in October 2015 but I've only recently come across it myself.
How does it work?
In essence, AMP documents are just cut down HTML pages with a restricted set of elements and functionality. AMP also provides custom elements to replace things like <img>, <iframe> and more. All of the decisions made in building the AMP format were made with the goal of being fast as the most important factor. There are literally loads of features that you can read up on but there are a few that I quite like.
JavaScript
One of the biggest performance impacts often comes from JS and in AMP documents author-written JS isn't allowed. If you want functionality on a page you have to use AMP elements, more on those later, with the functionality built in. Additionally, to make sure that JS doesn't block page rendering, you're only allowed to load JS asynchronously.
Static resource sizing
Don't let the title fool you here, this doesn't mean that you can't have responsive pages. You can! What static resource sizing means is that all resources, like images and ads, must define their size in the HTML element. This fixes another really annoying part of browsing the web on mobile. The page loads, you scroll down and start reading something and then an image or ad further up the page loads and shunts everything down, great... In an AMP document because the size is already defined in the HTML the page layout can be drawn without any resources being downloaded, meaning you can start reading without being interrupted.
Content Security Policy
If you're a regular reader I'm sure I don't need to tell you that I was more than a little happy to see CSP mentioned in the AMP docs. Not only was it mentioned, but there is an awesome requirement for CSP. To be considered valid an AMP document cannot require unsafe-inline or unsafe-eval in the script-src of a CSP! Awesome!
Of course, there are a whole host of other things that AMP does to speed up performance but the above are the ones that I thought stood out the most.
Supporting AMP
I'm quite fortunate that Ghost v0.10.0 added support for AMP automagically. All you need to do is add /amp/ to the end of any URL for an article on my blog and it will serve up the AMP version for you. You can try it on this blog right here! To advertise support for AMP each of my articles now has a new link tag that points to the AMP version of the document.
<link rel="amphtml" href="https://scotthelme.co.uk/securityheaders-io-updates/amp/"/>
This allows non-humans like the Google crawler to discover and then index the AMP version of my page so that it can be offered where appropriate. Performing a Google search that returns links to my articles will soon show the AMP version when it is more appropriate than the full version. Likewise, the AMP version of my pages also carry a link tag pointing back to the full canonical version so I don't lose any SEO ranking.
<link rel=canonical href="https://scotthelme.co.uk/securityheaders-io-updates/"/>
To get started with your first AMP page there is a great tutorial on the AMP Project site that covers all of the basics on how to get started, check it out.
Want to go even faster?
If you really want to go even faster you can use the Google AMP Cache. According to their site the 'Google AMP Cache serves cached copies of valid AMP content published to the web'. Basically, instead of hosting your own AMP pages, Google will do it for you for free! It's easy to do, simply change your link tag pointing to your AMP document to the Google AMP Cache instead and update resources to do the same. The base URL for the cache is here:
https://cdn.ampproject.org
You then add a component to indicate the type of content you're loading. There is c for an AMP HTML document, i for an image or r for a resource like a font. In this case I'm linking to an AMP HTML document so I add c.
https://cdn.ampproject.org/c
After the content type there is an optional s parameter that instructs Google to fetch the content from the origin using a secure connection if you can support it.
https://cdn.ampproject.org/c/s
Lastly you include the URI of the resource to fetch excluding the scheme which is determined by the presence, or lack, of the secure flag above.
https://cdn.ampproject.org/c/s/scotthelme.co.uk/securityheaders-io-updates/amp/
You're now all set to have your AMP pages served out of the Google cache instead of serving them directly yourself. Everything will still work exactly the same as if you'd served it yourself, including things like Google Analytics, but the burden of hosting the page no longer rests with you. There are also some other advantages to serving from the Google cache as it performs various optimisations for us. It validates the AMP document, caches images and fonts, strips HTML comments and unnecessary white space and inserts prefetch tags to name just a few. You can read more of the cache optimisations here.
Try it out!
If you have Ghost then you need to update to version 0.10.0 or higher to get AMP support and if you're on hosted Ghost Pro then you already have it. To create your own AMP template take a copy of the default AMP template located at /core/server/apps/amp/lib/views/amp.hbs and place it in the root of your theme folder. You can then edit and customise your own AMP pages however you wish. Here is my modified amp.hbs file in this gist. There's also support on other platforms like Wordpress which has the AMP Plugin and wbAMP for Joomla too. Enjoy :-)