Eniac, S.A. de C.V. - Sistemas de Información Gerencial desarrollados a la medida. (Desde 1981)

Optimización de Bandwidth

¿Sabe usted cuánto desperdicio en ancho de banda generan sus páginas web? En Eniac S.A. de C.V. sí lo sabemos, y se lo mostramos a continuación.

ADVERTENCIA: La siguiente página muestra código HTML "al desnudo". Puede ser no grato a la vista.

Antes

El siguiente código HTML fue generado automáticamente por una aplicación de diseño.

(La aplicación en particular fue la suite de Macromedia Dreamweaver MX™; cabe mencionar que el código HTML generado por Microsoft Frontpage™ o Microsoft Word™ contiene, en comparación, 3 o 4 veces más código innecesario).

El código innecesario se muestra en rojo.

<!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> <title>Sin optimización</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css">td img {display: block;} body {margin:0;} #t1 {border:1px solid #000000;}</style> <!-- Fireworks MX Dreamweaver MX target. Created Mon May 24 10:19:07 GMT-0600 (Hora estándar de México) 2004--> <script language="JavaScript1.2" type="text/javascript"> <!-- function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } //--> </script> </head> <body bgcolor="#ffffff" onload="MM_preloadImages('img/navbar_1_2.gif','img/navbar_2_2.gif','img/navbar_3_2.gif','img/navbar_4_2.gif','img/navbar_5_2.gif','img/navbar_6_2.gif','img/navbar_7_2.gif');" > <table id="t1" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="1008"> <!-- fwtable fwsrc="eniac_glob2.png" fwbase="eniac_glob2.gif" fwstyle="Dreamweaver" fwdocid = "742308039" fwnested="1" --> <tr> <td><table bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="1008"> <tr> <td><img name="eniac_glob2_1" src="img/eniac_glob2_1.jpg" width="263" height="95" border="0" id="eniac_glob2_1" alt="" /></td> <td><img name="eniac_glob2_2" src="img/eniac_glob2_2.jpg" width="499" height="95" border="0" id="eniac_glob2_2" alt="" /></td> <td><img name="eniac_glob2_3" src="img/eniac_glob2_3.jpg" width="246" height="95" border="0" id="eniac_glob2_3" alt="" /></td> </tr> </table></td> </tr> <tr> <td><img name="eniac_glob2_4" src="img/eniac_glob2_4.jpg" width="1008" height="9" border="0" id="eniac_glob2_4"alt="" /></td> </tr> <tr> <td><table bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="1008"> <tr> <td><img name="eniac_glob2_5" src="img/eniac_glob2_5.jpg" width="133" height="30" border="0" id="eniac_glob2_5" alt="" /></td> <td><img name="navbar_start" src="img/navbar_start.gif" width="26" height="30" border="0" id="navbar_start" alt="" /></td> <td><a href="#" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('navbar_1','','img/navbar_1_2.gif',1);"><img name="navbar_1" src="img/navbar_1.gif" width="53" height="30" border="0" id="navbar_1" alt="" /></a></td> <td><a href="#" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('navbar_2','','img/navbar_2_2.gif',1);"><img name="navbar_2" src="img/navbar_2.gif" width="81" height="30" border="0" id="navbar_2" alt="" /></a></td> <td><a href="#" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('navbar_3','','img/navbar_3_2.gif',1);"><img name="navbar_3" src="img/navbar_3.gif" width="91" height="30" border="0" id="navbar_3" alt="" /></a></td> <td><a href="#" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('navbar_4','','img/navbar_4_2.gif',1);"><img name="navbar_4" src="img/navbar_4.gif" width="102" height="30" border="0" id="navbar_4" alt="" /></a></td> <td><a href="#" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('navbar_5','','img/navbar_5_2.gif',1);"><img name="navbar_5" src="img/navbar_5.gif" width="95" height="30" border="0" id="navbar_5" alt="" /></a></td> <td><a href="#" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('navbar_6','','img/navbar_6_2.gif',1);"><img name="navbar_6" src="img/navbar_6.gif" width="70" height="30" border="0" id="navbar_6" alt="" /></a></td> <td><a href="#" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('navbar_7','','img/navbar_7_2.gif',1);"><img name="navbar_7" src="img/navbar_7.gif" width="81" height="30" border="0" id="navbar_7" alt="" /></a></td> <td><img name="navbar_end" src="img/navbar_end.gif" width="22" height="30" border="0" id="navbar_end" alt="" /></td> <td><img name="eniac_glob2_15" src="img/eniac_glob2_15.jpg" width="254" height="30" border="0" id="eniac_glob2_15" alt="" /></td> </tr> </table></td> </tr> <tr> <td><img name="eniac_glob2_16" src="img/eniac_glob2_16.jpg" width="1008" height="35" border="0" id="eniac_glob2_16" alt="" /></td> </tr> </table> </body> </html>

