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>  <script language="JavaScript1.2" type="text/javascript">  </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">  <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:

Código javascript insertado dentro de la página (debería estar en un archivo por separado)
Utilización de atributos obsoletos y redundantes.
Excesivo uso de tablas
Menús javascript con código innecesario

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.

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.