Aunque la velocidad de carga de un sitio no es considerado un factor de clasificación en buscadores, eso pronto quedará en el pasado.
Google lleva tiempo mostrando recursos y herramientas para ayudar a los creadores de sitios a aumentar la velocidad de carga y con esto, mejorar la experiencia el usuario.
Lo anterior, debido a que nos hemos vuelto más exigentes.
¿Tú esperarías más de 5 segundos para que una página cargue?
La realidad es que no lo hacemos. Al momento en que vemos que está tardando, abandonamos la página o damos clic atrás para seleccionar otro resultado.
El resultado, en ocasiones, es que perdemos clientes potenciales.
Si quieres mejorar la velocidad de tu sitio y no padecer por ello, este contenido te será de gran utilidad.
5 acciones clave que puedes implementar de una forma sencilla, siempre que tengas un CMS.
Primero debes hacer el test de velocidad de la página que quieres optimizar.
Es muy simple: solo entra al sitio PageSpeed Insights: https://developers.google.com/speed/pagespeed/insights/
Coloca la url de tu página y da clic en analizar.
La velocidad se mide de 0 a 100.
El reto es estar lo más cercano al 100, pero no te enfoques solo en eso. En ocasiones, puede que, por el contenido de tu página y el valor que puede aportar, estar dentro del rango de 50 a 60 esté bien.
Lo que tienes que hacer es evaluar cada página según la experiencia que quieres brindarles a tus prospectos. No sirve de nada lograr 90 si tu página es simple texto sin imágenes o llamados a la acción.
Así que no te obsesiones, cada página tiene un fin y habrá algunas que tendrán un promedio más bajo.
Con eso en mente, empecemos con las mejoras.
Vamos a ir de lo más sencillo a lo más complejo.
Comprimir las imágenes
Las imágenes suelen ser el principal elemento que hace que la puntuación sea baja; por ello, debes asegurarte de comprimirlas. En ocasiones, según tu industria y audiencia objetivo, tendrás que priorizar la calidad.
Para lograr una compresión sin pérdida te recomiendo usar alguna herramienta externa.
Existen varias, pero mi favorita es https://tinypng.com y https://tinyjpg.com. También hay un plugin para WordPress o puedes adquirir el plugin para Adobe Photoshop y así explorarlas sin acceder al sitio.
En ocasiones, si la imagen es muy pesada, puedes intentar volver a pasar la imagen que quieres reducir para obtener un menor peso.
Un consejo: usa jpg cuando no sea necesaria la transparencia. Si bien png se puede comprimir, siempre se logra un menor peso en el formato jpg.
También puedes usar imágenes Webp, pero debes considerar que Safari soporta este formato parcialmente.
Una vez que hayas comprimido las imágenes y las hayas cambiado en la página, te recomiendo que realices de nuevo la prueba de velocidad para que veas el avance conseguido.
Nota importante: realiza la prueba 3 veces para obtener una métrica más acertada.
Diferir la carga de las imágenes no visibles
En ocasiones, una página suele tener muchas imágenes, pero no estar visibles para el usuario hasta que empieza a desplazarse.
Para las imágenes que no están en el primer pliegue de la página o vista inicial, es recomendable añadir la carga diferida conocida como lazy.
Tanto Chrome como Edge, los navegadores más usados (entre ambos tienen más de 70% de la cuota de mercado y un 65% con respecto a móvil) te permiten realizar esta acción.
Menciono estos navegadores porque son los que admiten el atributo loading="lazy". Los bloques de imágenes quedan así:
<img src="image.png" loading="lazy" alt="…" width="200" height="200">
Es importante usar este atributo únicamente en las imágenes que no están visibles cuando se carga el sitio, es decir, las que no se ven hasta que se empieza a hacer el desplazamiento hacia abajo.
Sin embargo, debes tener en cuenta que no puedes dejar sin una buena experiencia a los usuarios que usan otros navegadores. Así que para ellos usa una librería llamada lazysizes.
Implementarlo da como resultado lo siguiente:
<!-- Carga de imágenes visibles inicialmente-->
<img src="banner.jpg" alt="…">
<!-- Carga con lazy-load de imágenes no visibles inicialmente -->
<img data-src="servicio-a.jpg" alt="…" loading="lazy" class="lazyload">
<img data-src="servicio-b.jpg" alt="…" loading="lazy" class="lazyload">
<img data-src="servicio-c.jpg" alt="…" loading="lazy" class="lazyload">
<script>
if ('loading' in HTMLImageElement.prototype) {
const images = document.querySelectorAll('img[loading="lazy"]');
images.forEach(img => {
img.src = img.dataset.src;
});
} else {
// Dynamically import the LazySizes library
const script = document.createElement('script');
script.src =
'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.1.2/lazysizes.min.js';
document.body.appendChild(script);
}
</script>
Lo que hace el script es comprobar si el navegador reconoce el atributo loading lazy, prepara las imágenes y, en caso de que no, carga el script lazysizes para mostrar las imágenes a medida que están a punto de aparecer.
Tanto en el CMS de HubSpot como en WordPress puedes aplicar el ajuste anterior. Aunque puedes usar plugin en WordPress, es recomendable que evites sumar más plugin y que hagas la adaptación de forma directa.
Listo, ahora vuelve hacer la prueba de velocidad…
Comprimir el código html y css
Este punto es simple en el caso del CMS de HubSpot, ya que lo hace de forma automática; la compresión del código supone ahorros en la interpretación.
Milésimas de segundo hacen la diferencia y, en el caso del CMS Hub, no es necesario hacer algo, ya que además de comprimir los archivos en cuanto a los css y js, los combina según las pruebas que realiza de funcionalidad del sitio.
En ocasiones, combinar y comprimir puede generar errores en la visualización; el ajuste en cuanto al nivel de compresión HubSpot lo realiza de forma automatizada.
En cuanto a WordPress, es importante que evites usar plantillas sobrecargadas o un constructor muy complejo, ya que si usar un plugin de compresor es necesario, con una plantilla muy compleja la comprensión y la combinación de archivos css y js puede resultar en errores visuales u otros.
Para probar, usa plugins que tengan buenas opiniones y que brinden varios niveles de compresión o combinación para que puedas probar y elegir la que no impacte en la visualización correcta de tu sitio web.
Cargar los script en el pie de la página
Hasta aquí, ya le quitamos responsabilidad a las imágenes y a nuestro código de css y js, puesto que ya redujimos su peso y comprimimos respectivamente.
Ahora queda un culpable… los script.
Estos suelen detener la carga del sitio, algo que se toma mucho en cuenta en la calificación.
Este punto es muy sencillo tanto en HubSpot CMS como en WordPress; en el caso de HubSpot, en configuración, simplemente debes activar la casilla y ya.
Para WordPress, tienes que cambiar los js al footer manualmente desde el tema o usar un plugin. En la medida de lo posible, es recomendable hacerlo a la plantilla.
Importante: para algunos casos, debes realizar unas modificaciones y añadir retrasos en la ejecución de algunas funciones que usen las librerías, ya que ahora se van a cargar después de que toda la página esté lista.
Una forma de garantizar que todo va a funcionar correctamente es configurar desde un inicio todas las interacciones con las librerías en el footer.
Configurar un CDN
Por último pero no menos importante, está la configuración de un CDN.
Un CDN (Content Delivery Network) es un grupo de servidores instalados en diferentes ubicaciones para brindar contenido web en un área geográfica amplia.
La mayoría de los servidores lo ofrece como parte de sus características o, en algunos casos, con un pago extra.
Puedes usar Cloudflare, que tiene un plan gratuito, y si notas la diferencia en la velocidad, puedes probar con un plan de pago. En WordPress existen plugins para configurar tanto Cloudflare como AWS.
En el caso de Content HubSpot, este no lo necesita, puesto que ya lo tiene configurado de forma nativa.
Pensamientos finales
Por lo general, marketing y ventas son los que se ven impactados si el rendimiento del sitio web baja y más si están ejecutando una estrategia para motores de búsqueda.
No digo que ellos tienen que emprender estas acciones, pero sí deben poner foco y conseguir que se apliquen si la calificación del sitio en cuanto a velocidad no es la óptima.
En ocasiones, incluso puede que sea necesario el rediseño del sitio web. Para saber esto con certeza, valdría la pena evaluarlo en caso de que tengas una puntuación muy baja.
Estos cambios requieren de un mayor esfuerzo, pero el resultado impactará positivamente en las acciones de marketing y ventas que realizas. Se dice que un sitio web es tu principal vendedor, pero para que esto suene más a una realidad que a un sueño, debes dotarlo de lo mejor.
Si tienes un equipo de desarrollo web interno, cuéntame en los comentarios qué puntuación obtuviste y qué acción es la que mejor resultado te dio.
