How to best defer scripts to be excluded from PageSpeed Insights?

Question

We use Zopim on our website. Unfortunately, because of this we are significantly punished on PageSpeed Insights.

• Without Zopim: 86/100
• With Zopim: 66/100

Zopim seems to be aware of the issue, and promises to further optimize their widget, but we haven't seen much progress yet.

The code to add Zopim is as follows:

<script type="text/javascript">
  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="https://v2.zopim.com/?2dAdkKRoqdi9hHHrfr302XabQaK8DN7f";z.t=+new Date;$.
  type="text/javascript";e.parentNode.insertBefore($,e)})(document,"script");
</script>

I have been playing around with different ways of deferring the execution of the script (defer and async), but have been unsuccessful in improving our PageSpeed Insights score (without removing Zopim altogether).

I came to this article but my naive attempt (replace "defer.js" with "https://v2.zopim.com/?2dAdkKRoqdi9hHHrfr302XabQaK8DN7f") did not have the desired effect and Zopim is still counted by PageSpeed.

My question:

• what is the best way to defer non-critical scripts to ensure that PageSpeed Insights do not count the script as part of its score?
• how to apply that to the Zopim script?

Answer 1

In this article is write the best solution: here

"We changed the logic behind loading this script. The script loading starts when a user performs the first action. As an action we consider: scroll, mouse click, mouse move, touch on screen or keydown."

Work so nice!

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