Cualquiera que gestione un sitio web WordPress no puede evitar echar un vistazo a las Core Web Vitals de Google. Merece la pena echar un vistazo más de cerca a una de las tres métricas en particular: La mayor pintura de contenido desempeña un papel importante no sólo para el tiempo de carga, sino también para la clasificación en Google de tu . Si quieres saber qué hay detrás de esta métrica y cómo puedes mejorar tu Pintura de mayor contenido, has llegado al lugar adecuado. En este artículo, aclaramos todas las cuestiones importantes y revelamos las medidas que los operadores de sitios web pueden tomar para conseguir buenos valores.

¿Cuál es la mayor pintura de contenido? 

Cuando se accede a un sitio web, suelen pasar sólo unos segundos hasta que se instala completamente en el navegador. Invisibles para el visitante, durante este tiempo tienen lugar numerosos procesos. La pintura de contenido más grande (LCP) se refiere a uno de los últimos eventos antes de que el sitio web se cargue por completo: describe el tiempo que transcurre hasta que el elemento más grande de sitio se carga por completo y es visible . Suele tratarse de un bloque de texto, una imagen o un vídeo.

Esto hace que la Mayor Pintura de Contenido sea una de las métricas más importantes para el tiempo de carga de un sitio web. Junto con el Retraso de la Primera Entrada (FID) y el Desplazamiento Acumulativo del Diseño (CLS), también es una de las Principales Vitales Webque Google utiliza para evaluar la experiencia del usuario (experiencia de página).

Mayor Contenido de Pintura vs. Primer Contenido de Pintura

Un término que también se utiliza a menudo en relación con los tiempos de carga y el rendimiento de los sitios web, y que puede confundirse fácilmente, es el de Primera Pintura de Contenido (FCP). Por ello, volvemos a distinguir explícitamente entre ambas métricas para una mejor comprensión:

• El Pintado del contenido más grande mide cuánto tarda en cargarse completamente el elemento más grande, es decir, el contenido principal de un sitio.
• La Primera Pintura de Contenido se refiere al tiempo que transcurre antes de que se muestre el primer elemento en sitio , independientemente de cuál sea el contenido.

tu LCP casi siempre será ligeramente superior a tu FCP porque el contenido principal no suele ser el primer elemento que se carga.

¿Por qué es importante la Mayor Pintura de Contenido?

Probablemente te estés preguntando por qué deberías echar un vistazo más de cerca a la Mayor Pintura de Contenido. Tenemos dos buenas razones para ti. Ambas te ayudarán a aumentar la visibilidad de tu sitio web (y de tu negocio) en tus y a aumentar tutasa de conversión en tu .

1. mejora de la experiencia del usuario

La mayor pintura de contenido es un indicador importante de cómo experimentan los demás el sitio web tu . Aunque a tus visitantes no les suele importar el tiempo que tarda en cargarse completamente cada script y elemento de sitio , sí les importa el tiempo que tardan en utilizar el sitio de forma significativa y en ver el contenido más importante. Sin embargo, sí les importa el tiempo que tardan en utilizar el sitio y ver el contenido más importante.

Si optimizas tu para que tu LCP sea lo mejor posible (más sobre esto más adelante), proporcionarás a tus visitantes una sólida experiencia de usuario. Si, por el contrario, les haces esperar cinco segundos o más para ver el contenido principal de tus , rebotarán y buscarán en otra parte. Entonces estarán lejos de descargar contenidos, suscribirse, abonarse a los canales de tu , ponerse en contacto contigo o comprar productos de tu .

2. posicionamiento optimizado en Google

El contenido es y sigue siendo el factor de clasificación más importante para Google. Sin embargo, si dos sitios web rinden igual de bien en términos de contenido, el que tenga mejores Core Web Vitals asciende en la clasificación. Esto se debe a que Google considera estas métricas como factores oficiales de clasificación. El LCP es el que más influye en la puntuación: En la puntuación de rendimiento de Google Lighthouse, el valor representa alrededor del 25 por ciento.

