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

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(). 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:

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 https://ko-fi.com/U7U8BRF6G 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.