Webflow es una gran herramienta para ahorrar muchísimo tiempo al momento del desarrollo de una página web. Nos da tanta libertad que la velocidad de carga de nuestra página web se puede ver afectada. ¿Sabes que tan rápidas pueden ser las páginas de Webflow? o ¿Cómo mantener tu sitio web optimizado?

‍

La velocidad y rendimiento de tu sitio web es muy importante si quieres mejorar el posicionamiento de tu sitio web (entre otros factores que afectan el SEO) en los diferentes motores de búsqueda. Por ello, es crucial que no pierdas de vista este factor al momento de desarrollar tu plataforma web.

‍

¿Cómo mido la velocidad de mi sitio web?

La velocidad de las páginas web se puede medir con con tu propio navegador con las herramientas de desarrollador que vienen integradas, pero es un poco complicado si no tienes mucho conocimiento sobre las métricas. ¡Pero no te preocupes! Hoy en día existen diversas herramientas que existen en internet para medir de forma rápida y visual la velocidad de tu sitio web.

‍

La más popular es PageSpeed Insights de Google que ofrece resultados en cuestión de segundos y, además, ofrece tips y consejos para mejorar la velocidad de tu sitio web, así como recursos informativos para aprender más sobre las métricas.

‍

La forma en que las herramientas online miden la velocidad de las páginas web varía dependiendo de la herramienta ya que utilizan distintos algoritmos y consideran factores diferentes (pero similares) para realizar el análisis. Por esto, puedes obtener diversos resultados dependiendo de la herramienta que estés utilizando.

‍

PageSpeed Insights te ofrece un cálculo del rendimiento de tu sitio web cuando se accede en una computadora y cuando se accede en un móvil, lo que te permite tener un mayor panorama del rendimiento global de tu página web.

‍

¡Cuidado! Los resultados de estas pruebas no son 100% confiables y absolutos. El resultado puede variar dependiendo de la conexión a internet de los servidores de PageSpeed. Te recomendamos realizar varias pruebas y hacer un promedio de estas pruebas o tomar el valor más alto que obtengas.

‍

El contenido gestionado y administrado por Webflow

En Webflow, tenemos cierto contenido de nuestro sitio web que es manejado y proporcionado únicamente por Webflow, como las hojas de estilo CSS, el código de las animaciones, el código de las interacciones, o el código para hacer funcionar tu e-commerce o tu CMS.

‍

Nostros no tenemos control sobre estos códigos que están escritos para funcionar en navegadores modernos y en navegadores antiguos. Sin embargo, esto tiene una desventaja y es que esto hace que el código sea más largo, lento y, por ende, la carga sea más lenta. ¡Pero tranquilo! La velocidad del sitio web sigue siendo muy óptima.

‍

Impacto en el sitio web

El hecho de que Webflow gestione gran parte del contenido que le da funcionalidad al sitio web nos permite ahorrar mucho tiempo en el desarrollo de nuestra página, sin embargo, también nos quita la posibilidad de realizar mejoras de código o de estructuración.

‍

Una de estas posibilidades es el de optimizar las deficiencias que el código de Webflow puede presentar. Aunque las páginas web desarrolladas en Webflow están muy bien optimizadas para mostrarse en el ordenador, estas deficiencias tienen un mayor impacto en los dispositivos móviles y, lamentablemente, está fuera de nuestro alcance poder ofrecer una mayor optimización.

‍

Solamente podemos tratar de mantener la mayor velocidad posible y esperar un actualizaciones de parte de Webflow para mejorar el rendimiento del sitio.

‍

Comprobando la velocidad del sitio web

Para explicar de una mejor manera qué tan rápidas son las páginas desarrolladas en Webflow, es importante poder visualizar todo el proceso. Por ello, vamos a crear un proyecto nuevo en Webflow que solamente contiene el logo de Yungle.

‍

‍

Y posteriormente ejecutamos un análisis, podremos ver que los resultados son muy óptimos:

‍

‍

Como podemos observar, el rendimiento a nivel súper básico de un sitio de Webflow en una computadora es excelente, y en el celular es un poco menos rápido debido a algunos scripts de Webflow, pero el resultado es increíble.

‍

Webflow nos ofrece un rendimiento inaudito, pero depende de ti mantener tu sitio con una calificación como esta.

‍

Si quieres saber qué significan las diversas métricas que se muestran, puedes visualizar más información en la misma página de PageSpeed Insights.

‍

¿Qué factores afectan el rendimiento de mi sitio web?

Hay diversos factores que pueden afectar el rendimiento de tu sitio web.

‍

Principalmente, el uso de scripts externos afectará el rendimiento de tu sitio web ya que primero se tienen que cargar estos scripts y después se renderizará tu página web. Estos scripts bloquean el renderizado de tu sitio web, por lo que el tiempo que pase hasta que continúe el renderizado de tu sitio dependerá del tiempo que tarde el script en ejecutarse. Algunos ejemplos de estos scripts son aquellos que usan las herramientas de analíticas como Google Analytics, o los scripts de videos embebidos de Youtube.

‍

El 2do factor principal que afecta el rendimiento de tu página web es la carga de archivos demasiado grandes. Estos archivos pueden ser las imágenes que muestras, videos que tienes en el sitio, documentos o incluso los mismos archivos del sitio web (archivos HTML, CSS y JavaScript).

‍

Recordemos que todo lo que tengamos en nuestro sitio web debe viajar por internet y descargarse en la computadora de nuestros usuarios y mientras más grandes sean nuestros archivos, más tiempo tardarán en descargarse y visualizarse.

‍

Otros factores que pueden afectar el rendimiento del sitio web son:

