Pintura con contenido más grande (LCP) y cómo mejorarla en WordPress

Esta publicación es la primera de una serie de tres partes sobre Core Web Vitals. En él, queremos repasar cada una de las tres métricas que se encuentran en el corazón de la nueva vara de medir de Google para la calidad del sitio web. Nuestra primera parada: la pintura con contenido más grande (LCP) y cómo mejorarla en WordPress.

Por ahora, Core Web Vitals es un factor de clasificación crítico en Google. Como medidas para la experiencia del usuario, determinan si los visitantes se divierten o no en su sitio y también influyen en su desempeño en los motores de búsqueda. Por esa razón, es importante que los hagas bien.

Para ayudarlo a hacerlo, como se mencionó, queremos examinar en profundidad cada uno de los componentes de Core Web Vitals. A continuación, hablamos sobre qué son exactamente y por qué son importantes para el SEO. Después de eso, obtienes una educación de grado A sobre cómo dominar la pintura con contenido más grande, la primera de ellas, en tu sitio de WordPress. La publicación explica qué es LCP, cómo medirlo, qué número debe buscar y cómo mejorar esta métrica en su sitio de WordPress si es necesario.

¿Qué son los principales web vitals?

En primer lugar, en caso de que este tema sea completamente nuevo para usted, comencemos con lo básico: ¿qué son exactamente Core Web Vitals?

En resumen, son un conjunto de métricas centradas en el usuario que miden la velocidad de carga, la interactividad y la estabilidad visual de las páginas web que Google presentó en mayo de 2020. Se supone que ayudan a los propietarios y desarrolladores de sitios web a comprender qué tan buena es la experiencia de un usuario con su páginas ofrecen e identifican áreas de mejora.

Core Web Vitals consta de tres métricas:

1. Pintura con contenido más grande (LCP)
2. Primera demora de entrada (FID)
3. Cambio de diseño acumulativo (CLS)

Cada uno de estos se mide por separado y está influenciado por diferentes factores, razón por la cual estamos escribiendo esta serie de artículos.

¿Por qué Core Web Vitals es importante para el SEO?

La razón por la que enfatizamos este punto es bastante simple. Google ha dejado claro que quiere priorizar páginas que brinden una experiencia agradable a los visitantes que las frecuentan. Core Web Vitals es una forma de medir eso.

Como consecuencia, ahora son un componente clave del algoritmo de Google para evaluar y clasificar páginas web. Para citar su propia página sobre ese asunto:

Core Web Vitals es el subconjunto de Web Vitals que se aplica a todas las páginas web, debe ser medido por todos los propietarios de sitios y aparecerá en todas las herramientas de Google.

Por lo tanto, si desea que sus páginas funcionen bien, no solo debe tener en cuenta aspectos como el diseño web, EAT, autoridad de contenido, optimización en la página, velocidad del sitio y compatibilidad con dispositivos móviles, sino también estas métricas de UX. De lo contrario, es posible que Google lo penalice y no lo clasifique bien.

Además, mejorar Core Web Vitals puede conducir a una mejor participación del usuario, visitas más prolongadas al sitio y, en última instancia, mayores conversiones e ingresos. Por lo tanto, optimizar su sitio web para ellos no solo ayuda con el SEO, sino que también impulsa los resultados comerciales.

¿Todo claro? Entonces, abordemos la primera métrica.

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

LCP es la primera métrica Core Web Vitals que queremos analizar. Mide el tiempo que tarda el elemento más grande en la ventana gráfica (eso es lo que ve en la ventana de su navegador) en mostrarse completamente en la pantalla después de que un usuario inicia la carga de una página. Puede ser una imagen, un video, un bloque de texto o cualquier otro elemento que ocupe una cantidad significativa de espacio en la página.

LCP es una métrica importante porque refleja qué tan rápido los usuarios pueden acceder al contenido principal de una página web, que es probablemente lo que buscaban en primer lugar. Una puntuación LCP lenta significa que los usuarios pueden tener que esperar más tiempo antes de poder empezar a leer o interactuar con la página. Esto puede llevar a la frustración y simplemente hacer que se vayan. No bueno.

¿Cómo se calcula la pintura con contenido más grande?

La puntuación LCP de una página se determina mediante el seguimiento del tiempo en segundos que tarda el elemento más grande en la ventana gráfica en renderizarse por completo. Sin embargo, la métrica solo considera ciertos tipos de elementos para su cálculo:

