Jivosite больше не снизит Google Speed

Передо мной возникла одна задачка - повысить Google Speed на одном из интернет-ресурсов.

Задачка ещё та, учитывая то, что большинство пунктов выполнено, но при этом просадка капитальная. А всё из-за чего? Куча метрик, яндекс информеры (оцени Я.Маркет, рейтинг Я.Маркет) и... Jivosite.

Демонстрирую как влияет Jivosite на Google Speed

Просадка -14 в мобильном и -8 на десктоп. Эти показатели могут варьироваться в зависимости от времени блокировки потока.

В сети нашел код отложенной загрузки Jivosite, но при первом взгляде он показался мне не надежным, т.к. во первых, уменьшал просадку не всю, а во вторых, при загрузке отключал и инициализировал заново некоторые JS события Jivosite. А это чревато, при обновлении движка чата.

Я пошел иным путём. Решил ПОЛНОСТЬЮ убрать влияние Jivosite на Google Speed. Каким образом?

1. Убрать влияние чата на показатели можно лишь в одном случае - не загружая его вовсе. (Ахах, классный выход из ситуации :D). Не-не, слушай дальше.

2. Инициализируем Jivosite при первом визите на сайт, ТОЛЬКО после того, как пользователь куда-нибудь нажмет, или проскроллит страницу, либо подвигает мышью.

Логично? Ведь Google Speed совершенно бездействует на сайте. Таким образом для него чата не будет вовсе, а для пользователя в первый визит он появится после какого-либо действия. При последующих же визитах всё стандартно.

И так, релиз в пост!

• Вначале проверяем в сессии существование ключа, который свидетельствует о том, что ранее отложенная по действию пользователя загрузка Jivosite уже осуществлялась, а значит загружаем в обычном режиме.
  
  Я сделал именно сессией т.к. на больших проектах желательно на куках экономить, дабы не вывалило кому-то ошибку 500 из-за большого количества кук.
  Но, если Вы владелец сайта не на фреймворке с единой точкой входа, то в этом случае целесообразнее использовать куки.

<?php if ( !isset($_SESSION['jivoLazy']) ) { ?>
	<?php $_SESSION['jivoLazy'] = 'ready'; ?>
	<!-- Здесь будет новый способ загрузки, отложенный -->		
<?php } else { ?>
	<!-- Сюда впишем обычный способ загрузки Jivosite -->
<?php } ?>

• Уже прилично давно Jivosite упростила код инициализации своего чата. Обычный инициализатор выглядит вот так:

<script src="//code.jivosite.com/widget.js" jv-id="#widgetID#" async></script>

• Я не приверженец какой-либо кастомизации стороннего кода, но именно один раз нам придется его загрузить старым способом, который раньше предлагал Jivo. Это связано с тем, что как я не крутил с новой версией инициализатора, при отложенной загрузке он не видит ID виджета.
  По этому вот старый инициализатор Jivosite

(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);}}})();

• Теперь напишем просто JS функцию, которая будет инициализировать чат при отложенной загрузке.

function jivoAsync()
{
	if ( typeof window.jivoLazyReady === 'undefined' )
	{
		window.jivoLazyReady = true;
		window.jivoLazyTimeout = setTimeout(function()
		{
      // Сюда вставляем старый способ инициализации Jivo
      // Я его привёл выше
      console.log('jivosite load from lazy');
      clearTimeout(window.jivoLazyTimeout);
    },
		1000);
	}
}

• В данной функции мы проверяем был ли уже ранее загружен чат, если нет, то загружаем.

• Далее инициализируем функцию jivoAsync()
  В данном инициализаторе мы слушаем события Движение мыши, Клик, Скроллинг страницы. И инициализируем написанную нами функцию jivoAsync.

['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);
  }
});

Данный скрипт инициализирует чат только 1 раз. Ведь кликов, движений мыши, скроллинга может быть много, но функция контролирует этот момент.

В мобильном срабатывают события Клик куда угодно и скроллинг страницы.

Таким образом Jivosite загрузится через секунду после того, как пользователь первый раз вошел на сайт и что-либо сделал на нём. Согласитесь, чат не очень-то и нужен прямо сразу. Ну а при сёрфинге 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 = '#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);}}})();

          console.log('jivosite load from lazy');
          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.jivosite.com/widget.js" jv-id="#widjetID#" async></script>
<?php } ?>

Поздравляю, Google Speed добавил +10-15 пунктов на Вашем проекте!

Не забудьте в двух местах #widgetID# изменить на ID виджета Jivosite.

Всем пока, всем мира.