Welcome to WebmasterWorld Guest from 54.226.189.112

Forum Moderators: not2easy

Message Too Old, No Replies

I think my css is causing my page to render slowly

css rendering issue

     

cluhendrix

7:01 pm on Jan 4, 2008 (gmt 0)

5+ Year Member



Hi,
I'm pretty new to css. I have created a page that incorporates css. I have downloaded the page and all of the graphics add up to about 173kb. It should load pretty fast. But instead it takes about 13 seconds. i have uploaded an image of the same size and it loads in about 3 seconds. This leads me to believe the problem is not in the download speed, but rather the render time.

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>&nbsp;</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" >&nbsp;&nbsp;&nbsp;&nbsp;{ crave stuff }</span><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class="cravestuffsub" href="chicks.html">- news </a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class="cravestuffsub" href="ccontact.html">- contact us </a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class="cravestuffsub" href="cterms.html">- terms of use </a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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" >&nbsp;&nbsp;&nbsp;&nbsp;{ myspace stuff }</span><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class="myspacestuffsub" href="clayouts.php">- hot layouts </a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class="myspacestuffsub" href="profile_gen.html">- layout builder </a><br>
</p>
<p>&nbsp;</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>&nbsp;</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-->&nbsp; </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>&nbsp;</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]

cluhendrix

9:07 pm on Jan 4, 2008 (gmt 0)

5+ Year Member


After running the css through several validators I have done some clean up in the css file.

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;
}

Marcia

9:18 pm on Jan 4, 2008 (gmt 0)

WebmasterWorld Senior Member marcia is a WebmasterWorld Top Contributor of All Time 10+ Year Member



How many images total (graphics and backgrounds) and their total file sizes? And how many remote calls for files? Also: how deep are your tables nested, and how many?

You might want to try checking with the Developer toolbar in FF, it's good with spotting problems from a number of different sources.

Marcia

9:56 pm on Jan 4, 2008 (gmt 0)

WebmasterWorld Senior Member marcia is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Actually, with 49 images (count graphics and background images) on the page and loads of nbsp's to wade through it's more than likely close to a full minute to load on a 56K modem, which is what should be tested for accurate assessment of download speed - not just T1 load time.

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.

Xapti

11:30 pm on Jan 4, 2008 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



rendering time is affected mostly by javascript and many images/rich content. Tables also increase rendering time compared to divs.
If your javacript has to search through many elements on the page and do stuff to them, that can increase loading time substantially.

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.

Damian

12:57 am on Jan 5, 2008 (gmt 0)

10+ Year Member



You could try Yslow.
YSlow for Firebug is an extension made by Yahoo to analyse why pages are slow.
[developer.yahoo.com...]

LifeinAsia

1:06 am on Jan 5, 2008 (gmt 0)

WebmasterWorld Administrator lifeinasia is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



Also remember that there can be a big difference in time between downloading 1 graphic that's 173K and 173 graphics each 1K.

HarryM

12:44 pm on Jan 5, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I suspect the problem is the number of images. Each image requires an HTTP request from the browser to the server, and browsers can only handle a small number of requests at any one time. (Also all background images referenced in your CSS file will always be loaded even if they do not appear on the page.)

But 173K is a very heavy page, so it's never going to be fast to load whatever you do.

Marcia

1:05 pm on Jan 5, 2008 (gmt 0)

WebmasterWorld Senior Member marcia is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Background graphics are increasing the load even before graphics for display purposes are considered. You might as well consider those part of the page size, before any display graphics are even added.

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. ;)

 

Featured Threads

Hot Threads This Week

Hot Threads This Month