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

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)