Optimizar tiempo de carga de nuestra web

Estoy leyendo este libro sobre como mejorar la carga de las webs y muchas de los blog de viajes tienen porblemas con el tiempo de carga, por eso he querido crear este post donde quiero explicar como mejorar la velocidad de carga de nuestras webs. Recibo correos pidiéndome como podría mejorar la carga de su web ya que va muy lenta y quieren acelerar la velocidad. 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 webpagestest, 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:

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(esto es un problema, ya que el primer byte es super importante, deberiamos tener menos de 0,3s), y la página comienza a visualizarse en 1.606s, el tiempo en load time es aceptable, pero nos perjudica mucho el first byte.

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 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 o también que el first byte sea lento se debe a que tiene muchos procesos internos para mostrar la página, por ejemplo, hacer muchas consultas sql…. Podríamos plantear cachear la web para ahorrar tiempo.

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.

Crear imágenes svg o incrustadas en el código

En vez de usar un sprite, podemos utilizar imágenes svg, ya que pesan mucho menos y no pierden calidad, por ejemplo, utilizar un svg para el logo de la marca es una buena opción, ya que veremos el logo nítido y sin perder calidad, ademas solo nos ocupara unos 4-5kb. También podemos usar la imagen directamente incrustada en svg ahorrandonos una petición.

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.

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.

Optimizar las imágenes

Dentro de este punto entran muchas circunstancias como son el tamaño, el formato, formas… Yo como recomendación utilizo una web que se llama compressor.io 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. Yo siempre paso la web por photoshop, la pongo en el tamaño que necesito, la guardo para web y luego la paso por compressor.io, con todo esto acabo ahorrando mucho y las imágenes no pesan más de 100kb(imágenes muy grandes)

Cachear la web y usando nginx

Cuando ya queremos una máxima optimización lo mejor que podemos hacer es cachear toda la web, eso si tenemos que tener mucho cuidado, ya que por ejemplo, con el cambio de moneda, usuario logueado… se tienen que mostrar bien para todos los casos, ya que si se cachea la web, puede ocurrir que cuando cambias de moneda, la web no cambia a dolares, se queda en euros…. Tendríamos que cachear la web según las cookies que usamos para cada cosa(login, moneda…). También otra opción sería usar marieDB con fullpagecache, con esto mejoraríamos bastante la web.

Con estos consejos podréis optimizar y acelerar vuestra web, espero que os haya gustado. Como cada optimización es diferente, en algunas es un simple cambio de servidor en otra es modificar la web… 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, Gracias!

Comparte el post de: Optimizar tiempo de carga de nuestra web

Código descuento para Free tours y Excursiones Encuentra más Viajes