AMP Load only the necessary scripts

Question

I have a template file for my AMP pages in which I am loading several amp functionalities:

<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
<script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>

What I would like to do is only load the necessary scripts. While I was browsing the web I've found that this is a requested feature but it has not been yet implemented: https://github.com/ampproject/amphtml/issues/9712

My idea is to check if a certain tag is present in the body of the document and if it is, load the script. For example:

document.addEventListener("DOMContentLoaded", function(event) {
        var list = document.getElementsByTagName("amp-youtube");
        //if list is not empty, create a script tag having the corresponding 
        //src and append it to the body
    });

However, this will add the tag at the end of the body and I don't know if that is okay (everywhere where I looked on the web the script tags were loaded in the header). I'm a beginner to AMP pages so my question is: would this be a good approach to solve my problem and if not, how can I implement the desired functionality?

Answer 1

If I understand you question correctly, what you want is to allow your page to load different set of scripts on different routes. And you're right currently there's no way to do this AFAIK.

How I do this is by using a templating engine ( React on server side or pug which I'm using ). Now you can have route based headers by using the respective template systems.

Hope this helps! Do revert back if this does not answer you question.

Answer 2

So far, how I know, there is no implemented embedded method to implement your requirements so you can use only your template engine functionality to reach your goal. But anyway it is BAD approach to add your own script in AMP pages because it will lead your page to invalid and it never will be cached by AMP.

Answer 3

You are probably using some kind of SSG (Static Site Generator) framework. Like Jekyll, Hugo, etc. In that case you have the information in your hand which pages will need certain tags and which won't. So you have the ability to use your SSG's interpolation language to optionally include those scripts which you'll actually need.

Example: I'm using Jekyll, and on my website only blog posts have Disqus comment section. The about and other pages don't have comments. Disqus comments are the only feature which require amp-iframe in my case. What I did was that in each forum post markdown file I added an extra comments: true entry into the front-end matter:

---
...
comments: true
---

I have only one head.html in the _includes, and within that file, I have this:

{% if page.comments %}
<link rel="preload" as="script" href="https://cdn.ampproject.org/v0/amp-iframe-0.1.js" crossorigin="anonymous">
{% endif %}
{% if page.has_carousel %}
<link rel="preload" as="script" href="https://cdn.ampproject.org/v0/amp-carousel-0.2.js" crossorigin="anonymous">
{% endif %}

...

{% if page.comments %}
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js" crossorigin="anonymous"></script>
{% endif %}
{% if page.has_carousel %}
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.2.js" crossorigin="anonymous"></script>
{% endif %}

Here you can also see that only certain pages have a carousel. With this technique the Liquid interpolation omits these scripts when they are not needed, and so the AMP Validator won't complain. But it is great for efficiency anyway.

Since 2019 April there's a possibility to have some custom JavaScript, but that JS has limitations. It's better to optimize your site generation as I mention IMHO. You probably have all information available to do this. In case it's a Wordpress site with an AMP plugin, that's another story.