What is AMP and how does it make your site faster in mobile?

When you run a cursory Google search on your phone, you may notice a symbol beside certain results. Do you know what is it? How does it work? And should your site have it?

Let's get find out -

It's called AMP.

AMP stands for Accelerated Mobile Pages, a Google-backed project designed as an open standard for any publisher to have pages load quickly on mobile devices.

The AMP Project was announced by Google on 7th October 2015, following discussions with its partners in the European Digital News Initiative (DNI), and other news publishers and technology companies around the world, about improving the performance of the mobile web. And on 24th Feb 2016, Google officially integrated AMP listings into its mobile search results. Pages making use of AMP coding appear within special places in the search results and/or with a special “AMP” designation. It's an open-source library that provides a straightforward way to create web pages that are compelling, smooth, and load near instantaneously for users. AMP pages are just web pages that you can link to and are controlled by you. AMP builds on your existing skill sets and frameworks to create web pages. AMP is supported by many different platforms, and it's compatible across browsers like Chrome, Firefox, Edge, Safari, Opera and UC Browser. And it supports desktop, phone, tablet and the web view version of these respective browsers. Its initiative aims to make the web better for all. The project enables the creation of websites and ads that are consistently fast, beautiful and high-performing across devices and distribution platforms.

How does AMP make your site faster?

AMP pages are built with 3 core components which make your site faster than ever.

AMP HTML

AMP HTML is HTML with some restrictions for reliable performance. It's basically 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. The custom elements, called AMP HTML components, make common patterns easy to implement in a performant way. AMP pages are discovered by search engines and other platforms through the

HTML tag. You can choose to have a non-AMP version and an AMP version of your page, or just an AMP version.

AMP Cache

The AMP Cache can be used to serve cached AMP HTML pages. The Google AMP Cache is a proxy-based content delivery network for delivering all valid AMP documents. It fetches AMP HTML pages, caches them, and improves page performance automatically. When using this Cache, the document, all JS files, and all images load from the same origin that is using HTTP 2.0 for maximum efficiency. The cache also comes with a built-in validation system which confirms that the page is guaranteed to work and that it doesn't depend on external resources. The validation system runs a series of assertions confirming the page’s markup meets the AMP HTML specification. Another version of the validator comes bundled with every AMP page. This version can log validation errors directly to the browser’s console when the page is rendered, allowing you to see how complex changes in your code might impact performance and user experience.

AMP JS

The AMP JS library ensures the fast rendering of AMP HTML pages. The AMP JS library implements all of AMP's best performance practices manages resource loading and gives you the custom tags, all to ensure a fast rendering of your page. Among the biggest optimizations is the fact that it makes everything that comes from external resources asynchronous, so nothing in the page can block anything from rendering. Other performance techniques include the sandboxing of all iframes, the pre-calculation of the layout of every element on the page before resources are loaded and the disabling of slow CSS selectors.

What does AMP Provide?

Flexibility and Results

Publishers and advertisers can decide how to present their content and what technology vendors to use, all while maintaining and improving key performance indicators.

Higher Performance and Engagement

Web pages and ads published in the AMP open-source format load near instantly, giving users a smooth, more engaging experience on mobile and desktop.

Build a path to success

If your site takes a long time to load, it doesn’t matter how great your site is, some people will leave the page before they see what’s there. AMP is the perfect addition to the business; it gives a new level of impact for e-commerce clients.

Video uploads faster

Video ads perform significantly better on AMP pages than on the traditional mobile web.

Collaborative effort

AMP is built thanks to a deep collaboration with thousands of developers, publishers and websites, distribution platforms and tech companies. More than 1.5Billion AMP pages have been published to date and 100+ leading analytics, ad tech, and CMS providers support the AMP format.

Community

AMP's ecosystem includes 25 million domains, 100+ technology providers, and leading platforms, that span the areas of publishing, advertising, e-commerce, local and small businesses, and more! More than 30 news publishers and several technology companies (including Twitter, Pinterest, LinkedIn, and WordPress) were initially announced as collaborators in the AMP Project.

How does AMP Work?

The following optimizations combined are the reason to load AMP pages so faster instantly as they appeared -

• JavaScript is powerful, it can modify just about every aspect of the page, but it can also block DOM construction and delay page rendering. To keep JavaScript from delaying page rendering, AMP allows only asynchronous JavaScript. Instead of using JavaScript, interactive page features are handled in custom AMP elements. The custom AMP elements may have JavaScript under the hood, but they’re carefully designed to make sure they don’t cause performance degradation.

• External resources such as images, ads or iframes must state their size in the HTML so that AMP can determine each element’s size and position before resources are downloaded. AMP loads the layout of the page without waiting for any resources to download. AMP uncouples document layout from resource layout. Only one HTTP request is needed to layout the entire doc. Since AMP is optimized to avoid expensive style recalculations and layouts in the browser, there won’t be any re-layout when resources load.

• AMP doesn’t let extension mechanisms block page rendering. AMP supports extensions for things like lightboxes, Instagram embeds, tweets, etc. While these require additional HTTP requests, those requests do not block page layout and rendering. Any page that uses a custom script must tell the AMP system that it will eventually have a custom tag.

• Third-party JS likes to use synchronous JS loading. They also like to document.write more sync scripts. For instance, if you have five ads on your page, and each of them causes three synchronous loads, each with a 1-second latency connection, you’re in 15 seconds of load time just for JS loading. AMP pages allow third-party JavaScript but only in sandboxed iframes. By restricting them to iframes, they can’t block the execution of the main page. Even if they trigger multiple style re-calculations, their tiny iframes have very little DOM. So, the iframe recalculations are very fast compared to recalculating styles and layout for the page.

• CSS blocks all rendering, it blocks page load, and it tends to get bloated. In AMP HTML pages, only inline styles are allowed. This removes 1 or often more HTTP requests from the critical rendering path compared to most web pages.

• Web fonts are super large, so web font optimization is crucial to performance. The AMP system declares zero HTTP requests until fonts start downloading. This is only possible because all JS in AMP has the async attribute and only inline style sheets are allowed; there are no HTTP requests blocking the browser from downloading fonts.

• AMP only allows animation and transition on transform and opacity so that page layout isn’t required.

• AMP controls all resource downloads: it prioritizes resource loading, loading only what’s needed, and prefetches lazy-loaded resources.

• AMP also prefetches lazy-loaded resources. Resources are loaded as late as possible but prefetched as early as possible.

• So, all that way things load very faster.

 

If you want to know more about AMP, you can go to the AMP Project site and learn how to integrate it to hard-code, hands-on. Let us know about your experiences regarding AMP in the comment section. Thank you!