Nowadays we talk more and more about this so-called Internet of things – where all kinds of the devices can be connected to the net and be controlled from a kind of web interface creating a whole environment, which you can access and manage from practically anywhere, even with just the simple small mobile device you are holding in your hand. By the way – when was the last time you bought a newspaper or visited the library? Did you ever? In this line of thoughts, the internet and the possibility of having access to it at all times from practically everywhere turns out to be more and more a regular thing of our life – like the electricity and the hot water.
Okay, now let's step a few years back when it all just begun – maybe you will remember a funny thing about the internet in the 90's: Click to load a 100K image, wait, play a Solitaire, check progress, play Doom, check progress, the connection crashed – start over! And no matter that nowadays this might look even hilarious, despite the fact that technology has advanced we are still having similar experience from time to time – not so constantly of course. Perhaps you'll agree how it is frustrating - when you are trying to check out something over the net, being in a hurry and you have to wait for all those useless pop-up ads, side banners and tracking scripts to be loaded, while you just need to read the actual content and do something with it – like dialing a number or using a part of the info!
Most of the users just reject such pages away and you can understand them since such pages are wasting a time when you need it. So we just go to the next search result hoping it will load at least a bit more useful content. It is proven that if a user doesn't start reading something on the page in between 3 to 5s the page just gets clicked away.
On the other hand we don't pay for most of the info we get over the net – like articles, reference data and so on – and these sites get their funding from the very same commercial messages filling up the bandwidth so they are actually crucial for a site owners in order to continue maintaining their sites and providing us a quality content for usage.
So it looks like a circular situation – we need the info, sites need commercials but also need their visitors to be able to observe and use the quality content published – otherwise the whole process loses sense. Therefore a solution is needed.
In an effort to provide such solution comes the AMP project which is an abbreviation for Accelerated Mobile Pages. What it claims to be capable of is providing much faster pages still rich in content – both meaningful and promotional by just following a few simple rules through the web pages creation process. Since it's powered by Google and has a quite strict validation procedure – a web page is either an AMP one or not – no speed rates or something in the middle – the AMP pages also get favored by the search engines displaying above in the results. As they say – it is a win situation – the users gain fast access to the needed quality content also seeing the ads but not being disturbed by it, the site owners get more traffic since the satisfied users come back and the site displays higher in the search results, and the advertisers win as well since their promotional messages get not only more impressions but also get seen by calm and not frustrated audience.
How about the web developers? What do we need to change in our workflow in order to our pages be approved as AMP? Would they be needed to be completely re-written or we might go with some simple search / replace tweaks and a few more rules to follow? Actually, in order to provide AMP pages with components like AMP Map or AMP Article, you will need to change the way you think and just then – change some of the elements in the workflow. It's like think of performance - first still obtaining appealing appearance, find the effects and features which will more bother the viewer while loading then providing a richer experience and getting rid of them nevertheless some of them are cool and useful. It seems to narrow at first but while we having in mind - why we actually doing this – the users will actually enjoy the results of our work.
What AMP does is prioritizing the utilization of the available bandwidth making the most needed assets load first and display above the fold as soon as possible so the user starts browsing while the rest is being loaded. It also adds some assets restrictions to the style sheets and JavaScript files acceptable for inclusion narrowing them to the absolute minimum and placing some of the custom CSS inline. Plus - it has a built-in validation system usable in a few ways so we can always keep track if a part of the page needs our attention to comply with the standard.
AMP HTML is actually HTML enhanced with custom made AMP attributes . The simplest AMP HTML file looks just like this:
Although most tags of an AMP HTML web page are usual HTML tags, some HTML tags are switched out with AMP-specific tags. These particular custom-made features, called AMP HTML components, make typical styles very simple to incorporate in a performant manner.
For example, the amp-img tag delivers complete srcset support even inside of browsers that really don't sustain it yet.
AMP web pages are seen by Internet search engine and other platforms throughout the <link rel=""> HTML tag. You have the ability to choose to have a non-AMP variation and an AMP version of your page, or just an AMP variation.
The AMP JS library applies all of AMP's most effective functionality techniques, regulates source launching and gives you the custom tags detailed in this article, all to guarantee a fast rendering of your web page.
Amongst the biggest optimizations is the simple fact that it makes everything that comes from external sources asynchronous, so practically nothing located on the page can block anything from rendering.
Various other efficiency techniques incorporate the sandboxing of all iframes, the pre-calculation of the layout of each and every element on the web page before sources are loaded and the turning off of slow CSS selectors.
The Google AMP Cache has the ability to be used to serve cached AMP HTML web pages.
The Google AMP Cache is a proxy-based material delivery network for providing all valid AMP documents. It delivers AMP HTML pages, caches them, and enhances webpage functioning by default. When working with the Google AMP Cache, the document, each of the JS files, and all pictures load from the same origin that is using HTTP 2.0 for the greatest effectiveness.
The cache, in addition, goes with an inbuilt validation system which checks that the page is proven to function and that it doesn't depend on outside resources. The validation process operates a series of reports validating the webpage's markup suits the AMP HTML standard.
Another version of the validator arrives bundled with every AMP web page. This edition has the ability to record verification errors right to the browser's console the moment the web page is provided, making it possible for you to discover exactly how complex changes in your code might actually affect performance and customer experience.
Having a brief look at all of the restrictions to the different kinds of elements potentially slowing down page's performance it is easy to see that indeed this standard will produce pages displaying and performing fast on mobile devices but it's also seen that along with the forbidden stuff a deal of functionality gets cut off. Will all the strict AMP requirements stand in its way to popular usage or on the contrary – will bend the entire way web pages are being created in the next few years – this is up to time to tell.
Over here we're going to take a look at the AMP itself – what it does, how it does, which elements and practices are to be used and which – avoided, so at least you will have the information needed to decide for yourself - if you're going for it or not.