Welcome to WebmasterWorld Guest from 54.144.107.83

Forum Moderators: open

Message Too Old, No Replies

Javascript links slowed down pageload speed by several seconds

     
12:58 pm on Aug 1, 2012 (gmt 0)

Preferred Member

5+ Year Member

joined:Nov 16, 2010
posts:533
votes: 0


Hi All

I was replacing some links, about 10 of them on a page with JavaScript to load the target page via a JavaScript function

The JavaScript function had maybe 18/20 lines

Page load time increased by up to 8 seconds, from say 5secs to 14secs

I am not au faire with javascript , So I am guessing I did something wrong
1:10 pm on Aug 1, 2012 (gmt 0)

Senior Member from US 

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

joined:Oct 17, 2005
posts: 4965
votes: 10


Want to post some code? Maybe someone can spot a problem.
4:27 pm on Aug 1, 2012 (gmt 0)

Preferred Member

5+ Year Member

joined:Nov 16, 2010
posts:533
votes: 0


Here it is, I got this code to work even tho it was slow,

<script type = "text/javascript">
<!--hide
function otherlinks(myurl)
{
window.open(myurl,'jav','width=1000,height=750,resizable=yes');
}
function myfunction(n)
{
switch(n)
{
case 0:
window.open('http://www.site0.com/','jav','width=1000,height=750,resizable=yes');
break;
case 1:
window.open('http://www.site1.com/','jav','width=1000,height=750,resizable=yes');
break;
case 2:
window.open('http://www.site2.com/','jav','width=1000,height=750,resizable=yes');
break;
case 3:
window.open('http://www.site3.com/','jav','width=1000,height=750,resizable=yes');
break;
case 4:
window.open('http://www.site4.com/','jav','width=1000,height=750,resizable=yes');
break;
default:

}
}
//-->
</script>

Link code is like

<A HREF="javascript:myfunction()" >Click Here!</A>


And yes I found the code online and adapted it, now it slows down the site I lurve js :)
7:04 pm on Aug 1, 2012 (gmt 0)

Senior Member from US 

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

joined:Oct 17, 2005
posts: 4965
votes: 10


Ok, a few things.
1. Don't use text like "Click Here" in links. [w3.org...]
2. The href attribute of a link takes a URI. A URI can consist of a scheme followed by : followed by the scheme specific parts. "javascript" is not a valid scheme. Instead, use a click event handler or listener.
3. Your code is not currently accessible for those with JavaScript disabled (including some search engines).

Change your links to be more like this:
<a href="http://www.site0.com" onclick="return myfunction(this);">Site 0</a>

This way, users with JavaScript disabled will still be able to follow the link.

Next, change myfunction as follows:

function myfunction(el) {
window.open(el.href, 'jav', 'width=1000,height=750,resizable=yes');
return false;
}

This is a much better way of opening new windows.

As a side note, the code you had should not have caused any noticeable slow down. You might try using some developer tools (Chrome has built in tools, as does IE8+, and tools are available for download in Firefox like Firebug, though I think the newest version of Firefox has some tools built in). There are profiling tools to see where your code is spending the most amount of time, and you can also see network requests.
2:14 pm on Aug 3, 2012 (gmt 0)

Preferred Member

5+ Year Member

joined:Nov 16, 2010
posts:533
votes: 0


Thanks, I'll check those out
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members