8

The example page for amp-html, as well as the few amp-html sites available right now, contain the following code:

<style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>

Why is this? Setting the opacity to 0 for Javascript-capable clients seems like a bad idea if time is of the essence. The JavaScript that takes care of setting the opacity to 1 may not be cached and download slowly, or may not load at all (China tends to block Google servers, for example, so Google CDN may be problematic).

Wouldn't it be better to simply not change the opacity at all, and only use JavaScript operations for improving the page? What is the improvement of using amp-html over simply not using Javascript at all?

jornane
  • 1,397
  • 10
  • 27

2 Answers2

9

Note, that we are to considering changing this at least a little bit to optimize non-JS use cases, but the functionality and rational will stay the same.

AMP pages really need the AMP JS library to render correctly. Letting them render without it leads to a jarring experience in the normal cases where it downloads quickly or is cached already.

Initially we achieved this by making the main JS binary sync. This has very similar effect and doesn't require the opacity boilerplate. However, that doesn't allow the browser to start applying styles to the document – which is not that bad if it wasn't for that being in the critical path for font downloading because the browser only downloads fonts after it matched it in a style.

There are problems with the current approach and we are tracking in https://github.com/ampproject/amphtml/issues/323 to optimize it further.

Update: AMP now uses a CSS animation to avoid reliance on JS.

Malte Ubl
  • 851
  • 6
  • 9
2

Why does amp-html have a CSS-rule that hides the body element

AMP uses custom elements from Web components. For example, the component amp-img replaces each tag <img>:

These components can […] Replace HTML5 elements that are not directly permitted in the specification such as amp-img and amp-video. [source]

Like with a JavaScript application, it's better to hide the page during the initial DOM manipulations.

What is the improvement of using amp-html over simply not using Javascript at all?

AMP manages to load the resources lazily and in the best order. It is designed for rich content on big pages:

But how do we get from good to, let’s say, instant? We’ll cheat :) AMP documents are from the ground up designed to be efficiently pre-renderable. Browsers have long supported pre-rendering through the <link rel=prerender> tag, but they need to be conservative about this mechanism because prerendering can be expensive. With AMP HTML we added the ability to tell a document: render yourself, but only as far as what is visible above the fold and only elements which are not CPU intensive to minimize the cost of pre-rendering. With this mechanism in place, referrers of AMP document can initiate rendering of docs before the user acts much more aggressively, so that in many cases the document will be done rendering by the time the user clicks. [source]

Paleo
  • 21,831
  • 4
  • 65
  • 76
  • 2
    This does not answer the question. – frast Oct 08 '15 at 09:18
  • To summarise, AMP's JavaScript enables the use of amp-* specific tags (that behave the same as their native counterpart, but require JS - not shown before JS loads) and AMP potentially yields better performance on rel=preload. Did I understand this correctly? This does not really answer my question though. It doesn't explain why the body must be hidden before JS loads (amp-img wouldn't show anyway) and it doesn't explain how performance is improved, unless under some very specific circumstances. – jornane Oct 08 '15 at 09:19
  • 1
    I just edit. Like with a JS application, it's a best practice to hide the page during initial DOM manipulations. – Paleo Oct 08 '15 at 09:23
  • Not convinced? See the first fake example with nested custom elements [here](http://www.html5rocks.com/en/tutorials/webcomponents/customelements/). There are paragraphs `

    ` that could be rendered in an un-rendered custom tag.

     – Paleo Oct 08 '15 at 09:55
  • 1
    I think this is the best answer to the question I have seen. Even though the main question is not answered (why hide body, why need JS for "JS-free website"), it shows the spirit in which those choices were made by the AMP design team. Whether the goal of AMP (a faster mobile web) is achieved by these choices is up to debate, but SO is not the place for this discussion. Because if this, I will mark this as the accepted answer. I would have liked to see some hard facts that would show that AMP works (15%-85% faster than what?), I hope the AMP team will include them on the website. – jornane Oct 14 '15 at 09:24