10 Técnicas para mejorar la velocidad de tu página web



Si hay un lugar donde las primeras impresiones son las que cuentan, es tu página web. Y, para tu información, dicha impresión va más allá del diseño y el contenido. De hecho, la velocidad de carga de tu página web es la que determinará su éxito.

Una página web lenta puede dañar tu reputación y llegar a costarte dinero, ya que perderás conversiones de clientes. En cambio, una página web de alto rendimiento tendrá un efecto positivo en el éxito de tu negocio.Atraerá a más visitantes y, como consecuencia, aumentará tus oportunidades de venta y de convertirlos en clientes recurrentes.


Lo primero que debes hacer para asegurarte de tener una página web que carga rápido es elegir una plataforma profesional para crear tu página web, que te ofrezca la mejor tecnología del momento. Pero éste es sólo el primer paso, después tendrás que asegurarte de que el contenido de tu página no interfiera con su rendimiento.

Deberás, pues, elegir bien tanto el emplazamiento del contenido como qué tipo de contenido y extensiones vas a usar en cada apartado. Por ejemplo, todos sabemos que los GIF animados aportan dinamismo a tus páginas, sin embargo, por lo general son archivos pesados ​​y consumen una gran cantidad de ancho de banda. Por otro lado, el texto se carga más rápido que las imágenes así que te conviene prestar atención a cómo dispones estos elementos.

Hay varias factores a tener en cuenta, pero con la ayuda de este artículo, te harás con consejos super útiles para optimizar el rendimiento web y mejorar la velocidad de tu página web.



¿Qué es la optimización de la velocidad de la página y por qué es tan importante?


La velocidad de una página web es el tiempo que tarda en cargar, mostrarse en el navegador y responder a las interacciones de los visitantes desde el momento que alguien hace clic en el URL de dicha página (ósea, la dirección web de la página).

No debes confundir esto con el “rendimiento percibido”, que es la manera en la que los usuarios miden el desempeño de tu página web de acuerdo con lo primero que ven en sus pantallas (que no son necesariamente los elementos que se cargan en primer lugar). Aunque diferentes, estas nociones son igual de importantes por lo que debes trabajar para mejorar tanto la velocidad de tu página web como y la percepción de su rendimiento.

Pero, ¿cuál es la velocidad óptima para una página web? Por lo general, lo recomendables es que las páginas carguen en menos de tres segundos. Otra de las preguntas más comunes en torno a este tema es: ¿por qué es tan importante mejorar la velocidad de carga de la página web)? Además de que la gente no tiene mucha paciencia, el tiempo de carga afecta a la usabilidad, la conversión, el compromiso del usuario y la visibilidad que ofrecen los motores de búsqueda.


Impacto en la usabilidad: quizás parezca algo obvio pero cuanto más rápido se cargue tu página web, más rápido se podrán usar las funcionalidades de la web, como los elementos que ayudan a la navegación, la comunicación con el servicio al cliente o simplemente a comprender el propósito de tu página. Permitir que estas funcionalidades aparezcan lo más rápido posible, tendrá como consecuencia visitantes más felices y recurrentes.


Impacto en la participación del usuario: es más probable que los usuarios interactúen con tu página web si pueden moverse con velocidad. Por ejemplo, si tienes una tienda online y cada paso del proceso de compra demora más de un par de segundos en cargarse, es comprensible que muchos compradores potenciales abandonen. Lo mismo aplica cuando se trata de completar formularios o navegar entre páginas. Esto te da una idea del impacto negativo que tendrán esto inconvenientes en número total de visitantes y sobre tus objetivos comerciales.


Impacto en la conversión: la mayor parte de las páginas web tienen como objetivo principal la conversión. De hecho, un retraso de tan sólo 100 milisegundos en la velocidad de la página podría traducirse en una disminución del 7% en las tasas de conversión de una página web. Si tus usuarios no pueden utilizar tus funciones lo suficientemente rápido, se irán.


Impacto en la visibilidad en los motores de búsqueda: Google toma en cuenta la velocidad de carga de las páginas web como factor para posicionarlas. Esto se es la Optimización para Motores de Búsqueda (SEO, en inglés). De esta forma, si quieres aparecer en los primeros resultados de búsqueda de determinadas palabras clave, cuanto más rápido tu página sea visible para los ojos de los visitantes, mejor posicionarás.


Ahora que has entendido qué es la velocidad de la página web y por qué es tan importante, es momento de aprender a mejorar el rendimiento de tu página web y asegurar así de que tus clientes y Google estén satisfechos.



