More and more work is done to increase page speeds. To see how a page performs, we go to Google’s PageSpeed Insights to test and work on improving scores based on what we find there. Many times it comes down to the nasty “render blocking” suggestion. A task made harder when services like AgileCRM provides only HTML copy and paste.

Using the code from AgileCRM or TypeKit’s simple script tag does just this. While TypeKit has an “Advanced” bit to copy from, Agile does not. We wrote our own, which you can borrow for inclusion in your project. I will go into it a bit more…


/* -- Start AgileCRM -- */
(function (a,g,i,l,e,c,r,m) {
  c=a.getElementsByTagName(l)[0];
  r=a.createElement(e);
  r.type="text/javascript";
  r.src='https://'+i+'.agilecrm.com/stats/min/agile-min.js';
  r.onload=r.onreadystatechange=function(){
    try {
      _agile.set_account(g, i);
      _agile.track_page_view();
      _agile_execute_web_rules();
    } catch (e) {
      console.log("AgileCRM by www.odden.io -> "+e);
    }
  };
  c.appendChild(r);
})(document,'[APP_KEY]','[DOMAIN_NAME]','body','script');
/* -- End AgileCRM -- */

This is a rather simple bit of code, and I am certain others could find a way to improve on it.

To start, we identified what bits of unique code we cared about, and what might be most easily applied so we created variables to be used.


//  
(function (a,g,i,l,e,c,r,m) {
...
})(document,'[APP_KEY]]','[DOMAIN_NAME]','body','script');
//  

The variables – a,g,i,l,e – all correspond with (document,'[APP_KEY]]','[DOMAIN_NAME]','body','script')

  • ‘document’ is the standard container
  • ‘body’ refers to the body tag
  • ‘script’ is the script tag that all of these will operate within
  • ‘[APP_KEY]’ – this is the AgileCRM Javascript API Key you can get from their API & Analytics section in Administration.
  • ‘[DOMAIN_NAME]’ – The corresponds to the Domain name that your Agile CRM corresponds – e.g. [DOMAIN_NAME].agilecrm.com

Next we go through to connect to the body tag and create the script tag that calls back to the agile-min.js script we get from AgileCRM


  c=a.getElementsByTagName(l)[0];
  r=a.createElement(e);
  r.type="text/javascript";
  r.src='https://'+i+'.agilecrm.com/stats/min/agile-min.js';

To run the functions from Agile, we need to let the page know what to do when we have loaded the javascript file. In this case, we want it try and run the set_account, track_page_view, and execute_web_rules onload. If it fails, it will output a log to the console.


  r.onload=r.onreadystatechange=function(){
    try {
      _agile.set_account(g, i);
      _agile.track_page_view();
      _agile_execute_web_rules();
    } catch (e) {
      console.log("AgileCRM by www.odden.io -> "+e);
    }
  };

Finally, we close out the function by appending the javascript to the end of the body section, just before the closing body tag.


  c.appendChild(r);

We narrow down the amount of HTML created and processed, cut down the number of blocking calls, allowing the site to load faster, and now have our sites scoring 90+ on the sites we have put together.

You can find the full gist on our company GitHub here. [ https://gist.github.com/OddenCreative/f4fc9e6a31db7057a72b8966094e849e ]

You can learn more and sign up for your own Agile CRM account here.

Hopefully, this is valuable for someone and can be used as an example to integrate AgileCRM into your own JavaScript functions. If it has been, please share with others, and if you have further ideas or suggestions, comment below, or contact us at Facebook, Twitter, LinkedIn, or our Contact Page.