Оптимизация асинхронного вызова Google Analytics
Google Analytics
— веб-аналитика корпоративного уровня от компании Google, внедряемая на страницу при помощи JavaScript.
Стандартный асинхронный код подключения Google Analytics громоздкий и не оптимизированный. Исправим данный недочёт.
По умолчанию сниппет выглядит следующим образом:
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); })();
После проведения оптимизации Матиасом Байненсом (Mathias Bynens) сниппет принимает вид:
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'));
Получаем 270 байт против оригинальных 440 байт. А после минимизации и того меньше. Подробнее смотрите в статье автора. Вопросы в комменты.
Используйте getElementsByTagName('script')[0]
, так как ни body
, ни html
может просто не быть на странице
Используйте insertBefore
, так как если родитель вдруг не до конца загружен, вызов appendChild
у него приведет к ошибке