Rendimiento del sitio: diseñar un sitio web centrado en el rendimiento
4 min de lectura
Las páginas del sitio que incluyen contenido relevante y ordenado suelen tener un tiempo de carga mejorado y constituyen una experiencia más fluida para los visitantes del sitio.
Mejora el rendimiento de tus páginas siguiendo los consejos de diseño presentados a continuación, tales como optimizar la sección de la mitad superior de la página y crear páginas dedicadas.
En este artículo, obtén más información sobre lo siguiente:
Consejo:
Recomendamos prestar especial atención a la página de inicio, ya que esta suele ser la primera página con la que se encuentran tus visitantes.
Orden de carga de elementos
Los elementos de tu sitio se cargan en un orden específico. Los elementos estáticos o de baja resolución se cargan más rápido que los elementos pesados o interactivos.
El orden en que se cargan los elementos en tu sitio web es el siguiente:
- Estático: elementos que son de baja resolución y generalmente no animados, por ejemplo, texto y formas.
- Fluido: elementos que tienen mucho contenido y, tal vez, una resolución más alta, por ejemplo, imágenes o videos.
- Interactivo: contenido interactivo que puede incluir un código externo, por ejemplo, iFrames y apps externas.
Ten en cuenta el orden de carga al estructurar tu sitio y agregar contenido. Recomendamos agregar los elementos que se cargan más rápido a la mitad superior de la página, ya que este es el primer contenido que se muestra cuando un visitante abre tu sitio.
La mitad superior de la página
La mitad superior de la página es la sección de tu sitio que los visitantes pueden ver sin desplazarse, y suele ser la primera parte que se carga de tu sitio.
Recomendamos agregar solamente los elementos estáticos necesarios siempre que sea posible, y mantener el diseño de esta sección simple y relevante.
Los elementos que recomendamos agregar a la sección de la mitad superior de la página de tu sitio web son los siguientes:
- Texto: el texto les da a tus visitantes una idea clara sobre qué trata tu página o tu marca. Además, puede ser indexado por los motores de búsqueda y mejorar el SEO de tu sitio. Recomendamos ceñirse a las fuentes del sistema y evitar el uso excesivo de diferentes familias o pesos de fuentes. Más información sobre cómo optimizar el texto en tu sitio
- Llamados a la acción: los CTA son botones y enlaces que permiten que los visitantes realicen una acción deseada en tu sitio, por ejemplo, hacer una compra o ponerse en contacto con la empresa. Los CTA deben definirse claramente, y recomendamos no agregar elementos cerca de estos que puedan distraer a los visitantes del sitio.
Galerías, videos y animación
Los elementos fluidos y de alta resolución permiten añadir movimiento y vida a tu sitio. Sin embargo, pueden aumentar el tiempo de carga del sitio y, por ende, afectar el rendimiento.
Recomendamos tener en cuenta estos elementos. Úsalos solo cuando sea necesario, e intenta evitar agregarlos en la mitad superior de tu sitio.
Páginas dedicadas y longitud de la página
Wix ofrece diversas apps que puedes agregar a tu sitio, entre ellas, Stores, Blog y Video.
Recomendamos tener páginas dedicadas para estas apps que no sean la página de inicio del sitio. De este modo, la página de inicio no se sobrecargará, lo que puede afectar el tiempo de carga. Luego puedes crear un enlace a estas páginas dedicadas desde la página de inicio con elementos como botones, ítems del menú y enlaces.
Agregar páginas dedicadas también puede reducir la longitud de la página. Este es el número de pantallas que un visitante tiene que desplazarse para ver la página completa del sitio. Recomendamos mantener la longitud de tu página en ocho pantallas o menos, agregando solo los componentes necesarios y optimizando el uso de las llamadas a la acción.
Botones
Los botones son una excelente manera de obtener una vista previa del contenido sin comprometer el rendimiento del sitio.
Agrega elementos estáticos a la página de inicio (por ejemplo, texto) que brinden a los visitantes una muestra del contenido del sitio, y luego agrega un botón que cree un enlace a sus respectivas páginas. Entre los ejemplos, se encuentran "Echar un vistazo a mi blog", "Ver más" o "Comenzar a comprar".
¿Te ha sido útil?
|