It wasn’t that long ago that you could have a very fragmented and frustrating experience when visiting a site on your phone. Either the web site would not contain the content you were seeking, the page wasn’t mobile-responsive, or the page would take forever to load (sometimes you might have a combination of all 3!).
AMP is a technology that has changed the game for mobile web browsing. AMPConf, presented by Google in New York in March, provided us with updates.
In this post, I’ll cover:
- What is AMP
- How AMP works
- Some of the new announcements from AMPConf
What is AMP?
About a year ago a technology called AMP was launched by Google, with the goal of making the mobile web experience awesome. AMP stands for Accelerated Mobile Pages. It originally launched as a partnership between Google and a small team of publishers, and more are joining.
AMP was initially aimed more for publishers of content, like news hubs, since those web pages tend to require less interactivity.
1.7 Billion AMP pages have been published since launch and approximately 35 million AMP pages are published a week [source: AMPConf Keynote, David Besbris/VP of Engineering at Google and AMP project lead].
An AMP page is just a normal HTML site, with a couple of restrictions and extras. Every AMP page includes the AMP JS library. Some elements are custom elements, like the image tag.
Image from: https://youtu.be/lBTCB7yLs8Y
How does AMP work?
AMP manages the “load chain” of a website, making sure that the primary, above-the-fold content will load first and everything else loads after. This way, your user can start interacting with your website instantly. AMP does smart content prioritization and only loads what’s needed when the user needs it.
AMP’s custom properties require that width, height, or other aspect ratio defining attributes to be set, so it knows how your site will look before it is even loaded (and this way, your browser doesn’t have to take extra time to do calculations for how it should render images for the screen size).
AMP is intentionally limited by design:
Image from: https://youtu.be/SOx1XfOjJPI
In the traditional web server model:
Image from: https://youtu.be/bAFfuAXzYmU
The AMP web server model:
Image from: https://youtu.be/bAFfuAXzYmU
About AMP caches
AMP caches do 3 things:
- Validates the AMP documents
- Do any custom pre-rendering (for the first viewport – it will make your site seconds faster)
- Do optimizations
AMP caches are also useful for reordering tags intelligently and removing duplicates and whitespace.
A unique thing that AMP also does is send more of the render-load to the GPU (graphics card) instead of the CPU, so it’s executed faster.
Why is AMP important?
Image from: https://youtu.be/5Yjoe54vzwE
75% of mobile sites take 10+ seconds to load on a 3G connection.
Image from: https://youtu.be/5Yjoe54vzwE
The need to monetize has created bloated sites (and, in a lot of cases) poor mobile user experience.
Image from: https://youtu.be/5Yjoe54vzwE
There are over 70 ad-tech integrations that can help replicate existing monetization models on your site. AMP also supports paywalls and subscriptions so you can segment your audience to provide more access to content for your subscribers.
AMP also supports a broad range of ads – banner, sticky, flying carpet, promoted content, and video ads.
AMP pages are a way to implement and ensure beautiful, streamlined, fast content web pages without all the extra clutter. Because AMP allows for a better mobile experience via faster site delivery, users may consume more content because it takes less time to load and read that content. This is especially beneficial for businesses that rely on ad revenue.
Announcements from AMPConf
There were a lot of great examples of AMP usage shared at AMPConf that you can check out further on the new AMP Channel on YouTube.
Other announcements include:
- AMP Start, a quick-start library of AMP components and page templates
- The AMP-bind component, allowing for custom interactivity on AMP pages
- A fully designed AMP website coded entirely with AMP
If you’re interested in getting involved with the AMP project, you can contribute here.
Have questions? Want to learn more? Contact your InfoTrust Consulatant today!
