Guía para reducir al máximo el tiempo de carga de tu web

Por -

Estoy completamente convencido de que a muchos de nuestros lectores les será familiar el dicho: “La suerte es el cuidado de los detalles“, esto en el mundo Blogger y en Internet en general, deja de ser un “dicho popular” y se convierte en una realidad a tener muy en cuenta, y es que Google cada vez es más exigente con sus resultados de búsqueda, por lo que debemos cuidar hasta el más mínimo detalle de nuestra página web.

Uno de los detalles que suelen pasar desapercibidos y que es de suma importancia, es la velocidad de carga de una página web, ya que si nuestra web es lenta en general, no solo perderemos visitantes y obtendremos un rebote brutal, si no que también podemos ser marcados por Google como página lenta y que afecte de manera muy considerable a nuestro posicionamiento y esto, repercute en pérdidas cuantiosas a final de mes, no podemos permitirlo.

En éste artículo vamos a repasar algunos de los aspectos más importantes a tener en cuenta a la hora de evaluar esta tarea :) .

reduce el tiempo de carga de tu web

optimizar velocidad de nuestra web hosting

 

 

 

 

Aunque parezca algo trivial, es muy importante seleccionar un Hosting fiable y de calidad para nuestra web, más vale invertir una pequeña cantidad anual/mensual que buscar una solución gratuita, ya que éstas últimas no ofrecen garantías “Uptime” (El sitio siempre online). Debemos tener en cuenta nuestras necesidades, ya que no necesitamos adquirir un ferrari si acabamos de sacarnos el carnet, por lo que si vamos a iniciar nuestro sitio desde 0, lo más recomendable para nuestro bolsillo es iniciar con un plan compartido, suele ser el más barato y en la mayoría de los casos (Depende de la compañía) es más que suficiente para aguantar + 2000 visitas diarias. No obstante explicamos la diferencia de cada uno:

1. Plan compartido o Shared

Es el plan estándar de cada compañía de alojamiento, nos ofrecen un espacio (variable en cada caso), una dirección IP y unas limitaciones para bases de datos, cuentas de correo, volumen de tráfico, etc. Compartimos dirección IP y recursos con más páginas web alojadas, por lo que debemos tener en cuenta que no tendremos una “IP límpia” ya que esta puede ser compartida por varias webs.

Este plan es el más recomendado para empezar, ya que tendremos un panel de control para gestionar nuestra web y su administración a un módico precio.

Pros: Precio, facilidad de administración, garantía Uptime (En la mayoría de los casos).

Contras: Vecinos (en ocasiones perjudiciales), IP compartida, limitaciones.

2. Plan VPS o Virtual Private Server

Se trata de un plan más avanzado que el anterior, en el que tenemos control total sobre nuestro espacio, dispondremos de una dirección IP única y no tendremos vecinos con los que compartir espacio. Su uso será exclusivo del cliente, aunque solo dispone de un espacio en el servidor, éste último estará compartido con más clientes. Digamos que con ésto obtendríamos una parcela privada.

Pros: Independencia, control total, recursos propios

Contras: Precio más elevado, somos responsables de su administración.

2. Servidor dedicado

Es la solución profesional de alto rendimiento para nuestra página web, se trata de un servicio de alquiler mensual o anual, en el que se nos suministra un servidor completo para nosotros, de manera que garantizamos un alto rendimiento y que el 100% de los recursos serán nuestros de manera exclusiva. Dispondremos de nuestras propias direcciones IP y su precio puede variar si necesitamos que sea administrado o sin administrar (ésta última opción requiere de conocimientos intermedios). Éste tipo de servidores son recomendables para webs con mucho volumen de tráfico y que necesitan una solución profesional.

Pros: Servidor/máquina propia para el cliente, velocidad y alto rendimiento, todo lo anterior.

Contras: Alto coste mensual, conocimientos intermedios para administrar

¿En que país contratar el servidor?

