Передо мной возникла одна задачка - повысить Google Speed на одном из интернет-ресурсов.
Задачка ещё та, учитывая то, что большинство пунктов выполнена, но при этом просадка капитальная. А всё из-за чего? Куча метрик, яндекс информеры (оцени Я.Маркет, рейтинг Я.Маркет) и... Jivosite.
Просадка на -14 в мобильном и -8 на десктоп. Эти показатели могут варьироваться в зависимости от времени блокировки потока.
В сети нашел код отложенной загрузки Jivosite, но при первом взгляде он показался мне не надежным, т.к. во первых уменьшал просадку не всю, а во вторых при загрузке отключал и инициализировал заново некоторые JS события Jivosite. А это чревато, при обновлении движка чата.
Я пошел иным путём. Решил ПОЛНОСТЬЮ убрать влияние Jivosite на Google Speed. Каким образом?
Убрать влияние чата на показатели можно лишь в одном случае - не загружая его вовсе. (Ахах, классный выход из ситуации :D). Не-не, слушай дальше.
Инициализируем 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.
Всем пока, всем мира.
