La mayor pintura con contenido explicada: cómo mejorar su tiempo

¿Tiene dificultades para mejorar la pintura más grande con contenido en su sitio web? ¿O no está seguro de qué significa la pintura con contenido más grande y por qué necesita preocuparse por ella en primer lugar?

No importa desde dónde comience, esta publicación es para usted porque aprenderá todo lo que necesita saber sobre la pintura más grande con contenido.

Eso incluye lo que significa la pintura con contenido más grande, por qué es importante, cómo medirlo y cómo mejorarlo.

Puede usar la tabla de contenido a continuación para saltar a una sección específica según su nivel de conocimiento actual. O sigue leyendo para empezar desde el principio.

¿Qué es la pintura con contenido más grande (LCP)? Explicando el mayor significado de pintura con contenido

La pintura con contenido más grande es una métrica de rendimiento que mide cuánto tiempo tarda en cargarse el contenido principal de una página web.

La pintura con contenido más grande es parte de las métricas Core Web Vitals de Google, junto con el cambio de diseño acumulativo (CLS) y el retraso de la primera entrada (FID).

En un nivel más técnico, la pintura con contenido más grande mide el tiempo que transcurre desde que el usuario inicia la carga de la página hasta que se representa el bloque de texto, la imagen o el video más grande dentro de la ventana gráfica.

¿Qué significa “contenido principal” en términos de LCP?

Bueno, el contenido principal dependerá de la página real en cuestión, pero podría ser cualquiera de los siguientes:

• Texto : más específicamente, cualquier elemento de nivel de bloque que contenga nodos de texto u otros elementos de texto de nivel en línea.
• Imagen : elementos dentro de un elemento <img> o elementos <image> dentro de un elemento <svg>.
• Video : cualquier elemento <video> (utiliza la imagen del póster).
• Un elemento con una imagen de fondo , solo cuando se carga a través de la función CSS url() (no se aplica a los gradientes CSS).

Más adelante en esta publicación, aprenderá cómo encontrar el elemento Paint con contenido más grande exacto para cualquier página de su sitio.

La pintura con contenido más grande frente a la primera pintura con contenido

Una pregunta común que puede tener es cuál es la diferencia entre la mayor pintura con contenido y la primera pintura con contenido, otra métrica de rendimiento común.

Si bien los dos términos son similares, la diferencia clave es que la pintura más grande con contenido mide cuánto tiempo tarda en cargarse el "contenido principal" de la página, mientras que la primera pintura con contenido mide cuánto tiempo tarda en cargarse el "primer objeto" ( ya sea que es el contenido principal ).

Básicamente:

• LCP = solo contenido principal
• FCP = primera pieza de contenido, independientemente de cuál sea ese contenido

Como tal, su tiempo de LCP casi siempre será un poco más alto que su tiempo de FCP porque el elemento de "contenido principal" no suele ser el primero en cargarse.

¿Por qué es importante el mayor tiempo de pintura con contenido de su sitio?

Hay dos razones principales por las que los tiempos de pintura con contenido más grandes de su sitio son importantes:

1. Experiencia de usuario
2. optimización de motores de búsqueda

Experiencia de usuario

La principal razón por la que debería preocuparse por los tiempos de mayor pintura con contenido de su sitio es que esta métrica es un buen indicador para comprender las experiencias de sus usuarios en lo que respecta al rendimiento de su sitio.

A la mayoría de los usuarios no les importa cuánto tiempo le toma a su sitio web cargar completamente cada script y elemento. En cambio, les importa cuánto tiempo les toma comenzar a obtener valor de su sitio web.

La pintura con contenido más grande hace un buen trabajo al tratar de medir ese momento de "valor" al ver cuánto tarda en cargarse el contenido principal.

Si optimiza su sitio para lograr un mayor tiempo de pintura con contenido más rápido, puede estar bastante seguro de que está ofreciendo a los usuarios una experiencia sólida en su sitio, al menos en lo que respecta al rendimiento (también querrá un diseño amigable para el cliente y buena usabilidad).