Así pues, unas Vitales Web Básicas sólidas -y especialmente un LCP sólido- pueden ayudarte a conseguir una mejor clasificación en los motores de búsqueda.

Cómo medir la Mayor Pintura de Contenido

Puedes medir tu LCP de diferentes maneras. Un buen punto de partida son las herramientas de Google: Google Search Console, Google PageSpeed Insights y Lighthouse. Además, WebPageTest ofrece buenas opciones de análisis avanzado.

Consola de Búsqueda de Google

Con Google Search Console, puedes obtener una visión general del rendimiento de todo tu sitio web tus . Puedes encontrar información sobre el Core Web Vitals a través de la barra de navegación izquierda. Si abres la pestaña, obtendrás una visión gráfica de las URL de tu y podrás ver rápidamente qué URL son problemáticas. En el siguiente paso podrás examinarlas más detenidamente.

Si no tienes Google Search Console configurado para tu , también puedes obtener toda la información a través de Lighthouse o PageSpeed Insights.

Google PageSpeed Insights

Además de los valores LCP puros, Google PageSpeed Insights también te proporciona consejos y sugerencias útiles sobre cómo mejorar la Pintura de mayor contenido. Google también te indica qué elemento específico se utilizó para la prueba. Así puedes ver inmediatamente por dónde puedes empezar a optimizar.

Puedes utilizar la herramienta en tres sencillos pasos:

1. Llama a PageSpeed Insights el.
2. Introduce la URL de la página sitio que quieras consultar.
3. Inicia la prueba haciendo clic en Analizar.

A continuación, Google te muestra todas las Core Web Vitals de un vistazo, tanto para ordenadores de sobremesa como para dispositivos móviles. Definitivamente, deberías echar un vistazo a ambas versiones.

Para encontrar el elemento Pintura de mayor contenido, desplázate por la página de resultados hasta la sección Diagnóstico. Allí, en la sección Elemento de pintura de mayor contenido, aparece el elemento más grande de la ventana gráfica.

Atención: El elemento puede ser diferente para dispositivos móviles y de sobremesa. Así que siempre debes comprobar ambos aquí también.

Faro

Con Lighthouse puedes probar y analizar el LCP en tu propio navegador. La herramienta ya está integrada en las herramientas para desarrolladores de Google Chrome.

Así se procede en el navegador:

1. Abre la URL que quieras comprobar (preferiblemente en una ventana de incógnito).
2. Abre las Herramientas para desarrolladores de Chrome (DevTools). La forma más rápida de hacerlo es hacer clic con el botón derecho del ratón en cualquier lugar de sitio y, a continuación, hacer clic en Explorar en el menú que se abre.
3. A continuación, ve a las Herramientas para desarrolladores y selecciona la pestaña Lighthouse.
4. Selecciona si el LCP debe probarse para la vista de escritorio o para la vista móvil. En Categorías, basta con marcar Rendimiento.
5. Inicia el análisis con un clic en Generar informe.

La prueba dura entre 15 y 20 segundos, dependiendo del sitio web. Después, puedes ver y evaluar todos los valores y, por ejemplo, compararlos también con los resultados de Search Console (si lo has configurado).

WebPageTest

WebPageTest es especialmente útil si quieres configurar la prueba individualmente y profundizar en el análisis del rendimiento. Aquí también puedes definir métricas como la ubicación de la prueba, la velocidad de conexión o el propio dispositivo en las opciones avanzadas.

Los resultados también son algo más completos con WebPageTest: la herramienta te muestra exactamente cómo se carga el sitio web tu , qué elementos se cargan y a qué velocidad lo hace todo. Además de los valores LCP, el informe contiene muchas otras métricas, incluido un diagrama de cascada. Puedes saber exactamente qué es esto y cómo analizarlo correctamente en nuestro artículo Optimizar WordPress: Cómo analizar el sitio web tu en 7 segundos.

