homepage Welcome to WebmasterWorld Guest from 54.237.99.131
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
I think my css is causing my page to render slowly
css rendering issue
cluhendrix

5+ Year Member



 
Msg#: 3540616 posted 7:01 pm on Jan 4, 2008 (gmt 0)

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

5+ Year Member



 
Msg#: 3540616 posted 9:07 pm on Jan 4, 2008 (gmt 0)
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

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



 
Msg#: 3540616 posted 9:18 pm on Jan 4, 2008 (gmt 0)

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

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



 
Msg#: 3540616 posted 9:56 pm on Jan 4, 2008 (gmt 0)

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

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 3540616 posted 11:30 pm on Jan 4, 2008 (gmt 0)

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

10+ Year Member



 
Msg#: 3540616 posted 12:57 am on Jan 5, 2008 (gmt 0)

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

LifeinAsia

WebmasterWorld Administrator lifeinasia us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 3540616 posted 1:06 am on Jan 5, 2008 (gmt 0)

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

HarryM

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3540616 posted 12:44 pm on Jan 5, 2008 (gmt 0)

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

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



 
Msg#: 3540616 posted 1:05 pm on Jan 5, 2008 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved