Using the Ko-fi button? Here's a version that keeps PageSpeed Insights happy

PUBLISHED 28 Jul 2023 - UPDATED 15 Aug 2023

Ko-fi's embeddable button relies on external JavaScript and triggers a warning in Google's PageSpeed Insights. Here's an alternative version that looks identical but fixes that issue.

Ko-fi's embeddable button

Donation platform Ko-fi offers a button you can embed anywhere on your site to encourage your users to 'buy you a coffee'. I use it here on Technically Product - you can see it in the sidebar, under the picture of me. It's the one with the jiggly coffee cup!

Getting the button is simple:

  1. Log in to your Ko-fi account
  2. Go to Buttons & Widgets > Ko-fi Button
  3. Click Button
  4. Choose your button colour and 'label' (ie the text that you want to appear on your button)
  5. Copy and paste the embed code on to your site

Avoid document.write()

However... if you use Ko-fi's embed code and then run your site through Google's PageSpeed Insights tool, it will flag something up in its DIAGNOSTICS section:

Avoid document.write() warning in PageSpeed Insights

"Avoid document.write(). For users on slow connections, external scripts dynamically injected via document.write() can delay page load by tens of seconds."

The embed code points to an external JavaScript file hosted on the Ko-fi site, and it's this script that uses the document.write() method (to insert the button html I assume). As the Chrome Developers site says in its Best Practice session:

"Using document.write() can delay the display of page content by tens of seconds and is particularly problematic for users on slow connections. Chrome therefore blocks the execution of document.write() in many cases, meaning you can't rely on it."

Using a static image instead

What if you want to use the Ko-Fi button but also want to avoid document_write()? Well, Ko-Fi does offer some static images you can use instead, like this one:

Buy Me a Coffee at

You can generate these by going to Buttons & Widgets > Ko-fi Button as before, then clicking on Image rather than Button. But they have some big limitations:

  • Only a few colours are available
  • The text can't be edited
  • The coffee cup isn't animated

Alternative embed code

So rather than going down the static image route, here's a snippet of html (with inline CSS) you can use to add the button to your site without relying on JavaScript. It's very much a non-official approach (i.e. I've just made it up) but it is based on Ko-fi's original code. If you want to copy the snippet, you'll find a 'copy' button in the options at the top:

You'll need to change a few things in the code to customise the button for your site. They're all in the bottom chunk (after the closing </style> tag):

  • Line 144: Change the colour reference #29abe0 to whatever colour you want the button to be (there are two references to #29abe0 in the code - you can change both if you like, but it's the one on this line that's key)
  • Line 144: Change the Ko-fi link to your one (the one in the code is mine, just to show you the format)
  • Line 146: Change the text Support Me on Ko-fi to whatever you want the button to say

Note that the code snippet still references images hosted externally on the Ko-fi site, as well as Google Fonts. But crucially, no JavaScript and no document.write()!

Once you've made the change to your site, run it through PageSpeed Insights again and you'll see that it no longer flags a problem with document.write(). You may also see a small increase in your performance score.

Notify of
Inline Feedbacks
View all comments
James Clark
Hi! I'm James Clark and I'm a freelance web analyst from the UK. I'm here to help with your analytics, ad operations, and SEO issues.
What do you think? Leave a commentx
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram