更新时间:2021-07-08 10:05:04
coverpage
Title Page
Copyright
AMP: Building Accelerated Mobile Pages
Credits
About the Author
Acknowledgements
About the Reviewer
www.Packtpub.com
Why subscribe?
Customer Feedback
Preface
What this book covers
What you need for this book
Who this book is for
Conventions
Reader feedback
Customer support
Downloading the example code
Downloading the color images of this book
Errata
Piracy
Questions
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
Building Your First AMP Page
Going from HTML to AMP-HTML
Including the AMP-JS library
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 - <amp-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
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