There are several approaches to loading content inside tabs. For example, Tabbed content

  1. Load all content initially, then just manipulate the DOM to show/hide tabs
  2. Load only the content of the active tab initially, then fetch the content of the other tabs via AJAX when the user switches tabs.
  3. Load only the content of the active tab initially, then preload the content of the other tabs while the browser is idle.

I think that #3 is the best practice because it combines the advantages of #1 and #2, but if you're not going to use #3 for whatever reason, then which of the first two is better?

With #1, the page will take longer to load initially, but switching between tabs is instantaneous.

With #2, the page will load faster initially, but the user will have to wait for the content to load on the other tabs.

  • How much content do you plan to have on each of the tabs?
    – icc97
    Commented Feb 9, 2016 at 9:06

2 Answers 2


Well I do agree that approach #3 seems the best option with regards to utilizing bandwidth and ensuring that the user has access to data at once, with regards to the other two choices I would recommend going for approach #1 since users like to switch between tabs to get related information quickly and a delay might cause them to lose track of their thought process.

To quote this article Module Tabs in Web Design: Best Practices and Solutions from Smashing Magazine about the relation between content on different tabs


Information in the panes of module tabs must have some connection to each other so that users can make a logical correlation towards the content of the component.

Hence with regards to switching,the article states:


A purpose for using module tabs is to permit quick and interactive presentation of content. For this, you should try to have the inactive pane contents written inline in the HTML document, and then use CSS and JavaScript to style and hide the pane visually, which is quicker than requiring a page reload or requesting remote-source data.

Avoid page reloads when switching in between the panes because this significantly delays navigation in between panes. Remotely-loaded content using Ajax can be an option for dynamic and remotely-located pane information but presents a challenge for screen reader users who may not be aware of asynchronously DOM-inserted nodes in the document’s tree.

To quote this article about Website tab usability :

Ensure fast response time: Users expect content to show up faster when clicking a tab (typically less than 0.1s), rather than when clicking a link. This can be achieved using AJAX by loading content in the background and making it visible on tab click. However, you can use any technique as long as the end result gives users the impression that a physical connection exists between their mouse click on the tab and the content that is loaded


Hence I would go for an approach which would reduce the waiting time which is choice #1 (though choice #2 might work just as fast, an user with a slow internet speed might get pretty frustrated with no data to be found when he switches the tabs) .Also Ajax might pose an issue for screen readers as highlighted in the above quoted text

  • 1
    +1 for "SWITCHING IN BETWEEN PANES SHOULD BE FAST", that's why they're panes and not other pages.
    – msanford
    Commented Sep 7, 2012 at 19:42
  • This help me too Thanks for sharing IPL live streaming i am also searching for the same query and got my answer here
    – user79332
    Commented Feb 9, 2016 at 6:34

As an alternative to Mervin's excellent answer - there are cases when between tabs if there is too much content then it makes sense to load the tabs as you click on them. However for the reasons Mervin gives, I'd suggest that AJAX loading still wouldn't be the way to go, unless you're writing a single page app.

Here on UX.SE, the different views between sorting the questions (votes, active, unanswered etc.) are tabs by the sense that it's displaying related information, but they are loaded one tab at a time:

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.