AMP-faster.md 4.8 KB

+++ title = "What is AMP in a website?" 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" +++

Mobile internet usage has surpassed desktop usage in each country. Over 30 billion mobile interactions are made from customers every day in the US alone. This means every day your webpage is browsed and used quite frequently. Therefore, mobile webpage loading speed is very important to your business. It is always essential for companeis to check the loading speed of their own mobile sites in every period of time. However, according to data collected by Google and SOASTA, around 40% of consumers leave a page that takes longer than three seconds to load. In three seconds, the company should load at least part of page content. The bad news is the fact that according to data, most mobile websites take around 6.9 seconds to load, that’s more than double the amount of time 40% of users wait before abandoning the page. And if your webpage fails to load in three seconds, you created outstanding content, regardless of how compelling it was, it would be totally in vain.

What is AMP?

AMP(Accelerated Mobile Pages) was launched by Google as an open-source project to optimize mobile webpage loading speed. The goal of AMP project is to allowing any companies or users to create web pages as well as ads that are consistently fast, beautiful and high-performing across devices, and distribution platforms.

AMP was built in collaboration with thousands of developers, publishers, websites, distribution companies, and tech companies. More than 1.5 billion AMP pages have been created to date, and more than 100 leading analytics, ad tech and CMS providers support the AMP format. ( From AMP Dev )

When you create mobile pages on the AMP format you get:

  1. Higher performance and engagement: Pages created in the AMP open-source project load almost instantly, giving users a smooth, more engaging experience on both their mobiles and desktop.

  2. Flexibility and results: Businesses have the opportunity to decide how to present their content and what technology vendors to use, while maintaining and improving KPIs.

You’ve likely clicked an AMP page before, you just didn’t realize it. The only thing you might have noticed was how instantly the page after you clicked. AMP-built web pages have a lightning bolt indicator in the search result. The reason why AMP pages load instantly is because AMP restricts HTML/CSS and JavaScript, allowing faster rendering of mobile web pages. Unlike regular mobile pages, AMP pages are automatically cached by Google AMP Cache for faster load times on Google search.

Users have certain expectations when they’re on their mobile devices, they want meaningful, relevant, and faster experiences – to ensure your target audience’s expectations are met AMP are your best bet.

Why would we create website by AMP?

  1. Execute all JavaScript asynchronously: AMP only allows asynchronous JavaScript so that will not cause performance degradation.
  2. Size resources statically: External resources must state their size in HTML so that AMP could know their size and position before resources are downloaded.
  3. 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.
  4. 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.
  5. 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.
  6. Prioritize resource loading: AMP controls all resource downloads, it prioritizes resource loading, loading only what’s needed and when is needed.
  7. 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.

Amp Showcase