tag_groups_cloud slow to show

Hi Tim,

1. The tabs of the tag cloud are from jQuery UI. They use JS so that the tabs with all required CSS can be added to any element that has the right HTML structure. They then use JS to set the tab that you clicked on to active.
2. The delay is caused because the tabs need a piece of JS that is not available yet. You minify the scripts and the parts needed for the tabs are loaded at the bottom, before the </body> tag. I will see if I can solve the problem differently to speed it up, but if you need a solution before the next release, you could change the minify settings to load the required scripts in the header.

Hi Chris,

thanks so much for the prompt reply!

I’ve been looking at the situation some more, and found the inline code causing the delay:

  if (jQuery.tabs) {
    tagGroupsTabstaggroupscloudtabs5f5155ab7ab43();
  } else {
    setTimeout(tagGroupsTabstaggroupscloudtabs5f5155ab7ab43, 2000);
  }
      // here no jQuery(document).ready() because event listener might be bound too late
    jQuery("#tag-groups-cloud-tabs-5f5155ab7ab43").bind("tabscreate", function(event, ui) {
      setTimeout(function() {
        jQuery(event.target).removeClass('tag-groups-cloud-hidden');
      }, 500);
    });

jQuery.tabs is not defined yet, as all the four (!) jQuery UI files needed are being loaded, as is normally correct, at end of body, no doubt properly enqueued. I’m using W3TC, but I don’t see any settings to move particular scripts to the head (nor in Clearfy). But nor do I find that an attractive idea, we all know what PageSpeed Insights will say )-:

What gets me shaking my head is, that having set W3TC up quite meticulously my site is blazing fast, scores 99/100 with PageSpeed Insights. But it’s not able to show the tag cloud for a good two seconds after the page is fully loaded, although all the page’s files are coming out of the browser cache.

I see your comment about event listeners possibly being bound too late. So how about options:

• To offer the option in the backend to try using document.ready() – maybe it works in many contexts…
• Failing that, to specify the milliseconds for the timeout

I’m sure you’re fitter in JS and WP than me, so sorry if my ideas are a bit too simple.

A last question: Is the basic HTML for the tabs complete in the page as coming from the server, or is JS actually extending the HTML? If the former is the case, I could extract the JS actually being used for the tabs and inline it or link it in the head. Theoretically might I even be able to reuse code already present say from Shortcodes Ultimate? I’m asking this because I’m a radical minimalist by nature and hate loading huge libraries and stylesheets, only say 10% of which will ever be used by my website. Reduce to the max is my motto ??

Again, many thanks!

Tim

Trying document.ready() is exactly the plan that I mentioned before. I hope that all browsers will have loaded all external scripts when that event fires. I think I will have a development version ready soon.

I’m a bit reluctant to add more options because many users won’t understand what’s going on and when they screw something up they blame the plugin.

About your last question: I think it’s complete, but I cannot say for sure now. You could disable JS in your browser and compare the HTML.

Please check if version 1.32.3 solves the problem. (I also found a bug in the condition that checked for the availability of the scripts for the tabs.)

Hi Chris,

YES, I confirm that the tabs tag cloud is now shown right away, all the latency is gone. This is the case on two websites, with and without caching.

And the score of my business website with PageSpeed Insights has crept up from 99/100 to 100/100 ??

Again, heartfelt thanks.

Tim

Thank you, Tim, for having reported that issue! ??