Jak zrychlit kód Zopim Chatu a v zásadě jakýkoliv externí JavaScript

Líbí se vám příspěvek? Sdílejte jej!
Share on whatsapp
Share on linkedin
Share on twitter
Share on email

U klienta Forliving.cz jsme řešili, že Zendesk Chat (Zopim) naprosto neúměrně zatěžoval web při načítání. Ačkoliv byl skript nastaven, aby se načítal asynchronně, tak stále bylo zpomalení značné, hlavně co se týká blokování hlavního podprocesu, což Page Speed Insight označoval skoro 700 ms.

Pro tento mega-velký skript se nám osvědčilo řešení, že se skript načte až při první akci uživatele. Za akci uživatele je považováno scrollování, kliknutí myši, pohyb myši, touch na tabletu, scrollování nebo stisknutí jakékoliv klávesy.

<script>
            document.addEventListener('scroll', zopimlaunch);
            document.addEventListener('mousedown', zopimlaunch);
            document.addEventListener('mousemove', zopimlaunch);
            document.addEventListener('touchstart', zopimlaunch);
            document.addEventListener('scroll', zopimlaunch);
            document.addEventListener('keydown', zopimlaunch);

            function zopimlaunch () {
                window.$zopim||(function(d,s){var z=$zopim=function(c){z._.push(c)},$=z.s=d.createElement(s),e=d.getElementsByTagName(s)[0];z.set=function(o){z.set._.push(o)};z._=[];z.set._=[];$.async=!0;$.setAttribute('charset','utf-8');
                $.src='//v2.zopim.com/?yourid';z.t=+new Date;$.type='text/javascript';e.parentNode.insertBefore($,e)})(document,'script');

                document.removeEventListener('scroll', zopimlaunch);
                document.removeEventListener('mousedown', zopimlaunch);
                document.removeEventListener('mousemove', zopimlaunch);
                document.removeEventListener('touchstart', zopimlaunch);
                document.removeEventListener('scroll', zopimlaunch);
                document.removeEventListener('keydown', zopimlaunch);
            }

</script>

Toto jednoduché řešení může zrychlit načítání webů, které nutně potřebují tahat velké skripty třetích stran, nad kterých nemají kontrolu. Příkladem může být Zopim nebo některé marketingové a analytické pixely.

Zdroj obrázku: pixabey.com (uživatel mohamed_hassan)

Přihlaste se k našemu newsletteru
Posíláme jej maximálně 4x ročně. Přihlášením souhlasíte se zpracováním osobních údajů pro účely newsletteru.
Další příspěvky od našich specialistů

Zajděme na kávu

Možná najdeme cestu ke spolupráci a možná si jen užijeme kávu