Recomendaciones para mejorar la velocidad de la página web:


  1. No sobrecargar de contenido tu página de inicio

  2. Priorizar el contenido de la parte superior

  3. Evitar tener demasiados archivos de media

  4. Optimizar el tamaño de las imágenes

  5. Cuidar la relación texto-imagen

  6. Priorizar el texto sobre otros elementos de diseño siempre que sea posible

  7. Reducir el número y los diferentes tipos de letras.

  8. Limitar el uso de animaciones

  9. Centrarse en el rendimiento móvil

  10. Limitar el número de aplicaciones de terceros



01. No sobrecargar tu página de inicio


Este consejo se podría resumir en la siguiente frase: Mantén limpia tu página y evita que sea demasiado larga.


Abarrotar tu página de inicio de contenido (texto, imágenes, videos y animaciones) puede tener un impacto negativo en tus objetivos. La carga puede demorar mucho y abrumarás a tus visitantes hasta el punto de que se perderán el contenido importante de tu página y se irán sin ni siquiera haber interactuado con él.

Una página de inicio bien organizada, con el mínimo de contenido, permitirá a los usuarios de tu página entender fácilmente tu mensaje desde el momento en que ingresan.


Si lo que te preocupa es perder contenido importante, la solución es distribuir el contenido en varias páginas, así cada información valiosa contará con un espacio propio. Para facilitar la navegación y el acceso, solo tienes que agregar botones para como "Ver más" o "Entra a mi blog/galería" en la página de inicio.



02. Priorizar el contenido de arriba de la página


La parte más importante de tu página web es la franja superior, pues es lo primero que se carga y es visible para tus usuarios ven cuando entran. Es clave usar esta sección de forma estratégica para atraer la atención de tus visitantes mientras se carga el resto del contenido de tu página. Puedes conseguirlo con textos significativos y fotos atractivas. La práctica más común y recomedable es incluir un encabezado y sub-encabezado (nombre de la empresa y eslogan), tu logotipo y algún botón de llamada a la acción (CTA).


Se trata de mostrar la información principal que los usuarios necesitan saber, a la vez que la página se mantiene limpia y clara. Si ves que el contenido elegido para esta sección cumple su cometido, mantenlo. Si, por el contrario, desvía la atención de los visitantes, colócalo más abajo.


Como siempre, la excepción hace a la regla. Asegúrate de que el contenido que agregas en esta sección superior de la página apenas tenga animaciones, pues estas tardan más en cargarse los visitantes pueden perder la paciencia e irse. En lugar de animaciones, usa texto, imágenes o tu logotipo para efectos visuales.





03. Reducir el contenido media


Además de en tu página de inicio, es importante hacer limpieza de contenido en todas las páginas. La norma que debe regir tu trabajo es "calidad vs. cantidad". No sobrecargue tu pagina web de contenido o funcionalidades innecesarias. Tu página web es tu carta de presentación y cada elemento de más puede acarrear un costo en el rendimiento.


De hecho, algunas piezas son altamente perjudiciales para el rendimiento de tu página ya que consumen un gran ancho de banda y afectan negativamente a los tiempos de carga.


Las galerías de fotos con desplazamiento sin fin son uno de estos elementos que lo complican todo. Cada foto, sin importar el tamaño del archivo, impactará en la velocidad de la página, y eso que, en una galería, no se cargan todas las fotos a la vez. Para realizar los ajustes que mejorarán la velocidad de tu página, debes reducir la cantidad de imágenes por galería de fotos, especialmente si está ubicada en tu página de inicio.


El contenido incrustado es otro tema. Un ejemplo de ello son los videos incrustados de YouTube o Facebook. Al preceder de una fuente externa, el alojador de tu página web (por ejemplo, Wix) no podrá optimizarlo ni controlar el tiempo de carga. De esta manera, si la carga es lenta, nadie puede solucionar el problema salvo tú.


Esto no significa que debas evitar el contenido incrustado, pero si reducir la cantidad. Algunas buenas práctica podrían ser: agregar solo uno (o dos) videos a tu página, usar videos de fondo o agregar un videobox en su lugar. Dado que tu alojador web tiene control sobre estos elementos, tendrán un impacto menos perjudicial en la velocidad de la página.


04. Optimizar tus tamaños de imagen.


En resumidas cuentas, lo recomendable es, siempre que sea posible, usar archivos JPEG para imágenes en lugar de PNG. Consulta esta guía sobre el tamaño de los archivos para comprender más sobre este tema.

