Obtén información sobre cómo los responsables de la toma de decisiones empresariales y quienes no son desarrolladores pueden mejorar las Métricas web esenciales.
Introducción
Está comprobado que la experiencia del usuario en los sitios web tiene un impacto directo en los resultados comerciales. Ofrecer una mejor experiencia en la que los sitios web cargan y responden más rápido a los usuarios suele generar una mayor participación y conversiones. Las Métricas web esenciales son una iniciativa para cuantificar la experiencia del usuario de los sitios web y, así, identificar áreas de mejora.
Sin embargo, una gran cantidad de la documentación de las Métricas web esenciales está dirigida a los desarrolladores web, con una comprensión técnica profunda y un control total de su código. Muchos sitios web son creados por usuarios que no son desarrolladores con una plataforma de “creador de sitios”, como WordPress, Shopify, Wix o alguna otra solución similar, a menudo sin un equipo de desarrollo web.
Incluso cuando hay un equipo dedicado o desarrolladores web, no son los únicos responsables del rendimiento web. Los responsables de la toma de decisiones empresariales tienen una gran influencia en el rendimiento del sitio web, desde decidir el contenido y los diseños hasta desarrollar estrategias publicitarias en un esfuerzo por generar más tráfico a sus sitios web. Estas decisiones suelen tener un impacto significativo en el rendimiento del sitio web.
El objetivo de esta guía es proporcionar información relevante para que los creadores y propietarios de sitios comprendan y mejoren la experiencia del usuario tanto como sea posible, sin necesidad de tener conocimientos técnicos profundos de desarrollo web.
Al mismo tiempo, muchos problemas de rendimiento requieren que los desarrolladores implementen correcciones técnicas, y nuestras guías enfocadas en desarrolladores pueden ayudar con estas tareas. Esta información no pretende ser una guía completa, sino más bien una introducción a la iniciativa de Métricas web esenciales para los responsables de la toma de decisiones empresariales con algunas causas raíz comunes del rendimiento deficiente de una página que no están relacionadas con el desarrollo. Además de estos, es probable que un desarrollador web deba interactuar para poder avanzar.
¿Cuáles son las Métricas web esenciales?
Las Métricas web esenciales son un conjunto de tres métricas diseñadas para medir la experiencia del usuario de una página y, en particular, qué tan rápida es para los usuarios. Cada uno tiene una abreviatura de tres letras:
- El Largest Contentful Paint (LCP) mide el rendimiento de la carga, es decir, cuánto tiempo, en segundos, tarda en aparecer el contenido más importante de la página después de que se comienza a cargar una página.
- Cambio de diseño acumulado (CLS) mide la estabilidad visual de una página, es decir, cuánto se mueve el contenido mientras se carga.
- Interaction to Next Paint (INP), que reemplazó oficialmente a FID el 12 de marzo de 2024, mide la capacidad de respuesta de la página, es decir, la rapidez con la que la página responde a los clics, las presiones y las interacciones del teclado.
Cada métrica mide una faceta diferente de la experiencia del usuario. Google también proporciona umbrales recomendados para cada métrica. Por debajo de los cuales la experiencia del usuario se considera buena y por encima de los cuales se considera mala. Entre estos umbrales, se considera que una página está en el rango que necesita mejoras. Ten en cuenta que, con estas métricas, los números más bajos son mejores.
¿Cómo se miden las Métricas web esenciales?
Los usuarios reales de tu sitio web miden las Métricas web esenciales, y los diferentes usuarios obtendrán resultados diferentes. No son "lo que Google piensa" ni "lo que Googlebot piensa", sino lo que experimentan los usuarios reales de tu sitio web.
Algunos usuarios usarán dispositivos y redes más rápidos. Algunos estarán en dispositivos más lentos o en redes más lentas. Algunos usuarios visitarán páginas más simples y rápidas de tu sitio, y otros, páginas más complejas y lentas. Los resultados de todas estas experiencias del usuario se agregan para brindar una medición general de todo tu sitio web.
Google pone a disposición los datos de los usuarios que habilitaron Chrome en el Informe sobre la experiencia del usuario en Chrome (CrUX), que se utiliza en muchas herramientas de Google, como PageSpeed Insights y Google Search Console.
CrUX está disponible en millones de sitios web populares, pero no todos los sitios web lo están. Otras herramientas de supervisión de usuarios reales (RUM) también pueden recopilar estas métricas para tu sitio.
¿Cómo puedo encontrar las Métricas web esenciales de mi sitio?
Hay muchas herramientas que muestran Métricas web esenciales proporcionadas por Google y por terceros. En esta publicación, se presentan dos herramientas que te permiten ver rápidamente las Métricas web esenciales de tu sitio. Para obtener información más detallada sobre las demás herramientas de Google, incluido un flujo de trabajo para usarlas a fin de abordar las Métricas web esenciales, consulta la publicación sobre flujos de trabajo de Métricas web esenciales con herramientas de Google.
Si tu plataforma proporciona una solución RUM integrada, puede proporcionar información mucho más detallada sobre las páginas de tu sitio o permitirte desglosar páginas específicas o segmentar a tus usuarios para ayudarte a comprender e identificar los problemas.
PageSpeed Insights
Para obtener una vista rápida que no requiere configuración, puedes usar PageSpeed Insights (PSI). Escribe la URL y haz clic en analizar. Si tu sitio está incluido en CrUX, deberías ver rápidamente la sección "Descubre lo que experimentan tus usuarios reales":
Aquí se muestra cómo los usuarios reales de Chrome experimentaron tu sitio web durante los últimos 28 días. En la parte superior, verás las tres Métricas web esenciales y otras métricas complementarias debajo (incluida la métrica de INP pendiente). En la parte superior de la página, solo se registran las Métricas web esenciales; sin embargo, en la parte superior de la página, se muestra la evaluación general de Métricas web esenciales; sin embargo, las demás métricas pueden ser útiles para solucionar problemas relacionados con ellas, como se mostrará en la siguiente sección.
Puedes alternar entre las vistas para dispositivos móviles y para computadoras de escritorio con los botones que se encuentran en la parte superior de esta sección. También puedes alternar entre Esta URL y todos los datos de ese Origen con el botón de activación ubicado en la parte superior derecha, donde existen datos para ambas.
Estas cifras deberían proporcionar un indicador amplio del rendimiento de tu sitio, las métricas que se podrían mejorar y los tipos de dispositivos.
Google Search Console
Google Search Console (GSC) es solo para propietarios de sitios, por lo que es obligatorio registrar y verificar la propiedad del sitio para poder usarlo. Proporciona detalles sobre cómo la Búsqueda de Google ve tu sitio.
A diferencia de PageSpeed Insights, GSC enumera todas las páginas de tu sitio que la Búsqueda de Google conoce y proporciona detalles de Métricas web esenciales para todas ellas:
Las páginas se agrupan en grupos de URLs para que puedas ver fácilmente si determinadas categorías de páginas (por ejemplo, páginas de detalles de productos, páginas de blogs, etc.) tienen problemas relacionados con las Métricas web esenciales. Debido a que, por lo general, se basan en tecnologías o plantillas similares, puede haber una causa común para cualquier problema en estas páginas.
Problemas comunes en las Métricas web esenciales de los creadores de sitios
Muchos problemas de rendimiento requieren que los desarrolladores implementen correcciones técnicas, y nuestras guías enfocadas en el desarrollador pueden ayudarlos con ellas. En esta sección, analizamos algunos de los problemas habituales que no son desarrolladores y con los que pueden ayudar los responsables de la toma de decisiones empresariales para mejorar estas métricas.
Cuando decimos "no desarrolladores", nos referimos a quienes usan plataformas de creadores de sitios donde tienen un control limitado sobre cómo se codifica el sitio realmente o a los responsables de la toma de decisiones empresariales que pueden decidir el diseño del sitio o ayudar a priorizar los presupuestos.
Problemas más grandes de Contentful Paint (LCP)
El objetivo del LCP es medir la velocidad de carga de las páginas web midiendo el tiempo que transcurre desde que se hace clic en un vínculo hasta que aparece el contenido más grande (por lo general, una imagen de banner o un título) en el navegador.
Para que la experiencia de página sea buena, la página web debe mostrar el contenido dentro de los 2.5 segundos posteriores al clic en el vínculo. Si tarda más de 4 segundos, se considerará una experiencia mala.
En las siguientes secciones, se presentan algunos de los problemas habituales que afectan al LCP y en los que pueden influir los responsables de la toma de decisiones empresariales.
Demoras en el inicio de la carga de la página
A menudo pensamos en mejorar el tiempo de carga de la página, pero muchas veces hay un retraso antes de iniciar esa tarea. Es imposible tener un LCP por debajo del umbral bueno de 2.5 segundos si el sitio web ni siquiera se descarga durante unos segundos.
El tiempo hasta el primer byte (TTFB) es el tiempo que tarda en descargarse la primera parte de tu página web. Si PageSpeed Insights muestra una métrica de diagnóstico grande de TTFB en rojo o ámbar, es clave abordar esa información y debería tener un efecto directo de URL en el LCP.
Comprende a tu público
Para los problemas relacionados con el TTFB, es importante comprender a tu público. Si tu sitio web está alojado en un país, pero llega a un público global, la proximidad geográfica entre los usuarios de tu sitio web y tu servidor web se convierte en un factor en el TTFB de una página. Una red de distribución de contenidos (CDN) permite que las copias de tu sitio se almacenen en caché en todo el mundo y, por lo tanto, cerca de los usuarios. Muchos proveedores de hosting incluyen una CDN como parte de sus servicios y se encargan de esto automáticamente. Verifica si este es el caso en el que está alojado tu sitio. Algunas plataformas ofrecen diferentes niveles de servicio con más ubicaciones de CDN para niveles pagados más altos. En estos casos, las empresas globales deberían considerar niveles más altos.
Reducir redireccionamientos
Los redireccionamientos son otra causa común de TTFB lentos. Cuando publiques campañas publicitarias o envíes comunicaciones por correo electrónico, intenta minimizar la cantidad de redireccionamientos. Para ello, evita usar varios reductores de vínculos o incluir URLs que deban redireccionarse. Por ejemplo, si utilizas example.com/blog en una campaña que necesita redireccionar a www.example.com/blog, que luego redirecciona a https://www.example.com/blog agrega tiempo al TTFB de una página. Asegúrate de que tus campañas de marketing utilicen la cantidad mínima de redireccionamientos posible.
Asegúrate de que las campañas publicitarias estén orientadas al público correcto.
Además, asegúrate de que tus campañas publicitarias estén orientadas de forma eficaz a tu público. Obtener mucho tráfico nuevo de usuarios que se encuentran en otro lugar del mundo, pero a los que no puedes enviar tu producto, es tanto una inversión publicitaria que se desperdicia como un impacto negativo en el rendimiento de tu sitio web.
Los parámetros de URL pueden afectar el rendimiento web
Los parámetros de URL, como los parámetros de UTM, suelen usarse para las campañas de marketing. Estos pueden reducir la eficacia del almacenamiento en caché en tu infraestructura, ya que cada URL puede parecer una página única, aunque siempre se entregue la misma página. Si utilizas parámetros de UTM, comunícate con tu proveedor de CDN o equipos de infraestructura para asegurarte de que la infraestructura de almacenamiento en caché ignore estos parámetros de URL para que las campañas puedan beneficiarse de las páginas que ya están almacenadas en caché.
Los medios pueden ser costosos para el rendimiento
Considera el impacto del contenido multimedia en tus páginas. Los medios, como las imágenes y los videos, suelen ser mucho más grandes y, por lo tanto, tardan más en descargarse que el texto. Esto también puede ralentizar el resto de la carga de la página. Esto es especialmente importante cuando el elemento LCP es multimedia en lugar de texto. El elemento LCP es una imagen que se encuentra en aproximadamente el 80% de las páginas web, por lo que es importante que consideres el impacto del contenido multimedia en tu sitio.
Al mismo tiempo, los elementos multimedia pueden contribuir a una experiencia visual enriquecida para el usuario que resulta mucho más atractiva que un sitio con mucho texto. Por lo tanto, quitar medios rara vez es una opción; sin embargo, debes estar al tanto de su costo y de cómo reducirlo para minimizar los problemas de rendimiento.
Evitar los carruseles
Los carruseles compuestos por varias imágenes pueden afectar el tiempo de carga general de una página, ya que pueden requerir que se descarguen varias imágenes al mismo tiempo si no se implementan de manera óptima. Además, a pesar de su ubicuidad, los carruseles a menudo no proporcionan una excelente experiencia del usuario, por lo que debes pensar detenidamente antes de usarlos en tu sitio.
Usa imágenes optimizadas para la Web
También está el tamaño de los activos de medios. Muchas imágenes de la Web se publican con una resolución demasiado alta. Asegúrate de que los socios de medios o las agencias de diseño proporcionen imágenes optimizadas para la Web en lugar de las imágenes con calidad de impresión de tamaño completo que suelen proporcionar. Puedes usar un servicio como TinyJPG para quitar rápidamente los datos innecesarios de las imágenes antes de subirlas. Muchas plataformas web intentarán optimizar automáticamente las imágenes cuando se suban, pero como no conocen las dimensiones en las que se mostrarán esas imágenes en el dispositivo del usuario, comenzar con imágenes más pequeñas puede generar ganancias significativas.
Ten mucho cuidado con los videos
Presta mucha consideración cuando uses videos. Los videos son uno de los contenidos más grandes (y, por lo tanto, más lentos) para que un sitio web los descargue y muestre. Por lo tanto, trata de no usarlos demasiado. Evita usarlos en la parte superior de las páginas web y guárdalos para que queden más abajo en la página. Esto puede permitir que el contenido menos costoso se cargue rápidamente para brindar una mejor experiencia de carga a los usuarios y garantizar que no se vea afectado tu LCP.
Pruebas A/B
Muchas empresas realizan pruebas A/B para experimentar con los cambios en su sitio web. La forma en que se implementan puede tener un gran impacto en el LCP.
Muchas soluciones de pruebas A/B retrasan el momento en que un sitio web se muestra por primera vez al usuario hasta que se aplican los cambios en cualquiera de las pruebas. Esto evita que se muestre la versión original del sitio web, pero que se retrase al usuario para que pueda verlo. Para evitar este retraso, se aplican otras soluciones del lado del servidor. Tómese el tiempo necesario para comprender cómo se realizan sus pruebas A/B y si está sujeta a estos retrasos. Además, siempre que sea posible, considera usar soluciones de pruebas A/B del servidor.
Las pruebas A/B pueden proporcionar comentarios invaluables antes de implementar cambios nuevos, pero el costo del rendimiento de la página debe compararse con los posibles beneficios que aporten.
Sin importar la infraestructura, cualquier persona que ejecute pruebas A/B siempre debe tener en cuenta las siguientes prácticas recomendadas:
- Limita las herramientas de prueba A/B únicamente a aquellas páginas que forman parte de la prueba en lugar de demorar todas las páginas, cuando es posible que la mayoría de las páginas no ejecuten una prueba A/B en un momento determinado.
- Limita las pruebas A/B a un subconjunto de usuarios para evitar que afecten a la mayoría.
- Limita las pruebas A/B a la cantidad mínima de tiempo necesaria para proporcionar resultados concluyentes. Mientras más prolongadas se ejecuten las pruebas A/B, por más tiempo es posible que los usuarios experimenten un rendimiento deficiente de la página.
- Lo más importante es que no olvides quitar tus experimentos de pruebas A/B cuando ya no sean necesarios.
Problemas con Cambio de diseño acumulado (CLS)
CLS mide la estabilidad visual de una página, es decir, cuánto cambia el contenido de la página cuando se carga el contenido. Esto puede distraer si un usuario comienza a leer una página web, pero luego pierde su lugar como más contenido o espacio publicitario. También puede provocar que los usuarios hagan clic involuntariamente en el contenido equivocado si el diseño de la página cambia demasiado. Ten mucho cuidado con el contenido dinámico que se carga más tarde y puede mover parte del contenido inicial de la página.
Esto se mide con una fórmula matemática que calcula cuánto contenido se desplaza y en qué medida se desplaza. Se expresa como una fracción sin unidades con un valor de 0.1 o menos que se considera bueno y un valor superior a 0.25 como deficiente.
En las siguientes secciones, se presentan algunos de los problemas habituales que afectan a CLS y en los que pueden influir los responsables de la toma de decisiones empresariales.
Comprueba cómo se cargan las imágenes a medida que te desplazas hacia abajo en una página
Muchas plantillas evitan cargar imágenes más abajo en la página para proporcionar más recursos a las imágenes que se muestran en pantalla durante la carga inicial de la página. Luego, las imágenes se cargan a medida que el usuario se desplaza hacia abajo. Esta técnica de carga de imágenes se conoce como carga diferida.
Las plantillas de página deben reservar espacio para las imágenes de carga diferida, de modo que, si un usuario se desplaza muy rápido antes de que la imagen pueda cargarse, el contenido que la rodea no se desplaza. Si tu plantilla o plataforma no cumple con este requisito, considera cambiar a una que sí lo haga.
Ten cuidado con los anuncios que se ubican en medio del contenido.
Los anuncios que se insertan en medio del contenido corren el riesgo de que el contenido se desvíe, ya que suelen tardar un poco más en cargarse (y, a menudo, más que las imágenes descritas en la sección anterior). Un patrón común que reduce este riesgo es que aparecen junto al contenido de la página principal. La forma de lograr esto en la práctica depende de tu plataforma particular y de las plantillas que utilizas para crear tu sitio.
Evita agregar contenido dinámico en la parte superior de las páginas
Evita agregar alertas y banners a la parte superior de la página después de que esta se carga, por ejemplo, ofertas especiales o banners de cookies. Si eliges superponer alertas y banners sobre el contenido principal, evitarás que el contenido de la página cambie. Al igual que en la sección anterior, las opciones que elijas dependerán de la plataforma y las plantillas que uses en tus páginas.
Problemas de Interaction to Next Paint (INP)
INP mide la capacidad de respuesta de una página, lo que evalúa si las páginas responden rápidamente a interacciones, como clics, presiones y entradas del teclado. Las páginas que no responden rápidamente a las entradas de los usuarios suelen ser lentas y pueden resultar frustrantes.
El INP mide la totalidad de todas y cada una de las interacciones que califican durante la vida útil de una página e informa la peor interacción. El INP tiene un umbral bueno de 200 milisegundos y un umbral malo de 500 milisegundos. INP es una mejora de FID y mide mejor la capacidad de respuesta, por lo que reemplazó a FID como Métrica web esencial para medir la capacidad de respuesta.
Las métricas de capacidad de respuesta y, en particular, el INP, son métricas difíciles de optimizar. Cuando estas métricas se encuentran en el umbral deficiente, suele deberse a que la página web retrasa las interacciones demasiado. Por ello, las soluciones principales implican quitar el código innecesario para crear páginas más livianas.
En las siguientes secciones, se presentan algunos de los problemas habituales que afectan al INP en los que pueden influir los responsables de la toma de decisiones empresariales.
¡Que tengas una limpieza!
Revisa los complementos y widgets agregados a tu sitio, y quítalos si ya no se usan. A menudo es fácil agregar complementos para probar algo nuevo, pero puede ser igual de fácil olvidarse de quitarlos más adelante si no te resultan útiles. Esta es una de las causas de las interacciones lentas, pero es una optimización relativamente más simple que muchas otras.
Del mismo modo, si utilizas un administrador de etiquetas para las campañas de marketing, asegúrate de que se quiten las campañas anteriores. Incluso si ya no se activan, debes descargar y compilar en cada página el código de las campañas de marketing vencidas, lo que puede ralentizar las interacciones de los usuarios durante la carga inicial de la página.
Evita los widgets y complementos costosos.
Los widgets y complementos costosos a nivel computacional pueden verse bien, pero ¿mejoran la experiencia del usuario o la empeoran en realidad? El informe Diagnosticar problemas de rendimiento/Lighthouse de PageSpeed Insights puede ayudarte a identificar JavaScript que tiene un impacto notable en el rendimiento de tu sitio web.
Lo ideal es que limites los widgets únicamente a las páginas en las que los necesites. Si solo usas una incorporación de Google Maps en la página de contacto, no será necesario cargarlo en todas las páginas en las que pueda causar problemas de receptividad.
Considere la cantidad de anuncios, especialmente en los dispositivos móviles
Los anuncios son una buena estrategia de monetización para muchas empresas, pero suelen ser complejos y requieren muchos recursos. Cuantos más anuncios tenga, más recursos consumirán y podrán interferir en la velocidad de la página. Esto se aplica especialmente a los dispositivos móviles, en los que la memoria de la potencia de procesamiento no suele ser tan buena como en las computadoras de escritorio o las laptops.
Sopesar el equilibrio entre la monetización y el rendimiento Si los usuarios abandonan el sitio antes de tiempo debido a una mala experiencia, es posible que esos anuncios adicionales te estén costando más ingresos de los que agregan.
Evita el tamaño excesivo de páginas
Las páginas grandes y complejas requieren más tiempo de procesamiento para mostrarse. Por ejemplo, si tienes una galería de productos con 1,000 productos diferentes, tardará un tiempo en aparecer en la ventana del navegador del usuario. Considera cuándo paginar páginas para reducir este tiempo.
¿Cómo puedo obtener más ayuda?
Esta publicación enumera algunas de las consideraciones generales que los propietarios de empresas pueden tomar y que pueden afectar el rendimiento. Más allá de esto, es posible que debas consultar a desarrolladores web para obtener más información sobre lo que puedes hacer para mejorar el rendimiento de tu sitio web.
Información específica de la plataforma
La mayoría de las plataformas se preocupan mucho por su rendimiento web, y es posible que tengan consejos específicos y especializados sobre cómo mejorarlo. Como parte del uso de esa plataforma, también puedes tener acceso a equipos dedicados de rendimiento web que pueden asesorarte sobre cómo mejorar tu sitio.
Lighthouse también muestra información específica de la plataforma con la funcionalidad Stack Pack, que puede guiar a los usuarios de plataformas compatibles a las recomendaciones adecuadas.
Las plataformas mejoran de manera continua con el tiempo. Muchas de ellas se enfocan en el rendimiento y en las Métricas web esenciales en este momento. Asegúrate de mantener tu plataforma actualizada para aprovechar las mejoras más recientes que implementaron los desarrolladores de la plataforma.
Esto es más fácil cuando usted se encuentra en una plataforma alojada en la que el proveedor de la plataforma la administra automáticamente, incluidas las actualizaciones de esta. Si alojas la plataforma tú mismo (por ejemplo, una instalación local de WordPress en tu propio servidor), asegurarte de que la plataforma se actualice de forma rutinaria permitirá que tu sitio se beneficie de cualquier mejora que hayan implementado los desarrolladores de la plataforma. Las empresas deben priorizar este mantenimiento o elegir un servicio que lo administre por ellos.
Atraer a un desarrollador web
Es probable que un desarrollador web con experiencia en rendimiento web pueda abordar muchos más problemas que un propietario de empresa. Es posible que ya hayas contratado a un desarrollador web para que cree tu sitio inicialmente o para que se realicen cambios periódicos, o que tengas un equipo de desarrollo exclusivo, o tal vez debas buscar un desarrollador en el que participe (idealmente, uno con experiencia en rendimiento web).
Recurra a los desarrolladores si las sugerencias anteriores no proporcionan lo suficiente para abordar los problemas de rendimiento que tiene con su sitio web, pero esperamos que los ejemplos anteriores también demuestren que es importante trabajar con los desarrolladores para equilibrar las prioridades comerciales con las decisiones de desarrollo a fin de llegar a la solución adecuada para su sitio web.
Ten en cuenta que el rendimiento web rara vez es una tarea de una sola vez. A menudo, mantener un buen rendimiento del sitio web requiere supervisión y mantenimiento regulares para garantizar que tu sitio web no se revierta luego de que se realicen mejoras.
Conclusión
Un sitio web suele ser el primer punto de entrada para una empresa con sus clientes, y querrás que brinde una gran experiencia para ellos. Esto se aplica tanto a los visitantes nuevos que obtienen su primera impresión de su empresa, como a los visitantes recurrentes y a los clientes leales, quienes deben disfrutar de una experiencia lo más fluida posible, idealmente libre de frustraciones que puedan dejar una impresión negativa. Las Métricas web esenciales son una medida de la experiencia del usuario que Google recomienda que los sitios tengan en cuenta. Con todo lo que ofrece la web, es muy fácil para los usuarios probar otros sitios web si se frustran con el tuyo.
Al mismo tiempo, las Métricas web esenciales son solo una medida de tu sitio web. Las empresas deben decidir cuánto invertir en sus sitios web y el retorno que se generará a partir de esa inversión.
Agradecimientos
Imagen en miniatura de Carlos Muza en Unsplash