AMP or Accelerated Mobile Pages, is an Open Source Project started by Google.
The goal of the AMP project is fairly simple, get users to build fast loading webpages.
AMP tries to strike a balance between the web as it exists today, and the things that make the web slower. It has identified some of the critical components that are common across all pages and phenomenally optimized them. Conceptually, an AMP page is a standalone HTML page comprising of the following components:
HTML :
The piece that glues it all. The head is the most critical section of the HTML page, given below are the main restrictions surrounding the
<head>
Pretty obvious, the default tag for every page that exists today on the Internet.
<html ⚡="">
The lightning bolt that started it all!
- externally fonts are now allowed.
- JavaScript includes are limited to few whitelisted AMP hosted JavaScript libraries.
- strictly no CSS includes.
- Absolutely no inline CSS. AMP hates that, don’t use it, period.
- <style amp-boilerplate>: This is AMPs magic string and is mandatory to get your AMP validated.
CSS:
All CSS must be part of the <style amp-custom> tag. This is the place to put in your CSS magic! Be careful though, not all CSS is supported, especially the animation part. More importantly, don’t go beyond 50KB.
AMP integration with third part libraries:
The AMP project has worked extensively with top vendors and services to integrate with AMP. Unlike popular opinion, AMP does not want to break the internet or only support Google properties, AMPs main goal is to get pages load fast. With that mind, following are the top services integrated with AMP:
Google Analytics - Must track, cannot optimize what we cannot see.
YouTube - Everyone's favorite!
AdSense - Time to make some money.
Facebook Pixel - for retargeting / marketing purposes.
Full list of partners and services available at https://www.ampproject.org/support/faqs/supported-platforms
Hope you enjoyed the article. AMP is awesome, engineers trust it, customers love it.