• <img> elementos, significado imágenes
• Elementos <image> dentro de documentos <svg>
• <video> elementos que muestran una imagen de vista previa
• Elementos que cargan una imagen de fondo a través de la función url()
• Elementos a nivel de bloque y en línea con contenido de texto

En resumen, imágenes y texto principal. Al mismo tiempo, LCP ignora los componentes que los usuarios probablemente no consideren "contenidos", como:

• Elementos con una opacidad de 0, que son invisibles para el usuario
• Elementos que cubren la pantalla completa y probablemente funcionan como fondo en lugar de contenido
• Imágenes de marcador de posición o imágenes con poca información que probablemente no reflejen el verdadero propósito de la página

Cómo probar su sitio para LCP

Hay muchas formas de probar la pintura más grande con contenido en su sitio web de WordPress. Como se mencionó anteriormente, ahora es una métrica en todas las herramientas de Google, por lo que puede comenzar allí.

Por ejemplo, cuando ingresa su sitio web en PageSpeed ​​Insights, puede encontrar su valor LCP y si pasó la prueba o no.

Además, encontrará información sobre problemas con la pintura más grande con contenido y otros problemas en el informe Core Web Vitals en Google Search Console.

Las herramientas para desarrolladores de Chrome también lo muestran (más sobre eso a continuación). Además, existen complementos de navegador que le permiten medir estas métricas, como Web Vitals para Chrome y SpeedVitals para Firefox. Finalmente, si es un desarrollador, es posible que desee utilizar soluciones más técnicas, como la biblioteca de JavaScript web-vitals.

¿Qué es un valor LCP ideal?

Después de aprender a medir LCP, su próxima pregunta probablemente sea qué es exactamente un buen valor. ¿A qué punto de referencia debería apuntar?

En el caso de la pintura con contenido más grande, el número mágico es de 2,5 segundos. Si su puntaje LCP es inferior a 2,5 segundos, se considera bueno. Es probable que la página en cuestión proporcione una buena experiencia de usuario. Si su puntuación está entre 2,5 y 4 segundos, Google considera que necesita mejorar. Cualquier valor superior a 4 segundos se considera pobre.

Entonces, bastante cortado y seco. No hay necesidad de preguntarse, usted sabe exactamente lo que el gigante de las búsquedas espera de usted.

Cómo mejorar la pintura con contenido más grande (en WordPress)

Si encuentra que después de probar que su sitio no cumple con el punto de referencia anterior, no tema. Dedicaremos el resto de esta publicación a hablar sobre cómo mejorar el valor de la pintura con contenido más grande si es necesario.

La buena noticia es que hay muchas cosas que puedes hacer. Por otro lado, muchos factores pueden influir en LCP, por lo tanto, corregirlo a menudo no es una solución rápida. Debe observar todo el proceso de carga de la página paso a paso. Así que hagamos eso, ¿de acuerdo?

Encuentre el elemento de pintura con contenido más grande

El primer paso para mejorar su valor LCP es averiguar cuál es exactamente su elemento LCP. Después de todo, ¿cómo puedes mejorar la entrega de algo si no sabes en qué concentrarte?

Si está utilizando PageSpeed ​​Insights para medir su sitio, en realidad le dirá cuál es su elemento LCP más abajo en la página en la sección Diagnóstico .

Si ejecuta una prueba de rendimiento en las herramientas de desarrollo del navegador de Chrome, también aparecerá en la línea de tiempo e incluso resaltará el elemento LCP en la página. Haga clic en LCP y luego coloque el cursor sobre el archivo en Nodo relacionado .

Dividir el proceso de carga en partes

A continuación, para optimizar su mayor pintura con contenido, es útil dividir el proceso en varias fases. Como se mencionó anteriormente, no existe un enfoque único para todos. Tienes que mirarlo desde diferentes ángulos para descubrir qué necesita arreglarse en tu sitio. Las fases propuestas por Google son:

• TTFB : significa "tiempo hasta el primer byte", como el tiempo desde que un usuario solicita la página hasta que recibe el primer byte de HTML.
• Retraso en la carga de recursos : el intervalo de tiempo para recibir los archivos de la página (HTML y CSS) y antes de que se carguen los recursos LCP.
• Tiempo de carga del recurso : la fase en la que se carga el recurso LCP.
• Retraso de procesamiento del elemento : finalmente, el tiempo entre la carga del elemento LCP y su procesamiento completo.

