Optimizar tu sitio en CMS Hub para mejorar el rendimiento

Es más fácil construir a partir de una gran base que se construyó con el rendimiento en mente, que tratar de arreglar los problemas de rendimiento más tarde. Una metáfora: construir un coche rápido desde cero, es más fácil que comprar un coche lento y tratar de hacerlo rápido.

La Plantilla de CMS HubSpot fue construida para ser rápida, y fomentar las mejores prácticas. Consulta el Léeme de GitHub para ver las puntuaciones actuales en Lighthouse y evaluador de sitios web.

Cuando se construye a partir de la plantilla repetitiva se sabe que, sin ningún código que hayas agregado, alcanza esas puntuaciones. Eso significa que puedes centrar tu atención en el código que has agregado encima de la plantilla repetitiva. 

La mayoría de las técnicas de optimización del rendimiento web y las mejores prácticas no son específicas de HubSpot. Esto se debe a que la mayoría de los obstáculos del rendimiento del sitio web no son específicos de HubSpot. 

La mayoría de los problemas de rendimiento se dividen en un par de categorías, la renderización y la carga.

• Rendimiento de carga es la eficacia de la transferencia de todos los archivos necesarios para tu página web al navegador del usuario.
• Rendimiento de renderizado es la eficiencia para que el navegador tome todo lo que descargó y muestre el resultado final al usuario.

El rendimiento de la carga es un poco más fácil de entender: la cantidad de archivos, el tamaño de los mismos y la velocidad de entrega de esos archivos determinan el rendimiento de la carga. El rendimiento del renderizado es un tema complicado. Las hojas de estilo en cascada (CSS), el JavaScript (JS), las imágenes, los vídeos, el dispositivo que utiliza el visitante y el navegador que utiliza son factores importantes. CSS bloquea la representación. Un CSS mal escrito puede causar un Desplazamiento de diseño acumulativo (CLS) durante la representación de la página. Las imágenes pueden causar CLS, y ocupan la memoria RAM. Los reproductores de vídeo pueden causar CLS, algunos formatos de archivo requieren más trabajo de procesamiento. JS puede manipular el Modelo de objetos del documento (DOM) y el Modelo de objetos de hoja de estilo en cascada (CSSOM) de una página causando cualquiera de esos problemas. JS también puede consumir muchos recursos. Es necesario equilibrar todos estos factores y seguir las mejores prácticas para garantizar una experiencia rápida a todos los visitantes.

Las imágenes están presentes en casi todas las páginas de la web. Las imágenes suelen ser los archivos más grandes de una página. Cuantas más imágenes, y cuanto más grandes sean, más tiempo tardará en cargarse tu página. Las imágenes animadas, como los gifs y los webp animados, también ocupan más espacio que las imágenes no animadas del mismo tamaño. Algunos formatos de imagen también son más eficaces que otros, y mejores para determinados escenarios.

1. Lo más importante que puedes hacer es optimizar tus imágenes para la web. La optimización de las imágenes es una responsabilidad compartida entre los creadores de contenido y los desarrolladores.
2. Utiliza menos imágenes por página.
3. Utiliza el formato de imagen adecuado para el caso de uso.
4. Utiliza gráficos vectoriales escalables (SVG) siempre que sea posible. Los SVG pueden ampliar su tamaño infinitamente sin perder calidad. Incluir los SVG tiene sentido cuando se hacen animaciones. En los gráficos estáticos, crear una hoja de sprite SVG o simplemente tratarla como un elemento img normal, o una imagen de fondo suele ser mejor para el rendimiento.
5. Carga diferida inteligente de imágenes.
6. Asegúrate de que los elementos img contienen atributos HTML de altura y anchura. Esto hace que sea más fácil para los navegadores durante el tiempo de renderización y también hace que HubSpot pueda agregar inteligentemente un srcset para ti. HubSpot no sólo ayuda a optimizar, sino que los navegadores web pueden optimizar de forma inteligente el cambio de diseño acumulado cuando se proporciona la anchura y la altura. 
7. Utiliza la propiedad CSS aspect-ratio para reservar espacio cuando las dimensiones del img puedan cambiar.
8. Utiliza resize_image_url para forzar el cambio de tamaño de las imágenes a una resolución determinada.
9. Para las imágenes de fondo, utiliza las consultas de medios en combinación con resize_image_url para entregar imágenes en tamaños que tengan sentido para el dispositivo.
10. Para las imágenes hero de gran tamaño, puedes precargarlas utilizando <link rel="preload" as="image" href="http://example.com/img_url.jpg"> dentro de una etiqueta require_head. Utiliza esta técnica con moderación, ya que su uso excesivo puede perjudicar el rendimiento.

