Cómo acelerar su sitio web Tilda

En Internet se presta especial atención a la carga de las páginas web. Por eso, trabajar en la velocidad de carga de las páginas web se ha convertido en rutina para nosotros. Implementamos nuevas tecnologías y optimizamos los procesos técnicos. Algunas de las actualizaciones son visibles para los usuarios, mientras que otras no. Es un proceso continuo, y ya estamos orgullosos de los progresos que hemos hecho.

En este artículo, le proporcionaremos una breve lista de comprobación sobre cómo aumentar la velocidad de carga de su sitio web utilizando las herramientas existentes de Tilda y modificando la configuración. Repasaremos cada punto en detalle para que puedas ajustar la configuración de tu sitio web por tu cuenta y hacer que cargue aún más rápido.

Antes de desglosar cada punto, veamos cómo se puede evaluar la velocidad de carga de la página.

Muchos usuarios de Tilda comprueban la velocidad de carga de las páginas de sus sitios web mediante PageSpeed Insights de Google. Este servicio simula la carga de sitios web en dispositivos móviles y ordenadores de sobremesa, asignándoles un índice de eficiencia.

Se trata de una herramienta técnica convencional que no siempre refleja la velocidad de carga real. En nuestra experiencia, los datos que Chrome recopila y muestra en el panel de desarrollador son mucho mejores que los obtenidos mediante la simulación de PageSpeed Insights. Por este motivo, no recomendamos confiar totalmente en PSI, sino tomarlo como una herramienta de análisis complementaria o indirecta.

Monitorizar la velocidad real de carga de la página web es una mejor opción. Puede hacerlo en las Herramientas para desarrolladores en Chrome: abra la consola (Opción + Ctrl + I / Alt + Cmd + I) y vaya a la barra de herramientas Alternar dispositivo → pestaña Red → vuelva a cargar la página que desea evaluar. Los parámetros más importantes son DOMContentLoaded, que muestra el tiempo que tarda en cargarse la estructura de la página, y Load, que muestra el tiempo que tarda en cargarse la página con todas las tablas y estilos.

Este método tampoco es perfecto: la simulación 3G rápida de la barra de herramientas no simula de forma clara y correcta la carga del sitio web en dispositivos móviles, por lo que tendrás que comprobar la velocidad de carga en dispositivos reales y sacar conclusiones basándote en los datos.

Tilda tiene un gran número de optimizaciones implementadas para acelerar la carga de las páginas. Los sitios web básicos sin código ni scripts de terceros se cargan rápidamente. Puede comprobarlo usted mismo: elija una plantilla deTilda y vea la velocidad de carga de la página utilizando PageSpeed Insights.

Vamos a comprobarlo en un sitio web real: Hemos elegido una de las plantillas de la biblioteca de plantillasTilda y hemos creado un sitio web para una estilista personal Annie a partir de la plantilla. Vamos a estimar su velocidad de carga utilizando PageSpeed Insights.

Por supuesto, la velocidad de carga depende de la complejidad del sitio web, de la presencia de bloques específicos y de si hemos conectado widgets, contadores, estadísticas y otros complementos de terceros que pueden ralentizar la carga del sitio web.

Hemos escrito este artículo para que puedas entender el problema y aprender a identificar los ajustes que te ayudarán a crear un sitio web de carga rápida. Pero tienes que tomar una decisión importante: aplicar todos los consejos de la lista de comprobación afectará no sólo a la velocidad de carga del sitio web, sino también a su diseño.

Lazy Load permite que las imágenes se carguen gradualmente a medida que el espectador se desplaza por la página, y no todas a la vez. Esta configuración está activada por defecto, lo que afecta directamente al rendimiento del sitio web.

A menudo vemos que los diseñadores que crean sitios web personalizados desactivan Lazy Load por alguna razón, por lo que no es recomendable hacerlo, ya que ralentiza el sitio web.

