Задать вопрос

Как ускорить скорость загрузки сайта, метрика и движовосайт тянут вниз?

Установили на сайт метрику и чат jivosite и скорость загрузки увеличилась с 3 сек до 8 (*в мобильной версии ).
К сожалению чаты и метрика нам жизненно необходимы, но и загрузка долгая мешает жить.
Как можно решить проблему скорости загрузки?

5d8b442c04d8e657669299.png
  • Вопрос задан
  • 32100 просмотров
Подписаться 19 Простой Комментировать
Помогут разобраться в теме Все курсы
  • Нетология
    Веб-разработчик с нуля: профессия с выбором специализации
    14 месяцев
    Далее
  • Skillfactory
    Профессия Веб-разработчик
    12 месяцев
    Далее
  • Академия Eduson
    FullStack-разработчик: тариф PRO
    14 месяцев
    Далее
Решения вопроса 2
HeadOnFire
@HeadOnFire
PHP, Laravel & WordPress Evangelist
Отложить загрузку на 5 секунд - выход, но грубоватый (имхо конечно). Я делаю по-другому - оборачиваю код в скролл-ивент + задержка в 1 секунду. То есть, сайт загрузился быстро, и как только пользователь начал скроллить хоть чуть-чуть - секундный таймаут и загрузка дополнительных ресурсов. Гугл доволен, пользователи вообще не замечают задержки:

var fired = false;

window.addEventListener('scroll', () => {
    if (fired === false) {
        fired = true;
        
        setTimeout(() => {
            // Здесь все эти тормознутые трекеры, чаты и прочая ересь,
            // без которой жить не может отдел маркетинга, и которые
            // дико бесят разработчиков, когда тот же маркетинг приходит
            // с вопросом "почему сайт медленно грузится, нам гугл сказал"
        }, 1000)
    }
});
Ответ написан
@ar2rsoft
PHP-developer
Отложить их загрузку на секунд 5?
Ответ написан
Пригласить эксперта
Ответы на вопрос 5
svistiboshka
@svistiboshka
живые веб интерфейсы
Мой вариант:
window.onReadyState = (e, t) => {
  const a = ["loading", "interactive", "complete"],
    o = a.slice(a.indexOf(e)),
    n = () => o.includes(document.readyState);
  n() ? t() : document.addEventListener("readystatechange", (() => n() && t()))
}
window.onReadyState("complete",function(){(function(m,e,t,r,i,k,a)..... })
Ответ написан
anton_reut
@anton_reut
Начинающий веб-разработчик
Как можно решить проблему скорости загрузки?

Попробовать Разные сервисы с чатами. Envybox например.
Ответ написан
@Xtray
1. А метрика разве не асинхронно грузится?
2. На скрине проблема не со временем загрузки, а со временем выполнения.
Ответ написан
Комментировать
@shevelevdesign
Рабочий скрипт отложенной Яндекс метрики с примером кода есть здесь
Ответ написан
Комментировать
@Alex_Terner
Мой вариант на основе прочитанного в этой теме. Срабатывает после клика, движения мыши или скрола.
<!-- Скрипт с отложенной загрузкой Метрики и чата -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    let fired = false;

    function loadHeavyScripts() {
        if (fired) return;
        fired = true;

        setTimeout(() => {
            // === Яндекс.Метрика ===
            (function(m,e,t,r,i,k,a){
                m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
                m[i].l=1*new Date();
                for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
                k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)
            })(window, document,'script','https://mc.yandex.ru/metrika/tag.js', 'ym');

            ym(**************, 'init', {webvisor:true, clickmap:true, ecommerce:"dataLayer", accurateTrackBounce:true, trackLinks:true});


            // === reCAPTCHA v3 ===
            var recaptchaScript = document.createElement('script');
            recaptchaScript.src = 'https://www.google.com/recaptcha/api.js?render=*****************';
            recaptchaScript.async = true;
            document.body.appendChild(recaptchaScript);

            // -- Чат битрикс  --
            (function(w,d,u){
                var s=d.createElement('script');s.async=true;s.src=u+'?'+(Date.now()/60000|0);
                var h=d.getElementsByTagName('script')[0];h.parentNode.insertBefore(s,h);
            })(window,document,'https://***************');
            
        }, 1000);
    }

    window.addEventListener('scroll', loadHeavyScripts, { once: true });
    window.addEventListener('mousemove', loadHeavyScripts, { once: true });
    window.addEventListener('touchstart', loadHeavyScripts, { once: true });
});
</script>

<!-- yandex watch -->
<noscript><div><img src="https://mc.yandex.ru/watch/62******" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
</body>
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы