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

Líbí se vám příspěvek? Sdílejte jej!

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('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('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.

Jak odložit načítání Smartsupp kódu

Pro Smartsupp řešení nahoře nefungovalo správně. Je nutné do kódu více zasáhnout a úvodní deklaraci proměnných dát již na začátek.

<script>
            var _smartsupp = _smartsupp || {};
            _smartsupp.key = 'FILL YOUR SMARTSUPP CODE';
            _smartsupp.gaKey = 'FILL YOUR UA CODE';
            document.addEventListener('scroll', smartsupplaunch);
            document.addEventListener('mousedown', smartsupplaunch);
            document.addEventListener('mousemove', smartsupplaunch);
            document.addEventListener('touchstart', smartsupplaunch);
            document.addEventListener('keydown', smartsupplaunch);

                function smartsupplaunch () {
                window.smartsupp||(function(d) {
                  var s,c,o=smartsupp=function(){ o._.push(arguments)};o._=[];
                  s=d.getElementsByTagName('script')[0];c=d.createElement('script');
                  c.type='text/javascript';c.charset='utf-8';c.async=true;
               c.src='https://www.smartsuppchat.com/loader.js?';s.parentNode.insertBefore(c,s);
                })(document); 

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

</script>

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ů
SEO

5 tipů jak na SEO pro PPCéčkaře

Ačkoliv SEO (Search Engine Optimization), neboli optimalizaci pro vyhledávače, necháváme především na specialistech, i tak se nám vyplatilo znát a používat pár základů, které nám