La razón de ser de esta recomendación es sencilla, las imágenes de una página web deben estar optimizadas al máximo y los archivos JPEG son más pequeños y se descargan más rápido que los PNG. Además conservan casi el mismo nivel de calidad. A menos que necesites imágenes transparentes, o que seas un fotógrafo profesional, los JPEG son suficiente para la web. Para convertir tus imágenes., puedes usar herramientas gratuitas como: TinyJPG, Compressor.io e ImageOptimizer.

Las páginas alojadas en Wix cuentan con un beneficio extra: las imágenes se convierten automáticamente al formato WebP. Se trata de un formato relativamente nuevo, creado por Google, que permite una mejor compresión. Wix lo usa en todos los navegadores que admiten este tipo de archivos. Además de esto, optimizamos el tamaño de cada imagen que nuestros usuarios recortan en el editor para que se ajuste a sus páginas web.


Si hay algo que nunca descuidamos es la calidad de la imagen. De hecho, incluso hemos desarrollado un sistema especial, “la carga perezosa”, que consiste en que mientras la página termina de cargar por completo en HD, las imágenes se muestran primero en baja resolución. De este modo, evitas que los visitantes lleguen a una página en blanco y tengan la tentación cerrar la página.


05. Equilibrar la relación texto-imagen


La convivencia entre texto e imágenes es como la convivencia entre dos mascotas en la misma casa, a veces se aman, otras se odian. En ese sentido, debes delimitar los territorios para que cada tenga su espacio y ”convivan en armonía”.


Si por ejemplo, tienes un fondo blanco,una imagen en color y un texto en blanco. Como el texto se carga más rápido que las imágenes, el texto en blanco sobre un fondo blanco aparecerá invisible para los navegadores hasta que se cargue la imagen. Evita esto y ten en cuenta los colores al elegir los elementos de diseño.



A partir de ahí podemos sacar dos lecciones. La primera es jugar con los contrastes para dar más visibilidad a tus elementos. La segunda es evitar colocar textos en imágenes solapados. La única excepción son los logotipos. Para el resto, agrega tu texto en un cuadro de texto sobre las imágenes para evitar confusiones y problemas de carga.



06. Usar texto en vez de otros elementos siempre que sea posible


Tal como lo dijimos antes, el texto se carga más rápido que las imágenes y las animaciones. Sin embargo, esta no es la única razón por la que debes poner tu atención. Un encabezado de texto de carga rápida llama la atención sobre el mensaje principal de tu página de forma inmediato y, por lo tanto, mejora la experiencia general de tus usuarios.

La otra razón clave es el SEO o los esfuerzos realizados para garantizar que tu página web tenga un mejor posicionamiento en el ranking de palabras clave específicas en los resultados de búsqueda de Google. Un texto detallado y de calidad ayudará a Google (y a los otros motores de búsqueda) a comprender mejor de qué se trata tu página web. Esto impacta directamente en las posibilidades de alcanzar una posición más alta en las páginas de resultados.


07. Reducir el número y los estilos de las fuentes


Una buena práctica es reducir el número de familias de letras en tu página a apenas dos o tres. Esto te va a ayudar a mostrar un estilo coherente para tu marca y a transmitir una sensación de claridad y profesionalidad, pero también a reducir el tiempo de carga de tu página.

No se trata nada más de un juego de números, el tipo también importa. Si quieres utilizar fuentes propias o personalizadas, ten en cuenta que se trata de elementos gráficos igual que las imágenes y los videos, lo que significa que requerirán la descarga antes de aparecer en tus páginas web. Esto puede afectar de forma directa al rendimiento de tus páginas web.

Finalmente, evita tener diferentes pesos para cada tipo de letra (negrita, subrayado, cursiva, etc.). Esto también requiere de descargas adicionales y por tanto aumenta el tiempo de carga.

08. Limitar el uso de animaciones.


Son atractivas, incluso adictivas y siempre nos dejan con hambre. No estamos hablando de trufas de chocolate, sino de animaciones. En esta categoría también, la moderación es tu mejor amigo. Por mucho que nos gusten y agreguen un toque de diversión, son archivos muy pesados.


No se trata de eliminarlas por completo, porque tienen mucho atractivo visual. Pero sí debes ser selectivo a la hora de elegirlas. Evita los GIF animados, son los más pesados ​​de todos los tipos de archivos, incluso cuando son pequeñitos. Otra buena práctica es colocarlas en la segunda mitad de la página. Así evitarás que tus usuarios tengan una mala experiencia abrumadora nada más abrir tu página .