¿Cuál es el valor de un buen LCP?

Google dicta más o menos cómo se evalúa el LCP:

• Una Pintura de Mayor Contenido inferior a 2,5 segundos se considera buena y deseable.
• Los valores entre 2,5 y 4 segundos siguen siendo satisfactorios, pero pueden optimizarse.
• Si el valor LCP es superior a 4 segundos, se clasifica como deficiente y debe mejorarse definitivamente.

¿De dónde viene un LCP débil? 

La Pintura de Mayor Contenido de cada sitio web puede desglosarse en cuatro subelementos, que juntos dan el tiempo total de la LCP:

• Tiempo hasta el primer byte (TTFB): Es el tiempo que transcurre desde la petición del usuario hasta la primera respuesta del servidor, es decir, hasta el primer byte de datos cargado. Lo ideal es que el TTFB constituya aproximadamente el 40% del tiempo LCP.
• Resource Load Delay: Hiermit ist die Verzögerung beim Laden der Ressourcen gemeint – also die Zeitspanne zwischen dem ersten Byte und dem Moment, in dem der Browser beginnt, das LCP-Element zu laden. Diese sollte so klein wie möglich (< 10 Prozent der vollen LCP-Zeit) sein.
• Tiempo de carga del recurso: Este valor describe el tiempo necesario para cargar el propio elemento LCP. Dado que, como en el caso del TTFB, se trata de una solicitud de red, este proceso también puede tardar aproximadamente el 40% del tiempo total del LCP.
• Element Render Delay: Damit wird ausgedrückt, wie viel Zeit zwischen dem Ende des Ladevorgangs und dem vollständigen Rendern des LCP-Elements noch vergeht. Auch diese Verzögerung sollte so klein wie möglich (< 10 Prozent der vollen LCP-Zeit) sein.

Cada uno de estos subelementos está influido por otros factores, por lo que la lista de posibles causas de un PCL débil es prácticamente interminable. La mayoría de las veces, sin embargo, una (o más) de las cuatro razones siguientes está detrás:

• tu El servidor responde demasiado despacio (TTFB).
• JavaScript y CSS bloquean la carga de la página (retraso en la carga de recursos).
• Tienes muchos recursos grandes o contenidos visualmente exigentes en tus sitio que tardan mucho en cargarse (tiempo de carga de los recursos).
• La renderización del lado del cliente hace que el elemento LCP tarde más en mostrarse completamente (Retraso de renderización del elemento).

Cómo mejorar la mayor pintura de contenido

Ahora ya sabes de qué se compone la Pintura de Mayor Contenido y qué puede hacer que sea deficiente. Echemos ahora un vistazo a lo que puedes hacer para mejorar el L argest Contentful Paint para el sitio web tu WordPress. Estos son los consejos y medidas más importantes:

Confía en un alojamiento WordPress rápido

La base de un buen LCP son unos tiempos de carga cortos, o más exactamente un TTFB corto. Un alojamiento de alto rendimiento puede marcar la diferencia. Por tanto, comprueba si el alojamiento actual de tu te está ralentizando innecesariamente. Si es así, deberías plantearte cambiar a un alojamiento WordPress gestionado especializado que se adapte exactamente a las necesidades de tu .

Si alojas tu sitio web tu en Raidboxes , puedes esperar una infraestructura integral adaptada a WordPress que merece la pena: Tras un traslado a nuestros servidores, los sitios web de WordPress suelen cargarse hasta cuatro veces más rápido, sin ninguna optimización adicional.

Activar caché

Si quieres que el sitio web tu WordPress tenga un buen LCP y cargue rápido, casi no hay forma de evitar una caché de WordPress decente. Mejora el tiempo de respuesta del servidor almacenando en caché los archivos utilizados con frecuencia y recuperándolos más rápidamente la próxima vez. Puedes utilizar un plugin para ello o elegir un alojamiento con caché del lado del servidor, como el que ofrece Raidboxes .

