Around the internet slow page load is a bummer, that makes visitors abort a visit to your website, this happens particularly more often on mobile devices.
Loading web pages on your mobile is often painfully slow, with pages taking a long time to load. Even after the text is shown, pages continue to fill up over time, as ads and images start showing up. The result is an often jarring experience of janky scrolling and users needlessly losing their reading position.
Faster Web
To make the web fast at scale, creating web pages must be made easier to make them fast-by-default. It is a hard problem to solve, the web is many things: an application platform, an e-commerce platform, a content platform, a gaming platform, and so much more.
AMP
Google has launched a concept they call Accelerated Mobile Pages (AMP). AMP HTML is built on existing web technologies, and the web pages written in it render in all modern web browsers and web views.
Web performance issue
Many performance issues are caused by the integration of multiple JavaScript libraries, tools, embeds, etc. into a web page. JavaScript does not immediately lead to bad performance, but once arbitrary JavaScript is in play, most bets are off because anything could happen at any time and it is hard to make any type of performance guarantee.
Google’s AMP HTML documents would not include any author-written JavaScript, nor any third-party scripts.
As Google said
JavaScript is the core building block for advanced web apps, but for static content, it may not always be required: for a headline, some text and an image you do not need JS. Looking further into the content being created on the web nowadays, there are, however, things like lightboxes, various embeds, polls, quizzes and other interactive features that cannot easily be implemented without JavaScript.
But the web platform has a great solution: custom elements and web components. AMP components may have JavaScript under the hood, but it is coordinated with other AMP components, so its composition into the page doesn’t cause performance degradation. If AMP HTML provided the right custom elements, we might be able to get rid of arbitrary JavaScript for these documents altogether.
AMP HTML takes advantage of CSS to let web pages look like their authors intended them to, and so allowing extensive styling is core to the platform.
Ads and analytics
A big part of the performance problem is ads and analytics, they are an important element of monetization on the web. AMP HTML uses so-called “tracking pixels” that can be embedded into AMP web pages as long as they don’t use JavaScript. AMP HTML doesn’t allow JavaScript so ads cannot be directly embedded – instead, they live in sandboxed iframes with no access to the primary web page. Relying on iframes solves some of the worst performance pitfalls with ads.
But how to get from good to, let’s say, instant?
AMP documents are from the ground up designed to be efficiently pre-renderable. Browsers have long supported pre-rendering through the <link rel=prerender> tag, but they need to be conservative about this mechanism because prerendering can be expensive.
With AMP HTML we added the ability to tell a document: render yourself but only as far as what is visible above the fold and only elements which are not CPU intensive to minimize the cost of pre-rendering. With this mechanism in place, referrers of AMP documents can initiate rendering of docs before the user acts much more aggressively so that in many cases the document will be done rendering by the time the user clicks.
AMP HTML Load
With all of these techniques in place, AMP HTML web pages can be loaded with a small set of HTTP requests: the web page itself, custom fonts (if used) and the AMP JavaScript library that implements the AMP custom elements and resource loading. All resource loading is controlled by the AMP library and, more importantly, resources must declare their sizing up-front. Web page authors have to state resource sizes explicitly.
AMP HTML is a specialized subset of HTML with custom elements that provides reliable performance and instant loading of static content. You can find the specification here: AMP HTML spec as well as a prototype implementation on GitHub.
In the End
Any thoughts, make your comments below.
Leave a Reply