Por supuesto, eso no significa que deba ignorar otras métricas de rendimiento. Siempre recomendamos tener una mirada holística del rendimiento y los cuellos de botella de su sitio, razón por la cual creamos nuestra propia herramienta de monitoreo del rendimiento de la aplicación (APM) que está disponible de forma gratuita si está utilizando Kinsta hosting: Kinsta APM.

Optimización de motores de búsqueda (SEO)

En el frente de la optimización de motores de búsqueda, Largest Contentful Paint es parte del trío de métricas Core Web Vitals de Google, que Google comenzó a usar como un factor de clasificación SEO en su actualización del algoritmo Page Experience de 2022.

Esto significa que tener tiempos deficientes para pintar con mayor contenido puede ser un lastre para el rendimiento de su sitio en los resultados de búsqueda de Google.

Si bien otros factores como la calidad/relevancia del contenido y los vínculos de retroceso aún juegan un papel mucho más importante en la clasificación de su sitio web, es importante optimizar los tiempos de pintura con contenido más grande de su sitio para asegurarse de que está aprovechando al máximo sus esfuerzos de SEO.

¿Qué puede afectar las puntuaciones de pintura con contenido más grandes?

Dos tipos "principales" de problemas pueden afectar los tiempos de mayor pintura con contenido de una página:

1. Cuánto tarda su servidor en responder con el documento HTML inicial.
2. El tiempo que tarda en cargarse el recurso LCP real.

El primer tipo de problema se relaciona con el tiempo de respuesta del servidor, también conocido como tiempo hasta el primer byte (TTFB). Antes de que el navegador de un usuario pueda siquiera pensar en cargar el contenido principal, primero debe obtener una respuesta del servidor.

Estos son algunos de los problemas comunes que afectan esto:

• No usar el almacenamiento en caché de la página : no usar el almacenamiento en caché de la página obliga al servidor a hacer más "trabajo" antes de que pueda responder con el documento HTML.
• Alojamiento lento : un proveedor de alojamiento lento siempre tendrá un TTFB lento, independientemente de lo que haga.
• No usar un CDN : una red de entrega de contenido (CDN) puede acelerar TTFB sirviendo páginas desde su red global en lugar de requerir que los usuarios las descarguen del servidor de origen de su sitio.

Después de que el servidor de su sitio entregue el documento HTML inicial, podría haber más cuellos de botella cuando se trata de cargar el elemento de contenido principal real.

Estos son algunos de los problemas comunes que afectan esto:

• JavaScript o CSS que bloquea la representación (o código no optimizado/innecesario en general) : si el navegador del usuario necesita descargar y/o procesar JavaScript o CSS innecesario antes de que pueda cargar el elemento principal, eso ralentizará su LCP.
• Imágenes no optimizadas : si el elemento LCP es una imagen, el uso de imágenes no optimizadas ralentizará su tiempo porque las imágenes más grandes tardan más en descargarse.
• Carga de fuentes no optimizadas : si el elemento LCP es texto, la carga de fuentes personalizadas de forma no optimizada puede hacer que ese texto tarde más en aparecer.
• Archivos sin comprimir : si no utiliza tecnologías de compresión como Gzip o Brotli, el navegador del usuario tardará más en descargar los archivos de su sitio.

Dependiendo de su sitio, es posible que experimente cuellos de botella en ambas áreas o solo en una de ellas. Aprenderá cómo resolver todos estos problemas un poco más adelante en esta publicación.

¿Qué es un buen tiempo de pintura con contenido más grande?

Google define un tiempo de pintura con contenido más grande "bueno" como inferior a 2,5 segundos.

Si el tiempo de mayor pintura con contenido de su página está entre 2,5 y 4,0 segundos, Google lo clasifica como "Necesita mejorar". Y si el tiempo de su página supera los 4,0 segundos, Google lo define como "pobre".

Aquí hay un gráfico de Google que muestra esto visualmente:

Cómo medir la pintura con contenido más grande: las mejores herramientas de prueba LCP

Hay una serie de herramientas que puede usar para probar el rendimiento de su sitio para la mayor pintura con contenido: repasemos algunas de las más útiles...

Perspectivas de PageSpeed

PageSpeed ​​Insights es una de las mejores herramientas para evaluar la pintura más grande con contenido porque ofrece cuatro bits de información útiles:

