Jump to content

Optimising Javascript

zapper13

By zapper13
in Javascript Help

 Share

Recommended Posts

zapper13 Member

zapper13

Posted
Posted

Hey guys. I just ran my web page on a site which calculates the loading speed of the page and it says that i have too many external javascripts and the sizes are too large. How can i actually smaller the size of the javascripts?

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Kim Hoe Corporation</title>
<style type="text/css">
<!--
body {
background-image: url(index/image/kimhoe_wallpaper_patt_2.jpg);
background-color: #22222222222222222222;
}
body,td,th {
color: #CBCCDA;
}
#pageborder {
position:relative;
width:990px;
height:590px;
z-index:1;
margin-right: auto;
margin-left: auto;
}
#textbox {
position:absolute;
width:224px;
height:300px;
z-index:1;
background-color: #393C3F;
left: 680px;
top: 80px;
border: 1pt solid #666;
overflow: auto;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
font-family: Verdana;
font-size: 11px;
color: #999;
text-align: justify;
line-height: 16px;
}
#image {
position:absolute;
width:630px;
height:330px;
z-index:2;
left: 50px;
top: 80px;
border: 1pt solid #666;
background-color: #393C3F;
}
#menu {
position:absolute;
width:890px;
height:25px;
z-index:3;
top: 411px;
border: 1pt none #666;
left: 50px;
}
#companyname {
position:absolute;
width:700px;
height:100px;
z-index:4;
top: 440px;
left: 50px;
border: 1pt solid #666;
}
a:link {
color: #999;
}
a:visited {
color: #999;
font-family: Verdana;
}
.newscolumn {
color: #999;
}
.titlefortext {
color: #FC0;
}
#termsofuse {
position:absolute;
width:110px;
height:15px;
z-index:4;
top: 575px;
font-family: Verdana;
font-size: 9px;
color: #999;
left: 515px;
}
#copyright {
position:absolute;
width:310px;
height:15px;
z-index:5;
top: 575px;
font-size: 9px;
font-family: Verdana;
color: #999;
left: 635px;
}
a {
font-size: 9px;
}
.datefortext {
color: #CCC;
}
-->
</style>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<script type="text/javascript" language="JavaScript1.2" src="stmenu.js"></script>
</head>

<body bgcolor="#2222222222222222222">
<div id="pageborder">
  <div id="textbox">
    <p><span class="titlefortext"><strong>KIM HOE CORPORATION NEWS</strong></span><br />
<br />
      <span class="titlefortext"><span class="datefortext">2008</span></span><br />
      Kim  Hoe Corporation expanded its leasing projects portfolio with the acquisition of  Kim Hoe Plaza. </p>
    <p><span class="titlefortext"><span class="datefortext">2007</span></span><br />
    Kim  Hoe Corporation expanded its leasing projects portfolio with the acquisition of  Kim Hoe Point.<br />
    <br />
    <span class="titlefortext"><span class="datefortext">2006</span></span><br />
    Kim  Hoe Corporation’s first exquisite residential development, Chuan Yuan, was  successfully launched and sold.<br />
    <br />
    <span class="titlefortext"><span class="datefortext">1999</span></span><br />
    Kim  Hoe Corporation built its corporate headquarters at Kim Hoe Centre.<br />
    <br />
    <span class="titlefortext"><span class="datefortext">1997</span></span><br />
    Kim  Hoe Corporation expanded its leasing projects portfolio with the acquisition of  four leasable units at Lam Soon Industrial Building.<br />
    <br />
    <span class="titlefortext"><span class="datefortext">1993</span></span><br />
    Kim  Hoe Corporation added to its leasing projects portfolio with the successful  development of its first light industrial estate project in Malaysia.<br />
    <br />
    <span class="titlefortext"><span class="datefortext">1990</span></span><br />
    Kim  Hoe Corporation was established and commenced its venture into the real estate  sector with the acquisition of two leasable units at Valiant Building.<br />
    <br />
    <span class="titlefortext"><span class="datefortext">1980</span></span><br />
    Kim  Hoe Electronics Enterprises was established at Sim Lim Tower.</p>
  </div>
  <div id="image">
    <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="630" height="330">
      <param name="movie" value="index/flash/indexflash.swf" />
      <param name="quality" value="high" />
      <param name="wmode" value="opaque" />
      <param name="swfversion" value="6.0.65.0" />
      <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
      <param name="expressinstall" value="Scripts/expressInstall.swf" />
      <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
      <!--[if !IE]>-->
      <object type="application/x-shockwave-flash" data="index/flash/indexflash.swf" width="630" height="330">
        <!--<![endif]-->
        <param name="quality" value="high" />
        <param name="wmode" value="opaque" />
        <param name="swfversion" value="6.0.65.0" />
        <param name="expressinstall" value="Scripts/expressInstall.swf" />
        <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
        <div>
          <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
          <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
        </div>
        <!--[if !IE]>-->
      </object>
      <!--<![endif]-->
    </object>
  </div>
  <div id="menu">
    <script id="Sothink Widgets:index.pgt" type="text/javascript" language="JavaScript1.2">
