Cómo mejorar la velocidad de la página: consejos y mejores prácticas.

[DianaGomez]

Rendimiento del sitio web

Crear un sitio web fácil de usar y de carga rápida con el CMS de HubSpot puede parecer un desafío al principio. Sin embargo, con el conocimiento y la orientación adecuados, puedes llegar a ser uno de los mejores. Afortunadamente, HubSpot se encarga de los aspectos más complejos, como la gestión de la CDN y la infraestructura del servidor, para que no tengas que preocuparte por la carga técnica pesada.

Dicho esto, para asegurar que tu sitio web se destaque entre los mejores, necesitarás dominar algunas estrategias clave para optimizar plantillas y rendimiento. La buena noticia es que estos trucos no son difíciles de aprender y pueden marcar una gran diferencia en el rendimiento de tu sitio.

Hoy, compartiré algunos consejos prácticos para abordar los desafíos más comunes que he enfrentado al crear plantillas rápidas y eficientes. Con estos conocimientos, estarás bien preparado para construir un sitio web que deje atrás a tus competidores. 💪

Para optimizar el rendimiento de tu sitio web y crear una experiencia de carga ultrarápida, he dividido mi orientación en algunas secciones clave:

1. Mi regla guía para la optimización de sitios web
2. Carga de archivos
3. Redirecciones
4. Fuentes
5. Imágenes
6. Las herramientas adecuadas para probar

1. Mi regla guía para la optimización de sitios web.

Comencemos con un principio fundamental que supera a la mayoría de las otras "reglas" en la optimización de sitios web:

Menos = Más rápido

Cuanto menos cargues, más rápido será tu sitio web. ¡Es así de simple!

• Si no lo necesitas, no lo cargues.
• Para las imágenes: si no es visible, carga diferida.

Siguiendo esta lógica básica, puedes mejorar drásticamente el rendimiento de tu sitio de inmediato.

Por supuesto, hay excepciones y si estás muy interesado en el rendimiento y la optimización técnica, sabes cuándo este no es el caso. Sin embargo, para la mayoría de los sitios web, la gran mayoría podría mejorar su rendimiento comenzando con este punto de partida.

Ahora, ¡vamos a profundizar en los detalles y comenzar a optimizar!

 

2. Carga de archivos

Para empezar, enfoquémonos en la carga de archivos. Los sitios web, especialmente los construidos en HubSpot CMS, tienden a cargar muchos recursos. Siguiendo mi regla de oro: "no cargues lo que no necesitas", mi principal recomendación para crear un sitio personalizado es comenzar con una base limpia desactivando funciones como:

• Desactivar HubSpot Chat
•  Eliminar todos los formularios
• Desactivar comentarios para los blogs
• Apagar la opción de compartir en redes sociales
• Desactivar Google AMP (¡y no lo vuelvas a activar!)
• Desactivar todas las integraciones de seguimiento

Esto te dará un punto de partida más limpio en HubSpot.

Por supuesto, lograr esto puede ser complicado con un sitio web existente construido con HubSpot CMS. En su lugar, comienza desactivando uno de los elementos anteriores, uno por uno, y observa su impacto en el rendimiento de tu sitio. En muchos casos, notarás algunas mejoras en la velocidad.

Los resultados pueden caer en uno de tres escenarios:

1. Tu sitio web es más rápido, pero necesitas la herramienta.
Lamentablemente, tendrás que dejarla activada, pero explora otros consejos de optimización.
2. Tu sitio web es más rápido y no necesitas la herramienta.
¡Manténla desactivada para siempre!
3. No hay un impacto notable.
Si no necesitas la herramienta, es mejor dejarla desactivada de todos modos.

Con este enfoque, estarás en buen camino hacia un sitio más rápido y eficiente. Nos ponemos un poco más técnicos, así que prepárate y comencemos.

Carga local de archivos

El siguiente paso es un poco más complicado pero crucial para el rendimiento. Cargar archivos localmente en tu sitio web (a menudo técnicamente referido como tu dominio u origen) es a menudo la forma más rápida de acceder a ellos. ¿Qué significa esto?

Imagina que estás en tu cocina y necesitas una espátula para voltear panqueques. Si mantienes la espátula en el cajón de tu cocina, puedes tomarla rápidamente y comenzar a cocinar. Eso es como la carga local: los archivos que necesitas están almacenados cerca, en tu servidor.Pero si no tuvieras la espátula en tu cocina, tendrías que pedirla prestada a la casa de tu vecino. Eso es como cargar archivos desde Internet. Toma más tiempo porque necesitas caminar hasta su casa, pedirla y traerla de vuelta. Y para empeorar las cosas, ¿y si tuvieras que pedir prestada cualquier herramienta porque no tienes ninguna? Eso es mucha caminata.

