So long Disqus, hello Webmention

Enough. I'm fed up with Disqus. It's been useful, easy to plug on this blog, but it's a mess for web performance, and I don't own my data, so… bye bye. Webmention is now a great alternative, with more people implementing it, so let's try to keep only that.

So long Disqus

When I launched this Jekyll based site a while ago, I didn't put any comment system, because I didn't like any of the options available at the moment.

Later, I was missing the interaction I had on my previous dynamic blog powered by SPIP, so I jumped in the Disqus train, because it was the most used around me, and on the sites I visited.

Disqus is so easy to use with Jekyll

Installing Disqus on a blog only requires a few lines in the post template, with two JavaScript variable to set with Liquid values. Really easy.

Then generate the site, deploy, and it works!

But Disqus is a pain for actual and perceived web performance

I hate how Disqus feels so slow when I browse pages using it.

In fact, Disqus loads asynchronously, so it doesn't really affect the Speed Index of the page on initial load and rendering, but I hate almost every use of lazy loading[1], and Disqus' one is really bad. I scroll the page to the post end, and then Disqus loads the comments and suggested content, pushing everything else, with an annoying repaint. I hate that. It makes me feel like the site is slow.

Also, Disqus loads around 450 kB of data — mostly JavaScript — on the pages, which is not so light for "just" comments. And it loads that from 5 or 6 different domains[2], without a great caching optimization.

This page's weight before and after removing Disqus, as shown in my Dareboost monitoring. Disqus accounted for three quarters of the page weight!

Disqus also requires a few rules in your Content Security Policy, but that's manageable.

Also, not everyone likes to comment on Disqus

Disqus being a third party service, we don't know what our comments become and how Disqus tracks us accross blogs, how we are becoming the product.

The famous Geek&Poke cartoon with pigs talking about the “free” model.

I can of course export all comments to keep my own local copy, but it's not as convenient as a true local storage.

Some people also don't like being forced to create an account on Disqus to be able to comment.

If you use Disqus on your blog, please activate the "Allow guests to comment" option in the settings!

If you use Disqus, please allow guests to comment without an account

Comments history is not lost!

Of course, removing Disqus could have meant losing the comments made so far. But I don't like to lose valuable content. Some of the comments you make on my posts are even more valuable than the posts themselves!

So, I used Pat Hawks's jekyll-disqus-comments plugin to get a copy of all comments into YAML data files.

I had to clean them a lot, mostly manually, because they were an HTML mess. Maybe not only because of Disqus, but also because they had already been migrated from SPIP before.

The comments are shown below posts has before[3], but they are now static, using a Jekyll template, without Disqus being involved anymore.

Hello Webmention

I added Webmention to this blog a while ago, with some success on popular posts like How much data should my Service Worker put upfront in the offline cache?.

I also see that Webmention use is growing elsewhere. For example, Rachel Andrew chose to adopt Webmention because she had too much SPAM:

I had to turn off comments on my recent posts due to them being used as a vector for anonymous abuse. New site will use Web Mentions.

I discovered Webmention a while ago thanks to Jeremy Keith's experiments with Webmention on his own blog.

So, what is Webmention?

Webmention is a W3C recommendation since January 12nd 2017, based on the great work of IndieWeb people.

Drew McLellan, developer of the Perch CMS with Rachel Andrew, explains very well the Webmention flow:

  1. Frankie posts a blog entry.
  2. Alex has thoughts in response, so also posts a blog entry linking to Frankie’s.
  3. Alex’s publishing software finds the link and fetches Frankie’s post, finding the URL of Frankie’s Webmention endpoint in the document.
  4. Alex’s software sends a notification to the endpoint.
  5. Frankie’s software then fetches Alex’s post to verify that it really does link back, and then chooses how to display the reaction alongside Frankie’s post.

Reminds you of manual trackbacks and Wordpress' automated pingbacks? Indeed. Let say it's a standard way to do almost the same.

Trackbacks and pingbacks failed mostly because of SPAM, and IndieWeb is taking this seriously for Webmention's future, with intense work on Vouch, an anti-spam extension to Webmention. Let's hope it gets implemented soon everywhere.

James Richman explains in this post: Is W3C Replicating the WordPress Pingback System?

How does it work on this site?

Webmentions for this site are collected by two services:

  • webmention.io "is a hosted service created to easily handle webmentions (and legacy pingbacks) on any web page". I use it as my Webmention endpoint. This is an open source project built by Aaron Parecki, co-founder of IndieWebCamp and editor of the W3C Webmention and Micropub specifications[4].
  • Bridgy "pulls comments, likes, and reshares on social networks" (Facebook, Twitter, Google+, Instagram, Flickr, etc.) and push them to my Webmention endpoint. This is an open source project built by IndieWeb people, and is free to use.

Once Webmentions are in webmention.io, they are pulled into my Jekyll sources thanks to Aaron Gustafson's jekyll-webmention_io plugin for Jekyll, and added to my posts pages.

There are still a few issues to fix

All of this is great, but there are a few issues I'ld like to fix as soon as possible.