Elimina el JavaScript y CSS que bloquean la renderización

Todo sitio web consta de elementos HTML, JavaScript y CSS. Este último regula la presentación del sitio web, JavaScript es responsable de los elementos dinámicos (por ejemplo, animaciones o formularios). Si JavaScript y/o CSS se cargan antes que el elemento LCP, aunque todavía no se necesiten, complican y ralentizan la presentación.

Por tanto, debes eliminar el JavaScript y el CSS innecesarios y mantener los archivos lo más compactos posible. También puedes mover ambos a la parte inferior de sitio o retrasar los scripts para que no bloqueen el contenido principal. La forma más fácil de hacerlo es con plugins como Autoptimize o WP Rocket.

Puedes obtener más información sobre JavaScript y CSS en nuestro artículo sobre la reducción de CSS, HTML y JavaScript.

Optimizar las imágenes

Cuanto más grandes sean las imágenes de tus , más probabilidades habrá de que tengan un LCP defectuoso. Por tanto, siempre debes comprimir lo mejor posible las imágenes de tu . Sin embargo, asegúrate de que la pérdida de calidad no sea demasiado elevada. Si puedes determinar qué elemento LCP de tu es una imagen, puedes reducir específicamente su tamaño. De este modo, el navegador necesita menos tiempo para descargarla y se reduce el valor de tu LCP.

Puedes averiguar cuál es el tamaño perfecto y en qué formato debes subir las imágenes en el artículo Tamaños de imagen en WordPress: Cómo funcionan las imágenes en WordPress y buenas prácticas para el sitio web tu . Además, también puedes encontrar un resumen de 6 plugins populares para la compresión de imágenes en nuestra revista.

Dar prioridad al elemento más grande

El elemento más grande de un sitio debe ser fácil de encontrar y cargarse lo antes posible. Por defecto, sin embargo, éste no suele ser el caso con las imágenes, por ejemplo. Sin embargo, puedes utilizar el atributo fetchpriority para indicar al navegador que determinados elementos deben recuperarse con mayor prioridad.

Podría ser así:

<img fetchpriority=“high“ src=“/path/to/hero-image.webp“>

(Nota: inserta este comando en WordPress como un bloque "Código" y selecciona HTML en las opciones de bloque en "Ojo largo"), entonces se formateará adecuadamente

Pero ten cuidado: no debes dar prioridad a más de una o dos imágenes hacia delante, de lo contrario la señal pierde su efecto. A la inversa, también puedes bajar la prioridad de las imágenes. Esto es útil, por ejemplo, para las imágenes de los carruseles deslizantes que se encuentran al principio de sitio , pero que no son directamente visibles al principio. Al darles menor prioridad, se libera ancho de banda para recursos esenciales.

Conclusión: Mejorar el tiempo de respuesta y optimizar el código

La conclusión es que la Mayor Pintura de Contenido puede ser un factor crucial cuando se trata de la clasificación en Google de tu y de la experiencia del usuario. Así que merece la pena echar un vistazo más de cerca y comprender esta métrica.

Cuanto más te adentras en la Pintura de Mayor Contenido, más claro queda que hay un número casi infinito de tornillos más pequeños y más grandes que puedes girar para optimizar la LCP. Algunos de ellos se pueden encontrar más rápidamente, otros requieren conocimientos técnicos más profundos. Por tanto, este artículo sólo ofrece una primera visión general y, para empezar, puedes concentrarte en dos cosas:

1. Acelera el tiempo de respuesta del servidor tu .
2. Optimiza el código del sitio web tus para que el elemento LCP se muestre lo más rápidamente posible.

El factor más importante para el tiempo de respuesta es el alojamiento de tu . Con un alojamiento WordPress de alto rendimiento como el que ofrecemos en Raidboxes , no tienes que preocuparte por los largos tiempos de espera de respuesta del servidor. Así que puede merecer la pena cambiar.