Implementarlo con HubSpot:

Para poner esto en práctica con HubSpot, siempre que sea posible, descarga un archivo en lugar de enlazarlo desde otro sitio web. Súbelo directamente a HubSpot y enlázalo desde allí. ¡Eso es todo! Esto se aplica a imágenes, scripts, videos, fuentes, básicamente, cualquier cosa que puedas descargar y alojar localmente.

Configurar el dominio de alojamiento de archivos de HubSpot

Para los archivos que subes a través de HubSpot y utilizas en tu sitio web, hay un paso crucial que no querrás pasar por alto. Necesitas configurar el dominio de alojamiento de archivos predeterminado en la URL de tu sitio web.

Para hacer esto, ve a Configuración de HubSpot > Herramientas > Contenidos > Páginas > SEO y arañas. Después de desplazarte un poco, encontrarás la opción "Dominio predeterminado del host del archivo". Asegúrate de seleccionar la URL de tu sitio web para que cualquier archivo que elijas de tu biblioteca use tu dominio.

3. Redirecciones

Aunque esto no es estrictamente un problema técnico, puede afectar significativamente el rendimiento de tu sitio web: las redirecciones. Estas afectan no solo las URL que los visitantes escriben en sus navegadores o a dónde enlazas, sino también los archivos e imágenes que carga tu sitio.

¿Qué es una redirección?

Una redirección ocurre cuando un navegador solicita una URL específica, pero en lugar de servir el contenido solicitado, el servidor le dice al navegador que vaya a una ubicación diferente para encontrarlo.

Piénsalo así: saludas a alguien para llamar su atención y hacerle una pregunta, pero en lugar de responder, esa persona te señala a otra que tiene la información. Ahora tienes que saludar a la segunda persona y comenzar el proceso de nuevo.

Este paso adicional lleva tiempo. Aunque una sola redirección podría no parecer un gran problema, y a veces es necesaria, como cuando se dirige a contenido actualizado, tener múltiples redirecciones puede ralentizar significativamente la carga del contenido. Imagina una cadena de personas señalándose entre sí antes de que finalmente llegues a la correcta. Cada paso añade tiempo al total de carga.

Redirecciones en archivos e imágenes

No se trata solo de las URL que los visitantes escriben en sus navegadores o de a dónde enlazas. Las redirecciones también pueden afectar los archivos e imágenes que carga tu sitio. Si estos recursos dependen de redirecciones, el navegador debe dar pasos adicionales para cada uno, lo que aumenta el tiempo de carga. Cuantas más redirecciones, mayor será el retraso.

Cómo optimizar las redirecciones

Para mejorar el rendimiento, trata de limitar las redirecciones tanto como sea posible:

• Actualiza los enlaces: Asegúrate de que las URL apunten directamente a su destino final en lugar de usar redirecciones desactualizadas o intermedias.
• Simplifica las cadenas de redirecciones: Si hay múltiples redirecciones en fila, actualiza las antiguas para que apunten directamente al destino más nuevo o final. Eliminar pasos innecesarios ahorra tiempo.
• Audita archivos e imágenes: Revisa los recursos que carga tu sitio para asegurarte de que no tengan redirecciones, ya que estas pueden ralentizar los tiempos de carga de la página al igual que las redirecciones de URL.

Al reducir las redirecciones en tu sitio web y para los recursos que carga, puedes mejorar su velocidad y asegurar una experiencia más rápida para los visitantes. Un poco de limpieza puede hacer mucho para mejorar el rendimiento.

Cómo configurar redirecciones en HubSpot

En lugar de escribir una sección detallada, es más simple referirse a la documentación de la base de conocimientos de HubSpot. En resumen, ve a Configuración -> Herramientas->  Contenidos-> Dominios y URL -> Redireccionamiento de URL, donde puedes configurar una nueva redirección para tus páginas.

4. Fuentes

Las fuentes, junto con las imágenes, son a menudo las principales causas de obtener malas calificaciones en los Core Web Vitals. Aquí hay algunos problemas comunes:

• Más fuentes de las necesarias: Seguir la regla de oro, eliminar lo que no usas, es crucial.
• Fuentes cargadas a través de la regla CSS @import: Este método es lento y puede impactar negativamente en tus Core Web Vitals de varias maneras.
• Fuentes cargadas desde fuentes externas como Adobe Fonts (Typekit) o Google Fonts: Es mejor cargarlas localmente, como se explicó anteriormente.

