Las 10 mejores técnicas para la optimización de la velocidad del sitio web

Si hay un lugar donde las primeras impresiones son absolutamente críticas, es su sitio web, y no solo estamos hablando de diseño y contenido. La velocidad de sus páginas es uno de los determinantes más importantes para su éxito.

Un sitio web de carga lenta puede dañar su reputación y costarle dinero, ya que perderá las conversiones. Por el contrario, un sitio web de alto rendimiento tendrá un efecto dominó positivo en el éxito de su negocio. Atraerá más visitantes, lo que aumentará las oportunidades de ventas y terminará atrayendo más clientes.

El primer paso para garantizar que tenga un sitio web de carga rápida es utilizar un creador de sitios web robusto, que proporcione la mejor tecnología. Sin embargo, tu trabajo no termina después de esto. Es su responsabilidad asegurarse de que el contenido que incluya en su sitio no interfiera con su rendimiento.

Necesitará encontrar el equilibrio adecuado de medios, elegir dónde colocar sus elementos y qué tipo de contenido y extensiones usar en primer lugar. Por ejemplo, los GIF animados pueden agregar algo de dinamismo a sus páginas, pero a menudo son archivos pesados y consumen mucho ancho de banda de red. Además, el texto se carga más rápido que las imágenes, así que esté atento a cómo ordena sus elementos.

Hay muchos factores a considerar, pero ciertamente eres capaz de hacerlo. Además, has venido al lugar correcto. Este artículo le proporciona todo lo que necesita saber sobre la optimización de la velocidad del sitio web y cómo mejorar el rendimiento del sitio web.

¿Qué es la optimización de la velocidad del sitio web y por qué es tan importante?

Una vez que se hace clic en el enlace de un sitio, la velocidad del sitio web es el tiempo que tardan las páginas web en descargarse, mostrarse en el navegador y responder a las interacciones del usuario.

Este término no debe confundirse con "rendimiento percibido", que es la forma en que los visitantes evalúan el rendimiento de su sitio web en función de lo que ven primero en sus pantallas (que no son necesariamente los elementos que se cargan primero). Debido a que son dos nociones diferentes, pero igualmente importantes, siempre debe trabajar para mejorar la velocidad de su sitio web y el rendimiento percibido en paralelo, algo que los consejos mencionados a continuación lo ayudarán a lograr.

Su próxima pregunta es probablemente "¿qué se considera buena velocidad del sitio web?" La respuesta a eso es específica de la industria, pero se recomienda que, en promedio, sus páginas se carguen en menos de tres segundos.

Finalmente, se preguntará: ¿Por qué es importante la optimización de la velocidad del sitio web (aparte de las frustraciones que surgen de nuestros períodos de atención extremadamente cortos)? Bueno, el tiempo de carga afecta la usabilidad, la conversión, la participación del usuario y la visibilidad del motor de búsqueda.

Impactos de usabilidad: puede parecer obvio, pero cuanto más rápido se cargue su sitio web, antes se podrán usar sus funciones, como elementos que ayudan a los visitantes a navegar para comprar, hablar con el servicio al cliente o simplemente comprender el propósito de su sitio. Por lo tanto, permitir que estas características sean visibles más rápido creará visitantes más felices y recurrentes. Es tan simple como eso.

Impactos de la participación del usuario: es más probable que los usuarios interactúen con su sitio web cuando pueden moverse más rápido a través de los procesos. Por ejemplo, si tiene una tienda en línea y cada paso del proceso de pago tarda más de un par de segundos en cargarse, es comprensible que muchos compradores potenciales abandonen el proceso por completo. Lo mismo puede aplicarse para completar formularios o saltar entre páginas. Puede ver aquí el perjuicio que tales problemas tendrán en su número de visitantes del sitio y en los objetivos comerciales generales.

Impactos de conversión: un objetivo específico en el que se centran la mayoría de los propietarios de sitios es la conversión. De hecho, un retraso tan pequeño como 100 milisegundos en la velocidad de la página puede conducir a una disminución del 7% en las tasas de conversión de su sitio web. Si sus visitantes no pueden utilizar sus funciones lo suficientemente rápido, pasarán a la siguiente sin lugar a dudas.

Impactos en la visibilidad del motor de búsqueda: Google tiene en cuenta la velocidad del sitio web cuando clasifica los sitios (conocido como SEO, Search Engine Optimization). Por lo tanto, si desea que el suyo aparezca más alto en los resultados de búsqueda de palabras clave específicas, tendrá una mejor oportunidad por cada milisegundo más rápido de que sus páginas sean visibles a simple vista.

Ahora que comprende qué es la velocidad del sitio web y por qué es importante, es hora de hacer algo al respecto. A continuación, aprenderá cómo mejorar el rendimiento de su sitio web para asegurarse de que sus clientes y Google estén contentos.

Consejos recomendados para mejorar la optimización de la velocidad del sitio web:

No sobrecargues tu página de inicio

Priorice el contenido del pliegue anterior

Evite tener demasiados medios en su sitio web

Optimiza tus tamaños de imagen

Sé consciente de tu relación texto-imagen

Use texto sobre otros elementos de diseño siempre que sea posible

Reduce la cantidad y estilos de fuentes

Limite su uso de animaciones

Centrarse en el rendimiento móvil

Limite la cantidad de aplicaciones de terceros

01. No sobrecargues tu página de inicio

Si solo quitas una cosa de este artículo, es este consejo. En resumen: manténgalo limpio y evite las páginas de inicio demasiado largas.

Empacar su página de inicio con demasiado contenido y medios (texto, imágenes, videos y animaciones) puede tener un impacto negativo en su éxito. La carga puede llevar demasiado tiempo, y puede abrumar a sus visitantes hasta el punto de que pueden perder el contenido importante de su página y salir sin interactuar con él.

Una página de inicio organizada con un contenido mínimo permitirá a los visitantes de su sitio absorber fácilmente la información presentada desde el momento en que ingresan a su sitio web, ayudándoles a comprender su mensaje principal más rápido.

Si le preocupa perder contenido pertinente, también hay una solución para eso. Puede distribuir su contenido en varias páginas. Esto le dará a toda su valiosa información su propio "espacio" para brillar. Y no se preocupe, el contenido fuera de su página de inicio puede ser fácilmente accesible para los espectadores cuando agrega botones para ayudarlos a navegar, como 'Ver más' o 'Ver mi blog / galería'.

02. Prioriza el contenido del pliegue anterior

"Por encima del pliegue" se refiere a la sección de la página de inicio de su sitio web que los visitantes pueden ver inmediatamente cuando se carga la página y antes de que se desplace hacia abajo. Es la sección más importante de su sitio, ya que es lo primero que verá cualquier persona cuando ingrese, y es la primera sección que se carga.

Use esta sección estratégicamente, atrayendo la atención de sus visitantes mientras se carga el resto del contenido de su sitio. Puede hacerlo a través de texto significativo y fotos relevantes y atractivas. Las pautas más básicas son incluir el texto del encabezado y subtítulo (como el nombre y el eslogan de la compañía), su logotipo y un botón de CTA (llamada a la acción).

Esencialmente, cubra la información principal que sus visitantes necesitan saber, mientras mantiene la página limpia y directa. Del mismo modo, una buena regla general a seguir para esta sección: si se alinea con su mensaje principal, guárdelo. Si distrae la atención de sus visitantes, colóquelo debajo del pliegue o en una página diferente de su sitio.

Sin embargo, hay una excepción a esa regla. Debes asegurarte de que el contenido de la mitad superior de la página esté formado por animaciones limitadas. A medida que las animaciones disminuyen la visibilidad a la que se aplican (más sobre esto a continuación), esto permitirá a los usuarios ver más de su contenido desde el principio. En lugar de animaciones, use texto, imágenes o logotipos para efectos visuales.

03. Evite tener demasiados medios en su sitio web

Además de solo su página de inicio, debe hacer una limpieza de primavera muy necesaria del contenido de su sitio por completo. Aquí nuevamente, concentre sus esfuerzos en alcanzar la calidad sobre la cantidad.

Al igual que el propietario de una tienda de ladrillo y mortero no pondría todo su inventario en los escaparates de su tienda, no debe abarrotar su sitio web. De hecho, su sitio web es su escaparate, y cada artículo que coloca tiene un costo de rendimiento.

Más específicamente, algunas formas de medios son muy perjudiciales para el rendimiento de su sitio, ya que su gran ancho de banda y tiempos de carga lentos afectan el rendimiento de todo lo demás.

Las galerías de fotos con desplazamiento sin fin son uno de estos "cargadores lentos". Cada foto, sin importar cuán pequeño sea el tamaño del archivo, afectará la velocidad de su página. Y en una galería de fotos, todas esas fotos no son visibles a la vez de todos modos. Para realizar los ajustes que mejorarán la velocidad de su página, reduzca la cantidad de imágenes en una galería de fotos a solo las más valiosas, especialmente si está en su página de inicio.