1. Puede ver los tiempos de mayor pintura con contenido de su sitio con usuarios reales del informe Chrome UX ( si su sitio tiene suficiente tráfico para ser incluido en el informe ).
2. Puede ejecutar pruebas simuladas para ver cómo funciona su sitio.
3. Google le dirá el elemento LCP real que está utilizando para la prueba, lo que le permite saber qué elemento optimizar.
4. Google proporcionará sugerencias sobre cómo mejorar su tiempo LCP.

He aquí cómo usarlo:

1. Vaya al sitio web de PageSpeed ​​Insights.
2. Introduzca la URL de la página que desea probar.
3. Haga clic en Analizar .

Luego, Google le mostrará los resultados tanto para dispositivos móviles como para computadoras de escritorio; asegúrese de verificar ambos.

Para encontrar el elemento principal que utiliza Google para calcular LCP, puede desplazarse hacia abajo hasta la sección Diagnóstico y expandir la sección Elemento de pintura con contenido más grande :

Nuevamente, asegúrese de verificar tanto el dispositivo móvil como el de escritorio porque el elemento LCP puede ser diferente para cada uno.

Herramientas para desarrolladores de Chrome

También puede probar el tiempo de mayor pintura con contenido directamente desde las herramientas para desarrolladores de Chrome utilizando la pestaña Rendimiento o su función de auditoría Lighthouse. Recomendamos usar la pestaña Rendimiento porque le brinda más información.

He aquí cómo empezar:

1. Abra la página que desea probar.
2. Abra las herramientas para desarrolladores de Chrome.
3. Vaya a la pestaña Rendimiento .
4. Asegúrese de que la casilla Web Vitals esté marcada.
5. Haga clic en el botón Recargar ( indicado a continuación ).

Ahora debería ver un análisis completo de su sitio.

Si pasa el cursor sobre LCP en la pestaña Red , puede ver la hora:

Si pasa el cursor sobre LCP en la pestaña Timings , puede ver el elemento LCP real:

Consola de búsqueda de Google

Si bien Google Search Console no le permite probar una página individual para su mayor tiempo de pintura con contenido, es realmente útil para evaluar el rendimiento de todo el sitio.

Cada página de su sitio tendrá un tiempo LCP diferente, por lo que no puede simplemente probar su página de inicio y dar por terminada el día.

Con Google Search Console, podrá ver dónde se encuentra cada página de su sitio en las categorizaciones de Google "Bueno", "Necesita mejorar" y "Deficiente". Los datos de rendimiento provienen del informe Chrome UX, por lo que se basan en datos de usuarios reales.

Si aún no lo ha hecho, primero deberá verificar su sitio con Google Search Console.

Una vez que haya hecho eso, aquí le mostramos cómo acceder al informe LCP:

1. Abra Google Search Console para su sitio.
2. Vaya a Core Web Vitals en la pestaña Experiencia .
3. Haga clic en Abrir informe junto al gráfico móvil o de escritorio.
4. Busque cualquier problema en la sección Por qué las URL no se consideran buenas . Si hace clic en el problema, puede ver más información sobre qué URL están causando problemas.

*Asegúrese de verificar los resultados de escritorio y móvil, ya que los datos pueden ser diferentes en cada uno.

Prueba de página web

WebPageTest es otra opción útil para ejecutar pruebas de rendimiento simuladas.

A diferencia de PageSpeed ​​Insights, WebPageTest le permite personalizar completamente varias métricas de prueba, como la ubicación de la prueba, la velocidad de conexión, el dispositivo y más. Ese es el principal beneficio de usarlo sobre otras herramientas: le brinda más opciones para configurar la prueba.

Así es como se ejecuta una prueba:

1. Vaya a Prueba de página web.
2. Agregue la URL de la página que desea probar.
3. Expanda las opciones de Configuración avanzada para configurar completamente su prueba.

En la página de resultados, verá los datos de LCP, junto con toneladas de otras métricas de rendimiento (incluido un análisis en cascada).

Cómo encontrar el elemento de pintura con contenido más grande