Asegúrese de que Lazy Load está activado para su sitio web. Para ello, vaya a Ajustes del sitio → Más y asegúrese de que la casilla "Desactivar Lazy Load para imágenes" no está marcada. Compruebe también que la función no está desactivada en los ajustes de Imagen y forma en Zero Block.

Lazy Load y la optimización manual de imágenes son las dos cosas más importantes que puedes optimizar. Las imágenes son el elemento más pesado en el sitio web, por lo que el 70% de la velocidad de carga de la página depende de ellas.

Tilda tiene una característica exclusiva-AdaptiveImage Loading. Se trata de una tecnología especial de procesamiento de imágenes que las adapta al tamaño del contenedor del sitio web en función del dispositivo del usuario. También convierte las imágenes a WebP, el formato de última generación que comprime la imagen sin pérdida de calidad, para que el sitio web cargue más rápido. La conversión se produce automáticamente sin necesidad de realizar ninguna acción adicional.

En ciertos casos, la optimización automática "sobre la marcha" no puede compararse con la compresión manual de imágenes. Si la velocidad de carga de la página es crucial para usted, le recomendamos optimizar las imágenes utilizando TinyPNG, un servicio gratuito en línea que utiliza una tecnología de compresión de datos sin pérdida para comprimir imágenes sin que se produzca una pérdida visible de calidad.

Otra solución es añadir bloques diferentes para las versiones de escritorio y móvil del sitio web y cargar imágenes de distintos tamaños y pesos. Por ejemplo, puedes hacerlo para la portada de tu sitio web.

El algoritmo en Tilda será el siguiente: cuando se cargue la página, optimizará la imagen "sobre la marcha", y si la imagen optimizada ocupa menos espacio que la original, la mostrará automáticamente. Esto puede ocurrir cuando la caché se está calentando y el sistema aún está recopilando estadísticas de tráfico para preparar de antemano las imágenes con la resolución necesaria. La optimización manual no hará ningún daño en este caso y, en algunos casos, puede incluso ayudar a optimizar las imágenes y aumentar la velocidad de carga de la página.

Esta categoría de optimizaciones ocupa el segundo lugar en cuanto a peso e importancia. Las fuentes del sistema, como Arial o Georgia, están disponibles en cualquier ordenador. También hay fuentes conectables, como Ubuntu y Roboto.

Si quieres acelerar tu sitio web al máximo, no te recomendamos que utilices fuentes personalizadas, sino que elijas una de las del sistema. De esta forma, puedes ahorrar entre 100 y 400 KB, lo que es significativo cuando se trata de cargar páginas.

Si necesitas utilizar una marca o identidad corporativa, puedes utilizar nuestra nueva función de renderización instantánea de contenido. Esta opción le permite mostrar contenido en el sitio web independientemente de si su fuente de marca se ha cargado o no. El sitio web mostrará primero la fuente del sistema y, pasados unos segundos, una vez que se haya cargado la fuente, el texto se volverá a mostrar, esta vez con la fuente de su marca.

Esta función no está activada por defecto. Si valora más la velocidad de carga que la suavidad de carga o el aspecto visual, puede habilitar esta función en Configuración del sitio → Fuentes y colores → Avanzado.

Comprueba si tienes conectados scripts o códigos de terceros, como chats o un contador. En Tilda, puedes conectarlos a través del bloque T123. Por lo tanto, comprueba si tienes este bloque en la página o en la cabecera de tu sitio web.

Según nuestras observaciones, en el 95% de los casos, el código añadido al sitio web no está optimizado para la estrategia de carga y puede ralentizar gravemente la renderización de la página. Por eso le recomendamos que evite utilizar scripts de terceros o que los utilice con la conexión correcta.

