[Tutorial] Reducir tiempo de carga de una web

Hola a todos,

Os quiero traer un tutorial que he hecho para mi blog, explicando como reducir el tiempo de carga de nuestra web.
http://gmdavid.com/carga-lenta-de-una-web/

El tiempo de carga de la web es un factor muy importante tanto para el posicionamiento 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:

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.

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

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:

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 pagespeed, Donde os muestran muchas indicaciones de como mejorar vuestra 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 su 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.

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 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.

GMDavid