Disqus Causes Unresponsive Page

In the recent project to move Otakism to Gatsby and headless WordPress I discovered a pretty bad page stuck issue when integrating Disqus. Most blog posts are just fine but on a particular page Pixiv Best Artists that contains much more text and links, the page will stop rendering to wait for a particular Disqus script to finish executing.

I looked into the issue by recording a performance profile from Chrome dev tool.

The script alfalfalfa.js that blocked page rendering came from a Disqus domain c.disquscdn.com, which is separate from the main embed.js that based on my understanding renders the Disqus discussion thread. So what does this extra script do?

It turns out it is for targeting and attribution. In Disqus dashboard under Site > Advanced, there are 2 settings for Tracking and Affiliated Links:

When I turn off both checkboxes, Disqus will stop loading the alfalfalfa.js script on to the page, which then solves the issue.

Taking a closer look at what these options do, I believe the Affiliate links option is the root cause. It seems to go through all <a> tags on the page in order to append the merchant code. Their script might be using a simple loop without doing it in asynchronous batches, so when the page contains a large number of links it will make the entire page unresponsive. My Pixiv archive page does have lots of links so it unfortunately became a victim.

In conclusion, I solved the problem for myself by unchecking the affiliated link option. This is acceptable for me ’cause I don’t promote products on the site. If you do need to enable that option and you are also running into the unresponsive page issue, you might need to contact Disqus for a better solution.