Si no puede prescindir del código de terceros, retrase la carga e inicialización de los scripts. Los primeros segundos de la renderización de la página son muy importantes, por lo que sería mejor que no se cargara nada innecesario. Por ejemplo, supongamos que añades un widget de Intercom. En ese caso, puede querer conectar e inicializar el script 3 segundos después de que el contenido principal haya sido renderizado (los eventos "DOMContentLoaded" o "document ready"). Este paso ayudará a evitar el bloqueo del flujo de carga principal para que la página se renderice más rápido.

Por ejemplo, en Tilda, los contadores se cargan con un retraso de 2 segundos por defecto. Puedes encontrar más información sobre esto en el siguiente párrafo.

La inicialización retardada del contador es una nueva función que se ha puesto recientemente a disposición de todos los usuarios de Tilda . Para que el contador de la página se conecte, el navegador tiene que cargar un script, analizar el código y ejecutarlo. Los archivos de Google Analytics son bastante pesados, por lo que ralentizarán la velocidad de visualización de la página si se cargan todos a la vez. Por eso, por defecto, conectamos estos contadores 2 segundos después de que se cargue la página.

Puedes asegurarte de que este ajuste no está desactivado en Configuración del sitio → Analytics.

Parece obvio, pero funciona: cuanta menos información haya en la página, más rápido se cargará. Mire su sitio web con ojo crítico: ¿es tan necesario tener toda la información e imágenes en la página, o se puede acortar? Por ejemplo, si tiene una página muy larga (más de 20 pantallas), traslade parte del contenido a otra página para aumentar su velocidad de carga. Esto es algo en lo que puedes influir y ajustar directamente.

A veces, los usuarios colocan una foto de portada grande en la primera pantalla junto con cuatro imágenes más pequeñas en el bloque siguiente. En este caso, el navegador tiene que descargar cinco imágenes en lugar de una. Esto atasca el tráfico, sobre todo cuando se trata de Internet móvil, por lo que no recomendamos colocar demasiadas imágenes en la parte superior de la página.

Asegúrese de que su sitio web no se exporta ni se sincroniza a través de una API; en otras palabras, asegúrese de que su sitio web está en los servidores de Tilda. En caso de que se exporte, asegúrese de que su servidor web está configurado de forma óptima.

Tilda ha construido una infraestructura interna de calidad, que seguimos mejorando y desarrollando. Nos hemos ocupado de muchas cosas: servidores fiables y rápidos, CDN para acelerar la entrega de imágenes, protección contra ataques DDoS y varios otros ajustes técnicos destinados a maximizar la velocidad de carga de los sitios web de Tilda .

En cuanto al alojamiento de terceros, no podemos controlar la cantidad o la calidad del trabajo de los administradores de sistemas. No obstante, podemos dar algunos consejos sobre lo que puede hacer para que su sitio web cargue más rápido si los ha exportado:
- Conecte CDN y muestre las imágenes a través de una red distribuida de entrega de contenidos.
- Active las cabeceras de caché CSS/JS/HTML en la configuración del servidor web para que el navegador no las descargue cada vez, sino que las obtenga de la caché.
- Active la compresión Gzip o Brotli para los archivos CSS, JS y HTML.
- En la configuración, active la compresión de archivos de texto: CSS, JS, HTML.
- Añada un atributo "async" a los scripts JS de terceros para que su carga no ralentice la carga de la página.
- Añada widgets de terceros sólo cuando sea necesario, disponga un retraso en la inicialización de 2-3 segundos para que el contenido de la página tenga tiempo suficiente para renderizarse.

Tilda Los sitios web se cargan bastante rápido por defecto. Si desea acelerar aún más su sitio web, utilice nuestras recomendaciones de la lista de comprobación. Te ayudarán a crear un sitio web ultrarrápido, pero tendrás que hacer algunas concesiones en términos de diseño y efectos visuales. Siempre dejamos estas decisiones y prioridades en manos del usuario.

Por nuestra parte, trabajamos constantemente en la optimización de la plataforma y en la implementación de nuevas soluciones que harán que tu sitio web sea aún más rápido.