Una vez que tengas tus fuentes listas para cargar localmente, podemos comenzar a optimizarlas.

Si bien hay muchos artículos con guías detalladas sobre cómo cargar las fuentes de la mejor manera, aquí tienes una breve y sencilla descripción de lo que puedes hacer dentro del CMS de HubSpot. La clave es asegurarse de que tus fuentes estén disponibles lo más rápido posible (precarga), estilizadas lo antes posible, y utilizando la configuración correcta de font-display: swap para que el texto permanezca visible incluso mientras la fuente aún se está cargando.

1. Precargar las fuentes: Enlaza las fuentes en el <head> de tu sitio web, lo más alto posible. Dado que las fuentes son cruciales, precárgalas con este código:

<link rel="preload” href="your_font_URL.woff2” as="font” crossorigin="anonymous”/>

Esto ayuda a que las fuentes se carguen de manera óptima, mejorando tanto la apariencia como el rendimiento de tu sitio web.

2. Añade un fragmento de font-face: Este paso asegura que la fuente sea reconocida rápidamente por el CSS, permitiendo que tu página se estilice lo antes posible. En el <head>, agrega un elemento <style> con este código:

css

<style>@font-face {
  font-display: swap;
  font-family: 'Your-Font-Name';
  font-style: normal; /* or your preferred font style */
  font-weight: 400; /* or your preferred font weight */
  src: url('your_font_URL.woff2') format('woff2');
}</style>

Ahora, tu fuente se cargará y se mostrará tan pronto como sea necesaria.

3.  Configura fuentes de respaldo: Para reducir los cambios en el diseño y mejorar la experiencia del usuario, define fuentes de respaldo. Si tu fuente personalizada difiere en tamaño o estilo, la fuente de respaldo asegura menos movimiento cuando se produce el intercambio. En la imagen de abajo se muestran las diferencias en las fuentes, si no igualas el estilo. Esto creará cambios en el diseño (CLS) cuando se cargue la nueva fuente.

Un ejemplo, usamos una fuente Arial ajustada como respaldo para nuestra empresa. Aquí tienes el fragmento de código:

<style>@font-face {

  font-family: 'Adjusted Arial Fallback';

  src: local(Arial);

  size-adjust: 86%;

  ascent-override: 117%;

  descent-override: 32%;

  line-gap-override: 0%;

  font-display: swap;

}</style>

Asegúrate de que esta fuente de respaldo se cargue antes que la fuente personalizada, ¡y estarás listo!

Para hacer algunas combinaciones y ajustes, prueba el comparador de estilos de fuente en línea.

Siguiendo estos pasos, optimizarás la carga de fuentes y mejorarás tu puntuación en los Core Web Vitals.

5. Imágenes

Aquí estamos: imágenes en sitios web. A simple vista, parece simple, pero para optimizar realmente las imágenes para el rendimiento, se vuelve un poco técnico.

Configuración de carga

Como se discutió anteriormente en la sección "Carga de Archivos", ya hemos configurado el dominio de archivos en tu sitio web. ¡Eso es un gran comienzo! Ahora, enfoquémonos en una mentalidad importante que debes tener al construir o gestionar un sitio web:

¿La imagen está en el área visible cuando se carga la página?

• Sí: Configura la carga en eager.
• No: Configura la carga en lazy.

Sé que esto no siempre se adapta perfectamente a todos los casos de uso, pero si estás leyendo esto, probablemente ya sabes cuándo se aplica.

¿Cómo funciona esto?

Cuando se carga una página, el navegador procesa el archivo HTML y lee los enlaces a todos los archivos en la página de arriba hacia abajo. En el caso de las imágenes, si varias imágenes no están en el área visible cuando se carga la página, puede retrasar otras partes importantes del sitio. Dado que el navegador no es lo suficientemente inteligente como para priorizar las imágenes fuera del área visible por sí mismo, podemos ayudarlo ajustando la configuración de "loading". HubSpot ofrece tres opciones para la carga de imágenes: Lazy (diferida), Eager (ansiosa) y Browser Default (predeterminada del navegador).

Al momento de la publicación de este blog, "Browser Default" y "Eager" son lo mismo.

• Eager: Tiene una mayor prioridad y le indica al navegador que cargue la imagen tan pronto como la encuentre.
• Lazy: Carga la imagen solo cuando entra en el área visible, con una prioridad más baja en comparación con otros elementos. Cuando te desplazas cerca de la imagen, se carga lo más rápido posible, pero no afecta la carga inicial.

