Webmastersite.net
Register Log In

JavaScript Page Load
Possible ways to reduce bandwith caused by Javascript

Comments on JavaScript Page Load

Daniel
Member

Usergroup: Member
Joined: Jul 08, 2009

Total Topics: 17
Total Comments: 31
Daniel
Posted Sep 30, 2010 - 2:32 PM:

Dear Paul!

I think WSN links is a real fast piece of software but there is nothing you can`t (perhaps) improve.
So I saw that there are several HTTP-requests to JavaScript-Data.

I found this page:
rakaz.nl/2006/12/make-your-...ascript-and-css-files.html


What do you think about it?
Is it a possible way to reduce the page load time?

First point:
There are many JavaScript-Data loaded by WSN-Links (see below) - this is for sure no fault but shows only the power off WSN Links ;-) . Perhaps the way WSN Links do this can be in a faster way if it load just a single file?


Second point:
Perhaps the most simple way to speed up the page load time instead of these JavaScript requests is to load the page first and then the JavaScript. All you have to do to reach this goal is to put the following code on the top at the first place over the other JavaScript. It really works. -:

----------------------------------------------------------------------------------
<script type="text/javascript">

// Add a script element as a child of the body
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "deferredfunctions.js";
document.body.appendChild(element);
}

// Check for browser support of event handling capability
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;

</script>
----------------------------------------------------------------------------------

Perhaps this could be the solution of the problem?




Third point:
Where came this JavaScript links from?
I didn`t found anything about it in my wrapper template so I don`t understand how they came into the source code of my page...
I want to load my main page as fast as possible. So I split my css file in two files:
One only for the main page (main.css) and the other for the rest (simplicity.css).

Simplicty.css load the main.css with:
@import url("main.css");

But this trick has no sense since both files where already loaded through the code below and I don`t understand where it came from (see: link rel="alternate stylesheet").


These 8 HTTP-requests for JavaScript-Data are on my main page.

<script type="text/javascript" src="{DIRURL}/javascript/fontSizer.js"></script>
(This is not WSN Links)

<script type="text/javascript" src="http://www.physics-directory.com/jquery/jquery.min.js"></script>
<script type="text/javascript" src="http://www.physics-directory.com/javascriptheader.js"></script>
<link rel="canonical" href="http://www.physics-directory.com/" /><link rel="alternate stylesheet" href="http://www.physics-directory.com/templates/styles/main.css" type="text/css" title="main" />
<link rel="alternate stylesheet" href="http://www.physics-directory.com/templates/styles/simplicity.css" type="text/css" title="simplicity" />

<script type="text/javascript" src="http://www.physics-directory.com/jquery/jquery.bgiframe.min.js"></script>
<script type="text/javascript" src="http://www.physics-directory.com/jquery/jquery.ajaxQueue.js"></script>
<script type="text/javascript" src="http://www.physics-directory.com/jquery/jquery.autocomplete.js"></script>
<script type="text/javascript" src="http://www.physics-directory.com/jquery/jquery.form.js"></script>
<script type="text/javascript">
var tb_pathToImage = "/templates/images_default/loadingAnimation.gif";
</script>
<script type="text/javascript" src="http://www.physics-directory.com/jquery/thickbox-compressed.js"></script>
(This is WSN Links)
Paul
developer

Usergroup: Administrator
Joined: Dec 20, 2001
Location: Diamond Springs, California

Total Topics: 61
Total Comments: 7868
Paul
Posted Oct 01, 2010 - 12:14 PM:

Combining the javascript files would be too messy and unmaintainable, and most of it needs to be at the top in <head> not the bottom. After the first load they should all be cached anyway. One possibility is using google's jquery libraries to increase chances that it's already cached.

Alternate stylesheets are autoinserted for the sake of a refreshless style change which has since been abandoned due to the fact that it didn't update the image paths that are in the templates. I wouldn't think it'd interfere with calling the stylesheet elsewhere, but I might as well remove them.
Search thread for
Download thread as
  • 0/5
  • 1
  • 2
  • 3
  • 4
  • 5



Sorry, you don't have permission to post posts. Log in, or register if you haven't yet.