HubSpot CMS: Cómo de forma nativa mejora el rendimiento y velocidad de tu Sitio Web (+Bonus)

Existen múltiples CMS; unos buenos para uno y otros no tanto, pero de lo que hoy quiero hablarte es de las funciones que trae el CMS de HubSpot, el cual te ayuda a que tu sitio web tenga todas las prestaciones de clase Enterprise a un precio de $300 USD al mes.

Sé que algunos pensarán que esto es muy elevado, pero según una guía de Amazon, montar un sitio web en WordPress supone un costo de $450 USD si se hace siguiendo las recomendaciones mínimas que Amazon recomienda para la instalación de WordPress en AWS. Aquí te dejo la guía.

Después de lo aclarado, veamos qué te da en cuanto a rendimiento y velocidad. Si ya las tienes activadas en tu cuenta de HubSpot, muy bien, pero si aún no lo haces, te recomiendo que las pongas en práctica.

Empecemos.

1. Seguridad de alto nivel (SSL y otras opciones)

Un SSL es lo que todo sitio web debe tener, ya que hace un par de años Google mencionó que sería un factor más de posicionamiento web.

Además, el navegador más usado (Chrome) muestra un mensaje de No Seguro cuando la página no tiene activo un SSL o cuando la dirección no es https.

Un SSL, en palabras simples, lo que hace es enviar toda la información de forma segura mediante una encriptación, lo que impide que hackers informáticos puedan acceder a datos como tarjeta de crédito o datos personales.

Un SSL se añade a un dominio mediante la carga de un certificado en el servidor.

Existen múltiples certificados, desde gratuitos soportados y apoyados por Google como de pago, que incluyen un seguro en caso de que exista robo de información.

¿Cómo instalar el SSL en tu sitio alojado en HubSpot?

HubSpot incluye sin costo un certificado gratuito en todos los productos que requieren un subdominio para funcionar, como son los productos de Marketing Hub y el CMS.

No importa si tu licencia incluye 2 o 3 sub-dominios, en todos puedes activar el SSL sin costo.

Una vez que conectas tus subdominios, únicamente debes esperar a que el SSL se configure. Cuando esa configuración está lista, únicamente seleccionas forzar SSL y listo.

Existen otras opciones de seguridad, pero debes consultar a tu equipo de TI o seguridad si es necesario activarlas.

En caso de que requieras cargar un certificado especial, puedes hacerlo contratando el servicio de SSL Personalizado en HubSpot que tiene un costo de $100 USD mensuales.

2. Archivos CSS combinados y JS minimizados

Cuando se trata de aumentar la velocidad de una página, los elementos que entran en juego son los estilos CSS, los scripts JS y la estructura HTML de la página.

Existen muchas herramientas en línea y plugins para WordPress que hacen que esta tarea sea relativamente sencilla.

CSS minify

CSS unminify

En el caso de HubSpot, no debes preocuparte por nada de esto.

HubSpot combinará todas las hojas de estilo en una sola, además de optimizarlo para reducir el tamaño. Todos los comentarios, espacios y elementos no esenciales que estén en tus hojas de estilo serán eliminados.

Lo mismo va a pasar con todos los archivos JS que contienen los scripts para algunas funciones de tu sitio.

Asimismo, todo el HTML es reducido para que el peso sea el menor posible.

Ahora bien, una ventaja que tiene HubSpot es que después de combinar y comprimir, realiza una prueba para verificar que la apariencia del sitio es idéntica a cuando no estaban combinados ni optimizados los archivos.

En caso de que exista una variación, reducirá el nivel de compresión.

Todo esto sucede de forma automática y sin necesidad de configurar nada. Todo funciona tras bambalinas para que la mejor configuración se coloque y tu sitio web sea veloz y se vea como debe ser.

Algo que debes tomar en consideración aquí es que el algoritmo de compresión que usa HubSpot es Brotli (algoritmo de Google), mismo que se encuentra implementado en las versiones más nuevas de los navegadores Chrome y Firefox.

¿Qué tiene de bueno ese algoritmo que brinda mejor compresión que gzip, usado en la mayoría de plugins de Wordpress o compresores en línea?

Estos son un par de datos comparativos:

• Los archivos Javascript comprimidos con Brotli son un 14% más pequeños que gzip
• Los archivos HTML son un 21% más pequeños con Brotli
• Los archivos CSS son un 17% más pequeños con Brotli

3. Almacenamiento de caché de las páginas

Cuando un usuario visita un sitio web, este debe solicitar toda la información al servidor para que la página consultada sea representada de forma completa.

Ahora bien, si visitas otra página del mismo sitio web, pasará lo mismo: se solicita información al servidor.

Pero en un sitio web existen elementos que se van a usar en todo el sitio web; por ejemplo, el logo, el menú, el pie de página con todos los iconos y elementos que contenga, además de archivos para representar el sitio como con CSS y JS.

De forma automática, HubSpot almacena en caché todos los recursos que solicitó, para que cuando el usuario visite nuevamente la página u otras páginas subsecuentes, esta se cargue mucho más rápido. 

Hay un detalle que debes considerar con esta característica cuando estás realizando ajustes a tu sitio web.