Entonces, volviendo a mi pregunta: ¿La imagen está en el área visible?

• Sí: Ajústala a eager.
• No: Cárgala de manera lazy.

Revisa tu contenido, asegúrate de que todas las imágenes fuera del área visible estén configuradas para carga diferida, y prepárate para sorprenderte con el aumento de rendimiento.

Puedes encontrar información más detallada en web.dev.

Tamaño de la imágen

Esto es simple: No cargues imágenes más grandes de lo necesario. Si una imagen sólo necesita tener 1000 píxeles de ancho, hazla exactamente de 1000 píxeles de ancho, ni 2000 píxeles, ni 1001 píxeles, sólo 1000 píxeles. Me refiero a las dimensiones reales del archivo de imagen, no a la configuración de "ancho y alto exactos". Cuanto más cercana sea el tamaño de la imagen a lo necesario para el sitio, más rápido podrá cargarla el navegador.

La configuración de "ancho y alto exactos" en el módulo de imagen de HubSpot se utiliza cuando necesitas que una imagen siempre se muestre en un tamaño específico en cualquier dispositivo. Define las dimensiones de la imagen en el navegador y utiliza un conjunto de fuentes para cargar diferentes tamaños en diferentes dispositivos y resoluciones de pantalla.

El navegador elegirá entonces el tamaño de imagen más apropiado, lo que a menudo resulta en una reducción del tamaño del archivo de imagen. Por ejemplo, subí una imagen que pesaba 2.82 MB, pero después de establecer las dimensiones, se redujo a sólo 67.8 KB. ¡Eso es una mejora significativa!

Aquí viene la mejor parte y mi consejo: Nunca establezcas un tamaño fijo. Siempre configura un "tamaño máximo". Esto asegura que la imagen se mantenga responsiva y no se extienda más allá de su tamaño previsto, lo que ayuda a que tu sitio se mantenga flexible sin romperse.

Para optimizar aún más, utiliza herramientas como TinyPNG, Kraken.io o la propia optimización de imágenes de HubSpot para reducir el tamaño de las imágenes y asegurarte de que están configuradas con las dimensiones correctas.

Fetchpriority para tu imagen más importante.

Aquí está el siguiente paso en optimización avanzada que requiere la participación de un desarrollador: el atributo fetchpriority.

El atributo `fetchpriority` básicamente le indica al navegador la importancia de una imagen. Si una imagen es crucial para la carga de la página, puedes configurarla como "high". Si la imagen tiene menor importancia, configúrala como "low". Si no estás seguro, déjalo en "auto" y permite que el navegador lo maneje según su prioridad predeterminada. Establecer una imagen en "high" asegura que se cargue más rápido que otras imágenes o archivos con una prioridad menor. Por defecto, todos los archivos tienen una prioridad de fetch. Para las imágenes, es relativamente sencillo ajustar esta configuración.

¿Cuándo establecer fetchpriority en alta?

Pregúntate: "¿Cuál es la imagen más importante de la página, especialmente la que está por encima del pliegue cuando la página se carga?" Normalmente, es la imagen del Largest Contentful Paint (LCP) la que tiene la mayor prioridad. Establecer la prioridad de fetch de esta imagen en alta acelerará su tiempo de carga y mejorará la experiencia del usuario.

Sin embargo, no apliques una prioridad alta a demasiadas imágenes, ya que esto disminuye la efectividad de esta función. Para la mayoría de las páginas, una imagen con una prioridad de "high" es suficiente. Sigue la regla de oro "si todo es importante, nada lo es". Así que ten cuidado de no exagerar con esta función.

Es importante probar primero el impacto, ya que actuar sin los controles adecuados podría llevar a problemas no intencionados.

Implementación:

Al momento de escribir este blog, esta configuración no está disponible por defecto para las imágenes. Necesitarás un desarrollador para agregarlo en un módulo de imagen personalizado o una configuración adicional en los módulos existentes que te permita controlar la prioridad de fetch.

Precarga de imágenes importantes

Al igual que con las fuentes, podemos precargar imágenes. Si una imagen tiene un alto nivel de prioridad, y estás absolutamente seguro de que debería cargarse primero (de lo contrario, no la configures en "high"), puedes precargarla.

Sin embargo, ten cuidado: precargar una imagen que sea demasiado grande puede afectar el rendimiento en otras partes del sitio. Siempre prueba antes de la implementación final para asegurarte de que no afecte negativamente el rendimiento general.

