Search code examples
htmlcssamp-html

Should amp-custom be placed before or after amp-boilerplate

Some of the AMP samples I have found seem to include the amp-custom tag before the amp-boilerplate.

  <style amp-custom>
    h1 {
      color: red;
    }
  </style>
  <style amp-boilerplate>.....</style>

While other examples show the amp-boilerplate before the amp-custom.

<style amp-boilerplate>
    .....
</style>
<style amp-custom>
    h1 {
        color: red;
    }
</style>

If I want my page to be compliant with AMP standards, should I place amp-custom style tag before or after my amp-boilerplate style tag.

Solution

  • For AMP validity, the order doesn't matter. However, the order of tags inside the header can affect page load performance. The recommended order for head tags is:

    1. meta charset, then remaining meta tags.
    2. AMP runtime v0.js <script> tag (this should start downloading as soon as possible as it's render blocking).
    3. <script> tags for other render delaying extensions (amp-experiment, amp-dynamic-css-classes)
    4. <script> tags for remaining extensions (amp-bind, ...)
    5. <link> tag for favicon
    6. <style amp-custom>
    7. any other tags allowed in <head>
    8. amp boilerplate, first style amp-boilerplate, then noscript. (putting the boilerplate lasts avoids custom styles accidentally overriding the boilerplate css rules)

    Please note: this is only relevant for AMPs not served via the Google AMP Cache as the cache re-orders the head following these rules anyway.