Why Google’s AMP is the new black
Introduction article to AMP and key takeaways from Google’s AMP Conference in Amsterdam 2018.
In today’s world, people would rather have their car stolen than their smartphone. It’s our workstation, our connection to life, our daily news source and our shopping cart. Even though smartphones are slowly becoming as powerful as desktop computers, page load times are still a big problem when it comes to consuming web content on mobile.
Modern mobile user demands and rewards high performance. According to Google, 75% of mobile sites take more than 10 seconds to load, while almost 53% of mobile site visitors leave within the first 3 seconds of loading time. On top of that, poor page load times can affect ecpms and advertising revenue streams.
As you might have already figured out, mobile sites usually don’t meet these performance requirements. So they often end up having slow loading time, unresponsive pages and content displaced by ads. In addition to this, human attention is dwindling. According to researchers, the average human attention span in 2000 was 12 seconds and 17 years after it fall down to 8 seconds. It’s funny how even goldfish can stay more focused than the digital human (the average attention span of goldfish is 9 seconds!).
Publishers whose business model depends on ad revenue are mostly guilty of programmatic ad serving that can be incredibly slow. Resulting in a bad user experience on mobile. Which eventually led to the rise of the notorious ad blockers – causing publishers new headaches.
What is AMP?
AMP is an open source project started by Google, with a mission to make the mobile web experience great again. It looks to achieve this by including a web component library, a validator, and a caching layer – all in effort to deliver fast and reliable web content at scale. In other words, you’ll have to code a stripped down version of your web pages according to Google’s rule. Google will later approve, cache and serve your AMP pages. It is suitable for all mobile sites that generate a significant amount of content such as publishers, advertisers, e-commerce and ad tech platforms.
Built with 3 core components
AMP is recognised for its speed and when we talk about speed, AMP is really fast, almost instant. Under the hood, AMP pages are built with 3 core components – AMP HTML, AMP JS and AMP Cache. So let’s get started from AMP HTML which is good old HTML extended with custom AMP properties. Though most tags in an AMP HTML page are regular HTML tags, some HTML tags are replaced with AMP-specific tags. These custom elements, called AMP HTML components, make common patterns easy to implement in a performant way. We can group AMP components by these categories:
- ads & analytics (amp-ad, amp-analytics, amp-auto-ads, amp-pixel, amp-sticky-ad …)
- dynamic content (amp-bind, amp-form, amp-list, amp-user-notification, amp-web-push …)
- layout (amp-accordion, amp-carousel, amp-iframe, amp-sidebar …)
- media (amp-anim, amp-img, amp-video …)
- presentation (amp-animation, amp-font, amp-story …)
- social (amp-facebook, amp-instagram, amp-pinterest, amp-twitter …)
The next is AMP JS, which ensures the fast rendering of AMP HTML pages. The AMP JS library manages resource loading and gives you the AMP-specific tags. It makes everything that comes from external resources asynchronous and uses other performance techniques such as sandboxing of all iframes, disabling of slow CSS selectors and the pre-calculation of the layout of every element on the page before resources are loaded.
And the last but not least is AMP Cache used to serve cached AMP HTML pages. The Google AMP Cache is a proxy-based content delivery network for delivering all valid AMP documents and it comes with a built-in validation system. It fetches AMP HTML pages, caches them, and improves page performance automatically.
AMP is fast. Really fast.
There are 7 ways AMP makes your pages fast:
- NEVER STOP THE CONTENT
- ASSET-INDEPENDENT LAYOUT
- External resources must state their size in the HTML – element’s size and position are known before resources are downloaded
- Only 1 HTTP request is needed to layout the entire doc (+fonts)
- INLINE, SIZE-BOUND CSS
- Since CSS blocks page load and rendering only inline styles are allowed
- This removes 1 or often more HTTP requests from the critical rendering path
- Inline style sheet has a maximum size of 50 kilobytes
- EFFICIENT FONT TRIGGERING
- all JS in AMP has the async attribute
- only inline style sheets are allowed
- = no HTTP requests blocking the browser from downloading fonts
- MINIMIZE STYLE AND LAYOUT RECALCULATION
- Measuring something triggers style recalculations
- Style recalculations are expensive because the browser has to layout the entire page
- ONLY GPU-ACCELERATED ANIMATIONS
- More work on GPU less work for a browser on CPU
- = makes your page run faster
- PRIORITIZE RESOURCE LOADING
- AMP controls all resource downloads
- It prioritizes resource loading and prefetches lazy-loaded resources
Comes with helpful tools
There are a couple of tools that can make life easier for developers while working with AMP. First on the list is AMP By Example where you can find a bunch of examples with code and demo. Then goes AMP Validator for validating your AMP pages. If you want to try something on quick you would probably look for AMP playground or if you need a good boilerplate template for your new site AMP Start would be perfect for you.
How does AMP help publishers?
AMP provides fast content which ensures faster reading. If a user knows that it will take him only a few seconds to read the article, they will consume more content. More consumed articles mean more ad impressions, which results in more money. All things considered, everybody wins, from users to publishers.
Ads suck – how to fix them?
For publishers, the vast majority of money income comes from ad revenue. However, it seems that every developer who has ever worked with ads would say – “ads suck”! Why? Ads make dozen of additional network requests, they eat up mobile data and might contain malware or redirects, leak sensitive data and frauds. In order to fix existing ads and improve user experience on mobile sites also, developers brought following rules:
- Ads should make a single fast call
- Ads should follow an explicit interface
- Ads should return the minimum amount of data needed
As a result, we got AMP Ads (AMP4ADS) – ads built using AMP-HTML, fast, performant, safe and they do not degrade user experience.
Can I track my AMP pages?
Monetization on web pages often involves various analytics in order to measure activity on AMP documents. AMP Analytics supports a different kind of events:
- Anchor Clicks
- AMP Carousel changes
All in all, you should decide before you start: will you send analytics to a vendor or in-house?
Google is serving only valid pages
Apart from ads and analytics, validation (AMP Validation) has an important role in terms of AMP. Since Google is serving only valid pages one should check out if their AMP page valid. How do I check if my page is valid AMP?
- Browser Developer Console http://localhost:8000/amp.html#development=1
- Web Interface
- Browser Extension
- NPM Packages for CI
- Command Line Tool
The new black
Judging from the previous experience with Google products, once they set their eyes on delivering a better user experience – they become relentless (think Mobilegeddon update). The conference in Amsterdam placed a lot of emphasis on why AMP is the hottest new thing designed and maintained by Google. Forcing and setting limitation might be a trap for the Open Web, but let’s give them a chance as they try to make mobile web fast/great again.
If you want to read more about Amp Stories, find it out in our latest blog post.
Web something-something @ Profico
We shape our core capabilities around lean product teams capable of delivering immense value to organisations worldwide