h1

Consejos para mejorar el redimiento de una web II

11 diciembre 2008

Como dije en la otra entrega, la mayor parte del tiempo de respuesta se emplea en realizar peticiones HTTP para la descarga de los distintos componentes más que en el propito HTML, por lo tanto si reducimos el número de elementos a descargan se reduciran el número de peticiones sin que esto signifique tener que deshacernos de elementos y, por tanto, perder calidad en el diseño. Las técnicas que se pueden utilizar para eso son:

  • Mapa de Imágenes: Si tenemos muchos enlaces con imagenes, tendremos que realizar muchas peticiones para obtener todas las imáganes, en cambio, si usamos un mapa y le asociamos todos los enlaces, sólo tendremos que realizar una petición HTTP para obtener los enlaces. Existen dos tipos de mapas de imagenes, los del lado del servidor y los del lado del cliente, los mas típicos ya que no requieren de ningún back-end.
    Está técnica tiene un problema, el área se tiene que definir a mano y es tedioso y próblematico además de que sólo pueden ser rectangulares y no
    se pueden crear de forma dinámica ya que el DHTML falla en IE.
  • CSS Sprites: La idea es que todas las imágenes se combinan en una y mediante las hojas de estilos se muestra la zona de la imagen que se desse. Evidentemente, se reduce el número de peticiones, de forma significativa y son más flexibles que los mapas de imágenes. Así mismo, y aunque parezca mentira, el tamaño de la imagen combinada es menor que la suma de todas las que la forman, ya que, se reduce la información de las imágenes (tablas de color, información del formateo, etc…)
  • Scripts y css combinados: Es recomendable usar ficheros externos para los scripts y los css y aunque a veces se tienda a modularizar en muchos ficheros css y js, esto influye negativamente en el rendimiento porque se traduce en más peticiones HTTP. De todas formas, esto nos puede soñar extraño a todos los
    desarrolladores, siempre nos han metido en la cabeza la modularización por todas las ventajas que conocemos, además de que estaríamos cargando
    información innecesaria en la página. 
    Por lo tanto, lo que debemos hacer es, analizar un poco y crear un proceso para generar un fichero que nos devuelva la combinación de ficheros javascript necesaria para una página en concreto.

Todo esto reduce el tiempo de respuesta para usuarios que acceden por primera vez a la página web, es decir, aquellos usuarios que no tengan elementos en caché y demás.

Anuncios

2 comentarios

  1. El tema de la reducción del numero de CSS y de JS está muy bien en la teoría pero realmente, se hace bastante complicado mantener en una única CSS todos los estilos de un portal mediantamente grande, por lo que, habrá que buscar un termino medio, no??

    Otro tema, que todavía no encontre una respuesta es, si yo hago un import de una sola CSS y esta es la que se encarga de llamar al resto, que pasa?? cuantas peticiones se hacen, 1 o es lo mismo que si la hacemos todas desde el html?

    Por lo demas, todas estas técnicas son muy interesantes y hay que tenerlas siempre en cuenta.


  2. Bueno la cosa está en que tienes que encontrar una forma de hacerlo dinámico, porque tenemos dos problemas, o un css muy grande cargando cosas que no necesitamos o muchas peticiones que relentizan la web.
    Por otra parte, respondiendo a tu pregunta, se hace una petición por cada import que realices.



Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: