Todos hemos experimentado ese momento crítico en el que estás a punto de hacer una compra importante, como un boleto de avión… y de repente, la página web deja de cargarse. Tu corazón se para mientras te preguntas si la transacción se realizó y entras en pánico de que te hayan cobrado dos veces. Al final, la frustración se apodera de ti, necesitabas comprar algo y has perdido tu oportunidad, todo gracias a una página que simplemente no ha cargado bien.
Si te sientes identificado con esta experiencia, entonces entenderás la importancia del rendimiento al momento de crear una página web. Continúa leyendo este artículo para saber de qué es el WPO (optimización del rendimiento web), qué puede afectar el rendimiento de tu página web y mejores prácticas para comprobar y mejorar el rendimiento de tu sitio web.
01. ¿Qué es el web performance de una página web?
El web performance o rendimiento de una página web, mide la rapidez con la que las páginas de un sitio web se cargan y se muestran en el navegador de un usuario en cualquier tipo de dispositivo.
El tiempo de carga y el rendimiento del sitio web influyen en la experiencia del usuario, la interactividad y la usabilidad de un sitio. En pocas palabras, cuanto más rápido cargue y se muestre una página web, mejor será su "rendimiento".
La infraestructura del servidor y la plataforma desempeñan un papel fundamental en el rendimiento de tu página, pero hay otros factores que pueden afectar, como el contenido de tu sitio web y la sobrecarga de imágenes y videos.
Los sitios de Wix ahora rinden más que nunca. Las constantes mejoras en la infraestructura, como la optimización continua del código y las conversiones automáticas de imágenes al formato WebP, ayudan a que las páginas se carguen más rápido, independientemente del dispositivo o la ubicación.
02. ¿Qué es wpo?
Dicho esto, WPO son las siglas del término en inglés de "Web Performance Optimization" lo que significa optimización del rendimiento de una web. Básicamente, el WPO es una practica de mantenimiento web que se ocupa en optimizar al máximo un sitio web por medio de distintas estrategias y prácticas, para que cargue lo más rápido posible.
03. ¿Por qué es importante el rendimiento de tu página web?
Sea cual sea tu sector o nicho, piensa en el rendimiento de tu página web como la base para tu éxito online. Si tu página tarda en cargar su contenido, aunque sea unos segundos, es probable que el visitante abandone y no vuelva a tu página. Esto puede tener un impacto prolongado no solo en tu página web, sino también en cómo el público percibe tu marca.
04. ¿Cuáles son las ventajas de una buena WPO?
Profundicemos un poco más en por qué el rendimiento de una página web es tan importante y la áreas que influye:
La experiencia de usuario
La tasa de rebote y la retención de visitantes
La tasa de conversión
La percepción de marca
SEO
Rendimiento móvil
Mejor experiencia de usuario
Al crear una página web, es esencial tener en cuenta cómo el diseño afecta al rendimiento. Si una página web tiene un aspecto increíble pero es lenta para cargar, es probable que tus visitantes se impacienten, se frustren e incluso se vayan. Los archivos que son demasiado grandes, como imágenes, videos y gráficos, ralentizan el tiempo de carga.
"El rendimiento de la página es la experiencia de usuario", dice Lara Hogan, autora de Designing for Performance. "Cuando diseñes y desarrolles una nueva página, debes tener en cuenta muchos componentes que hacen la experiencia de usuario: el diseño, la jerarquía, que sea intuitiva, la facilidad de uso, etc.".
Al ofrecer una experiencia de usuario que tenga en cuenta el rendimiento, le estarás dando a tu página una mejor oportunidad de garantizar su éxito en la web.
Menor tasa de rebote y mayor retención de visitantes
Como dueño de una página web tienes muy poco tiempo para causar una buena primera impresión a tus visitantes, por lo que es esencial que tu página funcione bien. La tasa de rebote mide el porcentaje de visitantes que llegan a una página web y la abandonan después de ver solo una página o sin hacer clic en ningún enlace. Según Google, si una página tarda tres segundos en cargarse, en lugar de uno, los visitantes tienen un 32% más de probabilidades de rebotar.
Mayor tasa de conversión
Si un usuario tiene una buena experiencia con tu página web, es probable que se quede y haga clic en un par de elementos. Una buena experiencia puede incluso hacer que vuelvan a tu página y compren algo o soliciten tus servicios. Según Cloudflare, "cuanto más rápido se cargue una página web, más probable es que un usuario realice la acción objetivo de esa página web".
Sin embargo, un estudio realizado por Portent en el 2019 mostró que los primeros cinco segundos del tiempo de carga de una página tienen el mayor impacto en la tasa de conversión. Incluso solo un segundo de retraso reducirá las conversiones en un 4,42%.
Mejor percepción de marca
Controlar el rendimiento y el aspecto general de tu página web puede indicarle a tus clientes que valoras su tiempo y su dinero. Una sola mala experiencia con una página web de bajo rendimiento, puede influir negativamente en la confianza y la percepción general de la marca.
Imagínate que un micro influencer publica el enlace a tu tienda online, haciendo una llamada a la acción a tu audiencia, para decirles que la sudadera con tu marca no solo está disponible, sino que está en oferta. Miles de visitantes con alta intención de compra deciden hacer clic en tu página y comprar una, pero se encuentran con una página que tarda en cargarse. Ciertamente, esta experiencia de usuario negativa tendrá un impacto negativo en la percepción de tu marca. Por lo tanto, asegura tener una buena experiencia de usuario si deseas generar confianza en tu marca y ganar la lealtad de tus clientes a largo plazo.
Mejor posicionamiento en SEO
El rendimiento no solo afecta a la experiencia de usuario, sino que también puede influir en cómo los visitantes encuentran tu página en buscadores.
Los Core Web Vitals o indicadores básicos de Google forman parte de la experiencia de página de Google, un conjunto de señales que miden la experiencia del usuario percibida de un sitio web. Pueden influir en la forma en que una página web aparece en una página de resultados de búsqueda (SERP).
John Mueller, defensor de las búsquedas de Google, dice que "la experiencia del usuario es solo una de las muchas señales que juegan un papel en la clasificación. Hay que tener en cuenta que la intención de búsqueda sigue siendo una señal muy fuerte. Por lo tanto, un sitio web con una experiencia de usuario inferior a la media aún puede clasificarse alto si ofrece contenido bueno y relevante".
Sin embargo, si, por ejemplo, tu empresa se clasifica como un competidor para la misma consulta de búsqueda, entonces el sitio web que muestre el mejor rendimiento obtendrá la mejor clasificación.
Mejor rendimiento móvil
Hoy en día, 6,1 mil millones de smartphones están conectados a Internet, por lo que no es de extrañar que el más del 60% de todo el tráfico web provenga de los celulares. Por lo que crear un sitio web optimizado para dispositivos móviles es crucial para el rendimiento de tu página.
La filosofía "Mobile-First" proviene del diseño web, y primero se enfoca en el diseño de una interfaz para dispositivos móviles, para después adaptar ese mismo diseño al resto de los formatos.
Es probable que los usuarios con celulares navegan por tu página web mientras van al trabajo o esperan su café, lo que significa que las distracciones están en todas partes y la velocidad es esencial. Los estudios demuestran que una mejora de 0,1 segundos en la velocidad de una página adaptada para el móvil, puede aumentar la tasa de conversión en un 8,4%. Puedes utilizar esta sencilla prueba para comprobar si tu página es compatible con dispositivos móviles.
05. Métricas de Web Performance
El rendimiento de una página web se mide mediante varias pruebas de velocidad y calidad. Esto incluye qué tan rápido se carga un sitio web, qué tan rápido responde a las interacciones del usuario y con qué fluidez se ejecutan medios como las animaciones. Estas pruebas se miden en el “laboratorio”, realizando simulaciones controladas, o directamente en el “campo”, utilizando experiencias de usuarios y mediciones reales.
Dado que hay tantas herramientas y métricas con las que hay que estar al día, la iniciativa Core Web Vitals de Google o Métricas web principales, crea un estándar industrial unificado y alineado para ayudar a las páginas web a centrarse en las métricas más importantes. Aunque son métricas clave para medir el rendimiento de la página web, es importante tener en cuenta que no son las únicas que evalúan el rendimiento.
Core Web Vitals
Los Core Web Vitals o indicadores básicos, miden la velocidad, la interactividad y la estabilidad visual mediante tres señales:
Largest Contentful Paint (LCP) o Tiempo de carga del contenido más grande, mide el tiempo que se tarda en renderizar la imagen o el bloque de texto más grande de la página. Según Google, esto suele ser una imagen.
Cumulative Layout Shift (CLS) o Cambio acumulativo del diseño, mide todos los cambios de diseño durante toda la vida útil de una página. Un cambio de diseño se produce cada vez que un elemento visible cambia de posición mientras se carga la página.
First Input Delay (FID) o Retraso de la primera entrada, mide el tiempo que transcurre desde que un usuario interactúa por primera vez con una página (por ejemplo, haciendo clic en un enlace o botón) hasta que el navegador procesa realmente esa interacción.
Consejo: Puedes aprender más sobre Core Web Vitals y el rendimiento del sitio web de Wix, y las diferencias entre las puntuaciones de computadoras y celulares.
Métricas de tiempo de carga
En su conferencia para desarrolladores de 2018, Web Performance Made Easy, Google puso gran énfasis en la velocidad, diciendo: "La mayoría de los usuarios [75%] califican la velocidad por encima de todo en la jerarquía de sus necesidades en UX (experiencia de usuario)."
La velocidad de carga de una página se refiere a la rapidez con la que el contenido de tu página web tarda en cargarse. La velocidad de carga puede medirse de varias maneras, entre ellas:
Speed Index (SI), o Índice de velocidad, representa la rapidez con la que se muestra el contenido durante la carga de la página.
First Contentful Paint (FCP), o Primer despliegue de contenido, que mide el tiempo desde que la página comienza a cargarse hasta que cualquier parte del contenido (textos, imágenes y otros elementos gráficos) se renderiza en la pantalla.
Time to Interactive (TTI), o Tiempo de interacción, que mide cuántos segundos transcurren desde que un usuario entra en una página hasta que ésta se vuelve totalmente interactiva (cuando los usuarios pueden hacer clic en los botones y participar activamente en tu sitio).
Total Blocking Time (TBT), o Tiempo total de bloqueo, en pocas palabras, mide la cantidad total de tiempo que tu página web estuvo bloqueada, impidiendo al usuario interactuar con ella.
Time to First Byte (TTFB), o Tiempo hasta el primer byte, que mide el tiempo entre que el navegador solicita una página y cuando recibe el la primera interacción de información del servidor.
06. ¿Qué afecta al rendimiento de una página web?
Para optimizar el rendimiento de tu página, vamos a profundizar en los siguientes parámetros que debes tener en cuenta:
Peticiones HTTP
Las peticiones HTTP (protocolo de transferencia de hipertextos) estructuran la comunicación entre los navegadores y los servidores web. Cuando escribes una URL en tu navegador, básicamente le estás pidiendo a tu navegador que solicite cada uno de los archivos de esa página al servidor. En general, cuanto más compleja es una página web, más peticiones HTTP deben enviarse para cargar la página completa, lo que toma más tiempo.
Por lo general, cuantas menos peticiones HTTP tenga una página, mejor será su rendimiento. Entre los elementos que pueden influir en el número de peticiones HTTP están las imágenes, JavaScript, archivos CSS y herramientas de terceros.
Peso de la página
Aunque el número de peticiones afecta al rendimiento, también lo hace el contenido que se solicita. El peso de la página, también conocido como tamaño de la página, se refiere al volumen de archivos de una página web: HTML, imágenes u otros medios, JavaScript, CSS y recursos de terceros contenidos en la página. Cuanto más pesada sea una página, cuantos más elementos y activos tengan que cargarse, más lento será su rendimiento.
Tamaño de las imágenes:
Las imágenes juegan un papel esencial en el diseño de tu página web. Transmiten el mensaje de tu marca, cautivan a los visitantes, apoyan el contenido del blog e incluso pueden actuar como llamadas a la acción (CTA). Sin embargo, las imágenes pesan más que los archivos HTML de texto plano, tardan más en cargarse y, por tanto, pueden afectar significativamente al rendimiento de una página web. Para garantizar el mejor rendimiento, todas las imágenes deben desempeñar un papel estratégico en tu página y estar optimizadas. La optimización de imágenes se refiere al proceso de convertir las imágenes en el menor tamaño de archivo posible, sin comprometer la calidad.
Puedes utilizar una herramienta para cambiar el tamaño de las imágenes, para escalarlas a las dimensiones exactas que desees. A continuación, puedes descargarlas en diferentes tipos de formatos JPG, PNG o GIF. Es importante tener en cuenta que el mejor formato en términos de rendimiento es el JPG, ya que las imágenes JPGs pueden ser hasta 10 veces más pequeñas que las PNGs y, por lo tanto, pueden cargarse mucho más rápido. También es una buena práctica evitar los GIFs, ya que estas imágenes animadas tienden a generar archivos de gran tamaño que provocan tiempos de carga más largos. En su lugar, prueba con un video, ya que utiliza un tamaño de archivo menor y puede ser visto por el usuario antes de que el archivo se descargue por completo.
Cada imagen cargada a una página de Wix se optimiza automáticamente y se convierte a formatos de imagen modernos (como WebP), para garantizar una descarga rápida y de alta calidad. Las páginas de Wix también utilizan la "carga diferida" para optimizar el rendimiento, por lo que los navegadores
retrasan la carga de contenidos o medios fuera de la vista inicial del usuario.
Tamaño del archivo:
Cuanto más pequeño es el archivo, más rápido se envía y se descarga. Para mejorar el rendimiento, los archivos pueden ser comprimidos por un servidor web, o reducidos al máximo sin perder información, para luego ser enviados a un navegador que los recibe y se muestra de forma normal.
Wix comprime automáticamente todos los archivos utilizando Brotli o gzip para que las descargas sean más rápidas y eficientes.
Alojamiento web
Hablemos del hosting o alojamiento web y cómo afecta en cuanto a la entrega de los archivos de una página web al navegador de un usuario. Las diferentes opciones de hosting pueden afectar al rendimiento de tu página en función del tamaño del mismo, el tráfico y la escalabilidad.
Wix gestiona el hosting por ti, alojando todos las páginas web en servidores en múltiples ubicaciones alrededor del mundo, entregadas y almacenadas automáticamente por CDNs (Content Delivery Networks – hablaremos de ellos más adelante), lo que asegura tiempos de respuesta rápidos del servidor, específicamente el tiempo hasta el primer byte (TTFB).
Almacenamiento en caché
El almacenamiento en caché es el proceso de almacenamiento de datos en un servidor o en el navegador desde donde se pueden consultar más rápidamente en el futuro, lo que reduce la cantidad de solicitudes HTTP necesarias.
Por ejemplo, si tienes una tienda online que vende artículos de segunda mano, tendrás ciertos elementos como el logo, que aparecen en el mismo lugar en cada página. Sin el almacenamiento en caché, la página tendría que descargar el logo cada vez que un usuario hiciera clic en una nueva página de producto. Todos los sitios de Wix implementan el almacenamiento automático en caché en todas las páginas.
Ubicación geográfica
Aunque el internet puede parecer omnipresente, se basa en una infraestructura que se distribuye en ubicaciones fijas en todo el mundo. Cada petición HTTP tiene que viajar desde un navegador hasta un servidor, y luego la información tiene que viajar de vuelta desde el servidor y ser entregada al navegador. Cuanto más larga sea la distancia física que tienen que recorrer los datos entre los servidores y los navegadores, más tiempo tarda en completarse un ciclo de solicitud y respuesta. Por ejemplo, una página web alojada en un servidor con sede en Seattle, Washington, funcionará mejor para la petición de un navegador en Seattle que para una petición desde Madagascar, porque los datos tienen menos kilómetros físicos que recorrer.
Para reducir la distancia que deben recorrer los datos al atender las solicitudes, los proveedores de hosting también colocan servidores en puntos estratégicos alrededor del mundo (llamados servidores proxy), como parte de las redes de entrega de contenidos o Content Delivery Networks - CDNs. Estos servidores alojan copias en caché de páginas web, imágenes y videos, respondiendo rápidamente a las peticiones de los navegadores más cercanos.
Wix aloja todos las páginas en CDNs y centros de datos distribuidos globalmente, además de habilitar automáticamente el almacenamiento en caché del lado del servidor, guardándolo sin problemas en nuestras CDNs para asegurar una entrega de contenido rápida y eficiente, sin importar la ubicación.
Complementos del navegador, extensiones y aplicaciones de terceros
Los complementos de terceros proporcionan a tu página web una funcionalidad adicional, al acceder a los datos almacenados en otro servidor. Como requieren peticiones HTTP adicionales, a menudo son lentos para cargar. Para optimizar el rendimiento, limita los complementos a solo aquellos que contribuyen en gran medida a la experiencia de usuario.
Redirecciones de URL
Las redirecciones envían a los visitantes y a los motores de búsqueda a URLs diferentes de la página que solicitaron originalmente. Se activan cuando un navegador envía una petición HTTP a un servidor para una determinada URL de una página que ha sido redirigida a otra. El servidor responde a la petición del navegador con la nueva URL de página, y entonces el navegador responde con una nueva petición para esa URL. Dado que requiere completar una petición HTTP adicional, puede afectar negativamente al rendimiento de la página. Múltiples peticiones de redirección pueden suponer una gran carga para los recursos del navegador y, en última instancia, ralentizar el tiempo de carga de la página.
A medida que tu negocio crece y tu contenido online cambia, es posible que necesites actualizar el flujo de tu página web utilizando redirecciones. Por ejemplo, digamos que has creado varias entradas de blog que cubren el mismo tema y quieres consolidarlas en una sola entrada estratégicamente. Aunque las redirecciones son a menudo inevitables y necesarias para el SEO, debes limitarlas al mínimo para garantizar un buen rendimiento
Puedes utilizar el bot de informes de registro para encontrar problemas/errores en el código, o la aplicación de Deepcrawl (es de pago), para establecer redirecciones utilizando el administrador de redirecciones de Wix. (Ve a tu panel de control, haz clic en “Marketing y SEO”, y después haz clic en “Herramientas de SEO” y luego haz clic en el “Administrador de Redirecciones de URL”).
07. Mejores prácticas para comprobar el web performance de tu página web
El primer paso para verificar el rendimiento del sitio web es probarlo.
Usando el Panel de control de velocidad de tu sitio Wix puedes ver el TTI (tiempo de interacción) de tu página, además de probar, analizar y optimizar su rendimiento en celulares o en computadoras. También puedes monitorear tu velocidad de carga por página, compararla con la competencia en tu industria y obtener consejos prácticos para mejorar la experiencia del usuario de tu sitio.
Antes de empezar con las pruebas, ten en cuenta lo siguiente:
Presta atención a tu fuente de datos
Los datos de campo, o datos de monitoreo de usuarios reales (RUM por sus siglas en inglés), son la medición más precisa, ya que comprenden datos de tus usuarios reales, de visitas reales y reflejan las condiciones reales de los dispositivos, redes y ubicaciones de tus usuarios. Sin embargo, no todas las páginas tienen suficiente tráfico para obtener estos datos de campo, por lo que otra opción es utilizar datos de laboratorio. A diferencia de los datos de campo, los datos de laboratorio proceden de un entorno simulado. Aunque son menos precisos, los datos de laboratorio son útiles cuando se trata de ver cómo un cambio en el diseño podría afectar al rendimiento de tu página web.
Supongamos que estás considerando incorporar una nueva galería y quieres ver si tiene algún efecto notable en el rendimiento de tu página antes de publicarla. Como no puedes obtener resultados de campo (RUM) porque todavía no has publicado el nuevo diseño, puedes utilizar los datos de laboratorio para obtener resultados inmediatos y detectar la hipotética degradación del rendimiento para una experiencia de usuario típica, tanto en computadoras como en celulares.
Presta atención al almacenamiento en caché
En las pruebas de laboratorio, los resultados cambian cada vez que actualizas la página. Para cada prueba, se recomienda actualizar de tres a cinco veces y sacar una media para obtener los resultados más precisos y fiables.
Distintas pruebas dan resultados diferentes. Cada prueba funciona de forma diferente y calibra su propia medición y puntuación de rendimiento. Además, al analizar una URL, recibirás dos informes distintos: uno para computadora y otro para celular. Es probable que tengan resultados de rendimiento diferentes debido a las capacidades de procesamiento, las condiciones de la red, o el contenido de la página web que a veces es diferente entre la computadora y el celular. Para obtener un resultado preciso, haz entre una y tres pruebas, pero presta atención a los detalles de cada prueba y a la procedencia de los datos para comprender mejor por qué pueden ser diferentes.
Google dispone de varias herramientas gratuitas que realizan un buen seguimiento a todo lo que es WPO, como Google PageSpeed Insights y Google Lighthouse.
Ahora que has leído este artículo puedes entender qué es wpo y su importancia no solo para tu página web sino para tu marca en general. También te recomendamos leer nuestro artículo con 10 técnicas para mejorar la velocidad de carga web de tu página web. Esperamos que estas prácticas y recomendaciones te ayuden a optimizar el rendimiento de tu página web.
por Rebecca Tomasis
Organic Growth Expert
por Danae Salinas
Blogger & Marketing Specialist - Español