Si desea mejorar la pintura más grande con contenido, puede ser muy útil saber exactamente qué elemento está utilizando Google para calcular su tiempo LCP.

Por ejemplo, si sabe que Google está utilizando su imagen principal como elemento LCP en su página de inicio, sabe que necesita encontrar formas de publicar esa imagen principal lo más rápido posible si desea mejorar los tiempos de LCP de su página principal.

Como mencionamos anteriormente, puede encontrar su elemento Paint con mayor contenido utilizando PageSpeed ​​Insights o Chrome Developer Tools.

Asegúrese de verificar los resultados de los dispositivos móviles y de escritorio, ya que su elemento LCP puede ser diferente en diferentes dispositivos.

Cómo mejorar la mayor pintura con contenido en WordPress (u otras plataformas)

Ahora que sabe todo sobre la pintura con contenido más grande, veamos algunos consejos prácticos sobre cómo mejorar la pintura con contenido más grande en WordPress.

Si bien nos centraremos en WordPress para estos consejos, todos los consejos son universales y se aplican a otros tipos de sitios web.

Configurar el almacenamiento en caché para mejorar el tiempo de respuesta del servidor

El almacenamiento en caché puede mejorar el tiempo de respuesta del servidor al reducir el trabajo de procesamiento que su servidor debe realizar antes de poder entregar el documento HTML terminado a los navegadores de los visitantes.

Si está alojando su sitio de WordPress con Kinsta, no necesita preocuparse por configurar el almacenamiento en caché porque Kinsta implementa automáticamente el almacenamiento en caché optimizado para usted.

Si aloja en otro lugar, puede habilitar el almacenamiento en caché en su sitio utilizando un complemento gratuito como WP Super Cache o un complemento pago como WP Rocket.

Para obtener más opciones, consulte nuestra publicación con los mejores complementos de almacenamiento en caché de WordPress.

Actualice a un alojamiento de WordPress más rápido

Si bien todas las tácticas de esta lista pueden ayudarlo a mejorar su tiempo de LCP, no se ande con rodeos:

Si utiliza un alojamiento de WordPress lento y no optimizado, sus tiempos de LCP siempre estarán limitados por la calidad de su alojamiento.

Es posible que pueda mejorar un poco las cosas, pero siempre tendrá dificultades para lograr tiempos LCP de menos de 2,5 segundos si su host es lento.

Si desea la forma más fácil de mejorar sus tiempos de mayor pintura con contenido, puede migrar su sitio a Kinsta. Kinsta no solo ofrece una infraestructura de alojamiento optimizada para el rendimiento, sino que también tenemos funciones integradas para manejar muchas de las otras optimizaciones en esta lista.

Eso significa que puede concentrarse en hacer crecer su sitio en lugar de perder el tiempo optimizando los tiempos de pintura con mayor contenido.

Si está interesado, Kinsta migrará sitios web ilimitados desde cualquier host de forma gratuita ; obtenga más información sobre la migración gratuita aquí.

Si todavía está indeciso, pruebe primero el resto de los consejos de esta lista. Pero si todavía tiene problemas después de hacer todo lo que está en esta lista, es posible que necesite un mejor alojamiento.

Utilice una red de entrega de contenido (CDN)

Sin una CDN, todos los visitantes de su sitio necesitan descargar el HTML de una página y los activos estáticos de su servidor de alojamiento.

Si sus visitantes se encuentran cerca de su servidor, eso no suele ser un problema. Pero si sus visitantes están repartidos por todo el mundo, esto puede ralentizar su sitio debido a la distancia física entre un visitante y el servidor de su sitio.

Con una CDN, puede distribuir los activos estáticos de su sitio (o incluso las páginas HTML terminadas de su sitio) a la red global de la CDN. De esa forma, los visitantes pueden descargar archivos desde la ubicación más cercana de la CDN, lo cual es mucho más rápido.

Si está alojando con Kinsta, le recomendamos que utilice la función Edge Caching de Kinsta para obtener los mejores resultados.

La función de almacenamiento en caché perimetral de Kinsta funciona almacenando en caché las páginas HTML completas y los activos estáticos de su sitio en la red global de Cloudflare ( en lugar de simplemente almacenar en caché los activos estáticos como la mayoría de las soluciones de CDN ).

