Accelerated Mobile Pages (AMP) were created to improve speed and user experience, across all devices and platforms, by cutting down on many of the components that slow web pages down.
AMP pages render much faster than normal web pages. Originally created for news articles and blog posts, AMP will eventually incorporate other types of content pieces and platforms.
Google has created a separate AMP news carousel, specifically for AMP pages, which appears in mobile search results.
AMP pages are usually copies of existing web pages on a separate URL, made up of AMP HTML, AMP JS, and a limited amount of CSS.
AMP Features
To accelerate load time, AMP strips down HTML pages and caches content to Google’s servers and serves content from there – utilizing Google’s network to deliver the content. Google also pre-renders AMP pages in SERPs before the user visits them, enabling near-instant loading times.
Asynchronous loading loads content faster, while srcset support fetches the right definition of image per device.
Through the use of smart resource downloading, AMP is able to download content within the viewport first, before downloading content outside of the viewport.
All of this can still be tracked in Google Analytics.
Additionally, AMP utilizes many extra components to increase the interactivity of AMP pages, including amp-iframe and amp-lightbox.
For a complete list head to ampbyexample.com.
How to Implement AMP
AMP can be implemented with basic HTML pages – no server requirements or limitations are needed.
- Signal to crawlers that a page is an AMP page by using the lighting strike icon in <html ⚡>
- Include amp js file in header: <script async src=”https://cdn.ampproject.org/v0.js“></script>
- Use rel=”amphtml” on the main canonical page to point to the amp equivalent page: <link rel=”amphtml” href=”https://example.ampproject.org/article-metadata.amp.html” />
- Limits: No custom javascript except in amp-iframe, no scrolling elements on pages, max 50kb stylesheet
- iframes can be used to embed third party javascript interactive content
- Content inside embedded iframes need to be hosted on https
- iframes must not be within the top 75% of the viewport or within top 600px of the page unless you use a placeholder which will show before iframe content has loaded – recommended for video
- AMP only allows animating and transitioning transform and opacity
- Nothing is done to redirect the users to an AMP page – they would have to use a direct link to the AMP page (the swapping out is only done on Google’s SERPs). This means you have to build a whole separate AMP website
- There is an official WordPress AMP plugin that completely handles the amp implementation for you
- AMP implementations can be tested by adding “#development=1” to the URL and opening the chrome console. They can also be tested in Search Console with the Accelerated Mobile Pages report. Google will also be sending out alerts for errors on AMP pages.
Considerations
Since AMP pages are separate pages from the main version, more crawling is required, and therefore, more load on the web server occurs. If you implement AMP for your entire website, this will potentially double the amount of time Google spends crawling your website.
While implementing AMP technically means creating more pages on your website, these AMP pages aren’t indexed by Google so page count is not affected.
The overall value of an AMP site is yet to be fully understood. Despite the limited number of sites currently included in the AMP carousel, the reported traffic volumes are relatively modest.
Although Google may increase the exposure of AMP pages in search results, the benefits could be diluted as more sites join the system.
Examples and Further Reading
For a useful website containing live examples of what’s possible with AMP, head to: ampbyexample.com
An example AMP page: https://www.independent.co.uk/news/uk/politics/boris-johnson-says-david-camerons-arguments-for-staying-in-the-eu-are-scaremongering-and-wildly-a6889066.html?amp
Example of AMP pages in SERPs:
https://search.googleblog.com/2015/10/accelerated-mobile-pages-in-search.html
