How we made our ChatGPT Chatbot 10x Faster
Tags: webdev, tutorial, beginners, programming
Published: 2023-04-25 04:58:49

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](https://ainiro.io/blog/seo-enter-the-ninja) 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](https://pagespeed.web.dev/) 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](https://ainiro.io/assets/images/pagespeed-insights.jpeg)

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](https://ainiro.io) 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](https://pagespeed.web.dev/) 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](https://ainiro.io) 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.

* [The DIY ChatGPT chatbot version](https://ainiro.io/blog/how-to-get-chatgpt-on-your-website)
* [The 'we do all the work for you' version](https://ainiro.io/contact-us#demo)

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

```javascript
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);
  }
}
```

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