When you are building a website there are a lot of aspects to consider, including design and information architecture, security, performance, and SEO. But even if your site is a cornerstone of web design and has amazing content, if it is taking too long to load then it’s almost certain that users are just going to leave.
According to this Jakob Nielsen article, people have three response-time limits. A response-time of 0.1 seconds results in a perception of instantaneous action by the user. A longer response-time of 1 second causes the user to sense a delay, though their flow of thought remains uninterrupted. From 1-10 seconds users begin to lose their sense of control over the page, and when the response-time is over 10 seconds it becomes highly likely that the user will quit, as they have already focused their thoughts on something else. What’s more, because of the increasing speed of devices and Internet bandwidth, these response-times are consistently becoming even shorter.
Studies show that more than ever people are using their mobile devices to browse the Internet; according to this article by Dave Chaffey, 51% of the users in the USA consuming digital media are using their mobile devices. Here comes a bigger challenge, since users are becoming less patient, and the mobile network infrastructure is not as good as the home installed broadband. Users want the mobile sites to be fast, but heavy use of images or videos, abuse of javascript plugins, and countless ads create a nightmare for our impatient user.
AMP Project
At the end of 2015 Google launched an initiative to make mobile navigation faster, or as they say “instantaneous”. Their Accelerated Mobile Pages (AMP) Project is an open source project originally built to bootstrap static content pages and boost their loading speed; this is achieved by restricting the HTML, CSS and Javascript by adding some new HTML-like elements.
How does it work?
AMP works by adding the AMP Javascript library that translates and optimizes all the amp- tags used in the AMP HTML, and has a main role in the integration with AMP Cache, which is ultimately the tool that makes the ‘instantaneous’ part real.
Here is the basic sample of AMP HTML taken from the GitHub repository of AMP project:
<!doctype html> <html ⚡> <head> <meta charset="utf-8"> <link rel="canonical" href="hello-world.html" > <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript> <script async src="https://cdn.ampproject.org/v0.js"></script> </head> <body>Hello World!</body> </html>
Additionally AMP has a validator that makes it easy for developers to see if their code matches the AMP specifications, and a bunch of components that provide easy integration of dynamic and external elements but in a performant way.
To be cached by Google the pages must meet three requirements:
- They have to be valid AMP pages
- Their URL needs to be “discoverable”
- They need to be correctly marked up with Schema.org specifications
What’s next?
Google has established partnerships with publishers and the project is open source, which has boosted its adoption by many major media publishers like The New York Times, The Washington Post, The Wall Street Journal and BuzzFeed, who are all using AMP for their pages.
Google has said that they are not going to rank AMP pages higher in their search engine, but it will certainly have a significant impact on page rankings.
The AMP project is being tested for ecommerce sites like Ebay, you can see an example here: drones.
AMP pages are here to stay, but the question remains: Which technologies will be added, and which will be replaced?
