DEV Community

Cover image for How we made our ChatGPT Chatbot 10x Faster
Thomas Hansen
Thomas Hansen

Posted on • Originally published at ainiro.io

How we made our ChatGPT Chatbot 10x Faster

A ChatGPT-based website chatbot can dramatically reduce your website's performance. A decent chatbot needs to download reCAPTCHA. This is a heavy library, blocking rendering during downloads, significantly impacting performance of your website. A slow website scores badly on SEO, something we published an article about last week. You should therefor carefully measure the performance of your website both before and after including a chatbot on your website, or you might be up for a surprise as you see organic clicks form Google drop like a stone in water because you wanted "a cool ChatGPT-based website chatbot on your site".

We just made some huge performance gains on our own chatbot technology. The way we did it, was by deferring loading of reCAPTCHA libraries until the chatbot is activated. Let's face it, your chatbot is amazing, but most people comes to your site to see (duuh!) your site, and not your chatbot. Hence, loading reCAPTCHA before it's needed, is a waste. reCAPTCHA is also an extremely poorly written JavaScript library, blocking DOM rendering for 3 to 4 seconds on phones. Yes I know, the irony ...

Below is a screenshot of an empty HTML page and how it scores on Page Speed Insights after the new optimisation fix was implemented. Not bad if I may be so bold as to say so ^_^

A really fast ChatGPT-based website chatbot

Just ignore the SEO and the accessibility parts, this was an empty website, just some empty HTML boiler plate code, with our ChatGPT website chatbot included, so everything besides the big green "100 Performance" thing is irrelevant. Basically, you cannot get it better than what we're currently doing now. Before this optimisation fix, our chatbot technology had a score of 70 to 80 somewhere. After the fix, 100 period!

How to measure your chatbot

There are tons of great places you can measure the performance of your page, PageSpeed Insights being one of these. These sites will load your website, simulating a user, both using a phone on 3G and a WiFi connection on a Desktop machine. Then they will give you a score. Everything below 80 is quite frankly intolerable. Amazon did research about this some 20 years ago, and their findings was ...

Amazon lost 20 percent of their customers when they increased page load time by 5 percent

This implies that if your chatbot increases page load speed of only 5%, you might risk losing 20% of your revenue! You will typically see this on "Average engagement time" in Google Analytics - Another garbage JavaScript library from Google may I add ... :/

More work to be done

Our ChatGPT-based website chatbot is not perfect. We've still got some more optimisation tricks up our sleves, such as optimising loading of CSS, fonts, etc - But I suspect we're already the fastest ChatGPT-based website chatbot that exists out there, probably by a large margin. However, before we applied this massive fix, our site would block for 3 to 4 seconds on 3G network. After we applied the fix, we've got block time of roughly 1 second. I think we can get it down to 0.5 seconds though, possibly maybe even less - But at least for now our clients can sleep better, knowing they've (probably) got the fastest chatbot on Earth on their webpage ...

Psst, if you want a chatbot such as this for yourself, you can use any of the links below.

Edit - Below is the JavaScript function we're using to dynamically load reCAPTCHA. We invoke the following function as the "chat with us button" is clicked.

let recaptchaFetched = false;
let aistaReCaptchaSiteKey = '[[recaptcha]]';
function ensureReCaptchaHasBeenFetched() {
fetched.
  if (recaptchaFetched) {
    return;
  }
  recaptchaFetched = true;
  if (aistaReCaptchaSiteKey && aistaReCaptchaSiteKey.length > 0) {

    const cap = window.document.createElement('script');
    cap.src = 'https://www.google.com/recaptcha/api.js?render=' + aistaReCaptchaSiteKey;
    cap.defer = true;
    window.document.getElementsByTagName('head')[0].appendChild(cap);
  }
}
Enter fullscreen mode Exit fullscreen mode

Edit 2 - I wish I could take credit for this trick, but it was actually @jahilldev, @jodumont and @shbick who pointed me in the direction for this.

Top comments (1)

Collapse
 
arianygard profile image
AriaNygard

This is some really good work!