El contenido incrustado es otro problema. Un ejemplo aparente de esto son los videos incrustados de YouTube o Facebook. Debido a que es una fuente externa, el host de su sitio web (por ejemplo, Wix.com) no podrá optimizarlo ni controlar el tiempo de carga. Por lo tanto, si se carga lentamente, nadie puede solucionar el problema excepto usted.

Sin embargo, esto no significa necesariamente que deba evitar el contenido incrustado por completo. Un buen compromiso es reducirlo, como colocar solo uno o algunos videos en su sitio. Otra alternativa específica a los videos incrustados es usar videos de fondo o agregar un cuadro de video. Dado que el host de su sitio web tiene control sobre estos elementos, tendrán un impacto menos perjudicial en la optimización de la velocidad de su sitio web.

En resumen, cuando se trata de los medios del sitio web, pregúntese: ¿Vale la pena? ¿Beneficia mis objetivos de conversión? Si respondió no a estas preguntas, simplemente sáquelo.

04. Optimiza tus tamaños de imagen

El consejo más simple aquí es usar archivos JPEG para imágenes en lugar de archivos PNG siempre que sea posible. (Si no está seguro de qué estamos hablando, consulte esta guía de tamaños de archivo).

Esto se debe a que los archivos JPEG generalmente están más optimizados para la web que los PNG, lo que significa que son más pequeños y se descargan más rápido, al tiempo que conservan casi el mismo nivel de calidad. Y a menos que necesite imágenes transparentes, o sea un fotógrafo profesional, los archivos JPEG proporcionan calidad y facilidad de uso suficientes. Para convertir sus imágenes, hay muchas herramientas gratuitas disponibles en línea para hacerlo, como TinyJPG, Compressor.io e ImageOptimizer.

Los sitios alojados en Wix.com obtienen automáticamente un beneficio adicional de convertir sus imágenes al formato de imagen WebP. WebP es un formato de imagen relativamente nuevo, introducido por Google, que proporciona una mejor compresión y, por lo tanto, un mejor rendimiento para archivos JPEG y PNG. Wix usa WebP con todos los navegadores que admiten este formato nuevo y mejorado. Además de esto, para cualquier imagen que recortes en el editor, Wix optimizará automáticamente el tamaño de tus páginas web.

Es importante tener en cuenta que, si bien nuestra plataforma hará todo lo posible para proporcionar el mejor rendimiento, hay una cosa que no hacemos: nunca degradamos la calidad de la imagen. El aspecto de sus imágenes que nos presenta es su prerrogativa, y no interferimos con eso.

Hay uno más especial para usted: "carga lenta de imágenes". Inicialmente después de cargar un sitio Wix, las imágenes pueden parecer de baja resolución. Esto es solo un marcador de posición mientras se cargan las imágenes de alta resolución. Es una técnica que utilizamos para mejorar la velocidad y el rendimiento percibido de su sitio, al evitar que sus visitantes vean una página en blanco.

05. Sea consciente de su relación texto-imagen

El texto y las imágenes son como tener dos perros de compañía: a veces son mejores amigos y otras luchan agresivamente entre ellos. Por lo tanto, debe establecer territorios separados para cada uno de estos elementos, a fin de darles el espacio de respiración necesario y dejar que trabajen juntos en armonía.

Un ejemplo de esto es crear contraste. Se explica mejor a través de un escenario: un color de fondo blanco, imagen en color y texto blanco. Como el texto se carga más rápido que las imágenes, su texto blanco sobre un fondo blanco parecerá invisible para los navegadores hasta que se cargue la imagen. Evite esto teniendo en cuenta los colores al elegir sus elementos de diseño.

La otra regla de oro que debe seguir aquí: evite colocar texto en las imágenes. La única excepción razonable a esto es logotipos. Esto se debe a que el texto en las imágenes se carga lentamente, por lo que perderá información y también dejará a sus visitantes con un lienzo en blanco hasta que su sitio sea completamente visible. Además de los problemas de carga, el texto en imágenes no ayuda a la accesibilidad del sitio web. En lugar de esto, la solución simple es colocar su texto en un cuadro de texto encima de sus imágenes, para que todos estén felices.06. Usar texto sobre otros elementos de diseño siempre que sea posible

