Cómo optimizar tu sitio web para un mejor rendimiento
El rendimiento web tiene un papel importante en la trayectoria online. Los sitios con un alto rendimiento aumentan la percepción de la marca, ofreciendo una ventaja competitiva online y un motivo para que los usuarios sigan regresando. Los sitios más rápidos logran una mayor interacción con los visitantes y los retienen durante más tiempo, aumentando las ventas y los resultados.
Para garantizar una excelente experiencia de usuario, debes optimizar el rendimiento de tu sitio constantemente. Y con las nuevas métricas de rendimiento de Google, optimizar tu sitio es más fácil que nunca.
Las métricas CWV simplifican la medición y el monitoreo del rendimiento mediante la evaluación de tres factores del sitio que afectan a la velocidad de la página. ¿Pero por qué debe interesarte esto? Porque Google está integrando las Métricas web principales en su algoritmo de búsqueda, lo que significa que estas métricas pueden influir en la forma en que tu sitio se clasifica en el principal motor de búsqueda de todo el mundo.
En Wix trabajamos constantemente para actualizar nuestro software y mejorar nuestra infraestructura, para lograr que los sitios de nuestros usuarios se carguen y funcionen lo más rápido posible. Sin embargo, hay muchos otros factores que influyen en el rendimiento de un sitio, como las apps, las funciones de diseño y el contenido audiovisual, y aquí es dónde tú puedes marcar la diferencia.
En este artículo, presentaremos varios elementos que afectan al rendimiento de un sitio, para que puedas adelantarte y estar preparado cuando las Métricas web principales se conviertan en un nuevo estándar de medición del rendimiento.
Introducción
Prioridades para la optimización
En esta sección, abordaremos las preguntas que deberías hacerte y sugerencias que puedes aplicar para mejorar el rendimiento de tu sitio inmediatamente.
¿Cuál es el propósito del sitio?
Al pensar en la optimización web, una buena regla general es considerar los objetivos de tu sitio. Esto te ayudará a entender qué tipo de experiencia desean tener tus visitantes en el sitio y te dará una mejor idea de las acciones que quieres que realicen mientras exploran tu sitio.
Comprueba la velocidad de tu sitio
Antes de empezar a optimizarlo, debes comprobar el tiempo de carga del sitio y descubrir qué puede estar afectando la velocidad. El nuevo panel de control de velocidad del sitio de Wix en el panel de análisis te permite ver más fácilmente cuál es el rendimiento del sitio, en base a la medición de los usuarios reales (también conocido como datos de campo). También puedes comprobar tu puntuación de PageSpeed Insight, basada en datos de laboratorio, para ambas versiones, móvil y de escritorio.
Si compruebas tu rendimiento regularmente, obtendrás la información necesaria para mantener tu sitio en la dirección correcta.
¿Qué sabes acerca de los visitantes de tu sitio (y sus tiempos de carga)?
Los análisis de tu sitio te ofrecerán mucha información sobre los visitantes de este. ¿Se encuentran en países con redes más lentas? ¿Utilizan dispositivos móviles de baja gama? En ese caso, deberías considerar optimizar algunos aspectos de tu sitio para garantizar un tiempo de carga óptimo independientemente de cuál sea la red o el dispositivo que un visitante esté utilizando.
Cómo empezar
Optimiza tu contenido audiovisual para una carga más rápida
Las fotos, ilustraciones y videos pueden hacer que tu sitio sea más atractivo, pero también más lento. Para garantizar una carga rápida para los visitantes del sitio, Wix optimiza automáticamente las imágenes y videos por ti. Al utilizar marcadores de posición de imagen de baja calidad (LQIP) y la carga diferida del contenido audiovisual fuera de la ventana gráfica, tu sitio se cargará de forma rápida y fluida. A medida que los visitantes se desplacen hacia abajo por una página, Wix irá reemplazando los LQIP por contenido audiovisual de alta calidad para optimizar el tiempo de carga.
A continuación encontrarás algunas recomendaciones para optimizar tu contenido audiovisual y mejorar el rendimiento de tu sitio.
Usa el formato JPG en lugar de PNG cuando sea posible
Las imágenes JPG pueden ser diez veces más pequeñas que las PNG y, por lo tanto, se cargan mucho más rápido, así que utilízalas siempre que sea posible. Usa PNG solo cuando precises transparencia en tus imágenes (no compatible con el formato JPG) o cuando las imágenes deban tener la máxima calidad posible.
Usa el formato SVG para formas, iconos y logotipos
Los formatos PNG y JPG funcionan bien para las fotografías, pero el SVG es mejor para formas y elementos de ilustración como logotipos. Los SVG suelen ser mucho más pequeños que los PNG y JPG, y también se cargan más rápido porque están directamente incrustados en el HTML. Además, los SVG permanecerán nítidos independientemente de cuánto acerques la imagen, así que intenta utilizarlos siempre que sea posible.
Recomendamos el uso de imágenes/PNG solo cuando el SVG sea MUY complejo (p. ej. Un SVG que representa la costa de Noruega y cerca de 250k) y las dimensiones del elemento en el diseño sean más bien pequeñas, especialmente para formas que se muestren por debajo del pliegue.
Evita los GIF animados
Una buena animación gusta a toda el mundo, pero los GIF animados suelen tener tamaños de archivo grandes y largos tiempos de carga. Si deseas mostrar una animación en tu sitio, intenta usar un video en su lugar, que utilizará tamaños de archivo menores y te permitirá mostrar el contenido a los usuarios antes de descargarlo por completo. Recomendamos el uso de GIF para gráficos o logos animados sencillos, o si tu contenido animado contiene pocos fotogramas y un tamaño de pequeñas dimensiones (p. ej. 100x100).
Consejo: Obtén un mejor rendimiento con los VideoBox de Wix
El uso de VideoBox en lugar de GIF animados ofrece un mejor rendimiento que los reproductores de video externos como YouTube y Vimeo.
Optimizando audiovisuales
Más prácticas recomendadas para el contenido audiovisual
A continuación te ofrecemos algunos consejos más para optimizar tu contenido audiovisual y mejorar el rendimiento de tu sitio.
Combina las imágenes siempre que sea posible
Si utilizas imágenes superpuestas, combinarlas en una sola imagen puede reducir el tamaño total de la descarga. Esto también eliminará la necesidad de transparencia y te permitirá usar un único JPG y reducir el tiempo de descarga.
Relájate y aprovecha la carga diferida
Wix utiliza la carga diferida para garantizar una descarga más rápida y fluida. Esto es cuando se descarga una imagen de alta resolución y se reemplaza por un LQIP. Para optimizar la carga diferida, mueve las imágenes menos prioritarias más abajo en la página, para que tengan tiempo de cargarse completamente.
Divide las imágenes de fondo grandes en secciones
Las páginas web pueden tener varias pantallas de longitud y los usuarios pueden experimentar un retraso mientras el navegador espera que se carguen las imágenes de fondo grandes. Para agilizarlo, puedes dividir las imágenes de fondo grandes en secciones verticales de una pantalla de longitud cada una. De esta manera, la carga diferida hará que tu página se cargue más rápidamente y las imágenes solo se descargarán cuando un usuario empiece a desplazarse hacia abajo.
Mejora el rendimiento de tu sitio con el reproductor de video de Wix
Usa el reproductor de video integrado de Wix en lugar de reproductores externos como YouTube y Vimeo, para garantizar un mejor rendimiento del sitio.
Alinea los colores de las imágenes principales y de fondo
Puedes definir un color para las imágenes de fondo como las franjas y columnas. Este color será visible cuando se muestre detrás de una imagen semitransparente y también aparecerá antes de que se carguen las imágenes. Seleccionar un color de fondo que coincida con el color principal de tu imagen también mejorará la percepción que los usuarios tienen de la experiencia en tu página.
Un sitio que utiliza la carga diferida para lograr tiempos de carga óptimos
Más optimización
Conclusion
Many agencies aren’t upselling soon enough. And they’re risking premature customer churn because of it.
Knowing when to upsell a client can feel more art than science, but a study by Vendasta claims to have found the perfect time to expand your relationship with a client: 3 months.
Ninety days may seem like a short timeline to start upselling, but if a client is satisfied with your work in that time period then upselling can bring them more value quicker than they expected. Alternatively, if they’re not satisfied, it gives you a chance to recalibrate so you can keep their business. Both of those scenarios result in additional revenue you would have missed out on had you not initiated the conversation.
Upsells are easier to approach and able to start earlier than most agencies realize. Here are four critical steps that will help you upsell sooner successfully.
Optimiza tu texto
En general, el texto se carga más rápidamente que las imágenes. Aun así, hay maneras de optimizar el texto y las fuentes de tu sitio.
Incluye texto por encima del pliegue
Tener un texto significativo antes del pliegue ayuda a los visitantes a obtener información sobre tu sitio antes de desplazarse hacia abajo. Hazlo atractivo y accionable para que la gente pueda seguir explorando tu sitio. Los visitantes pueden abandonar un sitio si el texto antes del pliegue no es relevante (o peor, pueden tener la impresión de que la página no se ha cargado completamente porque está demasiado vacía), así que usa ese espacio y tus palabras de manera inteligente para generar el máximo impacto e interacción.
Limita tus fuentes
Sabemos que las fuentes pueden ser divertidas, pero el uso de demasiadas fuentes, grosores y tamaños puede resultar confuso, difícil de leer y afectar el rendimiento de la página. En muchos casos, el texto solo se hace visible después de que se descargue el archivo de la fuente, y si un usuario debe descargar múltiples archivos de fuentes, el tiempo de carga de la página será más lento. Recomendamos limitar el número de variaciones de fuentes en una página a menos de cinco.
Carga un fuente personalizada una sola vez
Si eliges utilizar una fuente personalizada, asegúrate de no cargar la misma múltiples veces. Esto puede causar que la misma fuente se tenga que descargar varias veces para una misma página, afectando al rendimiento del sitio y posiblemente reduciendo su velocidad. El editor de Wix ofrece una gran solución para subir las fuentes personalizadas que desees, priorizando los tiempos de carga más rápidos.
Evita el uso de texto en las imágenes
El uso combinado de texto e imágenes tendrá el mayor impacto en los visitantes del sitio. Pero incluir texto dentro de las imágenes puede afectar negativamente el rendimiento del sitio. Los motores de búsqueda y lectores de pantalla no son capaces de detectar el texto incrustado dentro de una imagen. Además, en la mayoría de casos, está pixelado y es más difícil de leer. Y en términos de rendimiento, no es visible hasta que la imagen se carga por completo.
Usa las animaciones de revelación con moderación
Las animaciones de revelación pueden atraer la atención al contenido importante y enriquecer una experiencia de carga. Pero su uso en exceso puede desviar la atención del visitante. Además, el texto no podrá leerse hasta que finalicen las animaciones, lo que aumentará el tiempo de carga. Por estas razones, te recomendamos que utilices este tipo de animaciones con moderación.
Asegura un contraste suficiente
Al usar texto encima de una imagen, asegúrate de que haya suficiente contraste con la imagen de debajo y el color de fondo. De esta manera, el texto se podrá leer antes de que se cargue la imagen.
Ejemplo de la parte por encima del pliegue de un sitio
Optimizando el texto
¿Qué otros aspectos están ralentizando tu sitio?
Si todavía tienes problemas de rendimiento con tu sitio, a continuación encontrarás otros aspectos a tener en cuenta cuando lo actualices para optimizarlo.
Examina la complejidad y la longitud de página del sitio
Una forma de evaluar tu experiencia de carga es considerar la longitud de página. Las páginas de un sitio se van ampliando para que quepa en ellas todo el contenido que deseas publicar, pero cuantas más cosas tengas en una página, más larga será; y cuanto más larga, más tardará en cargarse. Considera dividir las páginas excesivamente largas en varias más cortas con contenido específico.
Optimiza tu sitio para dispositivos móviles
Usa el Editor móvil para asegurarte de que tu sitio se visualice correctamente en cualquier dispositivo. Elige un estilo, agrega contenido distinto para la versión móvil y de escritorio, oculta el contenido menos importante y reduce el número de elementos en las galerías, feeds y repetidores.
Entiende cómo los iFrames, Google Ads y las herramientas de seguimiento afectan a tu sitio
Las integraciones del sitio como los iFrames (que descargan HTML adicionales y otros recursos) y Google Ads pueden afectar negativamente el rendimiento de un sitio. Utiliza los iFrames con moderación y, si usas Google Ads, asegúrate de que todas las cajas estén visibles. Las herramientas de seguimiento y análisis (T&A) pueden hacer que todo vaya más lento, así que incluye solo las necesarias para analizar cómo los visitantes interactúan con tu sitio. También puedes probar el rendimiento de tu sitio antes y después de (con y sin) los píxeles de seguimiento, para poder evaluar mejor el impacto que tienen en el rendimiento de la experiencia de carga del sitio.
Limita el uso de ventanas interactivas
Una ventana interactiva es una ventana emergente que aparece encima del contenido principal de la página. Las páginas interactivas son una buena manera de mostrar los mensajes u anuncios importantes. Pero el uso de una ventana interactiva que aparece automáticamente cuando se carga una página, especialmente una que muestra contenido principal, crea un retraso hasta que el contenido es visible. Es muy recomendable utilizar ventanas interactivas para mostrar información adicional, como ofertas especiales, y no para el contenido principal de la página, como por ejemplo el nombre del negocio.
Conclusión
A medida que las Métricas web principales de Google se van implementando como parte de su algoritmo de búsqueda, la optimización del rendimiento debería ser siempre una prioridad. En Wix, trabajamos constantemente adelantándonos a los últimos avances disponibles para que los cientos de millones de sitios alojados en nuestra plataforma tengan el mejor rendimiento posible.
Tips generales de optimización
Ready to learn more?
For an overview of website performance and to get your site up to speed, read our Intro to Performance article. Or to get a detailed understanding of Core Web Vitals, read our in-depth guide.
Author: Dan Shappir
Dan focuses on optimizing all sites hosted on Wix for speed. With over 25 years of software development experience, Dan has worked on systems ranging from multi-user games to missile trajectory simulations. He is a frequent speaker at technical conferences, a panelist on the JavaScript Jabber podcast and a member of the Google Chrome Advisory Board (CAB). Dan holds an M.Sc. in Computer Science.
¿Deseas obtener más información?
Para obtener una vista general del rendimiento del sitio y aumentar su velocidad, lee nuestro artículo de Introducción al rendimiento. Para entender mejor las Métricas web principales, lee nuestra guía detallada.
Dan se centra en la optimización de todos los sitios alojados en Wix para mejorar su velocidad. Con más de 25 años de experiencia en el desarrollo de software, Dan ha trabajado en sistemas que incluyen desde videojuegos multiusuario hasta simulaciones de trayectorias de misiles. Es un orador frecuente en las conferencias técnicas, panelista en el podcast JavaScript Jabber y miembro del Consejo Asesor de Google Chrome (CAB). Dan tiene un máster en Ciencias Computacionales.
Autor: Dan Shappir
Líder de tecnología de rendimiento en Wix.com
