Date archives "September 2018"

Guides

Edge Cacheable Comments in WordPress

Comments Off on Edge Cacheable Comments in WordPress read
Edge Cacheable Comments in WordPress

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
Use your own text for the button

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
Use your own animation

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
Use your own animation while loading

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!

Blog

Inside Rackspace’s Fake Website Speed Test

Comments Off on Inside Rackspace’s Fake Website Speed Test read
Inside Rackspace’s Fake Website Speed Test

I wish we lived in a world where everyone used ad services like Carbon, or where decentralized opt-in monetization for websites was a common standard. But we don’t. We live in this world, where ad revenue is at the center of everything from AI development to social media privacy scandals. Unfortunately, one of the easiest ways to monetize content is to use ad networks like Taboola and Outbrain. And I’m okay with that.

I get a lot of ads for hosting and web services because I do a lot of work on the Internet. Here’s one I saw on Reddit today:

It seems like an interesting idea. It’s pretty cool when a tech company can provide a free tool or service as a way of promoting paid services. Google does something similar with PageSpeed Insights which is a free online performance test. PageSpeed Insights is a full blown service with APIs you can use for continuous performance monitoring. It integrates nicely into other cloud based Google products and is rumored to be one of the metrics google uses for ranking on mobile. It’s a really cool way to advertise a product. It’s useful, and demonstrates Google’s competency in monitoring and web performance.

I assumed that this Rackspace ad is showing off a similar tool, which makes sense since Rackspace is a hosting provider. So I tried it out. Here are the results of testing my blog:

I was surprised that the testing took place inside the ad iframe instead of on a separate page specific to the tool. And I was a little disappointed my blog got a “Needs work” score. But I get the idea. You test it out, if you don’t get a good score, they recommend you switch to them for hosting. Cool idea.

So I tried a few other websites and they all got similar scores. Just for fun I tried typing in Rackspace’s control panel url to see how it scores:

Oof. Needs work. But to be fair, a login cluster for a hosting provider is going to require a more powerful firewall than my personal blog, so latency is expected, and reasonable. I’m just surprised the latency shows up on an internal tool. Wouldn’t Rackspace whitelist their own servers for this kind of thing? (Foreshadowing…)

I tried as many sites as I could think of to try and get any response other than “Needs Work” but every site got roughly the same score. So I started looking at the code inside the ad to see what API it was using to run the server test.

By the way, if you ever want to pull apart a Google AdSense ad, the easiest way to do that is to click the little turquoise triangle in the corner labeled “Ad Choices”. It will take you to a page that will tell you why google thought that ad was relevant, and it will show you the ad in a little sandboxed iframe. So if you want to take apart an ad or see the same ad multiple times, that’s an easy way to do it.

Image Courtesy: DAA

Using this method, I was able to find the JavaScript powering the server test.

/**
* Creates a Ping instance.
* @returns {Ping}
* @constructor
*/
var Ping = function() {};
/**
* Pings source and triggers a callback when completed.
* @param source Source of the website or server, including protocol and port.
* @param callback Callback function to trigger when completed.
* @param timeout Optional number of milliseconds to wait before aborting.
*/
Ping.prototype.ping = function(source, callback, timeout) {
this.img = new Image();
timeout = timeout || 0;
var timer;
var start = new Date();
this.img.onload = this.img.onerror = pingCheck;
if (timeout) { timer = setTimeout(pingCheck, timeout); }
/**
* Times ping and triggers callback.
*/
function pingCheck() {
if (timer) { clearTimeout(timer); }
var pong = new Date() – start;
if (typeof callback === "function") {
callback(pong);
}else{
console.log('error');
}
}
this.img.src = source + "/?" + (+new Date()); // Trigger image load with cache buster
};
view raw ping.js hosted with ❤ by GitHub

So it turns out there is no API endpoint it’s calling at all. The ad code just uses your browser to ping the site you type in. That’s why every site was getting roughly the same score. This was baffling to me. I wondered if Rackspace really intended to pass this off as a real test.

I looked at the ad closer for any indication that it was a joke or if there was something I didn’t understand.

Turns out there was a disclaimer there that explains the test is fake, in the corner of the ad in tiny font.

When you hover over the disclaimer it reads: FOR SIMULATION PURPOSES ONLY. SERVER PING MAY VARY. Here it is in, actual size:

So now it makes sense that there’s no API, because there’s no tool this test is talking to. This isn’t intended to be accurate at all. It’s a “simulation” of a test.

Well, fine. As long as I know this is the matrix, let’s see what rules we can break. We know the fake test is set up for it to be extremely unlikely to score above “Needs work”, but let’s see if it’s possible to score better.

I fired up a localhost web server on my computer.

There’s no network latency when I connect to “localhost.dev”, since this is all done in a virtual machine on my computer. So let’s see how the simulated test handles a simulated server. 😉

Yay! It’s not bad! So they at least took the time to write in a condition other than “Needs work”, even though no one will ever feasibly get that result on a real network.

In Conclusion…

What upsets me about this ad is that is not that the test is fake, but rather that I believed the test was real. It’s not uncommon for tech companies to put out a free tool for the sole purpose of promoting their product.

Pingdom offers free speed tests to showcase their monitoring suite. Google offers free speed tests to advertise it’s Cloud hosting services and AMP.

And you don’t have to be an industry giant to do this. Sucuri has a free version of their site check at sitecheck.sucuri.net where you can do on demand scans and it works really well.

I understand sometimes ads need to take some creative liberties to convey their message. Bluehost, Dreamhost, and others have sometimes been criticized online for using the term “Unlimited” in their ads (when in fact there are finite resources in the known universe). So I totally get it. Technical jargon might go over someone’s head, and sometimes in order to get a message across in an ad, you need to be brief — even to the point of being incomplete or less than technically accurate.

But this “simulation” of a speed test, that offers advice based on the simulated test takes that a little too far in my opinion. Disclaimer or not, I think this is the same kind of advertising that telemarketers use when they pretend to be calling “from a bank” to tell you about refinancing a loan.

Now, this doesn’t mean Rackspace is evil. This one ad isn’t a reflection on their product, their customer service, or their business. But it does look bad, it is kind of dishonest, and it makes me want to go back to using an ad blocker.

In summary: Rackspace, your fake speed test ad is bad and you should feel bad.

</rant>