Accelerated Mobile Pages Tutorial
What is an AMP Page?
Accelerated Mobile Pages, or AMP as they are called, are designed to adhere to a distinct open source specification. They are nothing more than pages created with HTML. AMP HTML is actually a subset of the traditional HTML you see used to develop most websites. HTML content on an AMP page is trimmed down to the pure basics, so that when the page is published performance is exceptional.
The beauty of this is that you don’t need any special tools, nor do you need to develop rendering engines to power an AMP page. You can author the entirety of your content – and design – using HTML, just like you’re used to. What’s different about AMP HTML is that there are restrictions on some of the tags, commands, and functionality you can rely on.
Of course, this means that an AMP page can be uploaded to a web server and served to visitors just like a regular HTML document. To further improve browsing experience, the AMP HTML documents can be passed through a unique serving system which proxies the content. This will trim down the elements that have been used during an optimization phase, further improving performance and loading times.
For example, an AMP serving system might perform the following optimization techniques:
- Swap images with lower resolution (not lower quality) substitutes to match the viewer’s device
- Pre-load certain components similar to cache tools
- Minify HTML and CSS content
- Deliver inline images visible above the fold, and inline CSS variables
- Prioritize the loading of certain elements on the page based on the user’s viewpoint
Where Did AMP Come from?
The AMP initiative which has now been adopted, first started as an experiment at Google. A group of developers, headed by Software Engineer Malte Uble, began working collaboratively to create a webpage that would load with consistent and reliable performance. The main focus was, obviously, mobile, where a large majority of content is now served.
That does not mean that Google is the only one supporting AMP. We’ll get to the pioneers that will be using these design techniques much later.
For now, it’s important to understand that Google supports the initiative, and will soon be routing traffic to AMP content as much as possible.
What Are the Benefits of AMP Design?
The focus of the AMP initiative is speed, primarily when it comes to page loading times. , the bounce rate for your website is directly influenced by how long it takes your page to load. Bounce rates can reach as high as 58% for sites that take longer than 10 seconds to display content, especially on mobile.
Bounce rates are no good for anyone, including advertisers, as everyone benefits the more time visitors spend on your site.
Furthermore, because AMP pages can be loaded so quickly, it creates new opportunities for sharing content on the open web. As the AMP development team says, “[they] want to promote enhanced distribution so that publishers can take advantage of the open web’s potential for their content to appear everywhere quickly – across all platforms and apps – which can lead to more revenue via ads and subscriptions.”
Who Should Be Using AMP?
Initially, it will be publishers and content creators that switch to AMP design. However, the project is designed to be accessible to “all players in the ecosystem,” meaning anyone who produces content on the web – of any kind. Several big names that have already begun participating include Twitter, WordPress, Vox, The New York Times, and more.
Are There Consequences for Using AMP?
Yes, there are consequences, although it depends on your strategy how much they will affect you. By switching to AMP, you are opening up your content to third parties, which means it can be crawled, indexed, and displayed. There’s no mention on how much control you will have over this, so it’s entirely possible that if a third-party wants to display your content without permission, they may be able to do so.
What Type of Content Works Best with AMP?
According to the team behind AMP, there is no “best” content type. That is, all forms of published content will be supported including videos, news or text, blogs, photos, GIFs, and more.
AMP should work great with Content Management Systems (CMS) like WordPress, Drupal, or Joomla. For instance, for the AMP initiative, and plans to integrate the framework into the latest build. Anything that can be created or published using these systems is included when it comes to content support.
Does It Take Extra Work to Create/Convert Content to AMP?
It will, especially since you’re not used to AMP design, however the work required is not extensive. AMP uses HTML, just like traditional webpages, so it’s a matter of deploying the right specifications and techniques. If you’re already used to working with HTML you shouldn’t have any trouble adapting, or learning the new process.
When Does AMP Go Live in Google?
After Google , they made it clear that they would be rolling out the changes . Sure enough, on Wednesday, February 24, 2016 Google launched AMP search results. This means that search now directs to AMP powered pages first.
If you’d like to see AMP in action, Google has a demo that you can check out from your mobile device . Again, you have to be on a mobile device to see it working.
How Does AMP Work?
When you open Google News (on mobile) you’ll see the featured Carousel at the top, above where you’d normally see the blue content links. They essentially look like cards – that are swipeable – and they show a featured image and a brief intro to the content. When you choose one, it opens the related page instantly. When you’re done reading, you don’t have to return to the search results, you can just swipe to the left or right to open the next news item – even if it’s on a completely different site.
That’s the whole point of AMP. That’s also why one of the consequences of using AMP is that third-parties can crawl, index, and display your content.
How Does AMP Speed up Performance?
There are several optimizations that are followed in AMP design so that the pages load fast. They include:
- Only asynchronous scripts are allowed.
- All resources are sized statically, including images, ads, and iframes.
- AMP does not allow extension mechanisms to delay the page rendering process. Additional HTTP requests for elements like lightboxes, and embed media, do not block page layout and rendering.
- Any and all CSS used must be inline and size-bound.
- Font triggering is more efficient, and AMP declares exactly zero HTTP requests until fonts start downloading.
- With AMP, all DOM reads (style recalculations) happen before writes are allowed. This means there is only one recalculation of styles per frame.
- AMP only runs GPU-accelerated animations.
- AMP controls, optimizes, and prioritizes resource downloads.
- Pages are loaded instantly before they are even navigated to. Only content above the fold is rendered for resource management purposes.
Run That All By Me One More Time
Google is dedicating prime real estate in mobile search results to AMP or Accelerated Mobile Pages. Simply put, if you don’t get on board soon, you’re going to miss out on a lot of potential traffic and exposure.
AMP pages are nothing more than stripped-down versions of normal web pages, so that they load much faster on mobile. All of the important content is maintained, but the unnecessary “fluff” is eliminated. Sadly, this means that some analytics and advertising tools will not function on AMP pages, at least initially.
As the AMP initiative ages, more functionality will be added and that means support will increase for third-party tools.
Next, we’re going to take a look at How You Create AMP Pages.