On Your Marks, Get Set, Wait
What’s really important when reading an article online? Content should always come first, and give users the option for more later.
Since the last re-design of my website, I decided to make the switch to Disqus for my commenting system. This comes with a couple of disadvantages but also with a few advantages.
In this article I’m going to run through how I manage my comments section from a front-end development perspective, with respect to user experience, performance, and accessibility.
- The greatest disadvantage of using Disqus may or may not be obvious, but it means you’re locked into using Disqus for your comments. Disqus do offer importing and exporting options, but it’s not a guarantee that whatever commenting platform you want to move from or to will make for an easy, foolproof process.
- It also used to be the case that you needed to have an account with Disqus in order to be able to make comments, but there is now an optional setting that owners can toggle enabling guests to make comments.
- It’s beyond my knowledge how caching is affected by Disqus—whether or not it is cached, or available to be cached offline—but as the movement to bring offline support to the web ramps up, this could present an issue.
- Once you’ve signed up for a Disqus account, you’ll be able to comment on every site that has implemented Disqus for their commenting system and allows comments from the public.
Disqus has nearly all the bells and whistles you could want for making comments:
- threaded replies; mentions; notifications
- Robust Administration tools
- Automatic anti-spam filters, and ones you can customise yourself, including:
- whitelist / blacklist; restricted words
- Option to display related articles from your own blog or from other blogs using Disqus
- Option to add targeted ads and monetise upon clickthroughs
First, let’s look at some statistics for loading Disqus comments on page load:
37% of an article page’s load time comes from loading Disqus
- This was tested on my article, Let’s Look Back, which has more (heavy) images than any of my other articles—totalling nearly 1MB of image data—meaning that the percentage of load time dedicated to Disqus could get even higher on my more minimal articles.
- 298kB of data comes from Disqus’ three servers used to load comments, which isn’t a hell of a lot—at least, when you compare it to a decent-sized image asset.
- 40 requests are made from Disqus in order to display the comments section.
By and large, this isn’t a massive hit. But we can almost always make things faster. I think it comes down what content is important—most people don’t comment on my articles, which begs the question: do most people care about the comments? That’s a difficult question to answer, but I think the point to drive home is that most people seem not to need the comments section—they’re here to read the articles. Maybe that will change over time, but with a mobile first approach, it’s important to consider what constraints mobile users could be under; namely, poor Internet connection speed and low processing power. The number of users browsing on mobile phones and tablets has only escalated in recent years, and we should be able to cater to their needs in ways other than just building responsively.
So what can we do to reduce the page weight and load time for a majority of users? We can conditionally load comments as and when a user wants them.
Let’s decide what the conditions are for loading the comments:
- The user has finished reading the article, gets to the bottom of the page, and wants to read the comments
- The user navigates to the page from a link that directs them to the comments (with
#commentsappended to the URL)
- The user clicks a link to the comments section from within the article itself (also by
#commentsbeing appended to the URL)
Let’s dive into some code. Here’s how I was loading Disqus non-conditionally:
I didn’t want to reinvent the wheel, so I followed in the footsteps of others who have done the same thing. First I wanted to create an action for the user to perform if they reached the bottom of an article and want to dip into the comments, and did so with a
button and perform two actions: remove the
button and load Disqus.
What we’re doing here is:
- Assigning our
buttonto a variable
- Adding an click event listener to our
button(which fortunately also works via keyboard commands)
- When the
buttonis clicked, remove the
buttonand load in our comments
Everything’s looking sweet so far, so let’s tackle the 2nd and 3rd conditions from above: watching for a hash change in the URL (pointing to
#comment) or catching it when the page is loaded.
What we’re doing here is:
- Assign our hash value to a variable (because why not?)
- If the URL already contains our desired hash on page load, run the
- If the hash changes in the URL after the page has loaded, and it matches our desired value, run the
If you remember, the
showComments() function removes the
button we created before—we want to do the same thing if
#comment is in the URL and we’re loading Disqus, as we don’t want or need users to be able to load comments twice; in fact, that would be completely the opposite of what we’re trying to achieve here!
Almost there! Let’s create a failsafe—if our
button no longer exists when the
showComments() function is run, that means we’ve already loaded the comments, so we shouldn’t do it again.
Here’s the entire snippet of code for my comments section:
We’ve met all the conditions we set when we embarked upon this task:
- Create a button to load the comments
- Load the comments if the page was navigated to with the
- Load the comments if the user clicks an anchor to jump to
As we saw in the statistics of Disqus’ impact, these aren’t massive savings, but they’ll certainly help out some of my users whom I know are browsing on slow connections and slow mobile phones.
noscript tag will display a message,
https://disqus.com/comments/?url=https://chrisburnell.com/article/a-slice-of-heaven is a possible solution to a minor problem—let’s hope Disqus implements something like this soon.
Let me know, as always, down below (treat that link as a proof of concept) if you have any suggestions for improvements to my code or other ideas on the matter. ’Til next time!