Los fondos de vídeo y los vídeos que se reproducen automáticamente pueden marcar la diferencia en un sitio web. Por desgracia, tienen un costo. Los fondos de vídeo se utilizan a menudo para los encabezados de los sitios web. Cuando un vídeo se reproduce automáticamente, significa que el navegador tiene que empezar a cargar el vídeo de inmediato. Esto puede ser especialmente problemático para los usuarios con conexiones más lentas o que utilizan los datos del teléfono móvil

1. Evita el uso de vídeos de reproducción automática. Si lo que muestras es una animación de fondo, considera utilizar animaciones CSS o animaciones javascript. Si debes mostrar un vídeo de reproducción automática:
2. Elige una resolución razonable para el vídeo en función de tu caso de uso, y aplica un efecto sobre el vídeo para que se note menos una resolución más baja.
3. Asegúrate de que la calidad del vídeo se adapte al dispositivo y a la conexión; la mejor manera de hacerlo es utilizando un servicio de alojamiento/compartición de vídeos como YouTube, Vidyard o Vimeo.
4. Desactiva la reproducción automática en el móvil, muestra en cambio una imagen de reserva.

JavaScript (JS) es útil para agregar interactividad a tu sitio web. Cargar mucho código JS en general aumenta el tamaño de los archivos JS y el tiempo que tarda el navegador en renderizar los elementos interactivos. La carga de JS en <head> también puede ser un problema ya que javaScript es recurso de bloqueo de renderización por opción predeterminada. Además, JS se ejecuta en el dispositivo de los visitantes, lo que significa que está limitado a los recursos que tiene ese dispositivo.

1. Cuando el CMS de HubSpot salió por primera vez, jQuery se cargó en el <head> por opción predeterminada. Puedes eliminarlo por completo en Configuración > Página web > Páginas, o actualizar a la última versión de jQuery. Ten cuidado al cambiar estas configuraciones en sitios web antiguos si no los construiste, ya que pueden haber sido construidos dependiendo de jQuery o basados en la carga de jQuery en el encabezado.
2. Asegúrate de que javascript se cargue justo antes de </body> para evitar el bloqueo de procesamiento. Puedes usar require_js para cargar js para módulos o plantillas sólo cuando sea necesario y sin cargar accidentalmente el javascript varias veces para múltiples instancias de un módulo.
3. Considera la posibilidad de refactorizar tu JS para que sea más eficiente. Usa menos plugins JS, usa HTML semántico donde pueda ayudar. Por ejemplo, para los elementos desplegables, utiliza <details> y <summary>. Para los modales utiliza <dialog>.
4. Si estás usando una biblioteca JS gigante sólo para unas pocas funciones pequeñas, considera usar Vanilla JS o cargar un subconjunto de la biblioteca si es posible.
5. Utiliza require_js para cargar JS sólo cuando sea necesario y sólo una vez por página. Cuando utilizas require_js, utiliza los atributos async o defer para mejorar el rendimiento de la página.
6. Para controlar dónde y cuándo se carga el JavaScript de un módulo, utiliza js_render_options en el archivo meta.json del módulo.
7. Si se cargan recursos externos, utiliza preconnect y DNS prefetch adecuadamente para ofrecer una experiencia más rápida.
8. Limita el número de scripts de seguimiento que utilizas. Las secuencias de comandos de seguimiento a menudo intentan comprender todas las acciones que un usuario realiza en una página para proporcionarle información. Eso es mucho código que analiza lo que el usuario está haciendo. Cada guión de seguimiento lo amplía.

La mayoría de las mejores prácticas de rendimiento/velocidad no son específicas de HubSpot. El CMS de HubSpot maneja automáticamente muchos problemas de rendimiento comunes para ti. Estas dimensiones incluyen:

• CDN con optimización de imágenes y conversión automática a WebP
• HTTP2
• Javascript y la minificación de CSS
• Almacenamiento en caché del navegador y del servidor
• Prerenderizado
• Reescritura de dominios
• Compresión Brotli (con retroceso a la compresión GZIP)
• Las publicaciones de HubSpot Blog son compatibles con AMP

Al incluir CSS en un módulo personalizado, HubSpot carga de forma inteligente module.css sólo cuando se utiliza un módulo en una página, y sólo lo carga una vez independientemente de cuántas instancias del módulo haya en la página. Por opción predeterminada, module.css no se carga de forma asíncrona, pero puedes cambiar esto incluyendo css_render_options en el archivo meta.json del módulo.

Hay muchas cosas que se pueden hacer para optimizar la velocidad de un sitio web y muchos de los temas merecen un análisis más detallado. Hemos recopilado algunos recursos excelentes que te animamos a consultar cuando trabajes en la optimización de tu sitio.

