Jivosite will no longer lower Google Speed
I was faced with one task – to increase Google Speed on one of the Internet resources.
The task is still the same, given that most of the points have been completed, but at the same time the drawdown is capital. And all because of what? A bunch of metrics, Yandex informers (estimate Ya.Market, rating Ya.Market) and… Jivosite…
Drawdown on -14 in mobile and -8 on desktop… These rates can vary depending on the blocking time.
I found the Jivosite lazy loading code on the net, but at first glance it didn’t seem reliable to me. firstly reduced the drawdown not all, and secondly, when loading, it disabled and reinitialized some JS events of the Jivosite. And this is fraught with updating the chat engine.
I went the other way. I decided to COMPLETELY remove the influence of Jivosite on Google Speed. How?
It is possible to remove the influence of the chat on the indicators only in one case – without loading it at all. (Ahah, cool way out: D)… No, no, listen further.
We initialize Jivosite on the first visit to the site, ONLY after the user clicks somewhere, or scrolls the page, or moves the mouse.
Is it logical? After all, Google Speed is completely dormant on the site. Thus, there will be no chat for him at all, but for the user on the first visit, he will appear after some action. On subsequent visits, everything is standard.
And so, release to post!
First, we check the existence of a key in the session, which indicates that the Jivosite loading, which was previously delayed by user action, has already been carried out, which means we are loading it in normal mode.
I did it as a session. on large projects, it is advisable to save on cookies, so that someone does not get an error 500 due to a large number of cookies.
But, if you are the owner of a site not on a framework with a single entry point, then in this case it is more expedient to use cookies.
<?php if ( !isset($_SESSION['jivoLazy']) ) { ?>
<?php $_SESSION['jivoLazy'] = 'ready'; ?>
<!-- Здесь будет новый способ загрузки, отложенный -->
<?php } else { ?>
<!-- Сюда впишем обычный способ загрузки Jivosite -->
<?php } ?><script src="https://code.jivosite.com/widget.js" jv-id="#widgetID#" async></script>I’m not an adherent of any customization of third-party code, but just one time we will have to download it in the old way, which was previously offered by Jivo. This is due to the fact that, as I did not twist with the new version of the initializer, it does not see the widget ID during lazy loading.
So here’s the old Jivosite initializer
(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="https://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);}}})();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);
}
}In this function, we check whether the chat has already been loaded earlier, if not, then load it.
Next, we initialize the jivoAsync () function
In this initializer, we listen for events Mouse movement, Click, Page scrolling… And we initialize the jivoAsync function we wrote.
['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);
}
});This script initializes the chat only 1 time. After all, there can be a lot of clicks, mouse movements, scrolling, but the function controls this moment.
Events are triggered on mobile Click anywhere and scroll the page…
This will load the Jivosite one second after the user first entered the site and did something on it. Agree, the chat is not really needed right away. Well, when surfing, Jivosite will load as standard.
Complete example code
<?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="https://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="https://code.jivosite.com/widget.js" jv-id="#widjetID#" async></script>
<?php } ?>Congratulations, Google Speed has added + 10-15 points to your project!
Do not forget in two places # widgetID # change to the ID of the Jivosite widget.
All bye, all of the world.