First, there are some Webmentions that should not be shown, either because they are useless, or because they are duplicates. webmention.io now provides a way to remove mentions, and will evolve to add a block function.

Also, I should group mentions by type. Likes, for example, could take much less space in the page. Aaron Gustafson grouped mentions by type on his blog, but I'ld like to show them as facepiles, like Drew McLellan:

Nice facepiles for likes and reposts on Drew McLellan's site.

I also have issues with some avatars that come directly from Twitter, and are really heavy. The new version of Aaron's Jekyll plugin will allow me to define my own template, and use Cloudinary to resize and optimize these images. I have yet to try it, because I'm still using the old single file version, while the new one is now a gem.

August 11th, 2017 update

Simple —yet really valuable— Webmentions as likes and reposts are now simple facepiles. They are the most abundant Webmentions, so it helps reduce the length of the page, and make the actual mentions more visible, most being replies on Twitter.

Also, I'm now using my own templates for all these Webmentions, and I use Cloudinary to optimize all avatars (size, format and weight), and reduce the number of domains from where ressources for the page come. Also, default links to avatars that came from webmention.io where in fact soft redirects (302) to the actual URL on Twitter's servers, so there was an additional latency to get them. Looks like I've killed two birds with one stone!

January 15th, 2018 update

It looks like Webmentions is getting more traction every day (here Tim Kadlec planning to replace Disqus with Webmentions), I hope 2018 will be a great year for them.


  1. Don't get me started on Medium's stupid images lazy loading which makes me see only blured useless things when I scroll… ↩︎

  2. So as many DNS requests are needed. ↩︎

  3. Here is an example of comments preserved for a popular post. ↩︎

  4. Aaron is also a shareaholic, traking on his website where he moves, what he eats, etc. ↩︎

113 Webmentions

52 likes

16 reposts

  1. Nicolas Hoffmann avatar
  2. Bob Volte avatar
  3. Aaron Gustafson 🚀🕸 avatar
  4. Johan Bleuzen avatar
  5. Cyrille Jesmo Drazik avatar
  6. Boris avatar
  7. M4D'z avatar
  8. Brendan Abolivier avatar
  9. Christophe Ducamp avatar
  10. Kevin Marks avatar
  11. Simon Prévidente avatar
  12. IndieWebCamp avatar
  13. Chris Hartjes avatar
  14. David Zschille avatar
  15. Comandeer avatar
  16. Delphine Malassingne avatar

23 replies

  1. Eric Portis avatar Eric Portis
    Possibly useful, when you figure out what you want to do with avatars: cloudinary.com/documentation/…
  2. Aaron Gustafson 🚀🕸 avatar Aaron Gustafson 🚀🕸
    I'm heading there too. Thanks for having the way!
  3. Nicolas Hoizey avatar Nicolas Hoizey
    Thanks a lot to you!
  4. Eric Newport avatar Eric Newport
    how would you say this compares to portier (portier.github.io)? i've been thinking of building a comments system using that
  5. Nicolas Hoizey avatar Nicolas Hoizey
    Portier would more be an equivalent of IndieAuth: indieweb.org/IndieAuth
  6. Thomas Parisot avatar Thomas Parisot
    Inspiring thanks. Will have a go at it too 🙂
  7. Anthonny Quérouil avatar Anthonny Quérouil
    Thank you 👍 maybe i could try it for @HubPressIO to offer an alternative to Disqus
  8. Nicolas Steinmetz avatar Nicolas Steinmetz
    Note: cet échange là, on ne l'aurait plus sur des blogs classiques au travers des commentaires - la centralisation et les notifications le permettent :-/
  9. remouk avatar remouk
    On l'aurait eu à l'époque mais clairement les usages ont changé... :(
  10. Boris 🚀 avatar Boris 🚀
    Ce qui n'est pas un problème puisque l'échange n'a ni pérennité, ni lien avec une publication plus fournie. De plus, je soupçonne qu'il n'ait pas de conclusion non plus.
  11. Nicolas Hoizey avatar Nicolas Hoizey
    On l’aurait sans doute eu, mais moins rapide/informel. C’est complémentaire.
  12. Jeremy Cherfas avatar Jeremy Cherfas
    Webmentions are the glue that sticks all the bits in all the sites together.

    That’s my one-liner about one of the core ideas about the #IndieWeb, but it doesn’t actually tell you very much if you want to know how the glue works. I’ve kind of absorbed a moderately high-level abstraction over the past little while of playing with webmentions, but a friend asked for more:
    Do you know of any diagrams that explain how this stuff works without all the … words that web communities seem to enjoy creating?…
  13. Vincent Valentin avatar Vincent Valentin
    github.com/bastianallgeie…



    Ça donne envie tiens. 🙂
  14. Joachı̩̹̐̉ͪ̀m ᕙ👨🏻ᕗ avatar Joachı̩̹̐̉ͪ̀m ᕙ👨🏻ᕗ
    J’allais justement Google si ça existait :)
  15. Nicolas Hoizey avatar Nicolas Hoizey
    Ah cool !
  16. Paul Kinlan avatar Paul Kinlan
    Yeah. I was certainly thinking about that.
  17. Nicolas Hoizey avatar Nicolas Hoizey
    I didn’t have much comments anyway, but most of all, I really like WebMentions and other distributed systems.
  18. Ricardo Mendes avatar Ricardo Mendes
    Same here using @withknown
  19. Nicolas Hoizey avatar Nicolas Hoizey
    🙏🏼
  20. Atila 🧉 avatar Atila 🧉
    ♥️ great post!! 🔥

    That statement was meant as a joke that not enough people are using it. But I'm starting to get the feel that a should rewrite that bit 😅
  21. Max Böck avatar Max Böck
    we're all rookies compared to some of the folks at indieweb.org/Webmention (@adactio going on 7 years now!)
  22. Nicolas Hoizey avatar Nicolas Hoizey
    Of course!

    I discovered Webmention and Indieweb thanks to @adactio BTW.
  23. Atila 🧉 avatar Atila 🧉
    haha good to know. Thanks! 😅

