Время для прочтения: 1 мин. 26 сек.

Оптимизация асинхронного вызова Google Analytics

Google Analytics - веб-аналитика корпоративного уровня от компании Google, внедряемая на страницу при помощи JavaScript.

Стандартный асинхронный код подключения Google Analytics громоздкий и не оптимизированный. Исправим данный недочёт.

По умолчанию сниппет выглядит следующим образом:


<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXX-X']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); 
        ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol 
            ? 'https://ssl'
            : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; 
        s.parentNode.insertBefore(ga, s);
  })();

</script>

После проведения оптимизации Матиасом Байненсом (Mathias Bynens) сниппет принимает вид:


<script>
  var _gaq = [['_setAccount', 'UA-XXXXX-X'], ['_trackPageview']];
  (function(d, t) {
    var g = d.createElement(t),
        s = d.getElementsByTagName(t)[0];
    g.src = '//www.google-analytics.com/ga.js';
    s.parentNode.insertBefore(g, s);
  }(document, 'script'));
</script>

Получаем 270 байт против оригинальных 440 байт. А после минимизации и того меньше. Подробнее смотрите в статье автора. Вопросы в комменты.

Используйте getElementsByTagName('script')[0], так как ни body, ни html может просто не быть на странице

Используйте insertBefore, так как если родитель вдруг не до конца загружен, вызов appendChild у него приведет к ошибке

Для вставки кода используйте HTML-теги
<pre><code class="php">ваш код</code></pre>