Forum Moderators: not2easy
I am guessing the main problem is my css. I feel like I am probably missing some tricks that is slowing down a page that would otherwise load fast.
----------------Page CODE-------------------
<html>
<head>
<title>layouts ftw</title>
<meta name="description" content="" />
<meta name="keywords" content=""/>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META HTTP-EQUIV="imagetoolbar" CONTENT="no">
<link rel="stylesheet" href="css/craving.css" type="text/css" />
<script type="text/javascript">
/* Modified to support Opera */
function bookmarksite(title,url){
if (window.sidebar) // firefox
window.sidebar.addPanel(title, url, "");
else if(window.opera && window.print){ // opera
var elem = document.createElement('a');
elem.setAttribute('href',url);
elem.setAttribute('title',title);
elem.setAttribute('rel','sidebar');
elem.click();
}
else if(document.all)// ie
window.external.AddFavorite(url, title);
}
</script>
<link rel="shortcut icon" href="img/favicon.ico">
<style type="text/css">
<!--
.style1 {font-size: 12px}
-->
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (sweet3.psd) -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td align="center" ><table id="Table_01" width="1089" height="768" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="14"><img src="img/sweet9_01.gif" width="1088" height="106" alt=""></td>
<td><img src="img/spacer.gif" width="1" height="106" alt=""></td>
</tr>
<tr>
<td colspan="7"><img src="img/sweet9_02.gif" width="650" height="57" alt=""></td>
<td><a href="chicks.html"><img src="img/sweet9_03.gif" alt="News" width="79" height="57" border="0"></a></td>
<td><a href="clayouts.php"><img src="img/sweet9_04.gif" alt="Myspace Layouts" width="170" height="57" border="0"></a></td>
<td><a href="forum.php"><img src="img/sweet9_05.gif" alt=" Forum" width="58" height="57" border="0"></a></td>
<td colspan="4"><img src="img/sweet9_06.gif" width="131" height="57" alt=""></td>
<td><img src="img/spacer.gif" width="1" height="57" alt=""></td>
</tr>
<tr>
<td colspan="6" rowspan="2"><img src="img/sweet9_07.gif" width="355" height="86" alt=""></td>
<td colspan="7"><img src="img/sweet9_08.gif" width="727" height="6" alt=""></td>
<td rowspan="3"><img src="img/sweet9_09.gif" width="6" height="95" alt=""></td>
<td><img src="img/spacer.gif" width="1" height="6" alt=""></td>
</tr>
<tr>
<td colspan="7" rowspan="2"><img src="img/ftw9_10.gif" width="727" height="89" alt=""></td>
<td><img src="img/spacer.gif" width="1" height="80" alt=""></td>
</tr>
<tr>
<td rowspan="4" class ="rnav"><img src="img/sweet9_11.gif" width="108" height="105" alt=""></td>
<td class = "tnav" colspan="2" rowspan="4" background="img/sweet9_12.gif" valign="top"><br>
<span class="cravestuffnav" > { crave stuff }</span><br>
<a class="cravestuffsub" href="chicks.html">- news </a><br>
<a class="cravestuffsub" href="ccontact.html">- contact us </a><br>
<a class="cravestuffsub" href="cterms.html">- terms of use </a><br>
<a class="cravestuffsub" href="cdonate.html">- donate </a></td>
<td colspan="3" rowspan="3"><img src="img/sweet9_13.gif" width="48" height="30" alt=""></td>
<td><img src="img/spacer.gif" width="1" height="9" alt=""></td>
</tr>
<tr>
<td colspan="8"><img src="img/sweet9_14.gif" width="733" height="6" alt=""></td>
<td><img src="img/spacer.gif" width="1" height="6" alt=""></td>
</tr>
<tr>
<td colspan="6"><img src="img/sweet9_15.gif" width="668" height="15" alt=""></td>
<td colspan="2"><img src="img/sweet9_16.gif" width="65" height="15" alt=""></td>
<td><img src="img/spacer.gif" width="1" height="15" alt=""></td>
</tr>
<tr>
<td class ="lnav" colspan="2"><img src="img/sweet9_17.gif" width="29" height="75" alt=""></td>
<td colspan="6" rowspan="4" background="img/sweet9_18.gif" valign="top" class="topcon"><table width="655" border="0" cellspacing="0" cellpadding="0" align="right">
<tr>
<td valign="top" class="topcon2"><p><img src="img/sweet6_15.gif" width="331" height="52"></p>
<span class="headline style1">10.23.07 - Moving Right Along </span>
</p>
<p align="justify" class="style1">I've managed to get a lot of the site built. Got the layout builder online so that can be used even though I'm still working on the rest of the site. I am still working on the layout database but hope to have it running soon. </p>
<p align="justify" class="style1">I also need finish up the blog section. Alright, I've wasted enough time, back to the code.</p>
<p align="justify" class="style1">Later </p></td>
<td class="topcon2"><table id="blog" width="324" height="273" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="5">
<img src="images/blog_01.gif" width="324" height="16" alt=""></td>
</tr>
<tr>
<td rowspan="5">
<img src="images/blog_02.gif" width="19" height="249" alt=""></td>
<td>
<img src="images/blog_03.gif" width="24" height="34" alt=""></td>
<td rowspan="5">
<img src="images/blog_04.gif" width="18" height="249" alt=""></td>
<td rowspan="5">
<iframe width="254" height="249" src="blog.html" frameborder="0"></iframe></td>
<td rowspan="5">
<img src="images/blog_06.gif" width="9" height="249" alt=""></td>
</tr>
<tr>
<td>
<img src="images/blog_07.gif" width="24" height="68" alt=""></td>
</tr>
<tr>
<td>
<img src="images/blog_08.gif" width="24" height="65" alt=""></td>
</tr>
<tr>
<td>
<img src="images/blog_09.gif" width="24" height="76" alt=""></td>
</tr>
<tr>
<td>
<img src="images/blog_10.gif" width="24" height="6" alt=""></td>
</tr>
<tr>
<td colspan="5">
<img src="images/blog_11.gif" width="324" height="8" alt=""></td>
</tr>
</table></td>
</tr>
<tr>
<td colspan="2" class="topcon2"> <span class="headline style1">10.07.07 - Start of a Good Thing </span>
</p>
<p align="justify" class="style1">I've been a member of myspace for a while now and one thing I've noticed is the lack of good layouts available for people to dress up their profiles with. I've decided to begin building to give people a place to go for myspace layouts that are free, and look good. I hope to have the site launched within the next few weeks. </p></td>
</tr>
</table></td>
<td colspan="3" rowspan="2" class="rside" valign="top"><img src="img/sweet9_19.gif" width="97" height="273" alt=""></td>
<td><img src="img/spacer.gif" width="1" height="75" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="2" class ="rnav"><img src="img/sweet9_20.gif" width="109" height="217" alt=""></td>
<td class = "mnav" colspan="2" rowspan="3" background="img/sweet9_21.gif" valign="top"> <p><span class="myspacestuffnav" > { myspace stuff }</span><br>
<a class="myspacestuffsub" href="clayouts.php">- hot layouts </a><br>
<a class="myspacestuffsub" href="profile_gen.html">- layout builder </a><br>
</p>
<p> </p></td>
<td rowspan="2" class ="lnav"><img src="img/sweet9_22.gif" width="28" height="217" alt=""></td>
<td><img src="img/spacer.gif" width="1" height="198" alt=""></td>
</tr>
<tr>
<td colspan="3" class ="rside" rowspan="2"><img src="img/sweet9_23.gif" width="97" height="107" alt=""></td>
<td><img src="img/spacer.gif" width="1" height="19" alt=""></td>
</tr>
<tr>
<td colspan="2"class ="rnav" ><img src="img/sweet9_24.gif" width="109" height="88" alt=""></td>
<td class="lnav" valign="top"><img src="img/sweet9_25.gif" width="28" height="88" alt=""></td>
<td><img src="img/spacer.gif" width="1" height="88" alt=""></td>
</tr>
<tr>
<td colspan="2"><img src="img/sweet9_26.gif" width="109" height="5" alt=""></td>
<td colspan="2"><img src="img/sweet9_27.gif" width="199" height="5" alt=""></td>
<td><img src="img/sweet9_28.gif" width="28" height="5" alt=""></td>
<td colspan="6"><img src="img/sweet9_29.gif" width="655" height="5" alt=""></td>
<td colspan="3"><img src="img/sweet9_30.gif" width="97" height="5" alt=""></td>
<td><img src="img/spacer.gif" width="1" height="5" alt=""></td>
</tr>
<tr>
<td colspan="2" class ="rnav" background="img/sweet9_31.gif"><img src="img/sweet9_31.gif" width="109" height="6" alt=""></td>
<td class = "bnav"colspan="2" background="img/sweet9_32.gif"><p> </p></td>
<td class = "lnav" background="img/sweet9_33.gif"><img src="img/sweet9_33.gif" width="28" height="6" alt=""></td>
<td colspan="6" class ="bcon" background="img/sweet9_34.gif"><!--DWLayoutEmptyCell--> </td>
<td colspan="3" class="rside" background="img/sweet9_35.gif"><img src="img/sweet9_35.gif" width="97" height="6" alt=""></td>
<td><img src="img/spacer.gif" width="1" height="6" alt=""></td>
</tr>
<tr>
<td colspan="14"><img src="img/sweet9_36.gif" width="1088" height="97" border="0" usemap="#Map"></td>
<td><img src="img/spacer.gif" width="1" height="97" alt=""></td>
</tr>
<tr>
<td><img src="img/spacer.gif" width="108" height="1" alt=""></td>
<td><img src="img/spacer.gif" width="1" height="1" alt=""></td>
<td><img src="img/spacer.gif" width="198" height="1" alt=""></td>
<td><img src="img/spacer.gif" width="1" height="1" alt=""></td>
<td><img src="img/spacer.gif" width="28" height="1" alt=""></td>
<td><img src="img/spacer.gif" width="19" height="1" alt=""></td>
<td><img src="img/spacer.gif" width="295" height="1" alt=""></td>
<td><img src="img/spacer.gif" width="79" height="1" alt=""></td>
<td><img src="img/spacer.gif" width="170" height="1" alt=""></td>
<td><img src="img/spacer.gif" width="58" height="1" alt=""></td>
<td><img src="img/spacer.gif" width="34" height="1" alt=""></td>
<td><img src="img/spacer.gif" width="32" height="1" alt=""></td>
<td><img src="img/spacer.gif" width="59" height="1" alt=""></td>
<td><img src="img/spacer.gif" width="6" height="1" alt=""></td>
<td></td>
</tr>
</table></td>
<td> </td>
</tr>
</table>
<!-- End ImageReady Slices -->
<map name="Map">
<area shape="rect" coords="298,34,346,50" href="index.html" alt="The First Page!">
<area shape="rect" coords="359,34,414,51" href="clayouts.php" alt="Myspace Layouts">
<area shape="rect" coords="425,34,470,51" href="chicks.html" alt="News / Blog">
<area shape="rect" coords="480,34,532,51" href="forum.php" alt=" Forum">
<area shape="rect" coords="542,34,600,53" href="ccontact" alt"Drop me a Line!">
<area shape="rect" coords="610,34,659,51" href="cterms" alt"Terms of Usage ;)">
</map>
</body>
</html>
Any suggestions or links to good info would be greatly appreciated. Sorry my post is so long.
Thanks,
Clu
[edited by: jatar_k at 11:46 pm (utc) on Jan. 4, 2008]
[edit reason] removed specifics [/edit]
Here is the cleaned up code. Unfourtunatly I did not improve the render speed:
---------CODE---------------
/* CSS Document */
.labelform
{
vertical-align:top;
width: 100px;
}
.smallform
{
width: 163px;
margin-left: auto;
margin-right: auto;
}
BODY, td, tr
{
margin:0px;
background: url('../img/crave_bkg.jpg');
color:#333333;
font-style:normal;
font-variant:normal;
font-weight:normal;
font-size:12px;
font-family:tahoma;
margin-top:0px
}
.preview {
text-align:center;
width:300px;
}
.headline{
color:#3366cc;
font-weight:bold
}
.cravestuffnav {
margin-top: 0px;
font-size:18px;
font-family:arial;
font-weight:bold;
text-align:left;
color:#cc3366;
}
.myspacestuffnav {
margin-top: 0px;
font-size:18px;
font-family:arial;
font-weight:bold;
text-align:left;
color:#3366cc;
vertical-align:top;
}
.spacer { background: #FFFFFF; }
.footer { background: #FFFFFF; }
a.cravestuffsub {
margin-top: 0px;
font-size:12px;
font-family:arial;
/* text-align:left; */
color:#cc3366;
}
.new_layout {
margin-top: 0px;
font-size:12px;
font-family:arial;
text-align:left;
color:#cc3366;
}
a:hover.cravestuffsub {
text-decoration:underline;
}
a.myspacestuffsub {
margin-top: 0px;
font-size:12px;
font-family:arial;
text-align:left;
color:#3366cc;
}
a:hover.myspacestuffsub {
text-decoration:underline;
}
a.newsnav {
margin-top: 0px;
font-size:18px; font-family:arial;
font-weight:bold;
color:#66cc99;
}
a.connav {
margin-top: 0px;
font-size:18px; font-family:arial;
font-weight:bold;
color:#cccc33;
}
a.termsnav {
margin-top: 0px;
font-size:18px; font-family:arial;
font-weight:bold;
color:#3399cc;
}
a.donnav {
margin-top: 0px;
font-size:18px; font-family:arial;
font-weight:bold;
color:#ff9999;
}
a.fornav {
margin-top: 0px;
font-size:18px; font-family:arial;
font-weight:bold;
text-align:left;
color:#3366cc;
}
td.tnav { background: #FFFFFF url('../img/sweet9_12.gif') no-repeat;}
td.mnav { background: #FFFFFF url('../img/sweet9_21.gif');}
td.bnav { background: #FFFFFF url('../img/sweet9_21.gif');}
td.lnav { background: #FFFFFF url('../img/sweet9_33.gif');}
td.lnav1 { background: #FFFFFF url('../img/sweet9_17.gif');}
td.rnav { background: #FFFFFF url('../img/sweet9_31.gif');}
td.rnav1 { background: #FFFFFF url('../img/sweet9_11.gif');}
td.topcon { background: #FFFFFF url('../img/sweet9_18.gif');}
td.topcon2 { background: #FFFFFF url('../img/white.gif'); }
td.topcon3 { background: #FFFFFF url('../img/cmaintable.gif');}
td.bcon { background: #FFFFFF url('../img/sweet9_34.gif');}
td.rside { background: #FFFFFF url('../img/sweet9_35.gif');}
a.doods {
display: block;
height:123px;
width:240px;
background: url('../img/dood.jpg') no-repeat;
}
a.doods:hover {
display: block;
height:123px;
width:240px;
background: url('../img/dood.jpg') no-repeat -240px ;
}
a.chicks {
display: block;
height:123px;
width:240px;
background: url('../img/chick.jpg') no-repeat;
}
a.chicks:hover {
display: block;
height:123px;
width:240px;
background: url('../img/chick.jpg') no-repeat -240px;
}
a {
text-decoration: none;
color: #000000;
}
You might want to try checking with the Developer toolbar in FF, it's good with spotting problems from a number of different sources.
I'd suggest running the page through the W3 HTML validator, and the stylesheet(s) through the W3's CSS validator. It's unlikely that it's the css files, unless they've got a bunch of errors, which should be checked; it's more usual than not the number and size of images that's the speed killer.
You should test the site without images, but with javascript, then eith images, without javascript, and see what's going on. CSS should not really be an issue, unless it's using lots of background images.
But 173K is a very heavy page, so it's never going to be fast to load whatever you do.
I've seen one site that was over 125K just from the basic basic page design (before product photos even) because of using css graphics. They complained about the huge bandwidth charges from their host every month, and got no sympathy from me. ;)
