Descubre cómo los responsables de la toma de decisiones empresariales y los usuarios 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 una mayor cantidad de conversiones y participación. 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, gran parte de la documentación de Core Web Vitals está dirigida a desarrolladores web, que tienen un conocimiento técnico profundo y un control total sobre su código. Muchos sitios web los crean personas que no son desarrolladores con una plataforma de "creación de sitios", como WordPress, Shopify, Wix o soluciones similares, 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. Las personas que toman decisiones comerciales tienen una gran influencia en el rendimiento de los sitios web, desde decidir el contenido y los diseños hasta desarrollar estrategias publicitarias para atraer más tráfico a sus sitios web. Estas decisiones suelen tener un impacto significativo en el rendimiento del sitio web.
Esta guía tiene como objetivo 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 sobre el desarrollo web.
Al mismo tiempo, muchos problemas de rendimiento requieren que los desarrolladores implementen correcciones técnicas, y nuestras guías enfocadas en los desarrolladores pueden ayudar con estos esfuerzos. Esta no pretende ser una guía exhaustiva, sino más bien una introducción a la iniciativa de las Métricas web esenciales para los responsables de la toma de decisiones empresariales, con algunas causas raíz comunes que no están relacionadas con el desarrollo y que provocan un rendimiento deficiente de las páginas. Además de estos, es probable que se deba contratar a un desarrollador web para seguir avanzando.
¿Qué son los Core Web Vitals?
Las Métricas web esenciales son un conjunto de tres métricas diseñadas para medir la experiencia del usuario en una página y, en particular, qué tan rápida se siente la página para los usuarios. Cada uno de estos tiene una abreviatura de tres letras:
- Largest Contentful Paint (LCP) mide el rendimiento de carga: cuánto tiempo, en segundos, tarda en aparecer el contenido más destacado de la página después de que esta comienza a cargarse.
- El Cumulative Layout Shift (CLS) mide la estabilidad visual de una página, es decir, cuánto se mueve el contenido durante la carga.
- Interaction to Next Paint (INP): Indica con qué rapidez responde la página 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. Las experiencias del usuario que se encuentran por debajo del umbral inferior se consideran buenas, y las que se encuentran por encima del umbral superior se consideran deficientes. Entre estos umbrales, se considera que una página está en el rango de 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?
Las Métricas web esenciales se miden según los usuarios reales de tu sitio web, y los diferentes usuarios tendrán resultados distintos. No son "lo que Google piensa" ni "lo que Googlebot piensa", sino lo que experimentaron los usuarios reales de tu sitio web.
Algunos usuarios tendrán dispositivos y redes más rápidos. Algunos usarán dispositivos o redes más lentos. Algunos usuarios visitarán páginas más sencillas y rápidas de tu sitio, mientras que otros visitarán páginas más complejas y lentas. Luego, se agregan los resultados de todas estas experiencias de los usuarios para brindar una medición general de todo tu sitio web.
Google pone a disposición los datos de los usuarios de Chrome que habilitaron la opción en el Informe sobre la experiencia del usuario de Chrome (CrUX), que se incluye 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 están en CrUX. 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 de Core Web Vitals 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 más información sobre las otras herramientas de Google, incluido un flujo de trabajo para usarlas y abordar las Core Web Vitals, consulta la publicación Flujos de trabajo de Core Web Vitals con herramientas de Google.
Si tu plataforma proporciona una solución de RUM integrada, puede proporcionar información mucho más detallada para las páginas de tu sitio, o bien permitirte desglosar páginas específicas o segmentar a tus usuarios para ayudar a comprender y, también, identificar problemas.
PageSpeed Insights
Para obtener una vista rápida que no requiera 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":
Esto muestra cómo los usuarios reales de Chrome experimentaron tu sitio web en los últimos 28 días. Verás las tres Core Web Vitals en la parte superior, junto con otras métricas de respaldo debajo (incluida la métrica INP pendiente). Solo las métricas de Core Web Vitals se tienen en cuenta en la evaluación general de aprobación o reprobación que se muestra en la parte superior de la página, pero las otras métricas pueden ser útiles para solucionar problemas relacionados con las métricas de Core Web Vitals, como se mostrará en la siguiente sección.
Puedes alternar entre las vistas para dispositivos móviles y 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 que se encuentra en la esquina superior derecha, donde hay datos para ambos.
Estas cifras deberían darte un indicador general del rendimiento de tu sitio y de qué métricas se podrían mejorar y en qué tipos de dispositivos.
Google Search Console
Google Search Console (GSC) es solo para propietarios de sitios, por lo que requiere el registro y la verificación de la propiedad del sitio para poder usarse. Proporciona detalles sobre cómo la Búsqueda de Google ve tu sitio.
A diferencia de PageSpeed Insights, GSC enumera todas las páginas que la Búsqueda de Google conoce en tu sitio y proporciona detalles de las Métricas web esenciales para todas ellas:
Las páginas se reúnen en grupos de URLs para que puedas ver si ciertas categorías de páginas (por ejemplo, páginas de detalles de productos, páginas de blogs, etcétera) tienen problemas de Métricas web esenciales. Como suelen crearse con tecnologías o plantillas similares, es posible que haya una causa común para los problemas que se produzcan en estas páginas.
Problemas comunes de Core Web Vitals para 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, analizamos algunos de los problemas comunes que no son de desarrolladores y con los que los responsables de la toma de decisiones empresariales pueden ayudar para mejorar estas métricas.
Cuando decimos "no desarrolladores", nos referimos a quienes usan plataformas de creación de sitios en las que tienen un control limitado sobre cómo se codifica el sitio o a quienes toman decisiones comerciales que pueden decidir sobre el diseño del sitio o ayudar a priorizar los presupuestos.
Problemas relacionados con el Largest Contentful Paint (LCP)
El LCP tiene como objetivo medir la velocidad de carga de las páginas web. Para ello, mide el tiempo que transcurre desde que se hace clic en un vínculo hasta que aparece el elemento de contenido más grande (por lo general, una imagen del banner o un título) en el navegador.
Para que la experiencia de página sea positiva, 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 considera una experiencia deficiente.
En las siguientes secciones, se indican algunos de los problemas habituales que afectan el LCP y en los que pueden influir quienes toman las decisiones comerciales.
Demoras en el inicio de la carga de la página
A menudo, pensamos en mejorar el tiempo de carga de la página en sí, pero suele haber un retraso incluso antes de que comience. Es imposible tener un LCP por debajo del umbral 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 de TTFB grande en rojo o ámbar, es clave abordar ese problema, ya que debería tener un efecto dominó directo en el LCP.
Comprende a tu público
En el caso de los problemas de 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 se almacenen copias de tu sitio 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 del lugar donde se aloja tu sitio. Algunas plataformas ofrecen diferentes niveles de servicio con más ubicaciones de CDN para los niveles de pago 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 los TTFB lentos. Cuando publiques campañas publicitarias o envíes comunicaciones por correo electrónico, intenta minimizar la cantidad de redireccionamientos evitando usar varios acortadores de vínculos o incluyendo URLs que deban redireccionarse. Por ejemplo, usar example.com/blog en una campaña que debe redireccionar a www.example.com/blog, que, a su vez, redirecciona a https://www.example.com/blog, agrega tiempo al TTFB de una página. Asegúrate de que tus campañas de marketing usen la menor cantidad posible de redireccionamientos.
Asegúrate de que las campañas publicitarias estén dirigidas al público correcto.
También asegúrate de que tus campañas publicitarias estén segmentadas de forma eficaz para tu público. Obtener mucho tráfico nuevo de usuarios que se encuentran en el otro extremo del mundo, pero a los que no puedes entregarles tu producto, es un desperdicio de inversión publicitaria y afecta negativamente 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 UTM, suelen usarse para las campañas de marketing. Esto puede reducir la eficacia del almacenamiento en caché en tu infraestructura, ya que cada URL puede parecer una página única, aunque se publique la misma página cada vez. Si usas parámetros de UTM, habla con tu proveedor de CDN o con los equipos de infraestructura para asegurarte de que su infraestructura de almacenamiento en caché ignore estos parámetros de URL para que las campañas se beneficien de las páginas que ya están almacenadas en caché.
El contenido multimedia puede ser costoso para el rendimiento
Considera el impacto del contenido multimedia en tus páginas. Los elementos multimedia, 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 un contenido multimedia en lugar de texto. El elemento LCP es una imagen 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 es mucho más atractiva que un sitio con mucho texto. Por lo tanto, quitar contenido multimedia rara vez es una opción, pero conocer el costo del contenido multimedia y cómo reducirlo puede minimizar cualquier problema de rendimiento.
Evita 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 gran experiencia del usuario, por lo que debes pensar detenidamente antes de usarlos en tu sitio.
Usa imágenes optimizadas para la Web
Luego, está el tamaño de los recursos multimedia. 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 de tamaño completo con calidad de impresión 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, proporcionar imágenes más pequeñas para empezar puede generar mejoras significativas.
Ten especial cuidado con los videos
Presta especial atención cuando uses videos. Los videos son algunos de los contenidos más grandes y, por lo tanto, más lentos para que un sitio web los descargue y muestre, así que trata de no usarlos demasiado. Evita incluirlos en la parte superior de las páginas web; 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 tu LCP no se vea afectado.
Pruebas A/B
Muchas empresas realizan pruebas A/B para experimentar con 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 se muestra un sitio web al usuario por primera vez hasta que se aplican los cambios en las pruebas. 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. Otras soluciones se aplican del lado del servidor para evitar esta demora. Tómate el tiempo para comprender cómo se realizan tus pruebas A/B y si están sujetas a estas demoras. Además, considera usar soluciones de pruebas A/B del servidor cuando sea posible.
Las pruebas A/B pueden proporcionar comentarios invaluables antes de lanzar cambios nuevos, pero el costo para el rendimiento de la página se debe sopesar con los beneficios potenciales que aportan.
Independientemente de tu infraestructura, cualquier persona que realice pruebas A/B siempre debe tener en cuenta las siguientes prácticas recomendadas:
- Limita las herramientas de pruebas 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 ellas no estén ejecutando una prueba A/B en un momento determinado.
- Limita las pruebas A/B a un subconjunto de usuarios para evitar afectar a la mayoría de ellos.
- Limita las pruebas A/B al tiempo mínimo necesario para obtener resultados concluyentes. Cuanto más tiempo se ejecuten las pruebas A/B, más tiempo experimentarán los usuarios 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 los necesites.
Problemas de Cumulative Layout Shift (CLS)
El CLS mide la estabilidad visual de una página, es decir, cuánto se desplaza el contenido de la página a medida que se carga. Esto puede ser molesto si un usuario comenzó a leer una página web, pero luego pierde el lugar donde estaba porque se inserta más contenido o espacios publicitarios. También puede provocar que los usuarios hagan clic de forma involuntaria en el contenido equivocado si el diseño de la página cambia excesivamente. Ten mucho cuidado con el contenido dinámico que se carga más tarde y que 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 cuánto se desplaza. Se expresa como una fracción sin unidades, en la que un valor de 0.1 o menos se considera bueno y un valor de 0.25 o más se considera malo.
En las siguientes secciones, se indican algunos de los problemas habituales que afectan el CLS y en los que pueden influir quienes toman las decisiones comerciales.
Cómo comprobar cómo se cargan las imágenes a medida que te desplazas por una página
Muchas plantillas evitan cargar imágenes más abajo en la página para dar más recursos a las imágenes que están 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 tenga la oportunidad de cargarse, el contenido que la rodea no se desplace. Si tu plantilla o plataforma no lo hace, considera cambiarte a una que sí lo haga.
Ten cuidado con los anuncios que se colocan en medio del contenido
Los anuncios que se insertan en medio del contenido corren el riesgo de desplazarlo hacia abajo, ya que suelen tardar un poco más en cargarse, a menudo más que las imágenes que se describen en la sección anterior. Tener estos elementos al costado del contenido principal de la página es un patrón común que reduce este riesgo. La forma en que se logra esto 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 en la parte superior de las páginas
Evita agregar alertas y banners en la parte superior de la página después de la carga de página, por ejemplo, banners de cookies u ofertas especiales. Si, en cambio, eliges superponer alertas y banners sobre el contenido principal, evitarás que el contenido de la página se desplace. Al igual que en la sección anterior, las opciones que tengas aquí dependerán de la plataforma y las plantillas que uses para tus páginas.
Problemas de Interaction to Next Paint (INP)
La 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 de teclado. Las páginas que no responden con rapidez a las entradas del usuario suelen parecer lentas y pueden ser frustrantes para los usuarios.
La INP mide la totalidad de cada interacción que cumple con los requisitos durante la vida de una página y, luego, informa la peor interacción. La INP tiene un umbral bueno de 200 milisegundos y un umbral malo de 500 milisegundos.
Las métricas de capacidad de respuesta, y en particular la INP, son métricas difíciles de optimizar. Cuando estas métricas se encuentran en el umbral deficiente, suele deberse a que las interacciones se retrasan porque la página web intenta hacer demasiadas cosas, por lo que las soluciones principales aquí implican quitar el código innecesario para crear páginas más ligeras.
En las siguientes secciones, se indican algunos de los problemas habituales que afectan la INP y en los que pueden influir quienes toman las decisiones empresariales.
¡Haz una limpieza de primavera!
Revisa los complementos y widgets que se agregaron a tu sitio y quítalos si ya no se usan. Suele ser 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 simple que muchas otras.
Del mismo modo, si usas un administrador de etiquetas para las campañas de marketing, asegúrate de quitar las campañas antiguas. Incluso si ya no se activan, el código de las campañas de marketing vencidas aún se debe descargar y compilar en cada página, 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 que consumen muchos recursos de procesamiento pueden verse bien, pero ¿mejoran la experiencia del usuario o, en realidad, la empeoran? El informe Diagnosticar problemas de rendimiento de PageSpeed Insights, que proporciona Lighthouse, puede ayudarte a identificar el código 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 se necesitan. Si solo usas un mapa de Google Maps incorporado en la página de contacto, no es necesario cargarlo en todas las páginas, ya que puede causar problemas de responsividad.
Considera 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 requieren muchos recursos. Cuantos más anuncios tengas, más recursos consumirán, lo que puede interferir con la velocidad de la página. Esto es especialmente cierto en los dispositivos móviles, donde la memoria de potencia de procesamiento suele ser menor que en las computadoras de escritorio o las laptops.
Sopesa el equilibrio entre la monetización y el rendimiento. Si los usuarios abandonan el sitio antes debido a una experiencia negativa, es posible que esos anuncios adicionales te cuesten más ingresos de los que agregan.
Evita el tamaño excesivo de la página
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 las 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 en cuenta los propietarios de empresas y que podrían afectar el rendimiento. Además, 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 pueden tener consejos específicos para mejorar este aspecto. También es posible que tengas acceso a equipos dedicados al rendimiento web como parte del uso de esa plataforma, que pueden brindarte más asesoramiento sobre cómo mejorar tu sitio.
Lighthouse también muestra información específica de la plataforma con la funcionalidad de Stack Pack, que puede guiar a los usuarios de las plataformas compatibles hacia los consejos adecuados.
Las plataformas mejoran continuamente con el tiempo y, en este momento, muchas se concentran en el rendimiento y las Métricas web esenciales. Asegúrate de que tu plataforma se mantenga actualizada para beneficiarte de las mejoras más recientes que realizaron los desarrolladores de la plataforma.
Esto es más fácil cuando usas una plataforma alojada en la que el proveedor administra automáticamente la plataforma, incluidas las actualizaciones. Si alojas la plataforma por tu cuenta (por ejemplo, una instalación local de WordPress en tu propio servidor), asegúrate de que la plataforma se actualice de forma rutinaria para que tu sitio se beneficie de las mejoras que hayan implementado los desarrolladores de la plataforma. Las empresas deben priorizar este mantenimiento o elegir un servicio que lo administre por ellas.
Contrata a 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 crear tu sitio inicialmente o para realizar cambios periódicos, o que tengas un equipo de desarrollo dedicado, o que debas buscar un desarrollador para contratar (idealmente, uno con experiencia en rendimiento web).
Recurre a los desarrolladores si las sugerencias que se proporcionan aquí no son suficientes para abordar los problemas de rendimiento que tienes con tu 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 para alcanzar la solución adecuada para tu sitio web.
Ten en cuenta que el rendimiento web rara vez es un trabajo único. Mantener un buen rendimiento del sitio web suele requerir una supervisión y un mantenimiento periódicos para garantizar que el sitio web no retroceda después de que se hayan realizado mejoras.
Conclusión
Un sitio web suele ser el primer punto de entrada de una empresa con sus clientes, y quieres que sea una gran experiencia para ellos. Esto se aplica tanto a los visitantes nuevos que se llevan su primera impresión de tu empresa como a los visitantes recurrentes y clientes leales, que deben tener una experiencia lo más fluida posible, idealmente sin 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, los usuarios pueden probar otros sitios web (¡y lo harán!) 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 por sí mismas cuánto invertir en sus sitios web y qué retorno obtendrán de esa inversión.