19 mentions

  1. Juan Hernando avatar Juan Hernando
    Ojalá cada vez hablemos más de Webmention → So long Disqus, hello Webmention nicolas-hoizey.com/2017/07/so-lon… vía @nhoizey
  2. Page screenshot https://open-time.net/post/2017/07/29/Webmentions-en-coreen
  3. Bill Bennett avatar Bill Bennett
    So long Disqus, hello Webmention
    Along with a reminder to look at updating web mentions on my WordPress site. nicolas-hoizey.com/2017/07/so-lon…
  4. Sylvain Lesage avatar Sylvain Lesage
    Para comentarios en sitios web, vean webmentions, y olvídense de disqus, o comentarios de su CMS.nicolas-hoizey.com/2017/07/so-lon…



  5. Evert Pot avatar Evert Pot
    I think I gotta do this soon too!
  6. Page screenshot https://evertpot.com/bye-disqus-hello-webmention/
  7. Pascal MARTIN avatar Pascal MARTIN
    Thinking about enabling comments (back?) on your static blog/website? Those two posts about Disqus and webmentions, by @evertp and @nhoizey, could interest you: evertpot.com/bye-disqus-hel… and nicolas-hoizey.com/2017/07/so-lon…
  8. Cédric Bousmanne avatar Cédric Bousmanne
    . So long Disqus, hello Webmention – nicolas-hoizey.com/2017/07/so-lon…

    - cedric.io/2018/09/18/834/
  9. Page screenshot https://akyrho.wordpress.com/2018/09/18/834/
  10. Page screenshot https://cedric.io/2018/09/18/834/
  11. Page screenshot https://www.instagram.com/andrei.22m
  12. Page screenshot https://www.bridgestew.com/posts/conversations
  13. Page screenshot https://www.instagram.com/andrei.22m
  14. Page screenshot http://insightlubes.ae/?option=com_k2&view=itemlist&task=user&id=213
  15. Chad Lee avatar Chad Lee
    I’ve used Disqus comments on this site for a long time. At the time I set it up, it was ubiquitous, easy to set up, and a no-brainer. However, after converting my site to Gatsby and getting the site to load Blazing Fast™, the Disqus embed code was the slowest thing on my site. It’s gotten fat over the years and like a bad husband, I’m finally dumping it.I don’t remember how I stumbled upon it, but the inspiration for this change came from the IndieWeb, a group of hipsters with websites trying to…
  16. Drei aka Bitcoin Master avatar Drei aka Bitcoin Master
    I would like to thank Nicolas Hoizey for introducing me to webmentions
    and Bridgy.

    Glad to know that I’m not alone in thinking we netizens shouldn’t always rely on centralized internet services such as Disqus, Facebook, and even Twitter, in spite of
    the ease of use, we should be independent of them.

    Also Chad Lee’s post provided the perfect use of the H-Card and H-Entry for Microformats.

    This all started when I was looking for a commenting system for my static blog. Most don’t like commenting through…
  17. admin
  18. Page screenshot https://erambler.co.uk/blog/replacing-comments-with-webmentions/
    Just a quickie to say that I’ve replaced the comment section at the bottom of each post with webmentions, which allows you to comment by posting on your own site and linking here. It’s a fundamental part of the IndieWeb, which I’m slowly getting to grips with having been a halfway member of it for years by virtue of having my own site on my own domain.
    I’d already got rid of Google Analytics to stop forcing that tracking on my visitors, I wanted to get rid of Disqus too because I’m pretty sure the…
  19. Marty McGuire avatar Marty McGuire
    I have a great fondness for IndieWeb building blocks and Webmention is a wonderful meta-building-block that connects so many individual websites together.

    Obligatory "what is Webmention?": it's a specification that describes a way to "tell" a website that some document out on the web links to one of the pages on that site.


    Sound simple? It is! Perhaps even suspiciously simple. Webmention enables whole new kinds of interactions between sites (some great examples in this A List Apart piece). Unfortunately…