página lenta.

TonyHawk · #1 (**permalink**) 23/07/2005, 05:15

Hola, estoy haciendo una página en html con Front Page XP todo va bien pero cuando intento abrir la página desde la web noto que la abre demasiado lenta (hasta se me tilda un poco la PC) el hosting es rápido, creo que hay 2 swf y dos jpg nomás en la página (tendria que volar :p).
Yo pienso que el problema está en el código html, creo que hay mucha "basura" en el codigo.

Este es el código para que me digan qué hay demás, que es lo que la hace lenta a la pág. que debo sacar. Espero me sepan ayudar, gracias.

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<meta http-equiv="Content-Language" content="es">

<STYLE type="text/css">
<!--.Estilo15 {color: #FFFFFF}
-->
</STYLE>
<!--End Cool Web Scrollbars code-->

</STYLE>
<!--End Cool Web Scrollbars code-->

            </STYLE>
<TITLE>SP-online - La Página mas pelotuda</TITLE>

<script language="JavaScript1.2" fptype="dynamicanimation" src="../animate.js">
</script>
</HEAD>
<BODY bgColor=#ffffff leftMargin=10 topMargin=0 style="background-color: #000000" onload="dynAnimation()" link="#000000" vlink="#000000" alink="#000000">
<DIV align=center>
<CENTER>
<TABLE height=10 cellSpacing=0 cellPadding=0 width=750>
  <TBODY>
  <TR>
    <TD width="100%">
    <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%">
      <tr>
        <td width="100%">
        <p align="right"><font face="Verdana" size="1" color="#FFFFFF"> 
        <script>window.defaultStatus = 'Bienvenidos a SP-online'</script> 
&nbsp; </font>

</td>
      </tr>
    </table>
    </TD></TR></TBODY></TABLE></CENTER></DIV>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="772" height="87">
  <tr>
    <td width="11" height="113" bgcolor="#FD842B">&nbsp;</td>
    <td width="748" height="87" bgcolor="#FD842B">
    <font color="#FFFFFF"><embed width="128" height="128" src="head.swf"><noembed>Bajate el Flash Player</noembed>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </font> </td>
    <td width="13" height="87" bgcolor="#FD842B">&nbsp;</td>
  </tr>
</table>
<DIV align=center>
<CENTER>
<TABLE cellSpacing=0 cellPadding=0 width=773 style="border-collapse: collapse" bordercolor="#000000" border="1" bgcolor="#000000">
  <TBODY>
  <TR>
    <TD style="PADDING-BOTTOM: 10px" vAlign=top width=155 
    bgColor=#000000 height="3">
      <font face="Verdana" size="1" color="#FFFFFF">&nbsp;</font><table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="104%" height="287" bgcolor="#FF8000">
        <tr>
          <td width="151%" height="23" background="top.jpg">
          <p align="center"><b><font face="Verdana" size="1" color="#FFFFFF">
          Menú</font></b></td>
        </tr>
        <tr>
          <td width="100%" height="19" bgcolor="#FD842B">
          <p dynamicanimation="fpAnimformatRolloverFP1" fprolloverstyle="font-size: 14px; border-style: outset; border-width: 1; padding: 0" onmouseover="rollIn(this)" onmouseout="rollOut(this)" language="Javascript1.2">
          <font face="Verdana" size="1"><a href="seccion.htm">
          <span style="text-decoration: none"><font color="#FFFFFF">&nbsp;· </font>
          <font color="#000000">Portada&nbsp;</font></span></a></font></p>
          </td>
        </tr>
        <tr>
          <td width="100%" height="19" bgcolor="#FD842B">
          <p dynamicanimation="fpAnimformatRolloverFP1" fprolloverstyle="font-size: 14px; border-style: outset; border-width: 1; padding: 0" onmouseover="rollIn(this)" onmouseout="rollOut(this)" language="Javascript1.2" align="left">
          <font face="Verdana" size="1"><font color="#FFFFFF">&nbsp;· </font>Tema de la semana</font></p>
          </td>
        </tr>
        <tr>
          <td width="100%" height="19" bgcolor="#FD842B">
          <p dynamicanimation="fpAnimformatRolloverFP1" fprolloverstyle="font-size: 14px; border-style: outset; border-width: 1; padding: 0" onmouseover="rollIn(this)" onmouseout="rollOut(this)" language="Javascript1.2" align="left">
          <font face="Verdana" size="1"><font color="#FFFFFF">&nbsp;· </font>Foros</font></p>
          </td>
        </tr>
        <tr>
          <td width="100%" height="19" bgcolor="#FD842B">
          <p dynamicanimation="fpAnimformatRolloverFP1" fprolloverstyle="font-size: 14px; border-style: outset; border-width: 1; padding: 0" onmouseover="rollIn(this)" onmouseout="rollOut(this)" language="Javascript1.2" align="left">
          <font face="Verdana" size="1"><font color="#FFFFFF">&nbsp;· </font>Fotos</font></p>
          </td>
        </tr>
        <tr>
          <td width="100%" height="19" bgcolor="#FD842B">
          <p dynamicanimation="fpAnimformatRolloverFP1" fprolloverstyle="font-size: 14px; border-style: outset; border-width: 1; padding: 0" onmouseover="rollIn(this)" onmouseout="rollOut(this)" language="Javascript1.2" align="left">
          <font face="Verdana" size="1"><font color="#FFFFFF">&nbsp;· </font>Chat</font></p>
          </td>
        </tr>
        <tr>
          <td width="100%" height="19" bgcolor="#FD842B">
          <p dynamicanimation="fpAnimformatRolloverFP1" fprolloverstyle="font-size: 14px; border-style: outset; border-width: 1; padding: 0" onmouseover="rollIn(this)" onmouseout="rollOut(this)" language="Javascript1.2" align="left">
          <font face="Verdana" size="1"><font color="#FFFFFF">&nbsp;· </font>Humor</font></p>
          </td>
        </tr>
        <tr>
          <td width="100%" height="19" bgcolor="#FD842B">
          <p dynamicanimation="fpAnimformatRolloverFP1" fprolloverstyle="font-size: 14px; border-style: outset; border-width: 1; padding: 0" onmouseover="rollIn(this)" onmouseout="rollOut(this)" language="Javascript1.2">
          <font face="Verdana" size="1"><font color="#FFFFFF">&nbsp;· </font>Guía Internet</font></p>
          </td>
        </tr>
        <tr>
          <td width="100%" height="19" background="down.jpg" bgcolor="#FD842B">&nbsp;</td>
        </tr>
        <tr>
          <td width="151%" height="19" bgcolor="#000000">&nbsp;</td>
        </tr>
        <tr>
          <td width="100%" height="23" background="top.jpg">
          <p align="center"><b><font face="Verdana" size="1" color="#FFFFFF">Contacto</font></b></td>
        </tr>
        <tr>
          <td width="100%" height="19" bgcolor="#FD842B">
          <font face="Verdana" size="1">&nbsp;<font color="#FFFFFF">·</font> Contactanos</font></td>
        </tr>
        <tr>
          <td width="100%" height="19" bgcolor="#FD842B">
          <font face="Verdana" size="1"><font color="#FFFFFF">&nbsp;·</font> Publicidad</font></td>
        </tr>
        <tr>
          <td width="100%" height="19" bgcolor="#FD842B">
          <font face="Verdana" size="1"><font color="#FFFFFF">&nbsp;·</font> Recomendanos</font></td>
        </tr>
        <tr>
          <td width="100%" height="19" background="down.jpg" bgcolor="#FD842B">
          &nbsp;</td>
        </tr>
        <tr>
          <td width="100%" height="19" bgcolor="#000000">
          &nbsp;</td>
        </tr>
        <tr>
          <td width="100%" height="23" background="top.jpg" bgcolor="#FD842B">
          <p align="center"><b><font face="Verdana" size="1" color="#FFFFFF">
          Música</font></b></td>
        </tr>
        <tr>
          <td width="100%" height="19" bgcolor="#FD842B">
          <p align="center">
          <embed width="128" height="128" src="music.swf" border="0"><noembed>nada</noembed></td>
        </tr>
        <tr>
          <td width="100%" height="19" background="down.jpg" bgcolor="#FD842B">
          &nbsp;</td>
        </tr>
        </table>
    </TD>
    <TD style="PADDING-BOTTOM: 10px; PADDING-TOP: 10px" vAlign=top width=489 
    bgColor=#000000 bordercolor="#000000" bordercolorlight="#000000" bordercolordark="#000000">
      <div align="center">
        <center>
        <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#35586B" width="95%" height="464" bgcolor="#000000">
          <tr>
            <td width="100%" height="23" valign="top" bgcolor="#FD842B" bordercolor="#35586B" background="top.jpg">
            <p style="margin-top: -4; margin-bottom: -4">&nbsp;</p>
            </td>
          </tr>
          <tr>
            <td width="100%" height="512" valign="top" bgcolor="#FD842B" bordercolor="#35586B">
            <p style="margin-top: -4; margin-bottom: -4" align="left">&nbsp;</p>
            <p style="margin-top: -4; margin-bottom: -4" align="center"><b>
            <font face="Verdana" size="1" color="#FFFFFF">Bienvenidos a SP-online!</font></b></p>
            <p style="margin-top: -4; margin-bottom: -4" align="center">&nbsp;</p>
            <p style="margin-top: -4; margin-bottom: -4" align="center">&nbsp;</p>
            </td>
.....................................Sigue abajo..........................................

TonyHawk · #2 (**permalink**) 23/07/2005, 05:16

Cita:

</tr>
</table>
</center>
</div>
</TD>
<TD
style="PADDING-BOTTOM: 10px; PADDING-TOP: 10px; border-left-style:solid; border-left-width:1px; border-right-style:solid; border-right-width:1px"
vAlign=top width=136
bgColor=#000000 bordercolorlight="#FFFFFF" bordercolordark="#FFFFFF">
<DIV align=center>
<CENTER>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="104%" height="232" bgcolor="#FF8000">
<tr>
<td width="151%" height="23" background="top.jpg">
<p align="center"><b><font face="Verdana" size="1" color="#FFFFFF">
Encuesta</font></b></td>
</tr>
<tr>
<td width="100%" height="59" bgcolor="#FD842B">
<form method=post action=http://www.interrogantes.com/add.asp target=_top>
<table border=0><tr><td>
<p align="left"><font size="1" face="Verdana">¿Qué te parece el sitio SP-online?
<INPUT TYPE=HIDDEN name=codPregunta value=107024>
</font>
</td></tr></table>
<table border=0><tr><td>
<tr><td><font face="Verdana" size="1"><INPUT TYPE=radio value=639813 NAME=radioRespuestas></font></td>
<td><font size="1" face="Verdana">Excelente!</font></td></tr>
<tr><td><font face="Verdana" size="1"><INPUT TYPE=radio value=639814 NAME=radioRespuestas></font></td>
<td><font size="1" face="Verdana">Bueno</font></td></tr>
<tr><td><font face="Verdana" size="1"><INPUT TYPE=radio value=639815 NAME=radioRespuestas></font></td>
<td><font size="1" face="Verdana">mmm maso</font></td></tr>
<tr><td><font face="Verdana" size="1"><INPUT TYPE=radio value=639816 NAME=radioRespuestas></font></td>
<td><font size="1" face="Verdana">no me gusta!</font></td></tr>
<tr><td><font face="Verdana" size="1"><INPUT TYPE=radio value=639817 NAME=radioRespuestas></font></td>
<td><font size="1" face="Verdana">Pésimo!</font></td></tr>
</table>
<table border=0 align="left"><tr><td align="justify">
<p align="center">
<font size="1" face="Verdana">
<input type='submit' value='Vota!' >
<br><a href='http://www.interrogantes.com/pregunta.asp?cod=107024&ver=1&back=1'>
<font color="#FFFFFF">Ver resultados</font></a></font></td></tr></table>
</form>
</td>
</tr>
<tr>
<td width="100%" height="1" background="down.jpg" bgcolor="#FD842B"> </td>
</tr>
<tr>
<td width="151%" height="19" bgcolor="#000000"> </td>
</tr>
<tr>
<td width="151%" height="23" bgcolor="#000000" background="top.jpg">
<p style="margin-top: 0; margin-bottom: 0" align="center">
<span lang="es"><b><font face="Verdana" size="1" color="#FFFFFF">
Mensaje de Texto</font></b></span></td>
</tr>
<tr>
<TD width="142" height="166"><div align="center">
<form method="post" action="http://200.43.139.25/cgi-bin/pagepage" name="messageForm" onsubmit="return(checkMessage())">
<input name="Snb" value="" type="hidden">
<input name="subname" value="" type="hidden">
<input name="sig" value="" type="hidden">
<input name="msgtext" value="" type="hidden">
<input name="form" value="ht4" type="hidden">
<input name="size" value="10" type="hidden">
<input name="btn_send" value="SEND" type="hidden">
<p style="margin-top: 0; margin-bottom: 0"><span lang="es">
<font size="1" face="Verdana">Envia un sms a un Personal.</font></span></p>
<p style="margin-top: 0; margin-bottom: 0"> </p>
<p style="margin-top: 0; margin-bottom: 0"><u><span lang="es">
<font size="1" face="Verdana">Click aqui para mandar a un CTI</font></span></u></p>
<table align="center" border="0" cellpadding="0" cellspacing="2" width="1">
<tbody>
<tr>
<td width="219">
<div align="center" class="Estilo15">
<p style="margin-top: 0; margin-bottom: 0"><font face="Verdana, Arial, Helvetica, sans-serif" size="2">0
<input name="CODAREA" size="4" maxlength="20" onchange="isInt(this.value)" style="background-color: rgb(F, F, F); font-family: Verdana; font-size: 7pt;" type="text">
15
<input name="NRO" size="10" maxlength="20" onchange="isInt(this.value)" style="background-color: rgb(F, F, F); font-family: Verdana; font-size: 7pt;" type="text">
</font></div></td>
</tr>
<tr>
<td width="219">
<div align="center" class="Estilo15" style="width: 138; height: 35">
<p style="margin-top: 0; margin-bottom: 0"><font face="Verdana, Arial, Helvetica, sans-serif" size="2">   De
<input name="DE_MESG_TXT" size="21" maxlength="40" onchange="this.form.sizebox.value=this.value.lengt h+this.form.MESG_TXT.value.length;return true" onkeyup="this.form.sizebox.value=this.value.length +this.form.MESG_TXT.value.length;return true" style="background-color: rgb(F, F, F); font-family: Verdana; font-size: 7pt;" type="text">
</font></div></td>
</tr>
<tr>
<td width="219">
<div align="center" class="Estilo15" style="width: 134; height: 77">
<p style="margin-top: 0; margin-bottom: 0"><font face="Verdana, Arial, Helvetica, sans-serif" size="2">
<textarea name="MESG_TXT" onchange="this.form.sizebox.value=this.value.lengt h+this.form.DE_MESG_TXT.value.length;return true" onkeyup="this.form.sizebox.value=this.value.length +this.form.DE_MESG_TXT.value.length;return true" style="background-color: rgb(F, F, F); font-family: Verdana; font-size: 7pt;" wrap="VIRTUAL" rows="6" cols="19"></textarea>
</font></div></td>
</tr>
</tbody>
</table>
<p style="margin-top: 0; margin-bottom: 0">
<input type="submit" name="Submit" value="Enviar Mensaje">
</p>
</form>
</div></TD>
</tr>
<tr>
<td width="151%" height="19" bgcolor="#000000" background="down.jpg"> </td>
</tr>
</table>
</CENTER></DIV></TD></TR></TBODY></TABLE>
<p> </p>
</CENTER></DIV>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="772" height="8">
<tr>
<td width="748" height="23" background="top.jpg"> </td>
</tr>
<tr>
<td width="748" height="10" bgcolor="#FD842B">
<p align="center"><font color="#FFFFFF"><font class="td" face="Verdana" size="1">·::Copyright ©</font><font size="1" face="Verdana">
2005 | SP-online::·</font></font></td>
</tr>
</table>

</BODY></HTML>

Espero me puedan ayudar, esta es la página: http://users.cjb.net/sp-online/index.htm

Durgeoble · #3 (**permalink**) 23/07/2005, 05:48

tienes 322 lineas de codigo para "maquetar" 32 lineas que se dividen en 8 elementos (segun tu lo tienes hecho) asi que si, hay muuuucha basura.
Un consejo, borralo todo, abandona el frontpageXP, lee los enlaces de mi firma, bajate un editor solo texto como el pspad y escribela de nuevo.
Tal y como lo tienes no deberia de ocupar mas de 100 lineas ni de casualidad, si ademas sacas los scrips y el css a archivos externos no deberia de ocupar mas de 50 lineas.

TonyHawk · #4 (**permalink**) 23/07/2005, 15:52

uuuu que está jodida la web :p bueno lo que pasa es que no sé nada de html por cierto voy a tener en cuenta los enlaces de tu firma. Me podrías decir qué significa tener 322 lineas de codigo para "maquetar" 32 lineas que se dividen en 8 elementos. Muchas gracias.

Durgeoble · #5 (**permalink**) 23/07/2005, 16:59

el contenido de la web son 32 lineas de texto divididas asi:
11 para el menu
9 para el formulario
4 para el envio de sms
3 para el copyrigth
5 varias
Si a esto le unimos el codigo necesario para el formulario, el doctype, las etiquetas basicas y alguna que otra cosa mas la pagina deberia tener aldrededor de 50 lineas, debido a que usas indiscriminadamente tablas la pagina tiene mas de 300 lineas para conseguir un resultado similar a 50
Lo de dividido en 8 bloques es como has dividido la pagina:
1 cabecera
2, 3 y 4 menu izquierdo
5 contenido central
6 y 7 menu derecho
8 pie de pagina

La pagina totalmente maquetada, y sin optimizar no deberia llegar a las 100 lineas

TonyHawk · #6 (**permalink**) 23/07/2005, 19:39

Pruebo, rehago, recontrahago la página y nada, las tablas de la encuesta y el menú la hacen pesada. ya no sé qué tocar. No entiendo, las tablas son super simples, solamente hay 2 imágenes por tablas y nada más.
Otra cosa que no entiendo es por ejemplo, webexperto.com tiene mucha más líneas que mi web y abre como una luz. Gracias de todas maneras.

inforsol · #7 (**permalink**) 23/07/2005, 21:43

Aparte de limpiar el código, ¿de qué tamaño son los *.swf y los *.jpg?
A veces no es cuestión de cantidad, puedes tener un SWF que "pese" 1MB o 4 que, en conjunto, no sobrepasen los 60KB... Igual con las imágenes.

TonyHawk · #8 (**permalink**) 23/07/2005, 22:31

no no, eso no es el problema entre los swf y los jpg de toda la página no pasan los 60 kb. gracias.

Durgeoble · #9 (**permalink**) 24/07/2005, 02:06

Por simple que sea la tabla el navegador no dibujara la pagina hasta que no la haya leido al completo, mi consejo abandona las tablas para maquetar.

Hay mucha discusion al respecto en los foros, busca un poco, y mirate estos enlaces
Juan Pablo Aqueveque | Weblog: La saga continua: Diseño sin Tablas
Porqué diseñar con tablas es estúpido: problemas definidos, soluciones ofrecidas
torresburriel.com » Buenas prácticas trabajando con CSS. Una traducción libre de ‘CSS Crib Sheet’ de Dave Shea
tierra de nómadas - Maquetación CSS

TonyHawk · #10 (**permalink**) 24/07/2005, 03:40

No sabía que las tablas traían tanto problemas. La verdad estoy sorprendido. En un artículo (no sé cuál) dicen que los <TR> </td> son un problema y miro mi página y está repleto de </td> y <TR> pero no me puedo pasar a aprender css si ni siquiera sé html :( .
Por cierto Durgeoble, cambié la tabla de mi menú de 20 celdas por 6 y me va dando resultado, ahora la página abre sin problemas, creo que es un comienzo hacer tablas con la menor cantidad de celdas posibles ¿no?

Durgeoble · #11 (**permalink**) 24/07/2005, 04:05

cada vez que leo cosas como esa me entran ganas de tener ya acabado el manual

.
No, la solucion no pasa por usar tablas mas pequeñas, la solucion pasa por no usar tablas para nada mas que para lo que fueron diseñadas, es decir, presentar datos tabulares.

Dices que no sabes HTML pues nada a aprender

:
Maestros del Web
HTML con Clase - Tutorial HTML - Índice
XHTML 1.0: El Lenguaje de Etiquetado Hipertextual Extensible
WebExperto.com - Tutoriales
Tutorial de posicionamiento y layout en CSS || Cristalab

A leer que son dos dias

poolnam · #12 (**permalink**) 24/07/2005, 12:13

Es el problema del fronpage y de todos los editores visuales.

TonyHawk · #13 (**permalink**) 25/07/2005, 03:28

Durgeoble muchas gracias por tu ayuda y por los links los voy a tener en cuenta y espero que termines pronto tu manual.

Cita:

Es el problema del fronpage y de todos los editores visuales

es como todo, lo más fácil termina siendo lo peor.

poolnam · #14 (**permalink**) 25/07/2005, 12:20

Claro jajaj