<!--
stm_bm(["menu79cf",730,"","blank.gif",0,"","",0,0,0,0,0,1,0,0,"","",0,0,1,2,"default","hand",""],this);
stm_bp("p0",[0,4,0,0,0,3,0,8,100,"",-2,"",-2,75,0,0,"#999999","#2D2C3F","",3,1,1,"#666"]);
stm_ai("p0i0",[0,"residential projects","","",-1,-1,0,"","_self","","","","",0,0,0,"","",8,6,0,1,1,"#393C3F",0,"#393C3F",0,"","",3,3,0,0,"#666 #666 #666 #666","#666 #666 #666 #666","#CCCCCC","#FFFFFF","9pt Verdana","9pt Verdana",0,0],191,25);
stm_bpx("p1","p0",[1,4,0,0,0,3,0,0,100,"progid:DXImageTransform.Microsoft.Wipe(GradientSize=1.0,wipeStyle=1,motion=forward,enabled=0,Duration=0.60)",5,"progid:DXImageTransform.Microsoft.Wipe(GradientSize=1.0,wipeStyle=1,motion=reverse,enabled=0,Duration=0.60)",4,50]);
stm_aix("p1i0","p0i0",[0,"chuan yuan @ serangoon gardens","","",-1,-1,0,"/residentialprojects/chuanyuan/chuanyuan.html","_self","","","","",0,0,0,"","",0,0,0,0,1,"#393C3F",0,"#393C3F",0,"","",3,3,0,0,"#2D2C3F #2D2C3F #2d2c3f #666","#2d2c3f #2D2C3F #2d2c3f #666","#CCCCCC","#FFFFFF","7pt Verdana","7pt Verdana"],190,25);
stm_ep();
stm_aix("p0i1","p0i0",[0,"leasing projects","","",-1,-1,0,"","_self","","","","",0,0,0,"","",8,6,0,1,1,"#393C3F",0,"#393C3F",0,"","",3,3,0,0,"#666 #2D2C3F #666 #666","#666 #2D2C3F #666 #666"],178,25);
stm_bpx("p2","p1",[1,4,0,0,0,3,0,6]);
stm_aix("p2i0","p1i0",[0,"residential","","",-1,-1,0,"","_self","","","","",0,0,0,"grey2-r.gif","grey2-r.gif",6,8,0,0,1,"#393C3F",0,"#393C3F",0,"","",3,3,0,0,"#666 #2D2C3F #666 #666","#666 #2D2C3F #666 #666"],177,25);
stm_bpx("p3","p1",[1,2,0,-1]);
stm_aix("p3i0","p2i0",[0,"kim hoe centre @ kelantan lane","","",-1,-1,0,"/leasingprojects/residential/kimhoecentre/r_kimhoecentre.html","_self","","","","",0,0,0,"","",0,0],177,25);
stm_aix("p3i1","p3i0",[0,"kim hoe point @ kelantan lane","","",-1,-1,0,"/leasingprojects/residential/kimhoepoint/r_kimhoepoint.html"],177,25);
stm_ep();
stm_aix("p2i1","p2i0",[0,"commercial"],177,25);
stm_bpx("p4","p1",[1,2]);
stm_aix("p4i0","p3i0",[0,"kim hoe centre @ kelantan lane","","",-1,-1,0,"/leasingprojects/commercial/kimhoecentre/c_kimhoecentre.html"],177,25);
stm_aix("p4i1","p3i0",[0,"kim hoe point @ kelantan lane","","",-1,-1,0,"/leasingprojects/commercial/kimhoepoint/c_kimhoepoint.html"],177,25);
stm_aix("p4i2","p3i0",[0,"kim hoe plaza @ aljunied","","",-1,-1,0,"/leasingprojects/commercial/kimhoeplaza/c_kimhoeplaza.html"],177,25);
stm_aix("p4i3","p3i0",[0,"lamsoon @ hillview","","",-1,-1,0,"/leasingprojects/commercial/lamsoon/c_lamsoon.html"],177,25);
stm_aix("p4i4","p3i0",[0,"valiant @ aljunied","","",-1,-1,0,"/leasingprojects/commercial/valiant/c_valiant.html"],177,25);
stm_ep();
stm_aix("p2i2","p2i0",[0,"industrial"],177,25);
stm_bpx("p5","p4",[]);
stm_aix("p5i0","p3i0",[0,"lamsoon @ hillview","","",-1,-1,0,"/leasingprojects/industrial/lamsoon/i_lamsoon.html"],177,25);
stm_aix("p5i1","p3i0",[0,"valiant @ aljunied","","",-1,-1,0,"/leasingprojects/industrial/valiant/i_valiant.html"],177,25);
stm_aix("p5i2","p3i0",[0,"euro asia @ johor","","",-1,-1,0,"/leasingprojects/industrial/euroasia/i_euroasia.html"],177,25);
stm_ep();
stm_ep();
stm_aix("p0i2","p0i1",[0,"corporate profile","","",-1,-1,0,"/corporateprofile/corporateprofile.html","_self","","","","",0,0,0,"","",0,0],178,25);
stm_aix("p0i3","p0i1",[0,"contact us"],169,25);
stm_bpx("p6","p1",[]);
stm_aix("p6i0","p1i0",[0,"for general enquiries,\r\ncall +65-6336-5566","","",-1,-1,0,"","_self","","","","",0,0,0,"","",0,0,0,0,1,"#393C3F",0,"#393C3F",0,"","",3,3,0,0,"#666","#666"],168,25);
stm_aix("p6i1","p6i0",[0,"for leasing enquiries,\r\nclick here","","",-1,-1,0,"/contactus/form/contactusform.html","_blank"],168,25);
stm_ep();
stm_aix("p0i4","p0i0",[0,"collaborations","","",-1,-1,0,"/collaboration/collaboration.html","_self","","","","",0,0,0,"","",0,0],178,25);
stm_ep();
stm_em();
//-->
    </script>
  </div>
  <div id="termsofuse"><a href="/termsofuse/termsofuse.html" target="_blank">WEB TERMS OF USE</a></div>
  <div id="copyright">COPYRIGHT © KIM HOE CORPORATION PTE. LTD. 2009</div>
</div>
<script type="text/javascript">
<!--
swfobject.registerObject("FlashID");
//-->
</script>
</body>
</html>

Link to comment
https://forums.phpfreaks.com/topic/150006-optimising-javascript/
Share on other sites
markjoe Member

markjoe

Posted
Posted

Other than obviously making sure your code is efficient, the only other thing you can do to the js files is "minimize" them.

Basically remove all (or nearly all) white space. I would bet you could find tools to do this, otherwise a decent text editor with regex find/replace could do it as well.

You will want to keep 2 copies of the files, a readable/editable copy and the 'mini' version, only deploying the mini version to the live site.

(you can do the same to your CSS if it's a big one)

I previously never subscribed to this technique until I found a typical 30% reduction in download sizes.

 

If that isn't enough, you would want to look into gzip compression, however that may be a bit too complex subject for a beginner.

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.