El diseño web cada vez se está aprovechando de las ventajas de aplicar los conceptos clave de la Ingeniería.
Si imaginamos la fabricación de un coche, podemos verlo como la fabricación por separado de una serie de piezas (motor, sistema de frenado, ruedas, tapicería, …) que se diseñan por separado y se combinan. Así, en el diseño web muchas veces se combinan librerías Javascript como jQuery o módulos personalizados que añaden funcionalidad a la web.
El problema de esto, es que un navegador está obligado a realizar una petición al servidor por cada archivo (imagen, librería, hoja de estilos, …) que se utiliza en la página web. Una vez cargadas, el navegador las cachea y la navegación resulta más fluida, pero ¿Cómo podemos agilizar ese primer paso tan decisivo?
La respuesta es simple: Minimizando las peticiones al servidor
Hojas de estilo y librerías Javascript
Lo ideal es que todas las peticiones vayan en un mismo fichero. Esto en un principio obligaría al programador a realizar todo el proceso de la hoja de estilos en un único fichero, lo cual, en algunos casos puede no ser lo más aconsejable por modularidad, aunque sí por eficiencia.
Existen librerías que son capaces de combinar varios ficheros en uno solo de forma automática cada vez que alguno de los ficheros se modifica. Esto quizás añada un poco de tiempo de procesamiento en PHP pero las ventajas a la larga cuando la web esté en producción son grandes.
Imágenes
Si una hoja de estilos hace uso de unas 10 imágenes de fondo, tiene que realizar una llamada al servidor por cada una de estas imágenes. La solución para minimizar esto es combinar todas las imágenes en una sola utilizando una técnica llamada CSS Sprites.
Con esta técnica, y mediante hojas de estilo somos capaces de coger como imagen de fondo sólo la porción que necesitamos.
No hay que menospreciar el trabajo que lleva generar la imagen combinada además de calcular las posiciones de cada imagen ya que estamos utilizando uno de los recursos más importantes del programador, que es el tiempo.
Para ayudar con esto, existen una serie de herramientas online que permiten simplificar la tarea:
Algunas herramientas son:
Minimizar y comprimir los archivos
Antes hemos comentando las ventajas de combinar los archivos en uno para minimizar el número de peticiones web. Si además, somos capaces de reducir el tamaño del fichero en producción estaremos incrementando la eficiencia de nuestra web.
Para ello, existen dos técnicas que se pueden combinar:
- Minimizar los ficheros: Eliminando comentarios, espacios en blanco, …
- Comprimir los ficheros: Algunos navegadores son capaces de entender que los datos pueden venir comprimidos utilizando algún algoritmo de compresión.
Con esto, lo que vamos a conseguir es que el servidor esté más holgado pues tendrá que transmitir menos cantidad de datos a cada uno de los clientes que realicen peticiones y por tanto, el rendimiento global será mayor.
Todas estas ventajas las podemos conseguir de forma automática utilizando la librería minify que se encarga de juntar, combinar y reducir los ficheros indicados.
http://code.google.com/p/minify/
Cache
Es posible que le indiquemos a cada página web, de manera individual, cuanto tiempo debe pertenecer esta en cache. Las dos posibilidades son:Para páginas estáticas es implentar una política de establecer una fecha de caducidad de la cache lejanaPara páginas dinámicas usar una fecha aproviada para ayudar al navegador con las peticiones condicionales
En servidores como Apache, somos capaces de indicar una fecha relativa a la fecha actual, indicando que la página caducará, por ejemplo, pasados días (e incluso años) de la fecha de la petición.
En el caso de cambinar un componente, es necesario indicárselo al navegador añadiendo algún parámetro a la consulta o añadiendo algún número de versión al fichero.
Otros consejos
Poner las hojas de estilo en la cabecera: Tal y como indica el estandar W3C
The HTML specification clearly states that stylesheets are to be included in the HEAD of the page: "Unlike A, [LINK] may only appear in the HEAD section of a document, although it may appear any number of times." Neither of the alternatives, the blank white screen or flash of unstyled content, are worth the risk. The optimal solution is to follow the HTML specification and load your stylesheets in the document HEAD.
Esto nos indica que poniendo las hojas de estilo allí, el navegador será capaz de cargar la página de forma progresiva
Utilizar ficheros externos
Al margen de los beneficios de reusabilidad y modularidad, usando ficheros externos para almacenar nuestras hojas de estilo y scripts permiten al navegador cachearlos.
Por consiguiente, las páginas web son más livianas y tardan menos en descargarse.
Reducir el número de elementos DOM en la página
Maquetar de forma clara y semántica reducen el número de elementos del árbol ya que no es necesario añadir DIVs u otros elementos para corregir problemas de LAYOUT. De esta forma, los scripts serán más rápidos y eficientes porque tendrán que buscar en menos nodos
Evita tener imágenes vacías
Las imágenes vacías (<img src=”” alt=”Vacía” />) o var img = new Image(); img.src=’’; obligan a los navegadores a realizar peticiones HTTP que no son útiles.
Comentarios