Desglosar la pintura con contenido más grande de esta manera le permite concentrarse en las diferentes fases y mejorarlas individualmente.

Optimizar el hospedaje y la arquitectura del sitio

Estas son medidas para mejorar el TTFB y el retraso en la carga de recursos.

La rapidez con la que los visitantes reciben los datos de su sitio depende de una serie de factores. Por un lado, está el servidor. Incluso si su sitio tiene una huella muy pequeña, como un sitio web de una página, aún puede verse muy retrasado por un servidor web lento. Otro factor son los componentes que componen su sitio, como su sistema operativo, temas, complementos, etc.

Como consecuencia, la mejora de todos estos factores ayuda a optimizar la pintura con contenido más grande. Aquí está cómo hacerlo:

• Invierta en alojamiento de calidad : como se mencionó, el servidor web es un factor importante y, por lo tanto, su proveedor de alojamiento es una consideración importante. Evite el alojamiento compartido si puede y obtenga un plan de alojamiento de acuerdo con su tráfico. Además, trate de tener su sitio en un servidor cerca de su audiencia.
• Use temas y complementos de alta calidad : asegúrese de obtener los componentes de su sitio de buenas fuentes para que sepa que están bien programados, son eficientes y tienen un buen soporte. Use la cantidad mínima de complementos para reducir las solicitudes HTTP en su sitio.
• Mantén tu sitio actualizado : el núcleo de WordPress y las actualizaciones de complementos/temas vienen con mejoras, incluidas correcciones de rendimiento. Manténgase al tanto de ellos para obtener lo último y lo mejor.

Con estos en su lugar, puede asegurarse de que los visitantes reciban los datos de su sitio lo más rápido posible. Para saber si su servidor es el problema, es útil aprender a probar la velocidad de su sitio web. Además, evite los redireccionamientos múltiples y analice las solicitudes del servidor antes mencionadas.

Utilice una red de entrega de contenido (CDN)

Otra forma de mejorar el tiempo hasta el primer byte es usar una red de entrega de contenido (CDN). Ayuda a reducir la distancia entre el usuario y el lugar de donde recibe los datos de su sitio web. Esto puede hacer que el tiempo de carga sea más corto.

Incluso hay CDN especializados en los que solo coloca sus imágenes en servidores externos, como Site Accelerator de Jetpack. Esto tiene mucho sentido ya que las imágenes suelen ser los elementos con mayor contenido. Los CDN también implementan a veces las técnicas de optimización de imágenes de las que hablaremos ahora.

Optimizar imágenes y fuentes web

Ahora estamos llegando a técnicas para reducir el tiempo de carga de recursos. Si prestó atención anteriormente, sabrá que esa es la velocidad a la que se entrega el recurso LCP al navegador. Una consideración importante aquí son las imágenes.

Las imágenes a menudo terminan siendo el objeto con mayor contenido porque tienden a ser más grandes que el texto debido al exceso de información que contienen. Por esa razón, una de las cosas en las que debe concentrarse para reducir el tiempo de carga de sus recursos es optimizarlos:

• Use el tamaño correcto : use solo imágenes tan grandes como aparecen en la página, de lo contrario, está haciendo que los visitantes carguen más de lo que necesitan. Esto a menudo significa cambiar el tamaño de sus imágenes antes de cargarlas o configurar las opciones de medios de WordPress exactamente al tamaño que necesita para su diseño. El complemento regenerar miniaturas puede ayudarlo a optimizar los tamaños de las imágenes que ya están en su sitio.
• Elija formatos de imagen modernos : no todos los formatos de imagen se crean de la misma manera. Para que sus imágenes sean lo más pequeñas posible, use formatos modernos como webp o avif, que ocupan menos espacio que sus predecesores.
• Comprimir imágenes : comprimir significa eliminar datos innecesarios. Puede hacerlo antes de cargar sus imágenes (por ejemplo, a través de TinyPNG/JPG o RIOT) o automáticamente con complementos de WordPress como Smush u Optimole.
• Carga diferida de imágenes que no están en la pantalla : la carga diferida significa no cargar imágenes que aún no están visibles en el navegador. Esto puede ahorrar mucho tiempo. Solo asegúrese de excluir las imágenes que necesitan ser visibles inmediatamente.

