Skip to content

Randomized content and caching - How to do it right

January 30th, 2018 WordPress Tips A lot of yellow rubber duckies

For a client I had to display partners on the site. To give them all equal visibility, they needed to be displayed in random order. I had a solution, but then came WP Rocket. That reduced page loading times, but also eliminated the random display of the partners since WP Rocket generates static pages.

Initial solution

In the initial solution I used the WP_Query orderby argument and gave it the value rand. This gave me a randomized set results from the database, which were display through a widget. This works great, but it also requires database calls, every time the partners needed to be displayed. Which is on every page view. Yeah, not smart, I know. But we all need to learn right? And making mistakes is the best way of learning.

Making mistakes is the best way of learning.

Optimizing the site

When optimizing the site I installed and configured WP Rocket. A great plugin which helps site owners to make their website load fast. Really fast. Another plugin/service I installed was Imagify. This service reduces image sizes, and since this site uses a lot of images, the reduction of the image sizes (as in file size) resulted in faster loading.

One challenge remained, the random display of partners didn’t work anymore. Every page was cached, and the order of partners on that page was fixed. And that’s not what we wanted.

The final solution

Thinking about this, I asked the friendly WP Rocket support desk if it was possible to not cache a certain part (fragment) of a page. I got a fast answer from Caspar Hübinger who told me that this was not possible, since WP Rocket stores the whole HTML document and fragments cannot be excluded. He also mentioned that dynamic features should be done in JavaScript and not in PHP. And I totally agree on that.

So, I decided to lookup some samples of randomizing the display of elements on a page, and came across a very cool post on Stackoverflow. A user had a similar challenge and another user came up with a really cool solution. A jQuery function randomize is created to randomize elements in a certain container. In the following code example is the container we want to check for occurrences of table tr td and the elements to randomize are div.member

1$('button').click(function() {
2 $("").randomize("table tr td", "div.member");
5$.fn.randomize = function(tree, childElem) {
6 return this.each(function() {
7 var $this = $(this);
8 if (tree) $this = $(this).find(tree);
9 var unsortedElems = $this.children(childElem);
10 var elems = unsortedElems.clone();
12 elems.sort(function() { return (Math.round(Math.random())-0.5); });
14 for(var i=0; i < elems.length; i++)
15 unsortedElems.eq(i).replaceWith(elems[i]);
16 });

In this case the randomize function is triggered by a button, but in my case I want to execute the function when the page is loaded. So I adapted the code a little, changed the element names and came up with this:

1$(document).ready(function () {
2 $('section.widget_partner_widget').randomize('', 'div.supplier');

Now, the partner divs are randomly displayed. I’m happy and the client is happy.🕺

About Marcel Bootsman

Marcel discovered the web in 1995. Since then he has paid attention to and worked with lots of technologies and founded his own WordPress oriented business in 2009.

Currently Marcel is Marketing Manager for the Dutch Market at Kinsta where he helps Kinsta's client base grow in the Managed WordPress and Application & Database hosting arena.

You can contact Marcel on a diverse range of online platforms. Please see the Connect section on the homepage for the details.