Ускоряем JivoSite

Если Вы хоть раз оптимизировали скорость загрузки сайта, то наверное сталкивались с проблемой оптимизации внешних скриптов, плагинов которые размещены на сторонних серверах. Данное решение, которое предоставлю ниже, оптимизирует распространенный чат под названием JivoSite.  У JivoSite большие планы на развитие функционала,  что видно из последних обновлений.

Обновления JivoSite

• Cтатусы и ответственные операторы в приложении Jivo
• Телефония в мобильном приложении JivoSite
• Статистика — новый раздел в приложении JivoSite
• Просто космос! Напоминания и обновленный архив
• JivoSite на проводе. Новая функция — отложенный звонок
• и многое другое. Подробнее по обновлениям ищите на оф.сайте: https://www.jivosite.ru/blog/announcements/

Однако, разработчики ДживоСайта не предоставляют решения по оптимизации вставляемого кода на сайт Клиентов.

Практика:

Заходим и тестируем скорость загрузки своего сайта с чатом на  GooglePageSpeed  https://developers.google.com/speed/pagespeed/insights/

Видим красные отметки, куча непонятных параметров, расстраиваемся что много чего не сделал чтобы добиться хотя бы 80% на мобильной версии. 

Открываем сайт и ищем где подключен онлайн-консультант (Jivo)

Пример стандартного кода:

<!-- BEGIN JIVOSITE CODE {literal} -->
<script type='text/javascript'>
(function(){ var widget_id = '#WidgetId#';var d=document;var w=window;function l(){
var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = '//code.jivosite.com/script/widget/'+widget_id; var ss = document.getElementsByTagName('script')[0]; ss.parentNode.insertBefore(s, ss);}if(d.readyState=='complete'){l();}else{if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})();</script>
<!-- {/literal} END JIVOSITE CODE -->

Пример оптимизированного кода:

<!-- BEGIN JIVOSITE CODE {literal} -->
<script type='text/javascript'>
(function(){ document.jivositeloaded=0;var widget_id = '#WidgetId#';var d=document;var w=window;function l(){var s = d.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = '//code.jivosite.com/script/widget/'+widget_id; var ss = document.getElementsByTagName('script')[0]; ss.parentNode.insertBefore(s, ss);}//эта строка обычная для кода JivoSite
function zy(){
    //удаляем EventListeners
    if(w.detachEvent){//поддержка IE8
        w.detachEvent('onscroll',zy);
        w.detachEvent('onmousemove',zy);
        w.detachEvent('ontouchmove',zy);
        w.detachEvent('onresize',zy);
    }else {
        w.removeEventListener("scroll", zy, false);
        w.removeEventListener("mousemove", zy, false);
        w.removeEventListener("touchmove", zy, false);
        w.removeEventListener("resize", zy, false);
    }
    //запускаем функцию загрузки JivoSite
    if(d.readyState=='complete'){l();}else{if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}
    //Устанавливаем куку по которой отличаем первый и второй хит
    var cookie_date = new Date ( );
    cookie_date.setTime ( cookie_date.getTime()+60*60*28*1000); //24 часа для Москвы
    d.cookie = "JivoSiteLoaded=1;path=/;expires=" + cookie_date.toGMTString();
}
if (d.cookie.search ( 'JivoSiteLoaded' )<0){//проверяем, первый ли это визит на наш сайт, если да, то назначаем EventListeners на события прокрутки, изменения размера окна браузера и скроллинга на ПК и мобильных устройствах, для отложенной загрузке JivoSite.
    if(w.attachEvent){// поддержка IE8
        w.attachEvent('onscroll',zy);
        w.attachEvent('onmousemove',zy);
        w.attachEvent('ontouchmove',zy);
        w.attachEvent('onresize',zy);
    }else {
        w.addEventListener("scroll", zy, {capture: false, passive: true});
        w.addEventListener("mousemove", zy, {capture: false, passive: true});
        w.addEventListener("touchmove", zy, {capture: false, passive: true});
        w.addEventListener("resize", zy, {capture: false, passive: true});
    }
}else {zy();}
})();</script>
<!-- {/literal} END JIVOSITE CODE -->

Меняем код из старого берем ID и заменяем #WidgetId# на ID вашего чата (обычно это просто цифры без символов).

Сохраняемся и возвращаемся к GooglePageSpeed. Запускаем тест и радуемся небольшому вкладу в оптимизацию скорости загрузки сайта +20%*.

***%Может варьировать как в меньшую так и в большую сторону, зависит от остальных факторов оптимизации о которых постараюсь написать в другой статье. Спасибо за внимание.