6. Las herramientas adecuadas para probar

Probar y monitorear el rendimiento del sitio web: Optimizar para los usuarios mejorará los Core Web Vitals

Cuando se trata del rendimiento del sitio web y los Core Web Vitals, las pruebas y el monitoreo son tan cruciales como realizar las optimizaciones.

Recuerda, el objetivo es mejorar la experiencia para tus visitantes, no para ti o para tus partes interesadas. Esto significa depender de datos de campo, experiencias de usuarios reales, para orientar tus mejoras y asegurarte de que estás abordando problemas de rendimiento en el mundo real.

Por qué probar el rendimiento del sitio web es situacional

Las pruebas de rendimiento son esenciales, pero deben realizarse con cuidado. Una sola prueba a veces puede ser engañosa, especialmente si se manipulan para obtener métricas de vanidad o para presumir en las redes sociales.

Aunque tales trucos podrían hacer que tu rendimiento parezca impresionante, la experiencia real de tus usuarios aún podría ser deficiente.

Herramientas para pruebas de rendimiento y monitoreo

PageSpeed Insights (PSI)

PSI es una herramienta sencilla y fácil de usar, que proporciona una visión general del rendimiento utilizando una puntuación del 0 al 100 con indicadores codificados por colores (rojo, amarillo, verde). Si bien esta herramienta es accesible e intuitiva, es importante tener en cuenta que sus resultados a veces pueden ser manipulados, ofreciendo una falsa sensación de rendimiento.

La característica destacada de PSI es su Field Data, que muestra cómo los usuarios reales experimentan tu sitio web. Estos datos son invaluables porque reflejan interacciones de usuarios reales, que es finalmente lo que estás optimizando.

WebPageTest: La herramienta favorita de los profesionales

Para obtener información más detallada, WebPageTest es una herramienta altamente versátil y poderosa. Es mi favorita personal para realizar pruebas únicas y seguimiento de mejoras de rendimiento a lo largo del tiempo.

Lo que hace excepcional a WebPageTest es su capacidad para ofrecer información profunda y accionable a través de informes visuales y resúmenes. Estos destacan lo que ocurre durante el proceso de carga de tu sitio, incluso desglosándolo para usuarios no técnicos.

Características clave incluyen:

• Pruebas en dispositivos, conexiones y ubicaciones específicas.
• Opciones avanzadas como ejecutar scripts personalizados, bloquear dominios específicos o agregar encabezados personalizados.
• Identificar oportunidades para hacer tu sitio más rápido con sugerencias detalladas.

Al comparar pruebas a lo largo del tiempo, puedes medir el verdadero impacto de tus optimizaciones y asegurar la mejora continua.

Monitoreo a largo plazo para Core Web Vitals

La optimización del rendimiento no es una tarea de una sola vez, es un esfuerzo continuo. El monitoreo continuo asegura que tu sitio funcione bien a lo largo del tiempo y te permite detectar problemas antes de que afecten a tus usuarios.

Herramientas gratuitas para monitoreo

Herramientas como treo.sh te permiten analizar tendencias de rendimiento durante 12 meses usando datos de usuarios reales. Estas herramientas te dan una visión clara de tu progreso y resaltan áreas para mejorar.

Herramientas premium para información detallada

Si estás serio sobre el rendimiento, considera invertir en herramientas como RUMVision, SpeedCurve o CoreDash. Estas plataformas proporcionan:

• Perspectivas detalladas sobre los Core Web Vitals a nivel de página.
• Alertas cuando las métricas de rendimiento disminuyen, asegurando una acción rápida.
• Visualizaciones robustas y tableros para el monitoreo diario.
•  Identificación de problemas para URL y elementos.

Estas herramientas no sólo mejoran el rendimiento, sino que pueden impactar directamente tus resultados finales al generar mejores experiencias de usuario, mayor participación e, en última instancia, más ingresos.

La optimización es una maratón, no un sprint

Después de probar e implementar cambios, tu trabajo no termina ahí. La optimización del rendimiento requiere atención continua.

Al usar las herramientas adecuadas y enfocarte en experiencias reales de usuarios, puedes crear un sitio web más rápido y fluido que constantemente ofrece valor a tu audiencia y potencia tu negocio.⭐

*Este contenido ha sido traducido del post original de @Sjardo  para que las personas hispanohablantes también tengan acceso a estos valiosos consejos.

[JuanGomez0818]

@DianaGomez super valioso este contenido, gracias por compartir.