Más sobre esto en nuestro artículo sobre la optimización de imágenes. Mientras lo hace, también reduzca el tamaño y la cantidad de sus fuentes web. Cargue solo lo que realmente necesita y considere alojar sus fuentes web localmente.

Configurar el almacenamiento en caché y la compresión

El almacenamiento en caché y la compresión son técnicas para acelerar generalmente su sitio web al hacer que los archivos de su sitio se carguen más rápido. Pueden ayudar tanto con el retraso de la carga de recursos como con el tiempo de carga.

El primero lo hace renderizando previamente sus documentos HTML y guardando versiones terminadas de ellos en su servidor para que este proceso no tenga que realizarse cada vez que los visitantes quieran ver su sitio.

El segundo significa reducir el tamaño de los archivos de su sitio web para que sean más rápidos de transmitir. Puede hacer esto último con la compresión Gzip o la compresión Brotli más nueva. Combínalo con la minificación de tus archivos para que ocupen menos espacio y carguen más rápido.

Un complemento como Autoptimize o muchos complementos de almacenamiento en caché de WordPress pueden hacer todo lo anterior y son una manera fácil de mejorar la pintura más grande con contenido en su sitio.

Elimine los recursos de bloqueo de procesamiento

Ahora vamos a mejorar el retardo de procesamiento de elementos. Incluso si ha optimizado la velocidad de carga de su página y la entrega de su elemento LCP, su puntaje seguirá siendo malo si el elemento en sí tarda mucho en aparecer en la página. Aquí, los recursos que bloquean el renderizado son los culpables más comunes.

Puede utilizar el artículo vinculado anterior para obtener instrucciones detalladas sobre cómo tratar con ellos. Sin embargo, aquí unas breves notas:

• Cargue scripts de forma asíncrona y JavaScript esencial en línea.
• Hojas de estilo en línea en HTML (esto solo aplica hojas de estilo pequeñas, ya que los elementos en línea no se almacenan en caché).
• Reduzca el tamaño de la hoja de estilo eliminando CSS y JavaScript no utilizados. Alternativamente, aplace el CSS no crítico y minimice y comprima las hojas de estilo.

Use la pestaña Cobertura en las herramientas de desarrollo de su navegador para identificar los elementos que sus visitantes deben cargar primero. También lo ayuda a identificar el código no utilizado que puede eliminar.

Algunas cosas realmente técnicas

Si tiene persuasión técnica, aquí hay algunas cosas más nerd que puede hacer para mejorar aún más su mayor pintura con contenido en WordPress y más allá:

• Precarga imágenes en HTML : especialmente cuando se usan como fondos CSS o similares, agrega <link rel="preload"> para dar prioridad a tus imágenes más importantes. Esto también funciona para fuentes que podrían ser necesarias para mostrar el texto principal.
• Ajuste la prioridad de búsqueda : indique a los navegadores qué deben cargar primero agregando fetchpriority="high" . Limite esto a una o dos imágenes, de lo contrario anula el propósito.
• Use renderizado del lado del servidor o renderizado previo , especialmente si tiene un servidor rápido. Esto reduce la cantidad de trabajo necesario para realizar en el navegador.
• Optimice las fuentes web a través de la visualización de fuentes : establezca la regla de visualización de fuentes en swap , fallback u optional para evitar que la representación de su texto se bloquee durante la carga de fuentes web.

La mayor pintura con contenido y WordPress en pocas palabras

La pintura con contenido más grande es solo una de las tres métricas que Google considera como Core Web Vitals y utiliza para juzgar la experiencia del usuario de un sitio web y, en última instancia, el rango de búsqueda. Si tiene problemas con el rendimiento del sitio y de la búsqueda, es uno de los factores a tener en cuenta.

En esta publicación, ha aprendido cómo averiguar si esto es un factor para su sitio de WordPress, qué valor de LCP debe buscar y formas de mejorarlo. Con suerte, a estas alturas ya se siente capaz de cambiar su LCP para mejor.

Como de costumbre, no tienes que ser perfecto. Elija lo que se sienta capaz de hacer, impleméntelo y continúe desde allí.

¿Tiene algún consejo adicional con respecto a la métrica de pintura con contenido más grande y cómo mejorarla en WordPress? Siéntase libre de participar en los comentarios .