AMP-faster.md 2.2 KB
+++ title = "Ｗhy AMP makes your pages so fast?" date = "2021-03-29T13:39:46+02:00" tags = ["AMP"] categories = ["trends"] banner = "https://amp.dev/static/remote/?url=https%3A%2F%2Fblog.amp.dev%2Fwp-content%2Fuploads%2F2021%2F04%2Fimage1-768x355.png" +++
Why would we create website by AMP?
- Execute all JavaScript asynchronously: AMP only allows asynchronous JavaScript so that will not cause performance degradation.
- Size resources statically: External resources must state their size in HTML so that AMP could know their size and position before resources are downloaded.
- Keep all third-party JavaScript in sandboxed iframes: AMP can only pages allow third-party JavaScript in sandboxed iframes so that they can’t block the execution of the main page.
- All CSS must be inline and size-bound: In AMP HTML pages, only inline styles are allowed. Besides, the inline style sheet has a maximum size of 50 kilobytes.
- Minimize style recalculations : In AMP pages, all the writes happen after DOM reads. This could ensure there’s the max of one recalculation of styles every time.
- Prioritize resource loading: AMP controls all resource downloads, it prioritizes resource loading, loading only what’s needed and when is needed.
- Load pages in an instant: With new preconnect API, a page can be rendered before the user states they’d like to navigate to it.
With or without AMP?
"The reason why we implement AMP into our web page service is the fast loading speed."
Page speed is exceptional crucial to user experience on mobile application. Loading content as soon as possible is the one of keys of increasing returning users, because research shows that people would bounce out of web page if the content does not load quickly within 3 seconds. Below are the test results of two web page, one with AMP and the other one without AMP. As you can see, left hand side with AMP shows quite high score in page speed insight. On the other hand, right hand side without AMP load in really low speed. The loading speed is the main determining factor for improving user experience which ultimately lead to conversion rate increase.
