¿Alguna vez has notado que tu computadora se vuelve más lenta después de dos años? Lo mismo les sucede a todos los sitios web.
Incluso los sitios de Webflow pueden ralentizarse a medida que añades más scripts personalizados, fuentes, animaciones y el "lastre" general.
La velocidad de un sitio web afecta muchas cosas, incluyendo la experiencia del usuario, las tasas de conversión e incluso el posicionamiento en Google. Por ejemplo, un estudio de 2022 reveló que los sitios de comercio electrónico con mayores tasas de conversión tienen tiempos de carga de entre 0 y 2 segundos, y que estas tasas caen constantemente por cada segundo adicional de carga.
Además, la actualización del algoritmo Core Web Vitals de Google de 2021 incluyó la velocidad del sitio web entre sus factores de posicionamiento, lo que significa que tiempos de carga más lentos podrían desplazar tu contenido hacia abajo en los resultados de búsqueda.
Un rendimiento sólido es fundamental, y la plataforma que elijas para construir tu sitio puede hacer que mantener ese rendimiento sea más fácil o más difícil. Como profesional del marketing, diseñador web, desarrollador y emprendedor, he creado innumerables sitios en muchísimas plataformas. Tras experimentar con diferentes opciones, he descubierto que Webflow es la mejor solución para ofrecer (y mantener) un gran rendimiento.
Si ya conoces los beneficios de rendimiento de Webflow, salta directamente a los consejos para potenciar la velocidad al máximo.
Cómo logra Webflow el mejor rendimiento de sitio
Cuando llegó el momento de mi proyecto más reciente, DoorLoop, buscaba una plataforma CMS que me facilitara la vida y me evitara pasar cientos de horas lidiando con temas y plugins obsoletos, malware, seguridad y problemas de servidor.
Lo que me atrajo de Webflow fue la capacidad de crear cientos de páginas de destino con un solo clic importando una hoja de cálculo de Google mediante colecciones CMS, la facilidad de uso del Diseñador, las copias de seguridad automatizadas y, por supuesto, la extensa colección de plantillas gratuitas en el escaparate de elementos clonables.
Webflow fue también una de las pocas opciones diseñadas pensando en la velocidad, gracias a su alojamiento increíblemente rápido y a puntos fuertes como:
- Sin código innecesario. El código de Webflow es extremadamente limpio y está bien optimizado.
- Sin complementos excesivos. Webflow no ofrece plugins que añadan cientos de líneas de código a un sitio web. No hay hojas de estilo CSS interminables ni JavaScript que bloquee el renderizado de los que preocuparse. Si ejecutas una prueba de velocidad en una página en blanco de Webflow, obtienes una puntuación del 100% siempre. Esto es notable, ya que incluso las páginas en blanco en plataformas competidoras difícilmente superan el 85%.
- Servidores turboalimentados. Webflow gestiona todo su alojamiento con una red de distribución de contenido de Nivel 1: Amazon Cloudfront y Fastly. Esto elimina cualquier problema o dolor de cabeza relacionado con la gestión y el mantenimiento de tus propios servidores, el tiempo de inactividad o los altos costos de servidor.
Estos elementos se combinan para ofrecer un constructor de sitios web creado pensando no solo en los desarrolladores, sino también en la experiencia del usuario final. El enfoque de Webflow para la creación web era prometedor y, hasta ahora, la plataforma definitivamente ha cumplido.
Crea sitios web que dan resultados.
Diseña visualmente, publica al instante y escala de forma segura y rápida. Todo con la plataforma de marketing web con IA de Webflow.
Cómo mantener un rendimiento óptimo a medida que el sitio web crece
Para ofrecer continuamente la experiencia de usuario más rápida y efectiva posible, se requiere realizar muchas pruebas A/B e investigación práctica. Por suerte para ti, hemos dedicado cientos de horas a descifrar esto y lo compartimos todo aquí.
1. Evita los scripts de terceros
Cualquier script de terceros, chatbot o script de seguimiento afectará gravemente tu puntuación de rendimiento; el LCP y el FID aumentan drásticamente con los scripts que bloquean el renderizado. La clave para evitar que esto suceda es impedir que todos los scripts se carguen de inmediato.
Esto te permite hacer que tu página cargue más rápido para las pruebas de velocidad sin afectar la experiencia del usuario. En los segundos que les tomará interactuar con cualquier chatbot o script de terceros en tu sitio, estos ya estarán completamente cargados.
2. Retrasa scripts con Google Tag Manager
Si no estás familiarizado con Google Tag Manager, definitivamente vale la pena aprender a usarlo. Te permite subir y gestionar etiquetas de toda la web para múltiples propósitos, incluyendo:
- Seguimiento de eventos de conversión
- Analítica del sitio
- Remarketing
Puedes implementar estas etiquetas basándote en reglas que tú mismo definas. Por ejemplo, puedes configurarlo para que solo cargue scripts de conversión en las páginas de pago o de confirmación.
Google Tag Manager se puede usar para implementar un retraso masivo en el tiempo de carga de todas las etiquetas de tu sitio web hasta 6 segundos después de la carga inicial de la página (ver instrucciones), o puedes retrasar cada etiqueta individualmente si quieres asignarles tiempos de carga diferentes.
A veces, existen soluciones alternativas para obtener la funcionalidad que necesitas en tu sitio web sin tener que cargar un script de terceros. Busca siempre en Google el script que estás cargando para ver si hay una forma más rápida de hacerlo.
Consejo avanzado: También puedes diferir todos los scripts en lugar de usar async.
3. Usa carga selectiva para móvil frente a escritorio
Dado que los sitios web móviles suelen ser más lentos que los de escritorio desde el principio, es una buena idea cargar ciertos scripts solo en la versión de escritorio de tu sitio web. Google también te clasifica basándose en la versión móvil de tu sitio.
Como regla general, utiliza la menor cantidad posible de scripts o efectos llamativos en tu sitio web, ya sea en la versión móvil o en la de escritorio.
4. Optimiza y comprime tus imágenes
Las imágenes de tu sitio web pueden desempeñar un papel fundamental en su rendimiento, especialmente a medida que se añaden más con el tiempo. Al implementar algunos pasos de optimización de imágenes, podrás preparar tu sitio web para el éxito a largo plazo:
Asegúrate de comprimir todas las imágenes usando tu plataforma de compresión de imágenes preferida (nos gusta Image Compressor para PNG y JPG). Los tamaños de imagen más pequeños son excelentes para el rendimiento del sitio web porque cargan más rápido que las imágenes grandes. Solo ten cuidado con la calidad de la imagen: no querrás reducir tanto el tamaño que tus imágenes se vean pixeladas.
Además, también puedes convertir tus imágenes a WebP, que es un formato de archivo de imagen más pequeño y compacto que te permite ofrecer imágenes de alta calidad. Webflow incluso te permite convertir cualquier imagen existente en Webflow directamente a WebP a través de su herramienta de conversión WebP.
5. Carga diferida (lazy load) de imágenes
La carga diferida es el proceso de cargar imágenes en tu sitio web cuando el usuario llega a ellas al hacer scroll, en lugar de hacerlo de inmediato. Al igual que el truco que mencioné antes con los retrasos de scripts, esto permite que tu sitio web cargue más rápido sin afectar la interfaz o la experiencia del usuario.
Uno de los beneficios de la carga diferida es que te permite optimizar tus imágenes para pantallas retina, logrando imágenes más grandes sin afectar la velocidad del sitio web.
Desde agosto de 2020, Webflow ha configurado todas las imágenes nuevas para que tengan carga diferida por defecto. Puedes comprobar si tus imágenes se están cargando de forma diferida haciendo clic en la imagen, yendo al panel de Configuración de Elementos a la derecha y asegurándote de que "Load" esté configurado en "Lazy".
6. Usa archivos SVG
Siempre que sea posible, utiliza imágenes SVG en lugar de JPG o PNG. Los archivos SVG suelen ser mucho más ligeros y ofrecen la mayor calidad posible. No olvides:
- Optimizar tus SVG asegurándote de que todos tengan el mismo tamaño (por ejemplo, 72x72). Esto reduce la cantidad de clases combinadas necesarias para cambiar su tamaño, lo que a su vez disminuye las líneas de código en tus hojas de estilo en cascada (CSS).
- Pasar todas tus imágenes SVG por un compresor, como este.
Consejo avanzado: Si tienes muchas imágenes SVG en la cabecera principal de tu sitio, normalmente se cargarán de inmediato porque el usuario necesita verlas (en lugar de aplicarles carga diferida o lazy loading).
La solución es:
- Añadir un código incrustado (embed) donde quieras colocar la imagen.
- Insertar el código SVG dentro de ese elemento.
- Si se trata de un icono, define el color en el código SVG usando currentColor. Crea una muestra de color para tus iconos y selecciónala. Ahora, cada vez que quieras cambiar TODOS los colores de los iconos en tu sitio, solo tendrás que cambiar el color de esa muestra.
7. Reduce o elimina tus fuentes
Evita cargar demasiadas fuentes diferentes en cada página. Cada fuente y cada peso supone una nueva solicitud al servidor, lo que inevitablemente ralentiza todo lo demás. Aquí tienes un ejemplo de un sitio con muchas fuentes, e incluso fuentes duplicadas, que genera 12 solicitudes al servidor:
Si tu objetivo principal es la velocidad de carga, elimina todas las fuentes y utiliza únicamente "system-UI". Esto no carga ninguna fuente externa, sino que simplemente utiliza la fuente predeterminada del dispositivo desde el que se visita tu sitio. Por ejemplo, Segoe UI para Windows, Roboto para teléfonos Android, San Francisco o Blink para Mac, y Helvetica Neue como fuente de respaldo predeterminada.
Hacerlo es sencillo: inicia sesión en el Diseñador de Webflow, haz clic en el icono "Navigator" a la izquierda, selecciona "Body" en la parte superior, ve a la parte superior derecha de los estilos de Body, selecciona una clase y elige Body (All Pages). Luego, cambia la fuente a la derecha (bajo Typography) a system-ui.
Esto ahorra muchísimo tiempo. Por ejemplo, si usas una fuente de Google, cambiar a una fuente system-UI te ahorrará un buen puñado de solicitudes a los servidores de Google.
Como una fuente system-UI hace innecesaria la carga y el renderizado de fuentes, también garantiza que el texto aparezca al instante en tus páginas, ahorrándote segundos cruciales. Esto ayuda a maximizar las puntuaciones de FID y CLS en el informe de métricas web esenciales (Core Web Vitals) de tu sitio.
8. Evita la precarga (preloads)
La precarga es una directiva interna para el navegador que le indica que cargue otra página antes de que el usuario haga clic en ella. Por ejemplo, si el 90% de tus visitantes van a tu página de precios desde la página de inicio, puedes precargarla para que se abra al instante.
Esto afecta a la velocidad del sitio, ya que tiene que cargar dos páginas: la en la que estás y la siguiente. Si actualmente usas precarga, considera desactivarla para obtener el máximo rendimiento.
Nota: la precarga está desactivada por defecto para todos los enlaces en Webflow.
Prueba, prueba y vuelve a probar
Para potenciar al máximo el rendimiento de tu sitio en Webflow, lo más importante es probar su velocidad antes y después de hacer cualquier cambio. Si crees que algo ayudará a que tu web cargue más rápido, añádelo y pruébalo. Si sospechas que algo la ralentiza, quítalo y vuelve a probar.
Para empezar a medir la velocidad de tu página, echa un vistazo a estas herramientas:
Las pruebas son la única forma infalible de asegurar que tus cambios mejoran el rendimiento de tu web. Te permiten detectar problemas a tiempo y cortarlos de raíz, además de implementar mejoras que realmente marcan la diferencia.