• Velocidad y rendimiento del sitio: qué puedes hacer y cómo te ayuda HubSpot
• Cómo mejoramos la velocidad de la página en HubSpot.com
• 15 consejos para acelerar tu sitio web
• 5 formas sencillas de reducir el tiempo de carga de tu página web
• Guía de 8 pasos para conseguir el 100% de velocidad de la página de Google
• Optimización del sitio web - HubSpot Academy
• Web.dev
• Cómo optimizamos el CMS de HubSpot - Jeff Boulter
• El humilde elemento img y Core Web Vitals - Smashing Magazine

Hay muchas herramientas que se pueden utilizar tanto para mejorar el rendimiento como para probarlo. Es útil tanto entender estas herramientas como utilizarlas. Esta lista no es exhaustiva ni mucho menos, y procede de nuestra comunidad de desarrolladores.

Optimizar las imágenes para la web antes de subirlas y publicarlas ayuda a garantizar que no se publicará una imagen demasiado grande para la pantalla y el caso de uso. 

Herramientas populares de optimización de imágenes:

• ImageOptim
• Adobe Photoshop
• Adobe Illustrator
• Optimizilla

Probar el rendimiento y optimizarlo debería ser parte de la construcción de cualquier sitio web. Hay una gran cantidad de herramientas disponibles para probar la velocidad de un sitio web. Es importante entender estas herramientas y su funcionamiento, para poder tomar decisiones informadas sobre las mejoras de rendimiento.

Algunas herramientas miden estrictamente, otras clasifican. Es importante entender cómo funciona esto realmente.

Las herramientas que miden, suelen probar el tiempo de carga, el tiempo de ejecución de los scripts, el tiempo hasta la primera pintura con contenido, los tiempos de red para la descarga de activos, etc. Estas herramientas suelen proporcionar resultados que indican tiempos específicos para cada una de estas métricas. Si vuelves a hacer la prueba, generalmente las mediciones cambiarán ligeramente porque no todas las cargas de páginas son exactamente iguales. 

Las herramientas que califican, no sólo miden la velocidad, sino que te dicen si lo estás haciendo bien o mal, a menudo utilizando un porcentaje o una letra de calificación. Estas calificaciones pretenden ser una herramienta para motivar a los desarrolladores y profesionales de marketing a mejorar. Hay muchas métricas y aspectos diferentes del rendimiento que hay que tener en cuenta. No se puede basar el rendimiento global en una sola métrica, y además algunas métricas tienen diferentes niveles de afectación en el rendimiento percibido. Así que estas herramientas ponderan las métricas de forma diferente para calcular el rendimiento global. No existe ninguna norma en el sector sobre cómo ponderar las métricas. Con el tiempo esta ponderación puede cambiar, como ha ocurrido con Google PageSpeed. Tampoco existe una aceptación generalizada en el sector de lo que se considera el valor mínimo o máximo "bueno" para las métricas individuales. Algunas herramientas se basan en un percentil de sitios web que han sido probados. Lo que significa que tus resultados se comparan con los de otros sitios que fueron probados. El resultado es que el rango de velocidad "buena/excelente" es cada vez más difícil de alcanzar con el tiempo. En cambio, algunas herramientas utilizan la experiencia del usuario, la retención de visitantes y la investigación basada en el ROI para determinar cuál debe ser el umbral de una buena puntuación. También hay que tener en cuenta que no todas las herramientas tienen en cuenta el rendimiento de la carga posterior de la página. Por ejemplo, el sistema de módulos de HubSpot separa el css y el JS para los módulos individuales, y sólo carga esos materiales cuando el módulo se coloca realmente en la página. Esto puede resultar en varios archivos css más pequeños, que podrían ser marcados por Google PageSpeed Insights. Sin embargo, la realidad es que en la próxima carga de la página, no necesitarás descargar ningún css o js para los módulos que se repiten en la siguiente página: se almacenarán en la caché. En cambio, sólo tendrás que descargar los archivos de los módulos que no hayas visto antes, y que serían kilobytes, en lugar de un archivo monolítico.

Cuando se trata de herramientas calificadas, debes utilizar varias herramientas y esforzarte por obtener la mejor puntuación que puedas en cada una de ellas. Pero hay que entender que ellos ponderan las cosas de manera diferente. Los esfuerzos que pueden mejorar una puntuación en una herramienta pueden no mejorarla en otras.

Herramientas populares de pruebas de rendimiento:

• Website Grader
• GTMetrix
• Google PageSpeed Insights y otras Herramientas de rendimiento de Google.
• Pingdom
• WebPageTest

Relacionado:

• Cómo funciona la puntuación de rendimiento de Lighthouse
• Hoja de ruta para la optimización de sitios web (Core Web Vitals) | Mark Ryba