Reducir el tiempo de carga de una web II: JavaScript, Cache…

Tweet about this on Twitter0Share on Facebook0Share on Google+0Share on LinkedIn0Pin on Pinterest0

Como ya pudimos ver en en el primer artículo que hablaba como reducir el tiempo de carga de una web optimizando las imágenes y los CSS, en esta parte daremos una serie de consejos relacionados con los Scripts, redirecciones, uso de cache y llamadas a los elementos en carga, etc…

JavaScripts
Si el código contiene muchos archivos JavaScript, la combinación de los mismos en el menor número posible de archivos puede reducir drásticamente el tiempo de carga.

  • Es importante tener en cuenta qué códigos Java son necesarios cargar desde un primer momento. Así que éstos se podrían dividir en diferentes archivos, según la prioridad de carga, uno que se cargase al renderizar la página y otro archivo con el código Java que no sea necesario hasta que la página se haya cargado completamente.
  • Tal y como pasa con los CSS, se deben utilizar las menores llamadas posibles a archivos  externos Java desde el apartado , y estos archivos deben pesar lo menos posible. El peso se puede reducir ‘minificando’ el código de los archivos, eliminando comentarios, espacios en blanco, etc… de tal manera que se disminuye el tiempo de respuesta. Una herramienta popular para ello es el JSMin o YUI Compressor.
  • Para pequeños fragmentos de código JavaScript que no deberían ser cacheados, se pueden incluir a lo largo del código HTML. Claro que éstos no deben estar duplicados a lo largo del código.

Utiliza funciones de cache
Muchas webs incluyen elementos que no cambian habitualmente, como los CSS, los archivos de imagen, los archivos JavaScript, etc… Dichos archivos exigen un tiempo de carga que es evitable para aquellas visitas que sean recurrentes. El cacheo HTTP permite que estos elementos se guarden o cacheen por el propio navegador o Proxy.

Lo más recomendable es utilizar en estos elementos las etiquetas ‘Expires’ o ‘Cache-control: max-age’ , que sirven para fijar cuanto tiempo tiene vigencia ese elemento, y la etiqueta ‘Last-Modified’, que indica la última fecha en que se cambió el elemento/recurso.
Para optimizar las funciones de cache, es recomendable estudiar qué etiquetas y funciones son las ideales según el navegador utilizado. Aquí puedes encontrar un pequeño resumen sobre el uso de funciones de cache para navegadores y proxies.

Descarga de elementos desde diferentes dominios
La especificación HTTP 1.1 permite un número máximo de conexiones concurridas a un mismo dominio. Si un documento HTML hace referencias a un número mayor de recursos que el de conexiones, inevitablemente se creará una cola de peticiones que se resolverán en función de que se vayan liberando las conexiones.

Es posible conseguir que no se generen  esas colas utilizando llamadas a otros dominios para cargar elementos (css, Javascript, imágenes, flash, etc.), ya que para cada dominio se dispondrá de otro nuevo número máximo de conexiones.

Reduce los DNS Lookups
Cuando se realizan llamadas a dominios del estilo ‘miweb.com/..’, los navegadores activan automáticamente la función DNS (Domain Name System) Lookup para traducir a la IP del dominio hacia el que va dirigida la petición. Por lo que esta función es evitable si se sustituyen por IPs los dominios al los que se hace referencia en código.

 

Utiliza correctamente las redirecciones
Es importante restringir el uso de redirecciones utilizándolas solo en los casos donde sean técnicamente necesarias. Siendo preferidas las redirecciones HTTP ante las Meta o las que utilizan JavaScript.

Nunca deben concurrir dos redirecciones, es decir, si una página A redirecciona a B y ésta redirecciona a C, lo correcto sería redireccionar A hacia C, evitando pasos intermedios.

 

Existen muchas formas de optimizar y reducir el tiempo de carga de una web. Para más información recomiendo la lectura del apartado Web Performance Best Practices un recurso informativo con muchos consejos, algunos de los cuales se han resumido este post y el anterior.

Tweet about this on Twitter0Share on Facebook0Share on Google+0Share on LinkedIn0Pin on Pinterest0
<< Post Anterior
Post Siguiente >>

Leave A Response

* Denotes Required Field