Cómo medir y optimizar la pintura con mayor contenido para una experiencia de usuario superior

Cuando se trata del éxito en línea, hay muchas maneras de lograrlo. Una experiencia de usuario optimizada es una de esas formas. Google utilizará diferentes experiencias de usuario y métricas relacionadas para clasificar los sitios web para SEO. Ha seguido produciendo múltiples herramientas para mejorar el rendimiento web. A continuación, analizaremos algunas de las formas en que Google busca mejorar la experiencia del usuario.

¿Qué es Google Core Web Vitals?

En su reciente intento de modificar la medida y la comprensión de lo que califica como una experiencia de usuario decente, Google reguló las métricas de la página. Estas métricas estandarizadas se conocen como datos fundamentales de la web y facilitan las calificaciones de la experiencia del usuario del mundo real en su sitio web.

¿Qué es la pintura con contenido más grande?

Para empezar, echemos un vistazo a la pintura con contenido más grande (LCP). Es una de las métricas fundamentales de web vitals. Mide el tiempo de carga del componente de contenido más grande dentro de la ventana gráfica a medida que se vuelve visible. Las métricas alternativas como TTFB y First Contentful Paint facilitan conjuntamente la experiencia de la página en vivo, no están presentes una vez que la página se vuelve "significativa" para el usuario.

Por lo general, a menos que el componente más importante de la página se vuelva completamente visible, es posible que la página no ofrezca suficiente contexto para el usuario. LCP es, por tanto, representativo de las expectativas del usuario. Como métrica central de web vitals, LCP representa el veinticinco por ciento de la puntuación de rendimiento, por lo que es una de las métricas más importantes para optimizar.

Comprobación de la hora de su LCP

Según Google, las categorías de partes pensadas para la pintura con mayor contenido son:

• <img> elementos
• Elementos <image> dentro de un elemento <svg>
• Elementos <video> (imagen de póster usada)
• Un elemento con una imagen de fondo cargada a través de la función URL
• Elementos de nivel de bloque que comprenden nodos de texto y/u otros elementos de texto de nivel en línea

¿Cómo se mide el LCP?

Por supuesto, existen múltiples formas de medir el LCP de su página web. La forma más sencilla de hacerlo es mediante el uso de una de las plataformas disponibles que incluyen Lighthouse, PageSpeed ​​Insights, Search Console y Chrome User Experience Report. Por ejemplo, Google PageSpeed ​​Insights en su informe indica el componente para calcular el LCP.

¿Qué es un buen LCP?

Para proporcionar una experiencia de usuario decente, debe intentar mantener un LCP de 2,5 segundos o menos en su sitio. La mayoría de las cargas de su página deberían ocurrir por debajo de este umbral. Ahora que todos sabemos qué son los LCP y cuál debería ser nuestro objetivo, examinemos las formas en que podemos mejorar el LCP.

(Agregue la imagen llamada La mayoría de las páginas deben cargarse en un LCP de 2,5 segundos o menos.jpg)

Cómo optimizar la pintura con contenido más grande (LCP)

El sistema subyacente para reducir LCP por completo es reducir los datos descargados en el dispositivo del usuario y reducir el tiempo que lleva administrar ese contenido y garantizar una experiencia de usuario perfecta.

Optimiza tus fotos

En la mayoría de los sitios, el contenido de la mitad superior de la página generalmente contiene una imagen de gran tamaño que se requiere para LCP. Puede ser una imagen de héroe, un carrusel o una pancarta. Debe optimizar estas imágenes para un LCP más sólido.

Para optimizar sus imágenes, debe usar un CDN de imágenes de terceros como ImageKit.io. La ventaja de emplear una CDN de imágenes de terceros es que simplemente se enfoca en su negocio real y deja la optimización de imágenes a la CDN de imágenes.

Transformaciones en tiempo real para imágenes receptivas

Google utiliza la compartimentación de dispositivos móviles primero para casi todos los sitios. Por eso es necesario optimizar LCP para dispositivos móviles en lugar de escritorio. Cada imagen debe reducirse a escala según la demanda del diseño.

Por ejemplo, desea que la imagen tenga un tamaño más pequeño en la página del listado y un tamaño más grande en la página de detalles del producto. Este cambio de tamaño garantiza que no parezca estar utilizando bytes adicionales de los que se necesitan para esa página exacta.

Almacenar imágenes en caché y mejorar el tiempo de entrega

Los CDN de imágenes utilizan la red de entrega de contenido (CDN) para entregar las fotografías. El uso de un CDN garantiza que las imágenes se carguen desde una ubicación cercana en lugar de un servidor que puede estar al otro lado del mundo.

Precarga recursos esenciales

Hay casos en los que es posible que el navegador no cargue una imagen si afecta a LCP. Como ejemplo, una imagen de banner en la parte superior del pliegue puede verse como una imagen de fondo dentro de un archivo CSS. Dado que el navegador no sabrá esto sobre la imagen hasta que se descargue el archivo CSS, no lo cargará.

Ahora, si te estás preguntando, "¿Cómo precargo la imagen de pintura Contentful más grande?", la respuesta es simple. Podrá precargarlos usando una etiqueta con un atributo rel= "preload" en la sección superior de su documento de lenguaje de marcas de hipertexto.

Si bien podrá precargar varios recursos en un documento, debe limitarlo a imágenes o videos en la parte superior de la página, archivos de fuentes de toda la página o archivos CSS y JS esenciales.

Reducir los tiempos de respuesta del servidor

Si su servidor tarda más en cargarse de lo que se considera normal, entonces aumenta el tiempo que tarda en cargar la página en la pantalla. Afecta negativamente a cada métrica de velocidad de página, junto con LCP. Para mejorar los tiempos de respuesta de su servidor, puede:

• Analiza y optimiza tus servidores
• Utilice una red de entrega de contenido
• Preconectarse a orígenes de terceros
• Sirva contenido en caché primero con un trabajador de servicio
• Comprimir archivos de texto

Mejore los tiempos de respuesta del dispositivo del cliente

Si su página tarda mucho en cargarse, puede ser desagradable para los clientes potenciales. Afortunadamente, hay algunas cosas que puede hacer para asegurarse de que se cargue correctamente en su extremo y cree una experiencia de usuario perfecta. Esto incluye:

• Insertar CSS esencial
• Minimizar y presionar el contenido
• Optimización de LCP para renderizado del lado del cliente
• Usando la representación del lado del servidor
• Uso de renderizado previo

LCP se ha convertido en un gran factor de clasificación de búsqueda que se correlaciona poderosamente con la experiencia y el viaje del usuario. Por lo tanto, si ejecuta un negocio web, debe optimizar estos componentes para garantizar el éxito del esfuerzo.

Biografía del autor

Ghia Marnewick es escritora, administradora de redes sociales y administradora digital. Escribe contenido para Aumcore y le apasiona encontrar nuevas formas de compartir información con el mundo.