Reduce Intercom's affect on PageSpeed and Lighthouse scores - a simple code snippet!

Community resources Show & Tell
1

Over the past few weeks, I’ve been using Webflow to build a marketing site for the company I work for. We’re building the next generation of CRM specifically designed for digital natives which makes a web presence key!

One of our marketing strategies is to nurture our inbound organic search and provide immediate contact channels for potential users that land on our page. We needed to an Intercom to our page to provide that immediate access, but found that it was really impacting our Lighthouse scores (by 20% or so!). Intercom’s effect on Google page rankings is well documented so something had to change.

The code snippet in the above article is the correct idea, but it’s not made for Webflow’s pared down custom code. Instead, we found that this snippet does the job perfectly and increased our Lighthouse score by 19 points.

<!-- Loads Intercom chat widget on page scroll -->
<script>
  	var intercomLoader = function(){
		(function(){var w=window;var ic=w.Intercom;if(typeof ic==="function"){ic('reattach_activator');ic('update',w.intercomSettings);}else{var d=document;var i=function(){i.c(arguments);};i.q=[];i.c=function(args){i.q.push(args);};w.Intercom=i;var l=function(){var s=d.createElement('script');s.type='text/javascript';s.async=true;s.src='your_intercom_src_URL';var x=d.getElementsByTagName('script')[0];x.parentNode.insertBefore(s, x);};if(document.readyState==='complete'){l();}else if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})();
        window.Intercom('boot', {
          app_id: "your_app_id",
        })
        
      	window.removeEventListener('scroll', intercomLoader)
    }
	window.addEventListener('scroll', intercomLoader)
</script>

Hope this helps some people!

4 Likes
2

Thanks for sharing! :+1:

1 Like
3

I’ve also noticed the effect of Intercom’s widget on our page speed, hence why I’ve been looking for an alternate solution. However, when I apply your code snippet, a blank page gets rendered even though I’ve updated it to include our own ‘app_id’. Any idea where I may be going wrong?

4

Have you also replaced the your_intercom_src_URL in the script?

1 Like
5

Ah yes, I missed that. It works like a charm now - thank you.

6

I am not a coder, so I don’t know where to apply this code. Would someone here be able to help me out ? I already have the intercom chat up and running on my sandbox site.

https://tka-refresh.webflow.io/

7

You just need to paste the snippet from the original post into your site’s ‘Footer’ code. It can be found in Project Settings > Custom Code > Footer Code.

8

Do I keep the intercom code AND paste this code or does this code replace the intercom code ?

9

You should just use this script, but be sure to change 'your_intercom_src_URL' in the script to your Intercom src URL (you’ll find it in the Intercom script you’re using now)

10

First off, thanks for including this script.

I’m curious. If you use Google Tag Manager and have Intercom in that, would that solve the speed issue? Is there are benefit of one over the other?