En ocasiones, no te va a mostrar los cambios porque, cuando existe una nueva versión, el cambio se refleja después de 2 o 5 minutos.

Pero no pasa nada. Para ver los cambios de forma más rápida, basta con que a la URL en vivo de tu sitio web que quieras ver le añadas lo siguiente ?nocache1; en caso de que realices varios ajustes, cambia el número y listo.

Quedaría algo como esto https://m-s.co?nocache1

4. Compresión de imágenes

Las imágenes son un elemento que ayuda a brindar más contexto a los visitantes de un sitio web, pero en ocasiones más que ayudar, suelen perjudicar.

La razón es que el archivo de la imagen es muy pesado o las dimensiones son mucho más grandes que el espacio que ocupa.

Antes de mencionar un par de formas de reducir el peso, es importante considerar las necesidades de nuestro cliente ideal.

Existen casos donde por la industria, la calidad y el tamaño de las imágenes se agradecerá que sean de lo mejor.

Hablo de estudio de fotografía, página de portafolio, página de galería de producto, etc.

Tampoco se trata de abusar y subir imágenes muy muy pesadas.

Veamos entonces cómo HubSpot nos ayuda en este tema.

Una imagen que tenga un ancho máximo de 1920 px es ideal. Esto, considerando los bloques como encabezados.

El peso ideal varía, pero sugiero que no pase de los 170 kb.

Cuando cargas las imágenes a Files en HubSpot, suceden varias cosas que hacen que el archivo se reduzca de forma automática.

Todas las imágenes contienen información conocida como metadatos. Esta información ocupa un espacio y, para reducir el tamaño, HubSpot elimina todos los datos no necesarios que contiene la imagen.

Otra compresión sucede cuando colocas una imagen en algún espacio ya en tu plantilla de sitio web, blog o landing page. Si la imagen tiene un tamaño específico, HubSpot ajustará la imagen almacenada para reducir aún más el peso.

Esos procesos se dan de forma automática. Ahora bien si deseas reducir aún más el peso, cuando seleccionas la imagen, puedes elegir un nivel más fuerte de compresión o, bien, que no se realice ninguna compresión.

Bonus: Retrasa la carga de tus imágenes no visibles

Esta función no es automática, pero te daré todos los elementos que necesitas para implementarlo en tu sitio web y hacer que la velocidad aumente.

Primero, vamos a entender a qué se refiere retrasar la carga de las imágenes no visibles.

Por lo general, un sitio web suele ser muy largo, debido a que en la actualidad hacer scroll no es algo malo, sino todo lo contrario.

Entonces, supongamos que tu página tiene 8 bloques, y en cada uno de ellos existen imágenes; por lo general, el usuario únicamente va a visualizar el primero y segundo bloque.

Pero el hecho de que únicamente visualice dos no impide que los otros 6 que aún no son visibles para él se carguen, haciendo más tardado el tiempo de carga de la página.

Entonces, mediante un script llamado lazy lo que haces es no cargar las imágenes de los bloques que aún no se ven. Así, a medida que el usuario va haciendo scroll y están por aparecer los bloques con imágenes, estas se cargan y muestran.

Aquí hay un ejemplo de una página que funciona así: Servicio de Posicionamiento Web

Puede que sí mueves muy rápido el scroll notes como las imágenes van apareciendo.

Veamos entonces cómo lo puedes aplicar

Lo que vas a necesitas es lo siguiente:

El archivo JS que lo descargas aquí. Ya que lo descargues, puedes hacer referencia en tu plantilla o bien copiar y pegar en un JS que esté en HubSpot.

Modificar tus bloques de imagen: únicamente tienes que crear un módulo personalizado para que las imágenes se carguen diferidas. El módulo quedaría así:

Los valores dinámicos del módulo no se muestran en el código, por lo que debes añadir el valor y asegurarte de incluir la clase lazy y en lugar de src para la imagen debes colocar data-src.

<img class="lazy" data-src="{{ module.box.image.src }}" alt="{{ module.box.image.alt }}">

Añades una propiedad que sería image y ya con el código anterior podrías hacer referencia. La activación de lazy es añadiendo la clase lazy.

Lo siguiente es añadir en un JS, que tengas de forma global, lo siguiente:

$(function() {
   $('.lazy').lazy();
});

La plantilla que tenga imagen en lugar de bloque de imagen tendrá tu módulo personalizado que funcionará para mostrar la imagen, pero se retrasará según la posición donde se encuentre en la página.

Al final, tu plantilla nada más debe tener el módulo personalizado; la imagen es referencia. (El icono se puede personalizar pero no es necesario).

Antes de que actualices tu plantilla, debes saber que todas las imágenes se deben volver a colocar desde el editor de páginas.

Si consideras que es muy complicado, puedes activar lazy en hasta 5 plantillas y 10 páginas por $100 USD

Conclusión

HubSpot CMS es una herramienta que te ayuda quitándote tareas engorrosas, pero sin limitar tu creatividad. Puede que seas un gerente de marketing que desee publicar una nueva pieza de contenido y eso es posible de forma rápida.

Pero también si eres un desarrollador avanzado, puedes crear muchas cosas espectaculares sin que tu creatividad se vea limitada.

{{cta('41b9a377-4f45-4d6f-891c-fdbfddb02baa')}}