Publicado por Juan Pablo el 7.Sep.2004 | Comentarios (3)
Motivado por una entrada de Zeldman y Douglas decidí optimizar la portada del sitio UCT (algo que debí hacer hace mucho tiempo). De un diseño basado absolutamente en la vieja escuela, es decir, tablas.. tablas.. tablas, a un diseño basado totalmente en CSS. Al término de la tarea los resultados son simplemente sorprendentes.
Optimizar la carga de la página ha sido por siempre el reto de cualquier diseñador web, llegar a toda la audiencia posible es el objetivo central, ya sean usuarios de conexiones ultra veloces hasta aquellas muy muy lentas. Otro factor importantísimo es el navegador usado por el cliente, "Quiero que mi página se vea igual en diferentes navegadores" - ¿quién no ha tenido ese deseo?... buenas noticias : CSS siempre ha estado aquí, él te ayudará :)
Extrapolemos un poco la situación: En promedio, el servidor UCT debe surtir a 20 mil hambrientos visitantes al mes con 10.7KB de HTML (tamaño de la portada antes de la optimización) a cada solicitud, ahora en cambio dicha ración disminuye a 4,55KB; multiplicando un poco tenemos que antes del cambio se transferia 214MB al mes y ahora será 94MB... mhhhh correcto... considerable ahorro de ancho de banda; el más contento con el cambio es sin duda el Genesis, ahora tendrá que trabajar menos.
Los números tienen la palabra:
| Layout con Tablas | Layout con CSS | |
|---|---|---|
| Uso de tablas | 12 | 0 |
| Gif de espaciado | 2 | 0 |
| etiquetas <img> | 30 | 15 |
| CSS imagenes de fondo | 0 | 3 |
| Soporte de navegadores | IE 6 y 5.5 | Todos los obedientes CSS modernos |
| Líneas de código | 168 | 81 |
| Tamaño del HTML | 10,7KB | 4,55KB |
| % de reducción | - | 57% |
¿Deseas optimizar tu sitio web?. Debo sostener mis alicaídas arcas, se acerca fin de año :)
Enlace Permanente, Comentarios (3), Publicada en: CSS | Diseño
me parece que el cambio es impresionante y hace tiempo era necesario, además esteticamente se ve mejor... mi único reparo es que la parte de las noticias queda con una sola en portada, lo que hace que los que la vean, si no les interesa esa noticia, no se molesten en abrirla para informarse más... pero por otro lado eso hará que ahora debamos titular con noticias interesantes. UN CAMBIO NOTABLE
Enhorabuena! Realmente has conseguido muy buenos resultados y el código está muy bien :)
Sólo le veo un detalle mejorable, la navegación de la izquierda, usa un flash que pesa 12 kb. en mi opinión con listas xhtml y algo de javascript y CSS podrías hacerlo casi idéntico y ahorraría mucho más peso y ganarías legibilidad en ese menú y en definitiva, accesibilidad.
Un saludo!!
Juan Pablo Aqueveque, Algunos derechos reservados, 1998-2012.
A menos que se exprese lo contrario los contenido de este sitio están
publicado bajo una licencia Creative Commons.
Este sitio está alojado en Dreamhost.