Realmente, no importa el país donde alojemos nuestros archivos o contratemos nuestro servidor, se encuentre donde se encuentre, podrán acceder a él desde cualquier zona geográfica. Pero, debemos tener una consideración, que nos dará una diferencia de velocidad de carga notable (en algunos casos), debemos evaluar previamente para que país irá (mayoritariamente) orientado nuestro tráfico, es decir, si tenemos una web de información de universidades españolas, la ubicación idónea para el servidor sería España o Europa en su defecto, de modo que la velocidad de acceso será mayor que si estuviera ubicado en Los Ángeles, al estar más cercano, por lo que es un detalle a tener en cuenta a la hora de maximizar nuestra velocidad de carga.

“Siempre que sea posible, contratar un servidor cercano.”

optimizar velocidad de nuestra web

A continuación, vamos a exponer una serie de herramientas que medirán nuestra velocidad con el fin de detectar posibles mejoras en la optimización, códigos JS que sobran, imágenes muy pesadas, líneas innecesarias, etc. Con el fin de mejorar la experiencia del usuario.

1. Pingdom

Es una herramienta que se encarga de hacer un test de acceso a nuestra página, determinando el tiempo de carga y el grado de optimización en una escala del 1 al 100.

pingdom reducir carga de web

Para ello accedemos a la web, escribimos la dirección de nuestra página y pulsamos sobre “Test Now”, esperamos a que finalice. Una vez haya terminado obtendremos los datos principales donde nos dan una puntuación, el tiempo de carga de nuestra página y el peso en total.

En la parte inferior nos detalla cada componente con el fin de hacernos una idea cual es el más pesado y cual debemos optimizar, el tamaño lo determina en KB y lo muestra con diferentes colores.

 

pingdom reducir carga de web2

 

Barra amarilla: Indica el tiempo de respuesta de nuestro servidor.

Barra rosa: Indica el tiempo que ha tardado en responder la dirección DNS.

Barra verde: Indica el tiempo que ha tardado el navegador en recibir los datos desde el servidor.

Barra azul: Indica el tiempo que ha tardado el navegador en conectar con el servidor.

A partir de esta información, debemos buscar aquellos componentes más pesados e intentar reducirlos, si nuestros conocimientos son limitados, es recomendable contratar a un programador profesional y enviar el informe generado anteriormente, con el fin de que nos asesore.

Los tiempos normales de carga de una web (depende de cada caso) son entre 1 y 4 segundos, si tu web tarda más de 4 segundos en cargar debes ponerte manos a la obra cuanto antes, ya que muy probablemente te esté perjudicando de cara al posicionamiento. El tiempo óptimo está por debajo de los 2 segundos.

Visitar | Pingdom

 

2. Page speed insight

Es una completa herramienta de uso gratuito ofrecida por Google, en ella podemos revisar cada URL de manera independiente de nuestra página, y está completamente asociada al resto de nuestras cuentas (Adsense, Analytics, etc), por lo que la integración es total.

page speed reducir carga de nuestra web

A pesar de que ésta herramienta no ofrece un tiempo de carga en segundos, resulta de mucha utilidad ya que profundiza en todos los aspectos a mejorar de nuestra página y los clasifica por orden de importancia. Nos ofrece un detalle de cada uno y una breve guía de como debemos actuar, por lo que nadie mejor que Google puede mostrarnos el camino a seguir de cara a reducir la carga de nuestra web.

Page Speed Insight nos ofrece de igual modo una puntuación del 1 al 100, con el fin de ir escalando posiciones. Debemos intentar que la optimización de nuestra web esté por encima de un 65 de puntuación, en caso contrario debemos marcarnos pequeñas metas para ir corrigiendo poco a poco algunos aspectos que influyen negativamente en la velocidad de carga.

Visitar | Page Speed Insight

3. Metricspot

Completa herramienta que nos ofrece información general referente a nuestra web, determina un chequeo completo, no solo se limita a la velocidad, si no que analiza diferentes puntos fuertes y débiles de nuestra web. Ofrece un reporte sobre el SEO, programación, cantidad de imágenes, fuerza en las redes sociales y mucha más información de utilidad.

