MODX. Оптимизация JivoSite

Lazy загрузка JivoSite

Наверное не для кого не секрет, что все старания по оптимизации скорости загрузки сайта обычно сводят на нет скрипты сторонник сервисов. Мы стараемся сделать очень быстрый сайт, получаем результат менее 1 секунды, но тут подключаются Яндекс.Метрика, Google Аналитика, JivoSite, и т.д. и мы видим что наш сайт уже грузится уже больше 2 секунд.

Есть решение как немного улучшить показатели скорости для ПС.

• создаём новый сниппет, например jivosite

• в конце шаблона перед закрытием </body> например в чанке со всеми нашими скриптами вызываем некэшированный сниппет [[!jivosite]]

• Внутри сниппета мы размещаем следующий код:

<?php if ( !isset($_SESSION['jivoLazy']) ) { ?>
  <?php $_SESSION['jivoLazy'] = 'ready'; ?>
    <script type="text/javascript">
        function jivoAsync(){
          if ( typeof window.jivoLazyReady === 'undefined' ){
            window.jivoLazyReady = true;
            window.jivoLazyTimeout = setTimeout(function(){
              (function(){ var widget_id = '12345';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);}}})();
              clearTimeout(window.jivoLazyTimeout);
            },
            1000);
          }
        }
        ['mouseover','click','scroll'].forEach(function(event){
          var elm = event == 'click' ? document.getElementsByTagName('body')[0] : window;
          if ( typeof window.addEventListener === 'undefined' ) {
            elm.addEvent(event, jivoAsync);
          } else {
            elm.addEventListener(event, jivoAsync, false);
          }
        });
    </script>
    <?php } else { ?>
    <script src="//code-ya.jivosite.com/widget/12345" async></script>
<?php } ?>

Обратите внимание, что в widget_id и скрипте в конце необходимо заменить 12345- на ID своего виджета

P.S так же мы можем управлять цветами JivoSite с помощью CSS селекторо  например в Less:

 /*JivoSite*/
*[class*="globalClass"]{
  & *[class*="_bottom_"]{background: @MainBlue !important;}
  & *[class*="leafCont"]{display: none !important;}
  & *[class*="headerBox"]{background: @MainBlue !important; border-radius: 10px 10px 0 0!important;}
  & *[class*="headerBox"] *[class*="_bottom_"]{display: none !important;}
}
/***--- END ---***/