Como se mencionó anteriormente, el texto se carga más rápido que las imágenes y animaciones. Pero esta no es la única razón por la que debería centrar su atención en el diseño en palabras bonitas. Un encabezado de texto de carga rápida llama la atención sobre el mensaje principal de su sitio de inmediato y, por lo tanto, mejora la experiencia general de sus visitantes.

La otra razón clave es el SEO (optimización de motores de búsqueda), o los esfuerzos realizados para garantizar que su sitio web se clasifique más alto en palabras clave específicas en los resultados de búsqueda. Sin ser demasiado técnico, hay una cosa que debe tener en cuenta: el texto detallado y de calidad ayudará a Google (y a otros motores de búsqueda) a comprender mejor de qué se trata su sitio web, mejorando así directamente sus posibilidades de obtener una clasificación más alta. Los medios solo tienen un impacto indirecto en el SEO, al mejorar la experiencia general de sus visitantes o hacer que permanezcan más tiempo en su página. Por lo tanto, si desea elegir la forma más óptima de contenido para atraer más visitantes a su sitio, el texto es el camino a seguir.

06. Usar texto sobre otros elementos de diseño siempre que sea posible

07. Reduce la cantidad y estilos de fuentes

Puede considerar reducir el número de familias de fuentes en su sitio a solo dos o tres. Esto lo ayudará a pintar un estilo consistente para su marca, así como a emitir un aura de limpieza y profesionalismo. Después de todo, las primeras impresiones de su sitio y negocio son momentos duraderos que no puede recuperar. Sin embargo, como esperaba, no estamos sugiriendo esto en base a lo que nuestros amigos diseñadores tienen que decir, también es otra forma de reducir el tiempo de carga de su sitio.

Sin embargo, no es solo un juego de números: el tipo también importa. Si desea utilizar fuentes personalizadas, por ejemplo, tenga en cuenta que estos son elementos gráficos (como imágenes y videos), lo que significa que deberán descargarse antes de aparecer en sus páginas web, lo que puede afectar el rendimiento de sus páginas web.

Por último, evite demasiados pesos de fuente (negrita, subrayado, cursiva, etc.). También requieren descargas adicionales y, como adivinó, se agrega más tiempo a la velocidad de carga de su sitio.

En pocas palabras: no renuncies a fuentes personalizadas o pesos de fuentes por completo. En su lugar, elija sabiamente cuando coloque estas funciones en su sitio y solo úselas cuando desee cumplir un propósito claro y distinto, eso es todo.

08. Limite el uso de animaciones

¿Alguna vez escuchó el dicho sobre el consumo de alimentos: "¿Todo con moderación?" Bueno, desde la perspectiva de su sitio web, se refiere específicamente a su uso de la animación. Al igual que los postres, tienen propiedades adictivas y siempre te dejan con ganas de más; sin embargo, son archivos pesados que se cargan ridículamente lentamente.

Sin embargo, sabemos que no podemos evitar que uses animaciones por completo, porque son archivos bastante atractivos. Sin embargo, puede ser selectivo acerca de cuáles usa. Específicamente, evite los GIF animados. Estos monstruosos archivos son los más pesados de todos, incluso cuando son muy pequeños. Y cuando los GIF animados son grandes, no solo se cargarán lentamente, sino que retrasarán todo lo demás en su sitio web.

Otra práctica recomendada cuando se trata de animación: muévalas más abajo en sus páginas, debajo del primer pliegue. De esta manera, evita que sus visitantes tengan una experiencia abrumadora al aterrizar en su sitio y se asegura de que haya algo significativo para leer de inmediato que se cargue a un ritmo razonable.

Finalmente, puede usar herramientas en línea como GIF a MP4 para convertir las animaciones de su sitio en videos. Los videos ofrecen la misma experiencia visual que las animaciones, especialmente los GIF, pero se cargan mucho más rápido. Además, la reproducción de video ocurre inmediatamente después del primer búfer. Los GIF, por el contrario, deben descargarse completamente antes de la reproducción, lo que afecta el rendimiento percibido de su sitio.

09. Centrarse en el rendimiento móvil

