14.07.2011

Неблокирующая загрузка кнопки +1

Хотите установить на свой сайт гугловую кнопку +1? Имейте в виду, что она может негативно повлиять на скорость загрузки страниц. В частности, оригинальный сниппет содержит тег <script>, который блокирует рендеринг и загрузку последующих ресурсов на странице. К счастью, эта проблема легко решается.

<g:plusone></g:plusone> остается в том месте где должна появиться кнопка. Код неблокирующей загрузки лучше поместить перед закрывающим тегом </body>:

<script>
(function(d, t) {
    var g = d.createElement(t),
        s = d.getElementsByTagName(t)[0];
    g.async = true;
    g.src = 'https://apis.google.com/js/plusone.js';
    g.text = '{lang:"nl"}';
    s.parentNode.insertBefore(g, s);
}(document, 'script'));
</script>

Код неблокирующей загрузки написан Матиасом, пофиксен для IE мной.

UPDATE: Гугл выпустил неблокирующую версию кнопки +1.

4 комментария:

kulikov.dm комментирует...

d.getElementsByTagName(t)[0] находит первый скрипт на страничке и вставляет перед ним? а если на страничке вообще нет скриптов? Понятно что это маловероятно, но всеже :)

Степан Резников комментирует...

Как минимум скрипт в котором написано d.getElementsByTagName(t)[0] на странице есть :)

Vii комментирует...

А как работает g.text? Разве скрипт содержащий src может как-то обратиться к телу тега?

Степан Резников комментирует...

@Vii: Да, может, через свойство innerHTML. См. также: http://ejohn.org/blog/degrading-script-tags/

С кнопкой +1 проблема была в том, что в IE не получалось изменить содержимое тега script через innerHTML. Через свойство text получилось и работает везде.