• Demasiadas clases de estilo que no se utilizan. Esto hace que se descarguen archivos innecesarios.
• Dejar que las imágenes se carguen al mismo tiempo. Esto hace que se descarguen archivos que no se utilizarán al instante.
• Código de JavaScript que no se utiliza. De igual forma esto hace que se descarguen archivos que no se van a usar.
• Fuentes de letra demasiado pesadas. Esto hace que el sitio tarde más en cargarse ya que primero deben descargarse las fuentes.
• Páginas web demasiado largas. Recordemos que las páginas web son archivos de texto que el navegador interpreta y podemos ver, pero si estos archivos son muy grandes entonces tardará tiempo en descargarlo.

‍

Cómo mantener optimizado mi sitio web

Existen varias prácticas que podemos asumir para mantener optimizado nuestro sitio web. Para evitar que scripts externos hagan que nuestra página se bloquee, podemos ejecutarlos asíncronamente añadiendo una etiqueta <async> en el código de nuestro script. En caso de que esto no funcione (que puede ser el caso), podemos (a través de código) ejecutar el script una vez que todo el sitio haya terminado de cargar. Debemos ser cuidadosos con este último método, ya que puede afectar el funcionamiento de los scripts.

‍

Para optimizar los recursos de nuestro sitio (como imágenes, videos, o documentos) debemos asegurarnos de usar formatos de imágenes comprimidas (como WEBP, AVIF, JPG, O PNG), y usar tamaños de imágenes cercanos o iguales a los que usaremos en nuestro sitio, es decir, no colocar una imagen de 2000x2000 pixeles si en nuestro sitio web la vamos a escalar a 350x350 pixeles máximo.

‍

Con los videos es algo similar, pero también podemos realizar un enmascarado (que significa poner una imagen de baja resolución y poner el video real una vez que el sitio haya cargado). Y con los documentos podemos subirlos en un archivo comprimido zip, o hacer referencia a un enlace externo para evitar cargarlo directamente.

‍

Otras formas de optimizar tu sitio web pueden ser las siguientes:

• En Webflow, usa Canvas rendering para tus animaciones lottie en lugar de SVG.
• Optimiza tus archivos SVG. Herramientas como Figma, Adobe XD o diferentes herramientas online te permiten hacer que tus archivos SVG sean mucho más pequeños.
• Optimiza las fuentes de tu sitio web. Opta por usar fuentes optimizadas previamente en software como FontForge antes de cargarlas en Webflow.
• Borra las clases de estilo que no utilices. Borrar las clases que no uses hará que tu archivo de estilos sea más ligero. Webflow nos facilita esto y lo podemos hacer con un solo clic.
• Utiliza la carga diferida para tus imágenes. Si activas la carga diferida (o lazy load) de las imágenes que uses, harás que no se descarguen todas de golpe y que se descarguen conforme se van usando. Webflow hace esto de forma automática. Sin embargo, ten cuidado ya que el contenido de hasta arriba de tu sitio web debe de renderizarse al instante (llamado tambien eager loading) para asegurar que el contenido principal cargue de manera óptima.
• Borra las interacciones y triggers que no utilices. Todo esto genera código de JavaScript que no se va a utilizar. Identifica aquellos que no usas y bórralos.
• Utiliza elementos de imagen en lugar de divs con background. Los elementos de imagen tienen más opciones de optimización (como precarga o lazy loading) que los divs con imagen de fondo, lo que puede impactar de manera crítica en el rendimiento de tu sitio web.
• Evita utilizar el elemento de video que viene en Webflow. Este elemento afecta el rendimiento de tu sitio web, en su defecto, utiliza embed code con máscaras para aumentar su rendimiento.
• Evita colocar código innecesario en el <header> de tu sitio web. Esto evitará que el contenido principal se cargue rápido y afecta las métricas de rendimiento. Si puedes, colocalo en el <footer>.

‍

Alternativas para optimizar tu sitio web

Stacket

Stacket es una herramienta que exporta un sitio completo de Webflow a Github de manera automática y al mismo tiempo mejora la velocidad de la página optimizando los scripts, las imágenes y los estilos. Además, permite actualizar los cambios en el repositorio cada vez que publiques cambios en Webflow. ¡Así tu sitio siempre estará actualizado!

‍

Tiene una versión gratuita que te permite probar su servicio para exportar tu sitio web. Sin embargo, si quieres aprovechar al máximo las opciones de optimización

‍

¿Cómo funciona?

Principalmente, mejora el rendimiento ya que transforma tu sitio web en uno estático de HTML, CSS y JavaScript puro para que lo puedas montar en un servidor como Netlify.

‍

Si quieres optimizar aún más, cuenta con diversas opciones que modifican el código fuente de tu sitio web y modificar los recursos del sitio web. Entre estas opciones tenemos:

• Comprimir y optimizar imágenes a formato WEBP: este formato hace que las imágenes ocupen menos espacio sin perder calidad, por lo que tu sitio cargará más rápido.
• Carga diferida de imágenes, gifs, y embeds: Activar esta opción hará que los recursos carguen conforme se usen, y no todos a la vez. Esto mejora la velocidad de carga de tu sitio.
• JavaScript asíncrono: hace que todos tus scripts carguen después de que se renderice tu sitio, lo que evita interrupciones en la carga y mejora la velocidad.

‍

Usando Stacket como alternativa de optimización te permitirá alcanzar niveles de hasta 100 puntos en móvil y 100 puntos en escritorio dependiendo del contenido de tu sitio web.

‍

‍

Indudablemente Stacket es una poderosa herramienta para optimizar tu sitio web.

‍

Resumen

Webflow es una gran herramienta para ahorrar tiempo en el desarrollo de páginas web. Su código es limpio y está bien optimizado pero debemos tener ciertas prácticas para asegurar que conforme vayamos añadiendo elementos a nuestro sitio web mantengamos un rendimiento óptimo.

‍