AMP: Building Accelerated Mobile Pages

Engineer naturally lean web pages and leverage the latest web platform features to dramatically boost page speed
Preview in Mapt

AMP: Building Accelerated Mobile Pages

Ruadhán O'Donoghue

Engineer naturally lean web pages and leverage the latest web platform features to dramatically boost page speed
Mapt Subscription
FREE
$29.99/m after trial
eBook
$25.20
RRP $35.99
Save 29%
Print + eBook
$44.99
RRP $44.99
What do I get with a Mapt Pro subscription?
  • Unlimited access to all Packt’s 5,000+ eBooks and Videos
  • Early Access content, Progress Tracking, and Assessments
  • 1 Free eBook or Video to download and keep every month after trial
What do I get with an eBook?
  • Download this book in EPUB, PDF, MOBI formats
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
What do I get with Print & eBook?
  • Get a paperback copy of the book delivered to you
  • Download this book in EPUB, PDF, MOBI formats
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
What do I get with a Video?
  • Download this Video course in MP4 format
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
$0.00
$25.20
$44.99
$29.99p/m after trial
RRP $35.99
RRP $44.99
Subscription
eBook
Print + eBook
Start 30 Day Trial

Frequently bought together


AMP: Building Accelerated Mobile Pages Book Cover
AMP: Building Accelerated Mobile Pages
$ 35.99
$ 25.20
Building Mobile Applications Using Kendo UI Mobile and ASP.NET Web API Book Cover
Building Mobile Applications Using Kendo UI Mobile and ASP.NET Web API
$ 29.99
$ 21.00
Buy 2 for $35.00
Save $30.98
Add to Cart
Subscribe and access every Packt eBook & Video.
 
  • 5,000+ eBooks & Videos
  • 50+ New titles a month
  • 1 Free eBook/Video to keep every month
Start Free Trial
 

Book Details

ISBN 139781786467317
Paperback370 pages

Book Description

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

Chapter 1: Ride the Lightning with AMP
What do AMP pages look like?
Why now?
What exactly is AMP?
Preparing your web server environment
AMP Hello World - your first AMP page
How AMP solves mobile web performance
Controversy and criticisms of AMP
Benefits of AMP
So, do you need AMP?
Summary
Chapter 2: Building Your First AMP Page
Going from HTML to AMP-HTML
Validating your AMP pages
Using JavaScript in AMP pages
Using CSS in AMP pages
Your first AMP component - <amp-img>
HTML tags that aren't allowed in AMP
AMP components
Measuring AMP page performance
Summary
Chapter 3: Making an Impression - Layout and Page Design in AMP
Laying out elements in AMP pages
Using responsive layout
Adding a related articles section with thumbnail images
Using flex-item layout
Using placeholders and fallbacks to improve user experience
Using custom CSS in AMP pages
Summary
Chapter 4: Engaging Users with Interactive AMP Components
Building collapsible content with <amp-accordion>
Building navigation menus
Implementing tabbed content with <amp-selector>
Displaying user notifications
The Action and Event model in AMP
Summary
Chapter 5: Building Rich Media Pages in AMP
Showcasing products with <amp-carousel>
Adding video to AMP pages
Adding audio to AMP pages
Showcasing your products with <amp-lightbox>
Using social media in AMP pages
Improving product SEO with metadata
Using tabs in product pages
Summary
Chapter 6: Making Contact - Forms in AMP
Using forms in AMP
A simple newsletter sign-up form
Building a product search form
Implementing a shopping cart in AMP
Redirecting after form submission
Summary
Chapter 7: Dynamic Content and Data-Driven Interaction
Dynamic content - fetching JSON data on page load
Fetching a list of related products with <amp-list>
Fetching the shopping cart on page load
Removing items from the cart
Live content updates with <amp-live-list>
A live Twitter search listing
Implementing a live leaderboard
Summary
Chapter 8: Programming in AMP - amp-bind
Introducing <amp-bind>
Removing cart items with <amp-bind>
Improving search with <amp-list> and <amp-bind>
Improving the product image carousel with <amp-bind>
Configuring product options with <amp-bind>
Summary
Chapter 9: When AMP Is Not Enough - Enter the iframe
The <amp-iframe> component
Google Maps in AMP
Disqus comments in AMP
Building a checkout process with the Payment Request API
Summary
Chapter 10: Ads and Analytics in AMP
Analytics support in AMP
Ads in AMP
Summary
Chapter 11: AMP Deployment and Your Web Presence
Canonical AMP pages
Progressive Web Apps and AMP
Serving AMP pages to all mobile visitors
AMP and WordPress
Summary
Chapter 12: AMP - Where It's At and Where It's Going
From zero to AMP
AMP - from web pages to web apps
Criticism of AMP
Summary
Chapter 13: AMP Components
Ads and analytics
Dynamic content
Layout
Media
Presentation
Third-party media
Chapter 14: Actions and Events
Events
Actions
Chapter 15: amp-bind Whitelisted Functions
JavaScript whitelisted functions
Chapter 16: amp-bind Permitted Attribute Bindings

