How to improve page load speed with ActiveCampaign

Wiki (en)
, ,
1

Applying these steps increased measured performance from 60 to 80+ for the ActiveCampaign website integration.

Introduction

ActiveCampaign provides web site integration for improving customer experience. However, the web site integration significantly reduces website performance as indicated by Google PageSpeed Insights. On a small Invantive website, the mobile performance was hovering around 60. A number of actionable steps are given to increase the performance by over 20 positions as measured on various small websites.

Website Speed Issues of ActiveCampaign Integration

The problems most hindering acceptable website speed with the current ActiveCampaign integration are:

  • The large JavaScript conversations module is loaded and evaluated even when ActiveCampaign Conversations is not in use.
  • Most JavaScript libraries are loaded with no or little caching despite using a CDN.

This is illustrated by the following measurements taken using Chrome Devtools:

![Measurements of default ActiveCampaign webpage load performance.]

image
image730×330 19.2 KB

The network traffic is filtered by “app-us“ which limits it to the ActiveCampaign integration. The diffuser.js is the starting point and is cached for at most 5 minutes in CDN proxies and browser. It loads the versioned conversations module ‘widget.js’ of 224 kB with a long lifetime.

In the next step, diffuser.js loads the conversations module even when Conversation was disabled. The JavaScript does not seem to be hit extensively, but the initial hit of 224 kB network traffic is rated by the mobile reference platform of Google PageSpeed as load performance hit of approximately 1,5 seconds.

Steps to Increase User Page Speed

In the next steps, we will replace the default implementation of the ActiveCampaign integration by exchanging it for a self-hosted CDN on Amazon S3 with CloudFront. All files get a value of Cache-Control of “public, max-age=86400“. In our case, we have created a CloudFront-based site https://cdn-ac.invantive.com.

Also small changes are needed to the JavaScript to ensure files downloaded are retrieved from this CDN and not from the original location. Disadvantage is ofcourse that changes by ActiveCampaign to the JavaScript must either be applied manually or through a scheduled script.

Execute the following steps to improve page load speed on website with ActiveCampaign integration:

  • Create a folder cdn-ac to contain the JavaScript replicas.
  • Create subfolders diffuser and conversations.
  • Save the file diffuser.js to the diffuser subfolder.
  • Save the file widget.js to the conversations subfolder (optional).
  • Save the versioned widget*.js to the subfolder (optional).
  • Edit diffuser.js and widget.js and change the value of cdnDomainName.
  • Remove the loading of conversations (optional, see below).
  • Change your HTML in site or Google Tag Manager.

The result of these changes is amazing:

![Remaining network traffic after changing ActiveCampaign integration.]

image
image704×216 7.85 KB

In most scenarios, the diffuser.js is even loaded from proxy and browser cache. The conversations module is no longer activated. Google PageSpeed reports a significant improvement and user experience on mobile device matches this measurement.

Step Details

The following batch script can be used to retrieve the files:

@echo off
rem 
rem Copy files from CDN of ActiveCampaign to our own CDN.
rem This allows us to increase cache control setting from 5 minutes to 1 day.
rem
rem Google Pagespeed Insights increased for a sample site for mobile use from 60 to over 80.
rem

curl https://diffuser-cdn.app-us1.com/diffuser/diffuser.js --output diffuser/diffuser.js
curl https://diffuser-cdn.app-us1.com/conversations/widget.js --output conversations/widget.js

echo Replace the cdnDomain "diffuser-cdn.app-us1.com" by "cdn-ac.invantive.com" 
echo in conversations/widget.js and in diffuser/diffuser.js.

Besides changing the cdnDomain, the removal of the following JavaScript disables loading of the conversations module:

n.async((function(){n.loadScript(t,(function(){window.conversationsGlobalObject.accountId=e._visitor.accountId,window.conversationsGlobalObject.visitorId=e._visitor.id,e.visitor.email&&(window.conversationsGlobalObject.email=e._visitor.email),n.async((function(){return window.conversationsGlobalObject.connect()}),1),e._processUpdateQueue()}))}),this.settings.delay?1e3*+this.settings.delay:1)

Only remove this JavaScript when the ActiveCampaign Conversations module is not in use.