Cada vez más personas navegan por la Web desde sus teléfonos inteligentes cada día, y puede apostar a que esperarán que su sitio se vea bonito en sus pantallas del tamaño de una palma. Wix crea automáticamente una versión optimizada para dispositivos móviles de su sitio, por lo que no tiene que preocuparse por crear una desde cero. Sin embargo, solo tener un sitio móvil es solo el primer paso. Como su sitio es mucho más pequeño en dispositivos móviles que en computadoras de escritorio, debe aprovechar al máximo ese espacio. Por ejemplo, su sección de arriba del pliegue contendrá mucha menos información sobre su versión móvil. Por lo tanto, elige sabiamente lo que colocas allí. Los conceptos básicos incluyen: el nombre de su empresa, el logotipo y un CTA.

Además, asegúrese de eliminar o incluso ocultar todos los elementos que afectan su rendimiento. Esto puede venir en cualquier forma, desde múltiples estilos y formatos de fuente hasta imágenes, animaciones, videos, efectos especiales y más.

Para aprovechar al máximo este pequeño espacio de pantalla, puede reemplazar esos elementos de carga lenta con otras características, como una pantalla de bienvenida que muestra su logotipo o una foto mientras se carga su sitio, o una barra de acción rápida para hacer que toda su información de contacto solo Un simple clic de distancia.

10. Limite el número de aplicaciones de terceros

Las aplicaciones de terceros (TPA) son características que puede agregar a sus páginas que no han sido creadas por el host de su sitio web. Por ejemplo, un feed de Instagram, un widget de calificación o un mapa para mostrar su ubicación, muchos de los cuales están disponibles de forma gratuita a través del Wix App Market.

Los TPA usan algo llamado iFrames, que son esencialmente navegadores web dentro de su sitio. En términos simples, cuando usa un TPA, está intentando cargar un sitio web dentro de su sitio web, lo que es más, uno que está fuera de los límites de optimización del host de su sitio web. En conclusión: los TPA pueden agregar un tiempo significativo a la velocidad de carga de sus sitios web.

Sin embargo, es evidente que los TPA proporcionan mucha funcionalidad. Solo necesita ser inteligente sobre cómo los usa. Siempre debe preguntarse si estas aplicaciones son realmente necesarias para alcanzar los objetivos de su sitio web. Hay otras pruebas que puede hacer para tomar su decisión. Primero, deshabilite cada aplicación, una por una, y vea si nota una diferencia en la velocidad de su sitio. En segundo lugar, intente identificar cualquier superposición en diferentes funciones de TPA. Por ejemplo, ¿necesitas una galería de fotos y un feed de Instagram? Ambos muestran sus fotos, mientras que una galería es algo que le proporciona el host de su sitio web, lo que significa que se cargará mucho más rápido.

Cómo monitorear la velocidad en tiempo extra

Después de haber realizado todos los cambios necesarios para que su sitio sea rápido, querrá medir sus resultados. Si tiene un sitio Wix, puede verificar el rendimiento usted mismo con esta prueba de velocidad del sitio Wix.

Para los usuarios que no son de Wix, hay muchas otras pruebas de rendimiento del sitio web para probar. Algunos ejemplos de los más populares incluyen PageSpeed Insights by Google y Pingdom Tools. Ambos le permiten conocer la velocidad de su página y otras ideas importantes, como el razonamiento detrás de la carga lenta o las formas de mejorarla.

Claves

Comprenda el rendimiento percibido: esta es la rapidez con la que los visitantes de su sitio perciben el rendimiento de su sitio web en función de lo que se carga primero en sus pantallas. Por ejemplo, si el contenido de su página de inicio debajo del pliegue se carga antes que el contenido del pliegue, los visitantes verán una pantalla en blanco cuando ingresen a su sitio web. Es por eso que la ubicación y el tipo de contenido son elementos críticos.

Cada elemento que coloque en su sitio web tiene un costo de rendimiento: cuando desee agregar un elemento, ya sea texto (longitud, estilo o tipo), video, imagen, animación o aplicación, pregúntese: ¿Vale la pena? ¿Se alinea con mis objetivos más importantes? ¿Beneficia mi tasa de conversión? Si responde "no" a solo una de estas, puede considerar sacarlo o, al menos, no colocarlo sobre el pliegue de su página.

No sobrecargue su página de inicio: esta suele ser la primera página que sus visitantes verán en su sitio web, lo que significa que es la primera página en cargarse. Como práctica recomendada en diseño web, debe mantenerlo limpio. Cuantos menos elementos tenga y menos archivos pesados use, más rápido se cargará su página y mayor será la probabilidad de que los visitantes se queden.

Esperamos que estos consejos les sirvan, muchos saludos del Equipo de KEY360CHILE.