-2

Recently I designed a page which has a navigation bar with four buttons. The user is directed to different page on clicking each different button. For the buttons I'm using the following code,

<button type="button" class="subheader-buttons" onclick="window.loation=document.location.href='PAGE 1'">Button 1</button>

I'am using the above code for all the four buttons. Now I'am wondering whether it will be advantageous to use links instead of buttons? Do links goes from one page to another faster than the buttons?

Saumil
  • 2,521
  • 5
  • 32
  • 54

6 Answers6

2

I believe it is much faster just linking, since what your doing is executing javascript which takes more than just linking it in an href!

But still this is a very big debate!

I take this info from uxmovement.com

When we look at the web, links outnumber buttons on most websites. The reason for this is because

  • links are easier to create
  • links are simple and sufficient
  • links don’t overshadow content

Buttons, however, are the opposite.

  • buttons take more time and effort to create
  • buttons can come in different sizes, colors and styles
  • buttons can sometimes overshadow content

You can get more info on this website: http://getlevelten.com/blog/randall-knutson/design-decisions-buttons-vs-links-fight

Nicolas Munera
  • 58
  • 5
2

You should use <a href=""> over window.location.href, for several good reasons.

  • Firstly If you have your javascript disabled, then none of the links would work.
  • Google Bot do not interpret javascript, and so they won't follow any of your links.

For more info: window.location.href vs clicking on an Anchor

Community
  • 1
  • 1
Joke_Sense10
  • 5,341
  • 2
  • 18
  • 22
1

Using a standard HTML link is the common way to do it. Although both methods will be roughly as fast.

Technically, because you're using JS with your button, your browser has to run the code before sending you to a different page so it may take a fraction of a second longer.

You could make a link a button without using JS:

<a href="your-page.html">
<button>Your Page</button>
</a>
harvzor
  • 2,832
  • 1
  • 22
  • 40
1

It's the same. You can use <a href="link"><button></button></a> if you want. However, use javascript to link to other page may take a sightly slow, u can check by using network

Vinh
  • 73
  • 6
1

The difference wouldn't be significant (or even noticeable by human). There are other concerns (most importantly accessibility) as to whether to use onclick or href.

leesei
  • 6,020
  • 2
  • 29
  • 51
1

I think a link would be faster. In both, the web server will be going to the link specified by href. However, a link would just be that - a call to redirect. However, a button, as far as I am aware, sends much more data to the webserver, and also has many more things react to it - aka more overhead. Therefore, the link may be faster. However, it would only have a marginal effect really, unless you had a lot of traffic to your website, so I don't think it matter to much - you should probably just go with whatever you feel comfortable with.

I also just wanted to point out that I don't think using javascript to navigate to the page like that may be the best idea, regardless of whether you are using links or buttons. Serving webpages is a job for the webserver, and thus javascript calls may not be the best. Using the language that you are using for your web server (and if you are not, then I suggest you start using a back-end for your website), you should be able to respond easily to the button click / page redirect. The upside of this would be that it would also allow for any extra work to be done on the page as required.

Sbspider
  • 389
  • 5
  • 14
  • A button defined in the post will not "send much more data to the webserver". It merely change to location of the current tab, the same as typing the url by a user. A button associated with a form's submit might send more data. – leesei Nov 07 '13 at 07:16
  • By send more data, I meant more that more data is processed. For example, if you have used ASP.NET, the button raises a "onClick" event in that case, which not only must be reacted on in that code, but is reacted to by other event handlers as well. Meanwhile, IIS, and Apache, handle links (as far as I am aware) treat it like a normal request, without having a event handler hook up for it, hence a marginal increase in speed – Sbspider Nov 07 '13 at 22:26