Optimizar tiempo de carga de nuestra web

Hoy os quiero explicar como mejorar la velocidad de carga de nuestras webs, ya que recibo correos pidiéndome como podría mejorar la carga de su web ya que va muy lenta y quieren acelerar la velocidad, en este post explicare como mejorar la carga de un sitio web, ya que a mi siempre me han funcionado y he tenido resultados satisfactorios.

El tiempo de carga de la web es un factor muy importante tanto para el posicionamiento en buscadores como para la experiencia del usuario. El objetivo es reducir al mínimo el tiempo de carga, el mayor motivo por el abandono de una web es el exceso de tiempo de carga. Estudios indican que una persona entra a un sitio web y tarda mas de 3 segundos, el 40% termina dejando el lugar. Otra causa es debido al algoritmo de los buscadores, ya que uno de los factores que tienen en cuenta es la velocidad de carga de un sitio web, que influye directamente sobre la rastreabilidad del contenido del sitio web.

Bueno entremos en materia, primero de todo revisaremos nuestra web con diferentes herramientas online para medir la velocidad. En mi caso utilizo estas tres:

Comprobar tiempo de carga de nuestra web

https://developers.google.com/speed/pagespeed/insights/

http://gtmetrix.com/

http://tools.pingdom.com/fpt/

http://www.webpagetest.org/

Las tres webs son parecidas, en algunas puedes encontrar mas o menos información, para mi, mis favoritas es pagespeed de google, que podéis encontrar una extensión de chrome(donde hay muchas mas información y te entrega imágenes comprimidas,etc) y gtmetrix, que te da unos consejos muy valiosos.

Como ejemplo realizare un análisis de mi sitio web. Primero de todo nos dirigimos a gtmetrix.com, analizara nuestra web. Los resultados son:

optimizar tiempo de carga de una web

 

He realizado el tiempo de carga de mi web y aproximadamente tarda 2 segundos en cargar todo el contenido de mi web. Como podemos observar me dan una buena puntuación así que el tiempo de carga de mi web es aceptable. Como veremos a continuación ahí algunos aspectos que incluso se pueden mejorar.

Ahora nos dirigimos a webpagetest.org y realizamos otro test. El rendimiento que nos muestra es:

mejorar velocidad de carga web para el posicionamiento en buscadores

 

como observamos el servidor tarda 1.032 segundos en enviar el primer byte de información, y la página comienza a visualizarse en 1.606s, es un tiempo aceptado como hemos indicado anteriormente.

En estas dos webs podemos ver un timeline, de todo el contenido que carga y donde pierda mas tiempo y poderlo mejorar haciendonos una idea.

Enseñaros también google pagespeedDonde os muestran muchas indicaciones de como mejorar vuestra web.

Optimizar tiempo de carga web

Os explicare un pequeño caso practico, que le pasaba a un hombre que me pregunto por que le iba lenta su web, realice estos test y vi por ejemplo en gtmetrix, que el tiempo de carga del servidor en enviar el primer byte de información era de 2.7s y en google pagespeed, le mostraba un tiempo de respuesta del servidor muy lenta… Por lo tanto en estos casos tenemos que contactar con nuestro proveedor de hosting y que nos diga el motivo de esta carga tan lenta… Ya que podría ser que el servidor este mal administrado y por lo tanto conviene cambiar de proveedor.

Consejos para optimizar velocidad de una pagina web

Ahora os quiero enseñar algunos consejos, para poder mejorar vuestras webs.

Especificar el tamaño de las imágenes

Es importante en todas las imágenes especificar su tamaño, ya que con ello aceleramos el rendering de la página mediante la eliminación de reflows y repaints inecesarios.

Combinación de las imágenes mediante css Sprites

En este punto yo pensaba que no iba afectar mucho cuando me lo comentaron, pero mejoro mucho. ya que combinando las imágenes se reduce el número de peticiones de descarga que debe realizar el navegador para cargar el contenido total de la página web.

Aplazar el JavaScript

Podemos reducir el bloqueo que provoca la renderización de la página. El objetivo, es reducir al máximo el código JavaScript, sobretodo el inecesario y aplazar el JavaScript que no sea necesario al final de nuestro código.

Ordenando el css

Muchas veces instalamos plugins, widgets … Donde encontramos archivos css o JavaScript que son muy pequeños y directamente lo podríamos poner en nuestro css principal o en  nuestro código html. Ya que con esto reduciremos la cantidad de archivos que el navegador tiene que descargar antes de mostrar nuestra web. Ya que el navegador tiene que cargar nuestro HTML y luego descargar todos los archivos css o javascript. Por lo tanto Descargar 1 solo archivo es mejor que descargar dos.

Optimizar las imágenes

Dentro de este punto entran muchas circunstancias como son el tamaño, el formato, formas… Yo como recomendación utilizo un plugin en wordpress que se llama smush.it, comprime todas las imágenes. Otra cosa que podéis hacer es cuando editéis en Photoshop, las imágenes guardarlas para web y con una calidad alta. Con esto la perdida de calidad es mínima.

Entregar imágenes al tamaño que necesitamos

Muchas veces utilizamos css o html para reducir el tamaño de una imagen, como consejo es mejor dar la imagen en el tamaño que vayamos a utilizar, con el tema del responsive no podemos hacer nada ya que la tenemos que modificar mediante css.

Con estos pequeños consejos podréis optimizar y con ello acelerar vuestra web, Espero que os haya gustado, Si necesitáis ayuda mas especializada contactar conmigo

Si tenéis mas consejos no dudéis en comentarlos.

Si quieres ayudar a contribuir en el blog no dudes en pulsar en los banners de publicidad.

David Gutiérrez Maroto.

Summary
Review Date
Author Rating
51star1star1star1star1star

Deja un comentario

Tu dirección de correo electrónico no será publicada.