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