Improving User Experience – Accelerated Mobile Pages

AMP (Accelerated Mobile Pages) is a JavaScript library, created by Google, which is used to improve the user experience of browsing websites on mobile devices by reducing page size. This reduction lowers data usage and reduces page load times by incorporating the following techniques:

  • Eliminating all external or author-written JavaScript on the AMP page. Only asynchronous AMP JavaScript is allowed to run so the rendering of the page is not blocked. Additionally, AMP adds alternative HTML tags to replace functionality that would otherwise require JavaScript.
  • Static sizing of all external resources. Pages can load without waiting for content to load. For example, AMP images are loaded asynchronously, and the height and width must be declared in the markup. The page starts loading without the image. Since the browser already knows the image size, the layout does not require modification once the image has finished loading.
  • Eliminating external style sheets. On a page without AMP JavaScript, you must download style sheets, parse, and apply before the page can render, creating a delay. AMP requires that all CSS is inline and limited to 50 kilobytes.
  • Optimizing resource loading. AMP prioritizes resource loading in a way that optimizes the time to render a page. AMP concentrates on above the fold content, and defers content that is not initially visible via lazy loading. High priority items such as fonts are loaded first, and lower priority items such as images and ads are loaded last. Additional implementation details can be found at https://www.ampproject.org/learn/about-how/.

There are many benefits to using AMP related to user experience. The main benefit to a developer or site owner is that Google Search prioritizes AMP content above the fold on mobile devices.

The main use for AMP is content pages such as news articles or blog posts. These pages are normally accessed from a search engine or a share link from a social media post. The extremely fast load times and above the fold placement in Google Search results make these pages easy for mobile users to click on.

Visit https://www.ampproject.org/case-studies/ to view case studies of AMP conducted by several large news and blog sites.