AMP: Building Accelerated Mobile Pages

AMP: Building Accelerated Mobile Pages

by Ruadhan O'Donoghue
Released October 2017
Publisher(s): Packt Publishing
ISBN: 9781786467317

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

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

About This Book

  • The first book for web developers that shows how to put AMP to work
  • Improve your website's mobile experience and get more traffic
  • Practical methods to achieve a step change in performance quickly and easily

Who This Book Is For

This book is for experienced web developers who are aware of the impact of slow-loading web pages on conversion rates and user engagement, and who are seeking to serve content to their end users in a rich and enticing way using the Accelerated Mobile Pages framework. You should be familiar with HTML5, CSS3, JavaScript, and JSON.

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

In Detail

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.

Style and approach

Get step-by-step instructions to build web pages of different types, gain expert tricks to brand your pages without bloating them, and see methods to embed advertising.

Table of contents

  1. Preface
    1. What this book covers
    2. What you need for this book
    3. Who this book is for
    4. Conventions
    5. Reader feedback
    6. Customer support
      1. Downloading the example code
      2. Downloading the color images of this book
      3. Errata
      4. Piracy
      5. Questions
  2. Ride the Lightning with AMP
    1. What do AMP pages look like?
    2. Why now?
      1. Why performance is important on mobile
        1. Mobile technology advances won't make websites fast
        2. Business cases behind AMP
      2. Web performance - why are web pages slow?
    3. What exactly is AMP?
      1. AMP-HTML
      2. AMP-JS
      3. AMP Cache
      4. AMP URLs
    4. Preparing your web server environment
    5. AMP Hello World - your first AMP page
      1. Optional but recommended boilerplate
      2. Structured metadata and the AMP carousel
      3. Validating your AMP pages
      4. What's with the <style amp-boilerplate> code?
    6. How AMP solves mobile web performance
      1. Optimizations that make AMP fast
        1. AMP pre-rendering
    7. Controversy and criticisms of AMP
    8. Benefits of AMP
      1. AMP adoption
    9. So, do you need AMP?
    10. Summary
  3. Building Your First AMP Page
    1. Going from HTML to AMP-HTML
      1. Including the AMP-JS library
    2. Validating your AMP pages
      1. Developer tools console
      2. Online validator
      3. Command line validation
      4. Fixing AMP validation errors
        1. AMP boilerplate validation errors
    3. Using JavaScript in AMP pages
    4. Using CSS in AMP pages
    5. Your first AMP component - <amp-img>
      1. Layout in AMP
    6. HTML tags that aren't allowed in AMP
      1. Forbidden HTML tags
      2. HTML tags with AMP-HTML replacements
      3. HTML tags that are allowed, but with restrictions
    7. AMP components
    8. Measuring AMP page performance
      1. Measuring mobile web performance
        1. What is "good" web performance?
        2. Waterfall charts
        3. WebPagetest.org
        4. PageSpeed Insights
        5. Remote debugging with developer tools
    9. Summary
  4. Making an Impression - Layout and Page Design in AMP
    1. Laying out elements in AMP pages
      1. The AMP-HTML layout system
      2. The layout attribute
    2. Using responsive layout
      1. Canonical AMP pages
      2. Art-direction and responsive images
        1. Using srcset to optimize image loading
        2. Using the heights and sizes attributes
    3. Adding a related articles section with thumbnail images
      1. Using CSS3 flexbox for layout in AMP
      2. Scaling up for larger screens
        1. Using flex and media queries for horizontal layout
        2. Using responsive images and srcset to deliver high quality images on all screen sizes
      3. Using element media queries to display art-directed images
    4. Using flex-item layout
      1. Horizontal flex items
      2. Vertical flex items
      3. Full width flex item container
      4. Flex items with specific proportions
      5. Mixing flex and non-flex items
    5. Using placeholders and fallbacks to improve user experience
      1. Placeholders
      2. Fallbacks
    6. Using custom CSS in AMP pages
      1. Adding custom fonts to AMP pages
        1. Using custom fonts to improve page design
      2. Text layout with CSS and HTML
      3. Text layout with <amp-fit-text>
        1. Adding SVG graphics to AMP pages
    7. Summary
  5. Engaging Users with Interactive AMP Components
    1. Building collapsible content with <amp-accordion>
      1. Building an expandable top stories category list
        1. Styling <amp-accordion>
          1. Improving the accordion with an expanded state indicator
      2. It's accordions all the way down!
    2. Building navigation menus
      1. Horizontal navigation menus
        1. Scrollable horizontal navigation
      2. Building a navigation menu with <amp-carousel>
      3. Adding side navigation with <amp-sidebar>
        1. Triggering the sidebar
        2. Styling the sidebar with CSS
        3. Adding an SVG hamburger menu button
        4. A note on accessibility
      4. Hierarchical navigation menus with <amp-sidebar> and <amp-accordion>
        1. Scaling up
    3. Implementing tabbed content with <amp-selector>
    4. Displaying user notifications
      1. Using server endpoints to store the dismissal state of user notifications
    5. The Action and Event model in AMP
      1. Attaching event handlers with the on attribute
      2. Events and actions
        1. Handling multiple events on a single element
        2. Triggering multiple actions for a single event
        3. Using actions on any HTML element
    6. Summary
  6. Building Rich Media Pages in AMP
    1. Showcasing products with <amp-carousel>
      1. Building a carousel of products
      2. Hero promotion with <amp-carousel> slides
        1. Autoplaying <amp-carousel> slides
        2. Adding call-to-action text to carousel images
      3. Building a product image gallery
        1. Product image gallery with thumbnail previews
        2. Jumping to a specific image with goToSlide()
        3. Highlighting the selected thumbnail
        4. Reducing code with <amp-selector>
    2. Adding video to AMP pages
      1. Hosting your own videos with <amp-video>
      2. Embedding hosted videos
    3. Adding audio to AMP pages
      1. Embedding self-hosted audio with <amp-audio>
      2. Embedding third-party hosted audio
    4. Showcasing your products with <amp-lightbox>
      1. Lightboxing product images
        1. Closing the lightbox
    5. Using social media in AMP pages
      1. Facebook
      2. Twitter
      3. Instagram
      4. Promoting products with social media
        1. Setting default share text
    6. Improving product SEO with metadata
    7. Using tabs in product pages
    8. Summary
  7. Making Contact - Forms in AMP
    1. Using forms in AMP
      1. Submitting forms in AMP
    2. A simple newsletter sign-up form
      1. Submitting XHR AJAX forms in AMP
      2. Handling XHR responses with <amp-mustache>
        1. Creating the server in PHP
        2. Hiding the form on success
      3. Custom form validation
      4. UX improvement - visual feedback on submission
    3. Building a product search form
      1. Styling the search form
      2. The server response - a JSON list of products
      3. Iterating over JSON data with <amp-mustache>
      4. Showing the search status
      5. Animating the search icon
      6. A caveat with the submit-success approach
    4. Implementing a shopping cart in AMP
      1. Variable substitution in AMP
      2. Using CLIENT_ID to identify a shopping cart
      3. Building the shopping cart server
        1. Handling the shopping cart server response
      4. Dismissing the cart summary
    5. Redirecting after form submission
    6. Summary
  8. Dynamic Content and Data-Driven Interaction
    1. Dynamic content - fetching JSON data on page load
      1. The <amp-list> component
    2. Fetching a list of related products with <amp-list>
      1. Using list tags <ul> and <li> with <amp-list>
        1. A note on <amp-list> container size
    3. Fetching the shopping cart on page load
      1. Showing the cart contents with <amp-mustache>
        1. Sharing a mustache template between <amp-list> and <amp-form>
    4. Removing items from the cart
      1. Retrieving URL parameters with AMP's variable substitution
    5. Live content updates with <amp-live-list>
      1. Using <amp-live-list>
      2. A simple <amp-live-list> example
    6. A live Twitter search listing
      1. Adding a search form to use with <amp-live-list>
        1. Why is it more complicated with the AMP Cache?
    7. Implementing a live leaderboard
    8. Summary
  9. Programming in AMP - amp-bind
    1. Introducing <amp-bind>
      1. State, expressions, and data-binding
        1. Stateful data in <amp-bind> with <amp-state>
          1. Initializing state with <amp-state>
          2. Updating state with AMP.setState()
          3. Debugging state with AMP.printState()
        2. Expressions in <amp-bind>
          1. Text manipulation expression
          2. Arithmetic expression
          3. Branching if...else expression
        3. Data-binding: linking expressions to element state
      2. Using <amp-bind>
        1. Changing text with <amp-bind>
        2. Setting default values for AMP state properties
        3. Changing CSS class with <amp-bind>
    2. Removing cart items with <amp-bind>
      1. User-triggered updates with <amp-list> and <amp-bind>
        1. Ensuring that <amp-list> has a unique URL
    3. Improving search with <amp-list> and <amp-bind>
      1. Sorting, filtering, and updating search results
        1. Using amp-list to show search results
        2. Search results JSON response
        3. Filtering by color, and sorting by price
      2. Adding search autosuggest
    4. Improving the product image carousel with <amp-bind>
    5. Configuring product options with <amp-bind>
      1. Product configuration: basic version
        1. Choosing options with <amp-selector> and <amp-bind>
        2. Binding selection options to the shopping cart
      2. Product configuration: advanced version
        1. Initializing product data with <amp-state>
        2. Creating the product carousels
        3. Adding a size option
        4. Using <amp-selector> for image preview thumbnails
        5. Keeping the thumbnails preview option in sync
        6. Keeping track of chosen options and price in the cart
    6. Summary
  10. When AMP Is Not Enough - Enter the iframe
    1. The <amp-iframe> component
      1. What about the risk to performance?
      2. Restrictions on <amp-iframe>
      3. Configuring the iframe
        1. iframe resizing
    2. Google Maps in AMP
      1. Getting a Google Maps Embed API key
      2. Using the Google Maps Embed API
        1. Fullscreen maps
        2. Other features of the Google Maps Embed API
          1. Centering a map on a place name
          2. Centering a map on a lat/lng location
          3. Showing directions and routes
        3. Searching for a location
          1. Map search with <amp-form> and server backend
          2. Map search without server backend
      3. Geolocating the users device
        1. Using the Google Maps JavaScript API
          1. Building the map
          2. Using the HTML5 Geolocation API
          3. Serving iframe content from a different domain
          4. Adding the iframe map content to the AMP page
        2. Showing a route from the current location
    3. Disqus comments in AMP
      1. Configuring Disqus for your site
      2. Resizing the iframe
      3. Adding the Disqus <amp-iframe>
    4. Building a checkout process with the Payment Request API
      1. The HTML5 Payment Request API
        1. Using the Payment Request API with <amp-iframe>
        2. Preparing the payment request
    5. Summary
  11. Ads and Analytics in AMP
    1. Analytics support in AMP
      1. Pixel tracking with <amp-pixel>
      2. Full analytics tracking with <amp-analytics>
        1. Configuring <amp-analytics>
          1. Requests
          2. Variables
          3. Triggers
          4. Loading configuration remotely
          5. Transport configuration
        2. Using amp-analytics with built-in vendors
      3. Using Google Analytics with <amp-analytics>
        1. Click and tap tracking
      4. Variable substitution in <amp-analytics>
        1. Tracking outbound link clicks
        2. Scroll tracking
        3. Tracking time on a page with timer triggers
        4. Tracking social interaction
      5. Analytics for e-commerce
        1. Tracking the addition of items to the cart
        2. Tracking the removal of items from the cart
      6. Session stitching AMP Cache and original domain
        1. Session stitching with Google Tag Manager
    2. Ads in AMP
      1. The <amp-ad> component
        1. Embedding an Adsense ad
        2. Ad placement
        3. Ad placeholder
        4. Ad fallback
      2. Sticky ads
      3. Getting creative with ads
        1. Carousel ads
        2. Flying carpet ads
    3. Summary
  12. AMP Deployment and Your Web Presence
    1. Canonical AMP pages
    2. Progressive Web Apps and AMP
      1. PWA minimum requirements
        1. What is a service worker?
        2. What is a web app manifest?
          1. Adding a PWA to the home screen
      2. AMP and PWAs - three approaches
      3. AMP as PWA
        1. Installing a service worker with AMP
        2. Writing a service worker to cache resources
        3. Injecting JavaScript with a service worker
      4. AMP to PWA
        1. Caching PWA assets with a service worker
        2. Installing a service worker from the AMP Cache
          1. The service worker iframe installer
        3. The PWA page
      5. AMP in PWA
        1. Loading AMP with Shadow AMP
        2. Navigating within the PWA
          1. Navigation and the HTML5 History API
    3. Serving AMP pages to all mobile visitors
      1. Using device detection to serve AMP
    4. AMP and WordPress
    5. Summary
  13. AMP - Where It&#x27;s At and Where It&#x27;s Going
    1. From zero to AMP
      1. Keeping up with AMP - the AMP roadmap
      2. Contributing
    2. AMP - from web pages to web apps
      1. User-friendliness
      2. The AMP Cache
      3. Flexibility
    3. Criticism of AMP
      1. AMP Cache URL
        1. The DNS solution
      2. AMP lightning badge of trust in search results
      3. De facto SEO benefits of the AMP carousel
    4. Summary
  14. AMP Components
    1. Ads and analytics
    2. Dynamic content
    3. Layout
    4. Media
    5. Presentation
    6. Third-party media
  15. Actions and Events
    1. Events
    2. Actions
  16. amp-bind Whitelisted Functions
    1. JavaScript whitelisted functions
  17. amp-bind Permitted Attribute Bindings

Product information

  • Title: AMP: Building Accelerated Mobile Pages
  • Author(s): Ruadhan O'Donoghue
  • Release date: October 2017
  • Publisher(s): Packt Publishing
  • ISBN: 9781786467317