OptimizarTiempo de Carga

Seis trucos para reducir el tiempo de carga de tu web

9 abril, 2015 Diseño y Desarrollo web No hay comentarios

¿Cuantas veces has entrado en una web para consultar algo rápidamente y has terminado desesperando porque la carga de a penas 6 segundos termina pareciendo eterna?

La realidad es que una web puede ser muy funcional y tener el diseño mas atractivo, incluso tener los mejores contenidos, y aún así, si tratas de visitarla y tarda mas de 6 segundos en cargar, probablemente jamás llegues a aficionarte a ella.

El tiempo de carga es uno de los factores mas importantes a nivel de experiencia de usuario, porque normalmente todos tenemos mucha prisa, y sobre todo muchas fuentes para encontrar lo que estamos buscando. Por este motivo, es bastante común la afirmación de que el tiempo de carga óptimo de una web debe estar entre 1 y 3 segundos, y ese es nuestro objetivo.

Por otro lado, no solo a nivel de experiencia de usuario afecta el tiempo de carga. Si queremos que nuestra web se posicione cada vez mejor en nuestro buscador favorito, también tenemos que controlar este aspecto. Esto se debe a que los robots de Google no tienen un tiempo ilimitado para rastrear tu sitio web, de  modo que si tenemos páginas con un tiempo de respuesta demasiado elevado, puede ocurrir que los robots no lleguen a rastrearlas todas en nuestro sitio web, lo cual te perjudicaría a nivel de SEO.

Por suerte, hay varios métodos que nos van a permitir mejorar los tiempos de carga sin necesidad de modificar nuestra web a nivel de diseño o usabilidad e incluso algunos de ellos ni siquiera van a suponernos un gran coste en su adaptación. Aquí los tenemos:

  1. Comprimir ficheros css y javascript y reducir al mínimo el uso de los segundos.
    Cuanto mayores sean estos ficheros, mas tardía será su carga y por tanto, una buena práctica una vez terminada la web, consiste en eliminar todos los espacios y comentarios de estos ficheros dejando lo exclusivamente necesario. Por otro lado, en el caso de JavaScript, las llamadas también tienen un tiempo de respuesta, que debemos intentar minimizar al máximo, haciendo uso de ellas solo cuando sea estrictamente necesario.
  2. Evitar el uso de iframes.
    Es bastante habitual y además es muy aconsejable, que queramos añadir redes sociales en nuestras páginas, incluyendo opciones como “me gusta” de Facebook, o hacer un retweet… Para ellos hay que intentar dentro de lo posible, utilizar funciones que nos eviten la recarga de nuestra web con iframes. Pues puede ocurrir que por algún motivo, el servidor del que cargamos la información sufra algún retardo que acabará perjudicando la carga de nuestra web.
  3. Eliminar errores de carga como imágenes  o urls de enlaces inexistentes.
    Esto parece bastante obvio, pero a menudo ocurre que algún enlace que no se utiliza (redirigimos con javascript, etc), puede conducir a una url que ya no tiene sentido.. o que una imagen no exista para un caso concreto, etc. Estas situaciones no van a afectar a nivel de funcionalidad, pero por cada enlace roto, el navegador agotará el tiempo de carga de ese fichero o imagen, relentizando también la carga de nuestra web.
  4. Optimizar imágenes para reducir su tamaño y usar siempre el mínimo tamaño posible.
    Las imágenes y el resto de ficheros multimedia (vídeos, sonidos…), aunque no tan habituales, son con diferencia los elementos que mas afectan en la carga de nuestra web, por ello, hemos de reducir su tamaño en la medida de lo posible. Hay varios formatos de compresión que pueden conseguir tamaños de imagen muy adecuados para la web, (jpg, gif o png).

    Por otro lado, es muy importante, no utilizar la redimensión de una imagen mediante HTML o CSS, sobre todo si se trata de una imagen con mucha definición y de gran tamaño y lo que hacemos es reducirla para convertirla en un tamaño muy pequeño. Si lo hiciéramos de esta maneara, el navegador haría la carga de la imagen en su tamaño original (mas grande y pesado), para terminar mostrando una imagen mucho mas pequeña en realidad. Por tanto, la forma correcta de realizar esto, es transformar la imagen previamente, y cargarla ya con el tamaño deseado, que tendrá un peso mucho menor y el navegador cargará con mas fluidez.

  5. Hacer uso de la carga diferida (lazy load).
    Este método es muy aconsejable cuando tenemos una web con una gran cantidad de imágenes. Consiste en realizar únicamente la carga de las imágenes que realmente se ven en pantalla, e ir cargando el resto de imágenes a medida que vas visualizando el contenido. De esta forma, evitas que el navegador haga la carga de todas las imágenes al principio mejorando notablemente el tiempo de carga de toda la página. Existen varias formas de realizar el “lazy load”, mediante una librería de jQuery o incluso mediante plugins para los CMS mas utilizados.
  6. Hacer uso de peticiones AJAX para la carga de elementos no visibles como sliders, etc…
    Esta técnica es probablemente (y junto a la anterior), la mas compleja técnicamente, pero muy adecuada para carruseles con imágenes grandes o elementos pesados, etc. Consiste en cargar únicamente las partes del carrusel que se vean, en lugar de cargar todo el carrusel y ocultar mediante CSS las partes no visibles. De esta forma, solo cargas el contenido cuando lo necesitas, evitando la carga del mismo al inicio de la web y mejorando notablemente tiempo de carga, pero además mediante esta técnica, también vamos a mejorar a nivel de SEO, dado que eliminamos contenido oculto de la web, algo muy valorado por los robots de Google.

Si tenemos en cuenta todos estos aspectos, aumentaremos notablemente el la velocidad de carga de la web, convirtiéndola en una web mucho mas atractiva y mejorando incluso nuestro posicionamiento en buscadores.

Front & Back-end Developer

Deja un comentario

El email es obligatorio pero no será visible para el público.

¿podemos ayudarte en algo?

Contacta con nosotros

¿Crees que podemos ayudarte con tu próximo proyecto?





Valencia