Caching is fantastic and the key to making websites performant and scalable. But comments can make caching tricky because they have the opportunity to invalidate a page’s cache so often. Every time a comment is posted on a site, the page it’s posted on (technically) changes. So if the comments are a part of that cache, then that’s a lot of potential cache misses.

There’s are a few things that can be done about this. One common solution is to only cache layers of the application that occur before the page is rendered. For a PHP based application like WordPress, object caching can accomplish this well, especially if the cache can be stored in machine memory and retrieved quickly.

Another approach is to only cache for a very short period of time. This approach, called microcaching, usually is only used for high traffic sites on a powerful server or a cluster of load balanced servers.

High traffic sites like Reddit use a hybrid approach where different caching methods are used at different application layers.

But for most websites, a complex setup like that isn’t necessary. Caching the edge layer with either a pass-through CDN like Cloudflare or a caching plugin like WP Super Cache is usually enough. The only issue is clearing the cache at the right time, and making sure that the page output is compatible with edge caching.

These edge caching solutions provide ways to make sure that administration pages, login forms, and cart pages do not get cached. But comments usually do.

So how can you use “edge layer” caching without clearing the cache every time a comment is posted? 

This guide will showcase a few ways you can make comments “edge cacheable”, and discuss the benefits and downsides of each.

Method 1 — Facebook Comments

One way to avoid the problem altogether is to use a third party service for comments and not handle them using your WordPress site at all. You can “embed” comment systems, kinda like how you’d embed a YouTube video or a tweet.

Upsides:

• Facebook solves the caching problem for you.
• Facebook handles the user registration and user profile part for you.
• Facebook “handles” spam problems for you (but not very well).
• Built in Facebook analytics.

Downsides:

• You have zero control over how Facebook uses the data they collect and aggregate in their analytics, and you can’t turn the analytics off.
• You have zero control over the comment data itself. It’s owned, managed, and maintained by Facebook exclusively. So if you ever want to move off of Facebook comments, you’ll lose all your old comments.
  
• Your users will be held to Facebook’s Privacy Policy because the embedded comment system on your site, whether or not they comment.  
• Users would have to use a Facebook account to comment on your site. If anyone has an objection to that for privacy reasons, moral reasons, political reasons, health reasons, or a host of other reasons, then they won’t be able to comment on your site.
• Facebook Comments get less engagement. TechCrunch experimented with Facebook Commenting system years ago and it performed so poorly that they immediately switched back and put an apology on their homepage asking their commenters to come back.
  

Method 2 — Disqus

Disqus has a lot of the same technical benefits of using Facebook, and a few of the same technical downsides. To use it, you just set up a Disqus account, install a plugin, and it works. The full steps are described in Disqus Install Steps for WordPress.

Upsides:

• Takes care of the caching problem for you.
• Disqus handles the registration, spam, and user management for you.
• Easy to set up. “Set it and forget it.”

Downsides:

• You don’t fully control the data, so you’d lose your comments if you ever migrate away.
• Inserts ads/affiliate links by default and without permission.
• “Sponsored Comments” that can’t be turned off without contacting Disqus support. (Matt Mullenweg’s blog post about this is interesting).
• Comment management is done separately from where you manage your content. Although I suppose some might consider this an upside.
• Much like Facebook comments, it’s been shown on many occasions to not perform well at all. (See Syed Balkhi’s post Switching Away from Disqus Review – Increased Comments by 304%.) 

If you’re looking to offload functionality, Disqus is probably a better choice than Facebook, but it’s still not perfect.

Method 3 — Make Native WordPress Comments Edge Cacheable with Lazy Loading

Sometimes the best solution to a problem is just making it someone else’s problem. Specialisation works, and the web is trending more and more toward microservices. But in this case I think it’s better to solve the problem than offload it. 

The commenting system built into WordPress can work with edge caching by just lazy loading the comments — no special caching configuration required! ?

All you have to do is install and enable this plugin:

Lazy Load for Comments

What this plugin does, is rather than having the page print out comments as it loads, instead a placeholder for comments is printed, and a script is told after the page loads to pull the content in dynamically from your server. This way, you can cache the page without having to worry about a comments. All that is cached is the placeholder and the script, so comments will continue to load even if the page is fully cached.

Further Customization

One option that exists in this plugin is how you want plugins to load. You can have them load with a button press, or load automatically as a user scrolls to the part of the page that holds comments. I personally like the scroll method since it’s automatic, but both options work well. This option is just a personal preference.

You can change the text of the button with this code snippet:

	add_filter( 'llc_button_text', function () {
	return 'My Custom Button Text';
	});

view raw lazy-loading-comments-custom-text.php hosted with ❤ by GitHub

Or use a custom a custom loading animation for the scroll option:

	add_filter( 'llc_loader_element_content', function () {
	// Use any html element.
	return '<img aria-hidden="true" src="/url/to/image/here.gif">';
	});

view raw lazy-loading-comments-custom-image.php hosted with ❤ by GitHub

Or, hide the animation altogether:

add_filter( 'llc_enable_loader_element', '__return_false' );

view raw disable-lazy-loading-comments-loading-animation.php hosted with ❤ by GitHub

For a full list of all the cool ways you can customize this, check out the FAQ on the WordPress.org Plugin Page for this plugin.

And if you’re not sure where/how to use one of these code snippits, check out my guide, How to Make a Site Specific Plugin.

Enjoy!