Esto significa que los visitantes de su sitio pueden descargar la página completa desde la ubicación de borde más cercana, lo que acelera tanto el tiempo de respuesta del servidor como el tiempo que tarda en cargarse su recurso LCP.

Para habilitar Edge Caching de Kinsta, vaya a la pestaña Edge Caching en el panel de control de su sitio en MyKinsta.

Si está alojando en otro lugar, puede configurar una CDN para los activos estáticos de su sitio utilizando servicios de CDN populares como KeyCDN, Bunny, StackPath y otros.

Evite el JavaScript que bloquea el renderizado (aplazar o eliminar)

JavaScript de bloqueo de procesamiento es JavaScript que se carga antes que su elemento LCP principal aunque no sea necesario en ese momento.

Al retrasar la carga del elemento LCP, se ralentizarán los tiempos de carga de LCP.

Para solucionar esto, hay algunas estrategias que puede implementar:

• Elimine JavaScript innecesario si es posible.
• Aplaza el JavaScript para que no bloquee la carga del elemento principal de tu sitio.
• Retrasa el JavaScript hasta que un usuario interactúe con tu sitio.

Para la mayoría de las personas, la forma más fácil de implementar esta funcionalidad es a través de complementos como Autoptimize o WP Rocket.

Para obtener una guía completa sobre cómo hacer esto, tenemos dos publicaciones muy detalladas:

• Cómo eliminar los recursos que bloquean el renderizado en WordPress
• Cómo diferir el análisis de JavaScript

Evite el CSS que bloquea el renderizado y optimice la entrega de CSS

Así como JavaScript no optimizado puede ralentizar su sitio, CSS no optimizado también puede hacer lo mismo.

Esencialmente, desea cargar la menor cantidad de CSS posible. Y para el CSS que necesita cargar, desea cargarlo de manera óptima. Por lo general, esto significa que desea cargar CSS importante antes, mientras retrasa el CSS no crítico hasta más adelante en el proceso de carga.

Si no es desarrollador, la forma más sencilla de lograrlo es mediante el uso de complementos de optimización del rendimiento como Perfmatters, WP Rocket o FlyingPress.

Por ejemplo, WP Rocket ofrece funciones integradas para eliminar CSS no utilizado página por página y servir CSS de manera óptima.

Si desea una mirada mucho más profunda sobre cómo hacer todo esto, consulte nuestra guía completa sobre cómo optimizar CSS.

Minimice su HTML, CSS y JavaScript

Además de las técnicas de optimización de código anteriores, también querrá minimizar el HTML, CSS y JavaScript de su sitio.

Esencialmente, esto elimina caracteres innecesarios y espacios en blanco del código de su sitio para reducir su tamaño.

Si está alojando con Kinsta, Kinsta puede manejar automáticamente la minificación a través de nuestra integración con Cloudflare. Aquí se explica cómo controlar esta función:

1. Abra el panel de control de su sitio en MyKinsta.
2. Vaya a la pestaña CDN .
3. Haga clic en Configuración junto a Optimización de imagen.
4. Marque las casillas de CSS y JS y guarde la configuración.

Si está alojando su sitio en otro lugar, puede usar un complemento gratuito como Autoptimize para minimizar su código o uno de los complementos integrales premium como Perfmatters, WP Rocket o FlyingPress.

O consulte nuestro tutorial de minificación de código completo para obtener más información. Si bien el tutorial se enfoca en JavaScript, también puede usar los mismos métodos y complementos para minimizar otro código.

Usar compresión a nivel de servidor (Gzip o Brotli)

La compresión a nivel de servidor le permite reducir el tamaño de los archivos de su sitio utilizando tecnologías como Gzip o Brotli.

Por ejemplo, la compresión que usamos para el sitio web de Kinsta redujo el tamaño del archivo de la página de inicio de Kinsta en un 85,82 %.

Si está alojando su sitio web de WordPress con Kinsta, no necesita preocuparse por esto porque Kinsta habilita la compresión Brotli para todos los sitios automáticamente.

