What is AMP HTML and how does it fit into framework / tool X?

OK, so we all probably already heard about Google AMP HTML .

I am curious how this will fit our existing workflows. If you are writing a React or Angular application, how is the AMP HTML code suitable for the development process? Each of these frameworks already has a way to define components, and it seems that AMP is simply adding to the stack.

Most of us already use other tools, such as a browser or webpack. I do not understand how AMP is suitable for the rest. Some of these tools already allow us to optimize our site. How much AMP HTML will be to change all this?

+52
javascript html angularjs reactjs amp-html
Oct 07 '15 at 18:15
source share
3 answers

AMP HTML basically goes back to the basics and provides quick access to HTML. I am reminded of WAP and Nokia 7110 .

This is a strict set of rules for creating a web page that is open to growth and expansion for other companies and developers.

How this works with SPA (Single Pages Apps) and other external heavy javascript frameworks is currently unknown, that is, for those developers who need to be figured out.

It has its main static HTML pages with custom elements designed to load as quickly as possible with slow connections and small presentations. Any user can optimize their site for mobile devices and reduce it to a few kilobytes if they really want to, AMP-HTML or not.

Main advantage

  • Google will support this, think of Android, Chrome and Google Search, Google CDN.
  • Pages will load very quickly and may look pretty motionless.

Initial adoption, such as Wordpress and other publishers, may be a separate set of AMP mobile friendly pages. This comes from Google, which wanted you to make all of your regular web pages mobile or look at SEO hits.

If you think about it in the long run, its a specification for a mobile network that focuses on performance. If accepted, after 5 years, any web page can load in a few seconds in a mobile connection, regardless of the quality of the connection. If we cannot wait for technology and telecommunications companies to increase speed, we can reduce the size of our pages.

+21
08 Oct '15 at 3:00
source share

AMP is for static pages. Developers must make two different pages: the regular version and the AMP version. The AMP page will link to a regular page and vice versa. Whenever a request arrives on a regular page from a mobile phone, it loads the AMP page and vice versa. Google has its own AMP cache to load it faster. When designing AMP pages, we just need to consider AMP rules.

+13
Mar 01 '16 at 13:03
source share

Now it’s clear that through the URL

Among the biggest optimizations is that it does everything that comes from external resources asynchronously, so nothing on the page can block anything from rendering.

Therefore, you no longer need to block CSS.

Other performance methods include the sandbox of all frames, a preliminary calculation of the layout of each element on the page before loading resources, and disabling slow CSS selectors.

Hope this new link helps.

0
Feb 09 '17 at 0:56
source share



All Articles