Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

visibility hidden and display none

performance and indexing

7:31 pm on Sep 4, 2011 (gmt 0)

Junior Member

5+ Year Member

joined:Jan 21, 2009
posts: 69
votes: 0


I'm clear about what visibility:hidden and display:none do. I have a question however what's the difference between the two in terms of:

1. Performance (bandwidth and speed).
2. Google indexing.

9:50 pm on Sept 4, 2011 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
votes: 594

{display: none} may run a nanosecond faster if there's a large amount of text that the user's browser doesn't have to include in its calculations. Bandwidth will be unaffected, since {display: none} doesn't mean "leave this behind when you load up the page". Unless you've got further stuff happening server-side. I assume you'd have said so.

Google has been saying for years that it disapproves of invisible text-- like fistfuls of rich keywords hidden in {display: none} tags, or anything equivalent like foreground and background color set to the same value (identical to {visibility: hidden;}). But what it means in your specific case would come down to, well, your specific case.
3:59 pm on Sept 6, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Nov 28, 2004
votes: 0

Visibility: hidden will still take up space in the page.

Display: none will take up no space in the page. I've seen no indication of rendering time of one over the other, but that's not to say there isn't one - it would have to be trivial.

In respect to either, pages may not get indexed if abused. An example of abuse is large blocks of text containing paragraphs that are not visible to average user on page load.

AFAIK there is no negative impact for either in legitimate applications, for example, hidden "help" containers opened only on user actions, or a "tabbed" page layout, where the supplemental tabs are set to display:none on load of the page - however, the latter may introduce a duplicate content issue if the hidden tabs that their own unique index-able URL's.