Vertical tabs of form fieldsets taking a long time to load

Question

UPADTE: I've been awarded a Tumbleweed badge for this question (Asked a question with no votes, no answers, no comments, and low views for a week). My gut feeling is this is about optimizing Drupal to speed up page loads, but maybe it's something else?

I have a form divided into five fieldsets. The sets are displayed on my page using vertical tabs, like this:

// Form element: vertical tabs.
$form['vertical_tabs'] = array(
    '#type' => 'vertical_tabs',
);

// Form elements: fieldset tree.
$form['Fruits'] = array(
    '#title' => t('Type'),
    '#type' => 'fieldset',
    '#tree' => TRUE,
    '#collapsible' => TRUE,
    '#group' => 'vertical_tabs',
);

...etc.

When the page loads, initially just the plain form appears. It takes about 2-3 seconds for the vertical tabs 'styles' to be applied to the form. In other words, it takes a significant time to load the finished page. Has anyone else had this problem and figured out how to stop/arrest this behaviour?

I am using Zen theme, if that makes any difference. Thanks.

Answer 1

I'm almost 100% certain this problem is related to slow-loading javascript; As Mołot mentioned in his comment on the question, you should investigate whether something is holding up the JS from loading and/or processing when the page loads, using browser tools.

There might be some other JS that's being added on the page that's blocking the vertical tabs JS from loading/running. Do you have any 3rd-party (Facebook, Google, Twitter, analytics, etc.) libraries loaded on the page? There are some good tips for getting these things to not block the rest of the page load here: Non-Blocking Loading Of 3rd Party Scripts In Drupal.

Otherwise, do you have a module enabled or some custom code that's hindering/slowing the progress of the page load on that form? This is less likely, but sometimes if a module does something that requires a lot of CPU time (like looping through an entire taxonomy tree to build a form element or do something fancy to it) either with PHP or JS, that can cause the page load to take a really long time.

Vertical tab rendering (as well as fieldset collapsibility rendering) is usually one of the last things to load when a page loads. Something is blocking the page load/render progress, and if you can figure out what that is, you'll find the source of the problem. Good luck!