Por Juan Carlos Mendoza, Web Development de SpicyMinds.
Mejorar el tiempo de carga de tu sitio web, es decisivo tanto para la experiencia del usuario como para el posicionamiento en Google y otros buscadores. Lograr retener a los visitantes y excelentes resultados con SEO, es una tarea que debemos tener presente en la optimización web y particularmente del tiempo de carga de los sitios.
Los usuarios en internet, interactúan constantemente con sitios web optimizados y con el tiempo, llegan a percibir fácilmente las páginas web o eCommerce que no cumplen dichas características. Ya sea el caso de un eCommerce, el usuario sentirá que posiblemente su pago no pasará y la tienda aun así le hará un recargo a su tarjeta. O si de un sitio web se tratase, perderá el interés e irá a buscar otra opción.
Según Social Media Today, indica en su infografía que el 53% de los usuarios en internet con dispositivos móviles, abandonan los sitios web si no cargan completamente en 3 segundos.
Mientras que Think With Google, expone en su infografía que la probabilidad de rebote es de 35% de 1 a 3 segundos en carga y de 90% de 1 a 5 segundos de carga.
¡Vaya que la velocidad es un factor relevante en la actualidad!
Es momento de actuar y pongamos manos a la obra para revertir y optimizar esto en nuestros portales.
Herramientas para conocer la velocidad de nuestros sitios web.
En primer lugar, está la herramienta proporcionada por Google, ya que conocen muy bien el comportamiento y lo que esperan los usuarios.
PageSpeed Insights. Está diseñada para ayudar a optimizar el rendimiento, pues nos proporciona información valiosa y tips para mejorar dicho sitio web además de ser gratuito. Basta con pegar la URL de tu web en su campo de análisis y dar click sobre el botón “analizar”, para conocer todo lo que puedes mejorar en tu página web.
Google Lighthouse. Es una herramienta de código abierto que ayuda a mejorar la calidad de los sitios web mediante informes de rendimiento, accesibilidad, mejores prácticas y SEO.
GTmetrix. Al igual que las dos anteriores de Google, esta herramienta es extremadamente detallada, pues nos permite comprender en forma total el proceso de carga de nuestro sitio web.
Una vez que ingreses tu dominio, podrás conocer los ajustes recomendados.
¿Realmente un sitio web puede tener la calificación 100/100?
Posiblemente, a estas alturas ya conoces las condiciones de tu sitio web con ayuda de estas herramientas y quieres alcanzar el 100/100. Y es posible que PageSpeed Insights y GTmetrix, te arrojen información con grandes diferencias.
Esto sucede porque ambas tecnologías utilizan recursos diferentes, así también tienen una ubicación distinta, por lo tanto, proporcionan visiones diferentes. Por ello, una vez que realices las optimizaciones en tu página web, compara el estado anterior con el nuevo, pero por medio de la herramienta.
Optimizar al máximo todos los elementos recomendados por las herramientas puede ser una tarea imposible. Dado que una variable depende de otra y si mejoramos un punto, posiblemente afectamos a otro y en vez de tener un sitio web optimizado, tendremos lo contrario.
Por ello no es recomendable tener un 100/100, sino que lo mejor será tener la visión de que podemos mejorar y que es preferible mantener algunas cosas en forma original por la experiencia de usuario y no estropearlo.
Trata de alcanzar un puntaje, donde tu sitio web sea funcional, mantenga una calidad en visibilidad y sientas que el tiempo de carga es suficiente, esto por lo general, en promedio lleva 3 segundos.
Factores que reducen el tiempo de carga en un sitio web.
Consigue un buen servidor hosting.
Empezamos por lo más obvio, que es contratar un hosting en buenas condiciones. Por lo general, las empresas que dan este servicio te venden este plan bajo la palabra “recomendado”, ya que son hostings compartidos, pero que los propietarios dan mantenimiento frecuente y se preocupan por tener un buen hardware, como memoria RAM suficiente para el correcto funcionamiento de sus clientes. Si es posible para ti comprar el plan siguiente al “recomendado”, hazlo, pues sin duda te evitarás muchos dolores de cabeza. Otro tip, no compres hosting en Europa si tu negocio está en América.
Habilita la compresión Gzip.
Esta tecnología comprime los archivos del sitio web, reduciendo el tamaño y, por tanto, el tiempo de transferencia. Configurarlo es muy sencillo, solo debes buscar la opción que se encuentra en el hosting donde está tu página. Una vez activado puedes testear con este enlace.
Optimiza las imágenes.
Las imágenes tienen un papel protagonista a la hora de reducir el tiempo de carga, si las optimizamos seguramente mejoraremos la velocidad del sitio web.
Es importante tener la imagen correcta en el lugar correcto, ya que una imagen en formato PNG pesará más que una en formato JPG, no importando si ambas tienen la misma resolución. Esto sucede porque usan tecnologías diferentes dentro de ellas. Por ejemplo, por un lado una imagen en formato PNG proporciona transparencia, mientras que una imagen en formato JPG no lo hace. Por tanto, si en una imagen no utilizamos transparencia es preferible utilizar formato JPG. Visita este enlace para optimizar gratuitamente tus imágenes.
Es importante que cargues las imágenes en el tamaño adecuado que serán utilizadas; si necesitas una imagen para un logo de 150x150, entonces ¿por qué usarías una de 1500x1500 en tu sitio web?
Te invito a leer la siguiente nota, donde encontrarás información a profundidad sobre el tema de imágenes: Optimización Web - Imágenes.
Utiliza la carga diferida para imágenes.
Básicamente, esta tecnología oculta imágenes al cargar páginas web, por lo tanto, lo aligera y muestra las imágenes conforme el usuario las alcance con el desplazamiento. Si tu página está hecha con HTML puedes utilizar esta librería y si utilizas WordPress, puedes emplear este plugin.
Optimiza el código JavaScript, CSS y HTML.
Durante el desarrollo de una página web, ya sea con HTML o WordPress siempre quedan espacios en blanco, saltos de línea y comentarios; esto no sirve al usuario final, pero sí que ocupa espacio en el archivo y, por tanto, incrementa el tiempo de carga. Así que al terminar tu proyecto web, genera un respaldo para documentación y comprime los archivos .html, .js y .css. Así convertirás tu sitio web en una versión más ligera.
Si empleas WordPress puedes emplear fácilmente este plugin.
Utiliza diseño responsivo.
Si empleas un diseño responsivo en tu sitio web, los navegadores no tendrán la necesidad de solicitar al hosting una versión para desktop y otra para mobile.
Digamos que, ahorramos trabajo al servidor al evitar la redirección, por ejemplo de “www.dominio.com” a “m.dominio.com”.
Podremos usar redirección si de SEO se tratase, para dar al usuario la información solicitada desde los buscadores. Ahí entonces sí vale la redirección, de lo contrario solo sobrecarga al servidor.
Utiliza la memoria caché del navegador.
Los navegadores, tienen la facultad de almacenar información de un sitio web en el disco duro de los usuarios. Básicamente, descargan el sitio y cuando el usuario nos visita nuevamente, entra el trabajo del caché, que es usar los archivos previamente descargados para abrirlo lo más rápido posible, haciendo al mismo tiempo un mapeo para saber si algo fue actualizado.
Si quieres usar esta ventaja en los navegadores y utilizas WordPress, puedes usar el W3 Total Cache y WP Fastest Cache.
