Support » Plugin: Tag Groups » tag_groups_cloud slow to show

  • Resolved Tim Reeves

    (@tim-reeves)


    Firstly, many thanks for keeping working on a great plugin for six years – I really do appreciate it very much!

    tag_groups_cloud – as seen in my left sidebar – is working fine. But there are two thing I don’t understand:

    • Why is the CSS styling being applied by JavaScript, so that the tag cloud only appears correctly formatted after the JS has run? Why not apply the styles directly in the source code?
    • The whole cloud area is initially hidden (because it would not be properly styled) and then shown when properly formatted. But how come this takes about 2 seconds? Where is the delay? (I’m seeing this on two sites, one heavily cached and the other not yet using caching).

    I’m sure there are good reasons, but actually I’m trying to get rid of the display delay…

    Thanks again,
    Tim

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author Chris

    (@camthor)

    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

    Plugin Author Chris

    (@camthor)

    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.

    Plugin Author Chris

    (@camthor)

    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

    Plugin Author Chris

    (@camthor)

    Thank you, Tim, for having reported that issue! ๐Ÿ™‚

Viewing 6 replies - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.