Как сделать в яндекс метрике асинхронный код?

Если вы вставите код Яндекс Метрики в общий внешний файл, то он всё равно будет загружен асинхронно. Код счетчика же очень простой. Он создаёт элемент script. Добавляет к нему свойство asynс со значением 1 и src со значением «https://mc.yandex.ru/metrika/tag.js». Далее находит самый первый элемент script на странице и подключает только что созданный элемент script перед ним. После этого браузер загружает скрипт Яндекс Метрики асинхронно (т.к. он имеет свойство async равное true) и после загрузки выполняет.

Поместить код Яндекс метрики в свой внешний скрипт или расположить его непосредственно на странице после подключения этого внешнего скрипта – это почти одно и тоже.

Почему вы свой внешний скрипт не загружаете в фоне? Сейчас уже никто не помещает скрипты в конец страницы. Лучше поместите свой внешний скрипт в head и добавьте к нему атрибут defer. В этом случае он будет грузиться в фоне и как только DOM дерево будет готово, то сразу выполнится. Вот это действительно может увеличить быстродействие, т.к. пользователь с ней сможет взаимодействовать намного раньше.

Если вы хотите выполнить код после того, как DOM будет готов, то используйте следующую конструкцию:

document.addEventListener('DOMContentLoaded', function () {
  // …
});

Статус счетчика может показываться красным если от него не было получено отклика (превышено время ожидания). Это может случиться, если страница очень долго загружается, а он подключен после полной её загрузки.

Для проверки лучше проводить несколько тестов, а потом вычислять среднее значение, которые затем уже сравнивать. У вас все результаты в пределах погрешности ±5%.

Какой вариант выбрать вы должны сами. У каждого варианта имеется свои плюсы и минусы. Кто-то одни плюсы и недостатки считает более весомыми, и предлагает делать так, кто-то считает наоборот и делает по-другому. И тот и другой может привести аргументы и отстаивать свой вариант.

Лично я в данный момент предпочитаю подключать все скрипты в head, тем которым нужен DOM с атрибутом defer, кому не нужен – async.

Александр, в очередной раз Вас Благодарю!!! На вопрос --> «Почему вы свой внешний скрипт не загружаете в фоне? Сейчас уже никто не помещает скрипты в конец страницы.» — Я правда не знал что так делают (скорее всего прочитал устаревшую информацию). Но сейчас все переделаю по вашему совету и закину в head! Во избежании с моей стороны лишних недопониманий, могли бы взглянуть на правки правильны ли они?) codepen.io/man129/pen/jOVQbVE
Яндекс рекомендует размещать его внутри тега body, но где именно внутри я так понял без разницы?

<noscript><div><img src="https://mc.yandex.ru/watch/73378066" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter --> 

Напомню скрипт был в конце тега body->

</footer>
 <script src="/js/script.js"></script>
</body>
<code>
Еще раз Спасибо!

Еще 1 момент, я так понимаю из моего примера мне лучше использовать атрибут async (вместо defer)? Я тоже сторонник того, что пускай лучше браузер начнёт его загрузку cкрипта в фоне, не останавливая основной поток! =)

Пожалуйста! Да, так.
noscript разместили правильно сразу после открывающего тега body. Он нужен для того, чтобы получить данные о просмотре, когда браузер не поддерживает работу со скриптами или их поддержка отключена пользователем.
Скрипты с defer выполняются, когда DOM будет готов, но перед событием DOMContentLoaded. Если вы хотите выполнить скрипт метрики сразу, как только он будет готов, то можно так:

  ...
  <script defer src="/js/script.js"></script>
  <script>
    (function(m,e,t,r,i,k,a){ ... });
  </script>
  </head>
  ...

defer и async — имеют разное назначение. Если вам нужно загрузить скрипт асинхронно, но он нужен для выполнения действий с элементами на странице, то тогда лучше использовать defer. Т.к. он даже если загрузиться раньше будет выполнен только после того, как DOM страницы будет готов, но до события DOMContentLoaded. Если нужно загрузить скрипт асинхронно и выполнить его как можно скорее даже когда ещё DOM страницы может быть не построено, то async.

Понятно. 1 момент.А если сделать так как вы сказали ->

...
  <script defer src="/js/script.js"></script>
  <script>
    (function(m,e,t,r,i,k,a){ ... });  <- <b>тут оставлять все без изменений и просто copy-paste. Или что то добавить где ...?)</b>
  </script>
  </head>
...

Нужно ли будет из кода метрики который я закинул в внешний скрипт убирать что то, или оставить без изменения?

(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
   m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
   (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");

   ym(0000000, "init", {
        clickmap:true,
        trackLinks:true,
        accurateTrackBounce:true,
        webvisor:true
   });

Конечно нужно оставить только в одном месте. Оттуда вырезать сюда вставить:

...
<script defer src="/js/script.js"></script>
<script>(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(********, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true});</script>
</head>
...

Дошло), огромное спасибо!!!