Загрузка кода livechatinc после полной загрузки веб-страницы

#javascript #wordpress #livechat

Вопрос:

У меня есть веб-сайт WordPress, я использую livechatinc в качестве приложения для чата. Без кода чата загрузка домашней страницы занимает от 0,9 до 1,2 секунды, но после размещения кода чата она увеличивается до 3,2 секунды. Я хочу загрузить код чата js после полной загрузки веб-страницы.

Я пробовал использовать несколько плагинов, но, похоже, ничего не работает. Вот код, предоставленный livechatnic

 <!-- Start of LiveChat (www.livechatinc.com) code -->
<script type="text/javascript">
    window.__lc = window.__lc || {};
    window.__lc.license = 3254125;
    (function() {
        var lc = document.createElement('script'); lc.type = 'text/javascript'; lc.async = true;
        lc.src = ('https:' == document.location.protocol ? 'https://' : 'http://')   'cdn.livechatinc.com/tracking.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(lc, s);
    } )();
</script>

<!-- End of LiveChat code -->

Ответ №1:

из того, что я вижу там, код подается с их серверов и загружается асинхронно, поэтому он на самом деле не замедляет работу веб-сайта, я нашел это: https://www.livechatinc.com/kb/is-livechat-slowing-my-website / — проверьте это, они объясняют это довольно хорошо.

1. Несмотря на обычные: Google Speed Test — НЕПРАВИЛЬНО, GTmetrix — НЕПРАВИЛЬНО, LiveChatInc — ПРАВИЛЬНО, я не уверен, какие аргументы они использовали в этой статье. OK — «асинхронность не замедляет скорость загрузки страницы». Да, это поступает с ИХ серверов, но браузеру все равно приходится как-то его обрабатывать. Их или не их, это все равно занимает некоторое время. Только в статистике они говорят: хорошо, тогда почему GA помечает наши страницы, имеющие проблемы с ними. GA-боты знают, что они асинхронны. Так есть ли проблема? Согласно GA, есть. Итак, LiveChat, не могли бы вы сделать необязательным, в какой момент загружать ваш скрипт, не нарушая весь сбор данных.

2. @Nookeen действительно правильный. Разбор сценариев, которые выполняются в главном потоке, блокирует рендеринг и задерживает рисование страницы. Источник: developers.google.com/web/fundamentals/performance /…

Ответ №2:

Я нашел решение, которое я включил, менеджер тегов Google, в который я включил все дополнительные коды javascript, и я делаю следующее.

     <script>
    (function(){
        setTimeout(function(){
            (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'amp;l=' l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id=' i dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-5M93GPC');
        }, 5000);
    })()
</script>

Ответ №3:

Мне нравится загружать livechatinc.js через 3 секунды после загрузки страницы.

Этого можно добиться с помощью небольшого JS. Добавьте это прямо перед закрывающим </body> тегом. Обязательно замените <YOUR_LICENSE_NUMBER> на свой фактический номер лицензии.

 window.__lc = window.__lc || {};
window.__lc.license = <YOUR_LICENSE_NUMBER>;
window.onload = function() {
    setTimeout(function(){ 
        // Live Chat
        !function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src=("https:"==document.location.protocol?"https://":"http://") "cdn.livechatinc.com/tracking.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}();
    }, 3000);
};

Вы можете настроить 3000 мс, если хотите загрузить его раньше или позже.

Для тех из вас, кто заинтересован в использовании диспетчера тегов Google для отсрочки загрузки, вы можете следовать инструкциям Live Chat Inc здесь:

https://www.livechat.com/help/google-tag-manager/