Book Image

AMP: Building Accelerated Mobile Pages

By : Ruadhan O'Donoghue
Book Image

AMP: Building Accelerated Mobile Pages

By: Ruadhan O'Donoghue

Overview of this book

Google introduced the Accelerated Mobile Pages (AMP) project to give mobile users lightning-fast response times when accessing web pages on mobile devices. AMP delivers great user experiences by providing a framework for optimizing web pages that otherwise would take much longer to load on a mobile platform. This book shows how to solve page performance issues using the mobile web technologies available today. You will learn how to build instant-loading web pages, and have them featured more prominently on Google searches. If you want your website to succeed on mobile, if you care about SEO, and if you want to stay competitive, then this book is for you! You will go on a mobile web development journey that demonstrates with concrete examples how to build lightning-fast pages that will keep your visitors on-site and happy. This journey begins by showing how to build a simple blog article-style web page using AMP. As new concepts are introduced this page is gradually refined until you will have the skills and confidence to build a variety of rich and interactive mobile web pages. These will include e-commerce product pages, interactive forms and menus, maps and commenting systems, and even Progressive Web Apps.
Table of Contents (24 chapters)
Title Page
Credits
About the Author
Acknowledgements
About the Reviewer
www.Packtpub.com
Customer Feedback
Preface
14
Actions and Events
16
amp-bind Permitted Attribute Bindings

What exactly is AMP?


AMP is essentially a performance optimized HTML and JavaScript framework designed to deliver content quickly. It was originally conceived as a delivery format mostly for static, news-type content. But AMP has already evolved beyond its original static content aspirations, and now rich, interactive, and engaging pages can be built. Indeed, the range of user experiences possible was underscored at the first ever AMP conference in NYC in March 2017, where a fully functional messaging app was demonstrated, as well as an e-commerce app complete with payment capabilities.

There are three main components of AMP: AMP-HTML, AMP-JS, and AMP Cache. Let's take a look at them next.

AMP-HTML

AMP-HTML is an HTML5-based markup language that's used to write AMP content. It's basically a flavor of HTML5 designed with performance in mind. It both restricts and extends the HTML tags you can use in your pages. It restricts the HTML tags you can use to ensure reliable performance, and it provides a set of custom HTML tags--AMP components--to deliver rich but constrained functionality on top of the permitted HTML tags.

Because they are HTML-based, AMP pages will run in any web browser, out of the box. Additionally, AMP-HTML is designed so that it can also be served from the AMP Cache, and when it is, further optimizations can be automatically applied.

AMP-JS

AMP-JS is a JavaScript library that powers AMP pages. It's a runtime that orchestrates the optimized loading and rendering of AMP content. To achieve lightning-fast page loads, AMP-JS follows strict web performance best practices.

AMP-HTML restricts the tags you can use so that the exact layout needed to render the page can be known in advance. The AMP-JS runtime calculates page size and converts your custom AMP-HTML tags into HTML that the browser understands. It also assumes control of the loading of resources from the browser, so that it can prioritize resources that are above-the-fold or likely to be viewed by the user.

AMP Cache

Sometimes referred to as AMP-CDN, this is the caching component of AMP. It's a free-to-use content delivery network (CDN), for caching AMP pages so that they can be rendered instantly. Anyone is free to implement and use their own CDN. AMP Cache is a key component in delivering AMP's instant-loading experience.

When AMP pages are served from the cache, they can be optimized even further. These optimizations include:

  • Resizing images to match the user's viewport (reduces page size)
  • Inlining images that are above-the-fold (reduces HTTP requests)
  • Inlining CSS (reduces HTTP requests)
  • Preloading of extended components (reduces perceived page load time)
  • Minification of HTML and CSS (reduces page size)
  • Pre-rendering of web pages in the background (reduces perceived page load time)

AMP URLs

It's worth noting that a side-effect of the AMP Cache is that AMP documents will have a separate URL for the cached version. In fact, AMP documents have three different kinds of URL. For domain example.com, these will be:

  • Original URL:https://example.com/amp_doc.html
  • AMP Cache URL:https://example-com.cdn.ampproject.org/c/s/example.com/amp_doc.html
  • AMP Viewer URL (when viewing AMP pages from Google search results):https://www.google.com/amp/example.com/amp_doc.html

Having three URLs might be a little confusing, but they're necessary for caching and pre-rendering in AMP.