Si está alojando su sitio en otro lugar, puede usar esta herramienta gratuita de GiftOfSpeed ​​para verificar si su sitio tiene habilitado Gzip o Brotli.

Si su sitio no usa compresión, puede seguir nuestra guía sobre cómo habilitar la compresión Gzip para configurarlo.

Si está utilizando Cloudflare para servir el contenido de su sitio, Cloudflare también tiene una configuración integrada para habilitar la compresión Brotli:

1. Abre tu sitio en el panel de control de Cloudflare.
2. Vaya a Velocidad → Optimización en el menú de la barra lateral.
3. Habilite la palanca Brotli .

Comprimir y cambiar el tamaño de las imágenes

Si su elemento LCP es una imagen, encontrar formas de reducir el tamaño de ese archivo de imagen reducirá el tiempo que le toma al navegador del usuario descargar la imagen (y por lo tanto acelerará su tiempo LCP).

Para reducir el tamaño de la imagen, debe cambiar el tamaño de la imagen a las dimensiones en las que realmente la está usando, comprimirla con compresión con pérdida o sin pérdida y servirla en un formato optimizado como WebP.

Este enfoque es, por lo general, una mejor práctica de optimización del rendimiento ; no es específico de la pintura con contenido más grande.

Para obtener una visión más completa, consulte nuestra guía detallada para la optimización de imágenes para sitios web.

Y, oh, sí, si está alojando su sitio de WordPress con Kinsta, no necesita preocuparse por esto porque Kinsta ofrece una función integrada para optimizar automáticamente las imágenes de su sitio sin necesidad de herramientas de terceros.

Aquí se explica cómo habilitar esta característica:

1. Abra el panel de control de su sitio en MyKinsta.
2. Vaya a la pestaña CDN .
3. Haga clic en Configuración junto a Optimización de imagen.
4. Elija su nivel preferido de optimización de imagen y guarde la configuración: usar Lossy ofrecerá las mayores mejoras de velocidad, aunque podría tener un pequeño efecto en la calidad de la imagen.

Precargue la imagen de pintura con contenido más grande

Si su elemento LCP es una imagen, otra estrategia para mejorar LCP es precargar la imagen de pintura con contenido más grande. Es por eso que es posible que vea una recomendación como "Precargar la imagen de pintura con contenido más grande" en PageSpeed ​​Insights.

Con la precarga, puede decirle al navegador de un usuario que priorice la descarga de ciertos recursos, como la imagen específica que es el elemento LCP de su sitio.

La forma menos técnica de precargar imágenes LCP es usar un complemento como Perfmatters, que ofrece una función dedicada de precarga de imágenes críticas . Todo lo que necesita hacer es especificar cuántas imágenes precargar; le recomendamos comenzar con una, ya que precargar demasiados activos puede tener un efecto negativo.

También hay algunos complementos gratuitos en WordPress.org para lograr esto, como el complemento Preload Featured Images de WPZOOM, así como otros complementos premium, como FlyingPress.

Compruebe si hay problemas de carga diferida

Otro problema que puede desencadenar el mensaje "Precargar la imagen de pintura con contenido más grande" en PageSpeed ​​Insights son los problemas con la forma en que su sitio de WordPress carga imágenes de forma lenta.

O bien, esto también puede desencadenar una advertencia de "La imagen de pintura con contenido más grande se cargó de forma diferida" en PageSpeed ​​Insights.

La carga diferida le permite acelerar los tiempos de carga iniciales de su sitio esperando cargar ciertos recursos (como imágenes) hasta que un usuario comience a interactuar con su sitio.

Si bien eso normalmente es algo bueno, puede ralentizar los tiempos de LCP si su sitio intenta cargar de forma diferida la imagen que es su elemento LCP. Por esta razón, querrá asegurarse de que su sitio no sea lento al cargar ninguna imagen visible en la ventana de visualización inicial.

Si está utilizando la función de carga diferida del navegador nativo que WordPress introdujo en WordPress 5.5, no debería experimentar este problema porque WordPress ya excluye automáticamente la primera imagen en el contenido a partir de WordPress 5.9.