What You Will Learn

  • Build, validate, and deploy AMP pages
  • Create interactive user notifications, navigation menus, accordions, contact pages with forms and maps
  • Monetize your traffic with a variety of ad styles and providers
  • Analyze your traffic by integrating analytics providers and tracking user-behavior along several dimensions
  • Embed social media with amp-youtube, amp-instagram, amp-twitter, and amp-facebook
  • Build e-commerce functionality including product pages and shopping carts
  • Deliver rich media experiences using AMP custom elements
  • Use advanced deployment techniques to extend functionality
  • Install ServiceWorkers and build Progressive Web Apps for offline use

Authors

Table of Contents

Chapter 1: Ride the Lightning with AMP
What do AMP pages look like?
Why now?
What exactly is AMP?
Preparing your web server environment
AMP Hello World - your first AMP page
How AMP solves mobile web performance
Controversy and criticisms of AMP
Benefits of AMP
So, do you need AMP?
Summary
Chapter 2: Building Your First AMP Page
Going from HTML to AMP-HTML
Validating your AMP pages
Using JavaScript in AMP pages
Using CSS in AMP pages
Your first AMP component - <amp-img>
HTML tags that aren't allowed in AMP
AMP components
Measuring AMP page performance
Summary
Chapter 3: Making an Impression - Layout and Page Design in AMP
Laying out elements in AMP pages
Using responsive layout
Adding a related articles section with thumbnail images
Using flex-item layout
Using placeholders and fallbacks to improve user experience
Using custom CSS in AMP pages
Summary
Chapter 4: Engaging Users with Interactive AMP Components
Building collapsible content with <amp-accordion>
Building navigation menus
Implementing tabbed content with <amp-selector>
Displaying user notifications
The Action and Event model in AMP
Summary
Chapter 5: Building Rich Media Pages in AMP
Showcasing products with <amp-carousel>
Adding video to AMP pages
Adding audio to AMP pages
Showcasing your products with <amp-lightbox>
Using social media in AMP pages
Improving product SEO with metadata
Using tabs in product pages
Summary
Chapter 6: Making Contact - Forms in AMP
Using forms in AMP
A simple newsletter sign-up form
Building a product search form
Implementing a shopping cart in AMP
Redirecting after form submission
Summary
Chapter 7: Dynamic Content and Data-Driven Interaction
Dynamic content - fetching JSON data on page load
Fetching a list of related products with <amp-list>
Fetching the shopping cart on page load
Removing items from the cart
Live content updates with <amp-live-list>
A live Twitter search listing
Implementing a live leaderboard
Summary
Chapter 8: Programming in AMP - amp-bind
Introducing <amp-bind>
Removing cart items with <amp-bind>
Improving search with <amp-list> and <amp-bind>
Improving the product image carousel with <amp-bind>
Configuring product options with <amp-bind>
Summary
Chapter 9: When AMP Is Not Enough - Enter the iframe
The <amp-iframe> component
Google Maps in AMP
Disqus comments in AMP
Building a checkout process with the Payment Request API
Summary
Chapter 10: Ads and Analytics in AMP
Analytics support in AMP
Ads in AMP
Summary
Chapter 11: AMP Deployment and Your Web Presence
Canonical AMP pages
Progressive Web Apps and AMP
Serving AMP pages to all mobile visitors
AMP and WordPress
Summary
Chapter 12: AMP - Where It's At and Where It's Going
From zero to AMP
AMP - from web pages to web apps
Criticism of AMP
Summary
Chapter 13: AMP Components
Ads and analytics
Dynamic content
Layout
Media
Presentation
Third-party media
Chapter 14: Actions and Events
Events
Actions
Chapter 15: amp-bind Whitelisted Functions
JavaScript whitelisted functions
Chapter 16: amp-bind Permitted Attribute Bindings

Book Details

ISBN 139781786467317
Paperback370 pages
Read More

Read More Reviews

Recommended for You

Building Mobile Applications Using Kendo UI Mobile and ASP.NET Web API Book Cover
Building Mobile Applications Using Kendo UI Mobile and ASP.NET Web API
$ 29.99
$ 21.00
Building Single-page Web Apps with Meteor Book Cover
Building Single-page Web Apps with Meteor
$ 14.99
$ 10.50
Building Single Page Web Apps with AngularJS [Video] Book Cover
Building Single Page Web Apps with AngularJS [Video]
$ 84.99
$ 72.25
React Native - Building Mobile Apps with JavaScript Book Cover
React Native - Building Mobile Apps with JavaScript
$ 35.99
$ 25.20
Building a Single Page Web Application with Knockout.js [Video] Book Cover
Building a Single Page Web Application with Knockout.js [Video]
$ 84.99
$ 72.25
Instant Building Multi-Page Forms with Yii How-to Book Cover
Instant Building Multi-Page Forms with Yii How-to
$ 12.99
$ 9.10