Para terminar, puedes usar herramientas online como GIF to MP4 para convertir las animaciones de tu página en videos ya que estos brindan la misma experiencia visual que las animaciones pero se cargan mucho más rápido. En simultáneo, la reproducción de videos ocurre inmediatamente después del primer búfer. Por el contrario, los GIF tienen que descargarse por completo para verse bien. Esto afecta el rendimiento de tu página de forma directa.


09. Centrarse en el rendimiento móvil


El número de personas que navegan desde su teléfono inteligente aumenta cada día. Y, naturalmente, esperan que su página web se vea tan elegante como su versión de escritorio. Wix crea automáticamente una versión móvil de tu sitio para que no tengas que volver a empezar desde cero. Pero esto está lejos de ser suficiente.


Pero esto es apenas el primer paso. Debido a que la pantalla es mucho más pequeña, necesitas optimizar el espacio ajustando tu contenido. Por ejemplo, la sección superior de la web debe contener menos información en la versión móvil. Basta con incluir el nombre de tu empresa, el logotipo y una llamada a la acción.


Por otra parte, asegúrate de eliminar o incluso ocultar todos los elementos que afectan al rendimiento. Esto puede ser el uso de múltiples estilos y formatos de fuentes, imágenes, animaciones, videos, efectos especiales y más.

Para aprovechar al máximo este pequeño espacio de la pantalla, puedes reemplazar esos elementos de carga lenta con otras funciones, como una pantalla de bienvenida que muestra tu logotipo o una foto mientras se carga tu página o una barra de acción rápida para hacer que toda tu información de contacto sea clara y que esté a sólo un clic de distancia.




10. Limitar el número de aplicaciones de terceros


Las aplicaciones de terceros (TPA) son características que puedes agregar a tus páginas pero que no son creadas por quien las aloja. Ejemplos: feed de Instagram, widgets de estadísticas o un mapa para mostrar tu ubicación. Muchas de estas están disponibles gratis en el Wix App Market.

Estas aplicaciones usan algo llamado “iFrames” (navegadores web dentro de tu página). Para ponértelo más simple, al usar un TPA, estás intentando cargar una página web dentro de tu página web. Así, las TPA pueden agregar un tiempo significativo a la velocidad de carga de tus páginas web.

Sin embargo, es evidente que las TPA dan mucha funcionalidad. Solo tienes que ser inteligente sobe cómo usarlas preguntarte si estas aplicaciones son realmente necesarias para lograr los objetivos de tu página web. Hay otras pruebas que puedes hacer para tomar tu decisión. Primero, desactiva cada aplicación y fíjate si ves diferencias en la velocidad de tu página. Luego, busca identificar cualquier superposición en diferentes funciones de las TPA. Por ejemplo, ¿necesitas una galería de fotos y un feed de Instagram? Las dos muestran tus fotos. Si sacas una, tu página se cargará mucho más rápido.

Cómo controlar la velocidad en el tiempo extra


Si tienes una página de Wix, puedes verificar el rendimiento de carga esta prueba de velocidad de sitios Wix. Para otras páginas existen otras herramientas como PageSpeed ​​Insights de Google y Pingdom Tools. Las dos herramientas te permiten saber la velocidad de tu página y otros datos importantes para que puedas mejorar el rendimiento.




Conceptos básicos:


  • Entender la percepción del rendimiento: los usuarios determinarán la velocidad en función de lo primero que se carga en sus pantallas. Si lo primero que carga es el contenido de la segunda mitad de la página, los usuarios verán una pantalla en blanco cuando ingresen a tu página web. Es por esto que la elección del contenido y su ubicación son decisiones cruciales.

  • Cada elemento que pongas en tu página web tiene un costo para el rendimiento: Antes de añadir cualquier elemento debes preguntarte debes preguntarte si vale la pena. Si piensas que podía tener un impacto negativo en el rendimiento y en la velocidad de carga , es preferible eliminarlo o, al meno, no colocarlo en la parte superior de la web.

  • No sobrecargar tu página de inicio: en general, se trata de la página que carga primero. Una buena práctica en diseño web es mantenerla lo más liviana posible. Cuanto menos elementos tenga, más rápido se cargará y mayor será la probabilidad de que los visitantes se queden (y conviertan)

¿Quieres que tu página cargue a mayor velocidad y mejorar así el rendimiento? ¡Crea hoy una página web con Wix hoy!



Publicado por Equipo Wix



es03.png