Si desea excluir más que la primera imagen, puede usar la función wp_omit_loading_attr_threshold (pero la mayoría de las personas no necesitarán hacer nada aquí).

Sin embargo, si está utilizando un complemento de carga diferida con tecnología de JavaScript, es posible que deba configurar manualmente esta exclusión en la configuración del complemento. Por ejemplo, el complemento Perfmatters incluye una opción que le permite excluir las primeras imágenes "X" de la carga diferida.

Si su complemento de carga diferida no le permite configurar este tipo de exclusión, puede cambiar a un complemento diferente que sí lo haga.

Optimizar la carga de fuentes con visualización de fuentes: opcional

Si su elemento LCP es texto, el proceso de carga de fuentes de su sitio puede retrasar la aparición del texto, lo que ralentizará su tiempo LCP.

Por lo general, esto sucede cuando se usan fuentes personalizadas. Si su sitio está configurado para esperar para representar cualquier texto hasta que se haya cargado la fuente personalizada, esto ralentizará las cosas si el archivo de fuente personalizada tarda mucho en cargarse.

Para solucionar esto, puede usar Font-Display: descriptor CSS opcional.

Esto le dice al navegador que use una fuente alternativa si la fuente personalizada no se carga dentro de una ventana pequeña (generalmente alrededor de 100 ms o menos).

En un lenguaje sencillo, esto básicamente significa que el navegador debe permitir que se cargue la fuente personalizada. Pero si la fuente personalizada no se carga lo suficientemente rápido, el navegador debería usar una fuente de sistema alternativa para evitar retrasar más el contenido.

Alternativamente, también puede usar Font-Display: Swap, que carga la fuente alternativa de inmediato y luego "intercambia" la fuente personalizada una vez que se carga la fuente personalizada. Sin embargo, este enfoque puede causar problemas con el cambio de diseño acumulativo si las fuentes son de diferentes tamaños, por lo que deberá tener cuidado.

A menos que su fuente personalizada sea absolutamente necesaria para el diseño de su sitio web, usar Font-Display: Optional suele ser la mejor opción desde la perspectiva de Core Web Vitals.

Si se siente cómodo usando CSS directamente, puede editar manualmente la propiedad Font-Display en la hoja de estilo de su tema hijo.

Si no desea utilizar CSS, también puede encontrar complementos que lo ayuden a hacerlo, aunque la mayoría de ellos se centran en la optimización para Google Fonts:

• Limpieza de activos: admite Google Fonts para fuentes locales gratuitas y personalizadas con la versión Pro.
• Perfmatters: ofrece una función para Google Fonts.

Si está utilizando Elementor para diseñar su sitio, Elementor también incluye una opción integrada que le permite usar esto para las páginas que crea con Elementor:

1. Ve a Elementor → Configuración .
2. Abra la pestaña Avanzado .
3. Establezca el menú desplegable Carga de fuentes de Google igual a Opcional .

Resumen

Aprender a mejorar la pintura más grande con contenido es importante para mejorar la experiencia del usuario de su sitio y maximizar su clasificación en los motores de búsqueda.

Por lo general, hay dos partes para mejorar la pintura más grande con contenido: acelerar el tiempo de respuesta de su servidor y luego optimizar el código de su sitio para representar el elemento LCP lo más rápido posible.

Si no quiere preocuparse por el tiempo de respuesta lento del servidor, puede mover su sitio de WordPress a Kinsta. La arquitectura optimizada para el rendimiento de Kinsta está específicamente diseñada para entregar su sitio lo más rápido posible.

Además, con la función Edge Caching de Kinsta, puede almacenar en caché las páginas de su sitio en la red global de Cloudflare, lo que significa que los visitantes de todo el mundo disfrutarán de tiempos de respuesta del servidor ultrarrápidos (y, en consecuencia, tiempos de LCP ultrarrápidos).

Si desea obtener más información, puede consultar estas páginas para obtener más información sobre el alojamiento administrado de WordPress de Kinsta o el alojamiento administrado de WooCommerce de Kinsta.

Si desea que un profesional lo ayude con algunas optimizaciones de rendimiento de LCP personalizadas, también puede encontrar un proveedor en el Directorio de agencias de Kinsta.