reducir el tiempo de carga de nuestra web 3

Además, nos aconseja sobre como mejorar cada aspecto de manera puntual y nos ofrece una puntuación del 1 al 100, por lo que es buena idea ir mejorando cada detalle por insignificante que parezca.

Visitar | Metricspot

reducir carga al maximo de nuestra web

 

 

 

 

1. Reducir peso de las imágenes sin perder calidad

Normalmente, tendemos a utilizar frecuentemente el uso de imágenes en nuestras páginas webs (Entre los que me incluyo) y en ocasiones no controlamos ni las dimensiones de las mismas ni su peso. Es sumamente importante que las imágenes que subamos a nuestro servidor sean lo más ligeras posibles con el fin de evitar un exceso de carga del mismo y por consiguiente reducir hasta en un 80 % la velocidad de carga de nuestra página.

Vale la pena perder unos minutos procesando cada imagen antes de subirla, ya que evitará de una manera masiva que nuestra web cargue muy lenta, imaginad que subimos 5 imágenes de 500 Kb cada una, el navegador debería cargar 2,5 MB de imágenes adicionales al peso de nuestra web, si en pingdom nos apareció que nuestra web tardó 2 segundos de carga para 1 MB de peso total, imaginad el aumento en tiempo que esto supondría, por lo que podríamos perder visitas y posiciones en Google.

Si utilizamos WordPress existen varios plugins que reducen el tamaño de las imágenes de forma automática, pero hoy queremos ver la manera de hacerlo manual, consiguiendo en muchos casos una reducción de un 70% del tamaño original.

RIOT (Radical Image Optimization Tool)

Ésta herramienta me tiene maravillado, lo tiene absolutamente todo, es rápida, ligera, fácil de utilizar y muy muy efectiva, tiene la capacidad de reducir una imagen al máximo, aparentemente sin perder un ápice de calidad (al ojo humano), tan solo seleccionando de la barra inferior el nivel de compresión que deseemos.

riot

 

Como podemos comprobar en la imagen anterior, tan solo hay que abrir una fotografía e ir bajando la calidad, a tiempo real nos muestra el tamaño original y el tamaño final. Vemos que hemos reducido drásticamente una imagen pequeña, sobre una de mayor tamaño el resultado sencillamente es brutal. Imaginad lo que esto supone si lo hacéis con cada imagen de vuestra web, o analizáis las más pesadas con las herramientas anteriormente citadas.

Además, ésta herramienta también nos permite re dimensionar cada imagen y aplicar una serie de cambios programados a una carpeta completa, de tal forma que no tengamos que ir haciendo el proceso imagen por imagen.

Descargar | RIOT

También, podemos contemplar alternativas para reducir imágenes online, con el fin de evitar la necesidad de instalar aplicaciones en nuestro equipo.

2. Evitar el uso de Plugins innecesarios

Si utilizamos WordPress o Blogger, en ocasiones caemos en la tentación de instalar plugins para probar y luego dejamos activados, esto hace que las consultas a la base de datos sean mucho más pesadas, por lo que es completamente recomendable utilizar tan solo los plugins que sean estrictamente necesarios y no caer en el error de instalar para probar.

Os recomendamos que accedáis al panel de control de los plugins, reviséis a conciencia los que son necesarios y desinstaléis los que no, con esto añadiréiss un giro de tuerca a la optimización de vuestra carga.

Estos son los pasos más significativos y a tener en cuenta para poner a dieta a nuestra página web, obviamente podemos profundizar y sacar a la luz muchos más, pero sin duda, con ésta pequeña guía ya sabremos por donde ir empezando.

Si te ha parecido útil nuestro artículo, por favor compártelo en tus redes sociales y haz que todos tus contactos puedan beneficiarse 😉 

Informático de profesión y Blogger por vocación, soy un entusiasta apasionado de las nuevas tecnologías, intento disfrutar el día a día, la felicidad está en el camino. Así que cada día cuenta! :) Ismael Muñoz

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>