Accelerated Mobile Page (or AMP, for short) is a project from Google and Twitter designed to make really fast mobile pages. At its essence, it's basically a stripped-down form of HTML, a diet HTML
Absolutely. So as Will said, it's like a diet HTML. So certain tags of HTML you just can't use. Things like forms, that are out. You also need to use a streamlined version of CSS. You can use most of CSS, but some parts are falling under best practice and they're just not allowed to be used. Then JavaScript is basically not allowed at all. You have to use an off-the-shelf JavaScript library that they provide you with, and that provides things like lazy loading
And then all of this is designed to be really heavily cached so that Google can host these pages, host your actual content right there, and so they don't even need to fetch it from you anymore.
AMP never halts parsing. It downloads all its resources in parallel.
Resources are loaded as late as possible, but prefetched as early as possible.
Srcs:
src:
1. https://moz.com/blog/accelerated-mobile-pages-whiteboard-friday
2. https://www.youtube.com/watch?v=9Cfxm7cikMY&list=PLXTOW_XMsIDQf5mXiTT6MhdYluziN7dwP
Absolutely. So as Will said, it's like a diet HTML. So certain tags of HTML you just can't use. Things like forms, that are out. You also need to use a streamlined version of CSS. You can use most of CSS, but some parts are falling under best practice and they're just not allowed to be used. Then JavaScript is basically not allowed at all. You have to use an off-the-shelf JavaScript library that they provide you with, and that provides things like lazy loading
And then all of this is designed to be really heavily cached so that Google can host these pages, host your actual content right there, and so they don't even need to fetch it from you anymore.
Why AMPs are so pupular
1. Never stop the content
In regular html parsing, an external script can halt the parsing of the document. But in AMP, external js are now allowed.AMP never halts parsing. It downloads all its resources in parallel.
2. Asset-indepandant Layout (Static resources layouting)
All the external resources like images, iframes have to mention their size in html so that AMP can know their positioning prior to their load3. Inline size-bound CSS
Only one inline css allowed. Removes the need for extra http req for external css4. Efficient font triggering
AMP pages requires zero http request before font start downloading. SInce JS is asynchronous, css is inline.5. Minimize style and layout recalculations
same as point #26. GPU accelerated animations
AMP pages allow to animate only properies which can be handled by only GPU. Namely transform and opacity.7. Prioritize resource loading
Download the most imp. resource first. Imagess and ads are downloaded only if they are in view port or user is likely to scroll through them.Resources are loaded as late as possible, but prefetched as early as possible.
Srcs:
src:
1. https://moz.com/blog/accelerated-mobile-pages-whiteboard-friday
2. https://www.youtube.com/watch?v=9Cfxm7cikMY&list=PLXTOW_XMsIDQf5mXiTT6MhdYluziN7dwP
No comments:
Post a Comment