• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 317
  • Last Modified:

external js file on my site taking long to load

I having a problem with page loading time on a page on my site.
i went through the whole page and put console.time to pinpoint the big problems.

I found that I have an external js file that I am calling from within my same site.
I refer to it as
<script type="text/javascript" src="//www.site.org/cookies.js"></script>

that takes 500ms to load.
When I take all that page and put it directly on my page, that whole section only takes 10ms to load.

Now that is a very big difference in time.

How come it is best practice to put all big js scripts into an external file? or am I doing something wrong with the include script.

(the reason I have my site name in front, is because it's on a server side include file that shows up in subfolders also, so I need it to be a long url)
  • 2
2 Solutions
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
What happens if you change to

<script type="text/javascript" src="/cookies.js"></script>

Open in new window

Notice the slash in front.  This way no matter what folder you are in, the file will always be called from the same place.  This is called an absolute link.

Otherwise, we would need to get the link to your page for a better answer.
rivkamakAuthor Commented:
a. the slash didn't help the situation
b. my file is located here if you want to play with it:http://www.kars4kids.org/indexdf2.asp
c. how come firefox shows me a page load time of 1800 ms, and google chrome shows 800ms.

Is it really that much faster on chrome?
When the javascript file is part of the existing document (indexdf2.asp) it doesn't have to make a second connection. Your site actually looks pretty good.

Using Google's Network tab, I see the breakdown for cookies.js as follows:
Sending: 0ms
Waiting: 611 ms
Receiving: 4ms

Using Google PageSpeed (https://developers.google.com/speed/pagespeed/) they list the following high priority items:

1. Combine images into CSS sprites
2. Enable compression
3. Leverage browser caching

#1 won't help with the javascript file. #2 probably won't help since the time receiving is only 4ms and the file is about 7kb.

#3 won't help transmission time, but once the file has been cached, the user won't have to download it.

I've seen two schools of thought on splitting out the javascript to multiple files. First is that the browser can download more than one file at a time so breaking apart the files will speed things up. The second is that you have the overhead of the connection time and too many connections will slow things down.

Given that the file is only 7kb, unless you want to keep the file separate to make coding easier, it probably makes sense to include it with some other javascript file (perhaps cartype.js?) to save the connection overhead.

I'm not certain why firefox has an extra 1000 ms of page load. It's possible the connection was slow at that point. Browsers do have different rendering engines, so it's also possible that Firefox is slower (I've seen it before.)
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
In chrome console I see

console cookie: 371.956ms indexdf2.asp:24
Uncaught TypeError: Cannot call method 'indexOf' of null gacookies.js:29
console page: 5802.776ms indexdf2.asp:1082

fyi...in I hear the radio advertising for this all the time.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now