Descubre cómo los responsables de la toma de decisiones empresariales y los que 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 un aumento en la participación y las conversiones. Las Métricas web esenciales son una iniciativa para cuantificar la experiencia del usuario en los sitios web y, así, identificar áreas de mejora.
Sin embargo, mucha de la documentación de Core Web Vitals está dirigida a desarrolladores web, con una comprensión técnica profunda y control total sobre su código. Muchos sitios web son creados por personas que no son desarrolladores mediante un "creador de sitios". como WordPress, Shopify, Wix y otras soluciones similares que, a menudo, no cuentan con 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 influyen en gran medida en el rendimiento del sitio web, desde la decisión del contenido y los diseños hasta el desarrollo de 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 brindar información relevante para que los creadores y los propietarios de sitios comprendan, y mejoren, su experiencia del usuario tanto como sea posible, sin requerir conocimientos técnicos profundos sobre el desarrollo web.
Al mismo tiempo, muchos problemas de rendimiento requieren que los desarrolladores implementen correcciones técnicas, y nuestras guías específicas para desarrolladores pueden ayudar con estos esfuerzos. El objetivo de este documento no es ser una guía integral, sino más bien una introducción a la iniciativa de Métricas web esenciales para los responsables de tomar decisiones empresariales que tienen algunas causas raíces comunes que no están relacionadas con el desarrollo y que tienen un rendimiento deficiente de las páginas. Más allá de estos, es probable que un desarrollador web deba participar para seguir progresando.
¿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 se siente la página para los usuarios. Cada uno de ellos tiene una abreviatura de tres letras:
- El Procesamiento de imagen con contenido más grande (LCP) mide el rendimiento de la carga, es decir, cuánto tiempo, en segundos, tarda en aparecer el contenido más destacado de una página después de que esta comienza a cargarse.
- El Cambio de diseño acumulado (CLS) mide la estabilidad visual de una página, es decir, cuánto se mueve el contenido durante la carga.
- Interacción a la siguiente pintura (INP): Indica la rapidez con la que la página responde a los clics, las presiones y las interacciones con el teclado.
Cada métrica mide una faceta diferente de la experiencia del usuario. Google también proporciona umbrales recomendados para cada métrica, y las experiencias del usuario por debajo del umbral más bajo se consideran buenas, y las experiencias del usuario superiores al umbral superior se consideran deficientes. Entre estos umbrales, se considera que una página se encuentra en el rango de necesidades 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 tendrán resultados diferentes. No son "lo que Google cree". ni "lo que el robot de Google piensa", sino lo que experimentaron los usuarios reales.
Algunos usuarios utilizarán dispositivos y redes más rápidas. Algunos estarán en dispositivos o redes más lentos. Algunos usuarios visitarán páginas más simples y rápidas de tu sitio, otros más complejas y lentas. Los resultados de todas estas experiencias del usuario se agregan luego para ofrecer una medición general de todo tu sitio web.
Google permite que los datos de los usuarios habilitados de Chrome estén disponibles en el Informe sobre la experiencia del usuario en Chrome (CrUX), que envía información a muchas herramientas de Google, como PageSpeed Insights y Google Search Console.
CrUX está disponible en millones de sitios web populares, pero no todos 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?
Existen muchas herramientas que muestran las Métricas web esenciales que proporcionan Google y terceros. En esta entrada, se presentan dos herramientas que te permiten ver rápidamente las Métricas web esenciales de tu sitio. Si deseas obtener un análisis más detallado de las demás herramientas de Google, incluido un flujo de trabajo para usarlas para abordar las Métricas web esenciales, consulta la publicación sobre los flujos de trabajo de las Métricas web esenciales con las herramientas de Google.
Si tu plataforma proporciona una solución de RUM integrada, puede proporcionar información mucho más detallada sobre las páginas de tu sitio o permitirte desglosar páginas particulares o segmentar a tus usuarios para ayudar a comprender e identificar problemas.
PageSpeed Insights
Si quieres obtener una vista rápida que no requiera configuración, usa PageSpeed Insights (PSI). Escribe la URL y haz clic en Analizar. Si tu sitio está incluido en CrUX, debería aparecer rápidamente el mensaje "Descubre qué experimentan tus usuarios reales" sección:
Muestra cómo los usuarios reales de Chrome experimentaron tu sitio web durante los últimos 28 días. Verás las tres Métricas web esenciales en la parte superior, junto con otras métricas complementarias debajo (incluida la métrica INP pendiente). En la parte superior de la página, solo se registran las Métricas web esenciales en la evaluación general aprobada o reprobada. Sin embargo, las demás métricas pueden ser útiles para solucionar problemas relacionados con las Métricas web esenciales, como se mostrará en la siguiente sección.
Con los botones que se encuentran en la parte superior de esta sección, puedes alternar entre las vistas para dispositivos móviles y computadoras de escritorio. También puedes alternar entre Esta URL y todos los datos de ese Origen con el botón de activación ubicado en la esquina superior derecha, donde existen datos para ambos.
Esas 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 en los que se puede mejorar.
Google Search Console
Google Search Console (GSC) es solo para propietarios de sitios, por lo que para su uso se deben registrar y verificar la propiedad del sitio. 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 las Métricas web esenciales de todas ellas:
Las páginas se agrupan en grupos de URLs para permitirte ver si ciertas categorías de páginas (por ejemplo, páginas de detalles del producto, páginas de blog, etc.) tienen problemas en las Métricas web esenciales. Debido a que, por lo general, se basan en tecnologías o plantillas similares, es posible que haya una causa común a los problemas en estas páginas.
Problemas comunes de 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 desarrolladores pueden ayudarlos con eso. En esta sección, analizaremos algunos de los problemas habituales que no son de los desarrolladores y que pueden atender los responsables de la toma de decisiones empresariales para mejorar estas métricas.
Cuando decimos "no desarrolladores" nos referimos a aquellos que usan plataformas de creación de sitios en las que tienen control limitado sobre la codificación del sitio, o a personas encargadas de tomar decisiones empresariales que pueden decidir el diseño del sitio o ayudar a priorizar presupuestos.
Problemas relacionados con el procesamiento de imagen con contenido más grande (LCP)
El objetivo de 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 de mayor tamaño (por lo general, una imagen de banner o un título) en el navegador.
Para que la experiencia de página sea buena, las páginas web deben mostrar este contenido dentro de los 2.5 segundos posteriores al clic en el vínculo. Si tarda más de 4 segundos, se considera una experiencia deficiente.
En las siguientes secciones, se indican algunos de los problemas habituales que afectan al LCP en los que pueden influir los responsables de la toma de decisiones empresariales.
Demoras en el inicio de la carga de la página
Con frecuencia pensamos en mejorar el tiempo de carga de la página propiamente dicha, pero a menudo hay una demora antes de empezar eso. Es imposible que un LCP inferior al umbral de 2.5 segundos sea bueno si el sitio web ni siquiera se descarga por 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 de TTFB grande en rojo o ámbar, solucionar ese problema es clave y debería afectar directamente al LCP.
Comprende a tu público
Cuando se trata de problemas con TTFB, es importante que comprendas a tu público. Si tu sitio web está alojado en un país, pero atiende 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, más cerca de tus 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 de pago más altos. Las empresas globales deben considerar niveles más altos en estos casos.
Reducir redireccionamientos
Los redireccionamientos son otra causa común de los 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 usas example.com/blog en una campaña que debe redireccionar a www.example.com/blog, que luego lo redirecciona a https://www.example.com/blog, agregará tiempo al TTFB de la página. Asegúrate de que tus campañas de marketing usen la cantidad mínima de redireccionamientos posible.
Asegurarse de que las campañas publicitarias estén dirigidas al público correcto
Además, asegúrate de que tus campañas publicitarias estén segmentadas de manera eficaz para tu público. Obtener mucho tráfico nuevo de usuarios que se encuentran en el otro lado del mundo, pero a los que no puedes entregar tu producto, es una inversión publicitaria desperdiciada que tiene 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, se usan a menudo para las campañas de marketing. Estas funciones pueden reducir la eficacia del almacenamiento en caché en tu infraestructura, ya que cada URL puede parecer una página única, incluso si se entrega la misma página cada vez. Si utilizas parámetros de UTM, comunícate con tu proveedor de CDN o con los equipos de infraestructura para asegurarte de que la infraestructura de almacenamiento en caché ignore estos parámetros de URL para permitir que las campañas se beneficien de las páginas que ya están almacenadas en caché.
Los medios pueden ser costosos para el rendimiento
Considera el impacto de los medios en tus páginas. Los medios como las imágenes y los videos suelen ser mucho más grandes, por lo que tardan más en descargarse que el texto. Esto también puede ralentizar el resto de la carga de la página. Esto es muy importante cuando el elemento LCP es contenido multimedia en lugar de texto. El elemento LCP es una imagen que aparece 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 recursos 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 contenido multimedia rara vez es una opción, pero debes tener en cuenta el costo de ellos y la forma de reducirlo, ya que esto puede minimizar cualquier problema de rendimiento.
Evitar 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 ser ubicuos, los carruseles a menudo no ofrecen una excelente experiencia del usuario, por lo que debes pensar detenidamente antes de usarlos en tu sitio.
Utilice imágenes optimizadas para la Web
Luego, está el tamaño de los activos de medios. Muchas imágenes de la Web se muestran 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 intentan optimizar las imágenes automáticamente cuando se suben, pero como no conocen las dimensiones con las que se mostrarán esas imágenes en el dispositivo del usuario, proporcionar imágenes más pequeñas para comenzar puede producir ganancias significativas.
Ten mucho cuidado con los videos
Sé consciente adicional del uso de los videos. Los videos son algunos de los contenidos más grandes (y, por lo tanto, más lentos) que un sitio web puede descargar y mostrar, así que trata de no usarlos demasiado. Evita usarlas en la parte superior de las páginas web y guárdalas para que se muestren 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 tu LCP no se vea afectado.
Pruebas A/B
Muchas empresas realizan pruebas A/B para experimentar con los cambios en su sitio web. La forma en que se implementan estos elementos puede tener un impacto importante en el LCP.
Muchas soluciones de pruebas A/B retrasan la primera vez que un sitio web se muestra al usuario hasta que se aplican los cambios en cualquier prueba. Esto evita que se muestre la versión original del sitio web, pero a costa de retrasar la visibilidad de un sitio web para el usuario. Se aplican otras soluciones del servidor para evitar este retraso. Tómate el tiempo necesario para comprender cómo se realizan tus pruebas A/B y saber si están sujetas a estas demoras. Además, siempre que sea posible, considera soluciones de pruebas A/B del servidor.
Las pruebas A/B pueden proporcionar comentarios invaluables antes de lanzar nuevos cambios, pero el costo del rendimiento de la página debe compararse con los posibles beneficios que aportan.
Sin importar tu 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 solo a las páginas que forman parte de la prueba en lugar de retrasar todas las páginas, ya que es posible que la mayoría de las páginas no estén ejecutando una prueba A/B en un momento determinado.
- Limita las pruebas A/B a un subconjunto de usuarios para evitar que afecte a la mayoría.
- Limita las pruebas A/B al tiempo mínimo necesario para proporcionar resultados concluyentes. Cuanto más tiempo se ejecuten las pruebas A/B, es posible que los usuarios experimenten un bajo rendimiento de sus páginas.
- Lo más importante es que no olvides quitar los experimentos de pruebas A/B cuando ya no sean necesarios.
Problemas con el 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 mientras se carga. Esto puede distraer al usuario si comienza a leer una página web, pero luego pierde su lugar a medida que se ubican más contenido o anuncios. 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 puedes mover parte del contenido inicial de la página.
Esto se mide con una fórmula matemática que calcula cuánto se cambia el contenido y cuánto lo hace. Se expresa como una fracción sin unidades, con un valor de 0.1 o menos que se considera bueno y un valor de 0.25 o superior como malo.
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 tus imágenes a medida que te desplazas en una página
Muchas plantillas evitan cargar imágenes más abajo en la página para brindar más recursos a las imágenes que aparecen 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 imágenes con 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 mueva. Si tu plantilla o plataforma no es así, considera cambiar a una que sí lo haga.
Ten cuidado con los anuncios colocados en medio del contenido
Los anuncios insertados en medio del contenido corren el riesgo de desplazar el contenido hacia abajo, ya que suelen tardar un poco más en cargarse (por lo general, más que las imágenes descritas en la sección anterior). Tener estos elementos en el margen del contenido de la página principal es un patrón común que reduce este riesgo. La forma de lograrlo en la práctica depende de tu plataforma en particular y de las plantillas que uses para crear tu sitio.
Evita agregar contenido dinámico a la parte superior de las páginas
Evita agregar alertas y banners en la parte superior de la página después de cargar la página, por ejemplo, banners de cookies u ofertas especiales. Si optas por 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 se usen para tus páginas.
Problemas con la interacción con el siguiente procesamiento de imagen (INP)
INP mide la capacidad de respuesta de una página, lo que evalúa si las páginas responden rápidamente a las 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 cada interacción que califica 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 deficiente de 500 milisegundos.
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, generalmente se debe a que la página web retrasa las interacciones cuando intenta hacer demasiado. Por lo tanto, 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 un manantial limpio!
Revisa los complementos y widgets que se agregaron a tu sitio, y quítalos si ya no se usan. Con frecuencia, es más fácil agregar complementos para probar algo que recordar 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 sencilla que muchas otras.
Del mismo modo, si usas Tag Manager para campañas de marketing, asegúrate de quitar las campañas anteriores. Incluso si ya no se activan, el código de las campañas de marketing vencidas debe descargarse y compilarse en cada página, lo que puede ralentizar las interacciones del usuario durante la carga inicial de la página.
Evita widgets y complementos costosos
Los widgets y complementos costosos en términos de procesamiento pueden verse bien, pero ¿mejoran la experiencia del usuario o realmente la empeoran? Lighthouse proporciona el informe Diagnostica problemas de rendimiento de PageSpeed Insights a fin de ayudarte a identificar JavaScript que tiene un impacto notable en el rendimiento de tu sitio web.
Lo ideal es limitar los widgets solo a las páginas en las que son necesarios. Si solo usas un mapa incorporado de Google Maps en la página de contacto, no es necesario cargarlos en todas las páginas en las que esto pueda causar problemas de respuesta.
Considere la cantidad de anuncios, especialmente en dispositivos móviles.
Los anuncios son una buena estrategia de monetización para muchas empresas, pero suelen ser complejos y consumen muchos recursos. Mientras más anuncios tengas, más recursos consumirán, lo que puede interferir en la velocidad de la página. Esto es especialmente cierto en los dispositivos móviles, donde la capacidad de procesamiento de la memoria a menudo no es tan buena como en las computadoras de escritorio o laptops.
Sopesa el equilibrio entre la monetización y el rendimiento. Si los usuarios abandonan el sitio antes 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 mostrarse en la ventana del navegador del usuario. Considera cuándo paginar páginas para reducir este tiempo.
¿Cómo puedo obtener más ayuda?
En esta publicación, se enumeran algunas de las consideraciones generales que pueden tener los propietarios de empresas y que pueden afectar el rendimiento. Más allá de esto, es posible que debas consultar a los 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 para cada plataforma sobre cómo mejorarlo. Como parte del uso de esa plataforma, también es posible que tengas acceso a equipos especializados en el rendimiento web, que podrán brindarte más asesoramiento sobre cómo mejorar tu sitio.
Lighthouse también muestra información específica de plataformas mediante la funcionalidad Stack Pack, que puede guiar a los usuarios de plataformas compatibles a las recomendaciones adecuadas.
Las plataformas mejoran continuamente con el tiempo y muchas se concentran en el rendimiento y en las Métricas web esenciales en este momento. Asegúrate de que tu plataforma se mantenga actualizada para aprovechar las mejoras más recientes que realizaron los desarrolladores en la plataforma.
Esto es más fácil cuando te encuentras en una plataforma alojada en la que el proveedor administra automáticamente la plataforma, incluidas las actualizaciones. Si tú alojas la plataforma (por ejemplo, una instalación local de WordPress en tu propio servidor), asegurarte de que la plataforma se actualice periódicamente permitirá que tu sitio se beneficie de cualquier mejora que los desarrolladores de la plataforma hayan implementado. Los negocios deben priorizar este mantenimiento o elegir un servicio que lo administre.
Interactúa con un desarrollador web
Es probable que un desarrollador web con experiencia en el rendimiento web pueda abordar muchos más problemas que el propietario de una empresa. Es posible que ya hayas contratado a un desarrollador web para que cree tu sitio, o que se realicen cambios periódicos, o que tengas un equipo de desarrollo especializado o que debas buscar a un desarrollador que participe (idealmente, uno con experiencia en rendimiento web).
Recurra a los desarrolladores si las sugerencias que se brindan aquí no brindan lo suficiente para abordar los problemas de rendimiento que tiene con su sitio web, pero esperamos que los ejemplos anteriores también muestren 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 un trabajo único. Mantener un buen rendimiento del sitio web a menudo requiere supervisión y mantenimiento regulares para garantizar que tu sitio web no experimente cambios después de haber realizado las mejoras.
Conclusión
A menudo, un sitio web es el primer punto de entrada para una empresa con sus clientes, por lo que querrás que sea una experiencia excelente para ellos. Esto se aplica tanto a los visitantes nuevos que obtienen su primera impresión de tu empresa, como a los visitantes recurrentes y los clientes leales, quienes deben brindar una experiencia lo más fluida posible, idealmente libre de frustraciones que puedan causar 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, los usuarios pueden (y lo harán) 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 qué retorno se obtendrán por esa inversión.
Agradecimientos
Miniatura de Carlos Muza en Unsplash