Si lo desea, puede ver la página web correspondiente en una nueva ventana.
(También puede ver la versión optimizada y retocada manualmente, cuyo código se encuentra abajo.
Note los estilos al subtítulo, y el encabezado gráfico que se ajusta automáticamente al ancho de la ventana).

Tamaño del código: 5,285 bytes.

Entre las fallas se pueden encontrar:

TODAS esta fallas representan un gasto en ancho de banda para su sitio web.

Multipliquemos 5,285:
x 20 páginas con el mismo código
x 500 visitas diarias (para sitios con mucha demanda, esto sería sólo el 1%)
x 30 días al mes

Y tenemos un gasto mensual en bandwidth de: 1.5855 Gigabytes.

Después

El código optimizado se muestra a continuación.

NOTA: El código en verde fue añadido para accesibilidad (acceso desde teléfonos celulares, encabezados alternativos para la impresión, datos utilizados por Google™, etc.), y puede ser removido según sus necesidades. Los comentarios se muestran en rojo, y pueden ser removidos si usted así lo desea.

<!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> <title>Con optimización</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" type="text/css" href="../main.css" /> <script type="text/javascript" src="menus_demo.js"></script> </head> </head> <body><!-- encabezado --> <table summary="encabezado" class="printonly" style="margin-bottom:0.5em;border-bottom:3px ridge #FFF;width:100%"> <tr><td style="text-align:left;vertical-align:bottom"><b>Eniac, S.A. de C.V.</b> Sistemas de Información Gerencial desarrollados a la medida.</td> <td style="text-align:right"><img alt="Eniac" src="../img/eniac_tiny.gif" width="88" height="26" style="vertical-align:top" /> </td></tr></table> <div id="encabezado1" class="screenonly" style="margin-right:0;padding:0;width:99.5%;overflow:hidden; border:1px solid #000;"><div id="encabezado" style="width:1008px;border:none; margin:0 0 auto 0;background:url(../img/fondocuadros.jpg) 0 0;"><!-- --><img src="img/eniac_glob2_1.jpg" width="263" height="95" alt="ENIAC S.A. de C.V." /><img src="img/eniac_glob2_2.jpg" width="499" height="95" alt="Sistemas de Información Gerencial. Diseñados a la medida de sus necesidades." /><img src="img/eniac_glob2_3.jpg" width="246" height="95" alt="" /><br /><div id="barranav" style="padding-top:9px;padding-bottom:12px;padding-left:0" ><!-- inicio barra de navegacion --> <img style="margin-left:133px;" src="img/navbar_start.gif" width="26" height="30" alt="" /><a href="#" title="Inicio" ><img src="img/navbar_1.gif" width="53" height="30" alt="Inicio" /></a><i> / </i><a href="#" title="Acerca de Eniac, SA de CV" ><img src="img/navbar_2.gif" width="81" height="30" alt="Acerca de Eniac, SA de CV" /></a><i> / </i><a href="#" title="Nuestros productos" ><img src="img/navbar_3.gif" width="91" height="30" alt="Nuestros productos" /></a><i> / </i><a href="#" title="Desarrollos Especiales" ><img src="img/navbar_4.gif" width="102" height="30" alt="Desarrollos Especiales" /></a><i> / </i><a href="#" title="Desarrollos web, Intranets" ><img src="img/navbar_5.gif" width="95" height="30" alt="Desarrollos web, Intranets" /></a><i> / </i><a href="#" title="Precios" ><img src="img/navbar_6.gif" width="70" height="30" alt="Precios" /></a><i> / </i><a href="#" title="Contacto" ><img src="img/navbar_7.gif" width="81" height="30" alt="Contacto" /></a><img src="img/navbar_end.gif" width="22" height="30" alt="" /><!-- fin barra de navegacion --></div></div></div> <script type="text/javascript"> ro_createmenu('barranav','navbar'); </script> <!-- fin encabezado -->

Tamaño del código: 2,844 bytes (incluyendo código de accesibilidad).

Gasto mensual en bandwidth: 0.8475 Gigabytes.

(Abrir resultado en una nueva ventana)

Ahorro comparativo en bandwidth: 46%.

Conclusión

Entre más complejo sea su sitio web, mayor será el gasto en bandwidth causado por código HTML innecesario.

Para el ejemplo anterior, al utilizar el código HTML optimizado podemos observar un ahorro del 46% en gastos de bandwidth.
El porcentaje puede variar dependiendo de la complejidad visual de su sitio y la cantidad de texto por página.

En Eniac, S.A. de C.V. le aseguramos que todos nuestros desarrollos web contienen código HTML optimizado, para ahorrar al máximo en gastos de ancho de banda.