¿Tienes problemas para mejorar la puntuación del Largest Contentful Paintde tu sitio web? ¿O no estás seguro de lo que significa la Largest Contentful Paint y por qué tienes que preocuparte por él en primer lugar?
No importa cuál sea tu punto de partida, esta entrada de blog es para ti porque vas a aprender todo lo que necesitas saber sobre Largest Contentful Paint.
Eso incluye qué significa el Largest Contentful Paint, por qué es importante, cómo medirla y cómo mejorarla.
Puedes utilizar el índice que aparece a continuación para saltar a una sección específica en función de tu nivel actual de conocimientos. O sigue leyendo para empezar desde el principio.
¿Qué Es el Largest Contentful Paint (LCP)? Explicación del Significado del Largest Contentful Paint
El Despliegue del contenido más extenso (LCP – Largest Contentful Paint) es una métrica de rendimiento que mide el tiempo que tarda en cargarse el contenido principal de una página web.
El Largest Contentful Paint forma parte de las métricas de Google Core Web Vitals, junto con el Cumulative Layout Shift (CLS) y el First Input Delay (FID).
Técnicamente, el Largest Contentful Paint mide el tiempo que transcurre desde que el usuario inicia la carga de la página hasta que el bloque de texto, imagen o vídeo más grande se renderiza dentro de la ventana gráfica.
¿Qué significa «contenido principal» en términos de LCP?
Bueno, el contenido principal dependerá de la página en cuestión, pero podría ser cualquiera de los siguientes:
- Texto – más concretamente, cualquier elemento a nivel de bloque que contenga nodos de texto u otros elementos de texto a nivel de línea.
- Imagen – elementos dentro de un elemento <img> o elementos <image> dentro de un elemento <svg>.
- Vídeo – cualquier elemento <video> (utiliza la imagen del cartel).
- Elemento con imagen de fondo – sólo cuando se carga mediante la función CSS url() (no se aplica a los degradados CSS).
Más adelante en este post, aprenderás a encontrar el elemento exacto de Largest Contentful Paint para cualquier página de tu sitio.
La Largest Contentful Paint frente al First Contentful Paint
Una pregunta habitual que puedes hacerte es cuál es la diferencia entre el Largest Contentful Paint y First Contentful Paint otra métrica de rendimiento habitual.
Aunque los dos términos son similares, la diferencia clave es que Largest Contentful Paint mide cuánto tarda en cargarse el «contenido principal» de la página, mientras que First Contentful Paint mide cuánto tarda en cargarse el «primer objeto»(sea o no el contenido principal).
Básicamente:
- LCP = sólo contenido principal
- FCP = primera pieza de contenido, independientemente de cuál sea ese contenido
Como tal, tu tiempo LCP casi siempre será ligeramente superior a tu tiempo FCP, porque el elemento de «contenido principal» no suele ser el primero en cargarse.
¿Por Qué es Importante el Tiempo del Largest Contentful Paint de Tu Sitio?
Existen dos razones principales por las que importan los tiempos del despliegue del contenido más extenso de tu sitio:
- Experiencia del usuario
- Optimización para los motores de búsqueda
Experiencia del usuario
La mayor razón por la que deberías preocuparte por los tiempos del Largest Contentful Paint de tu sitio es que esta métrica es una buena aproximación para comprender las experiencias de tus usuarios en lo que se refiere al rendimiento de tu sitio.
A la mayoría de los usuarios no les importa cuánto tarda tu sitio web en cargar completamente cada script y elemento. En cambio, les importa cuánto tardan en empezar a obtener valor de tu sitio web.
Largest Contentful Paint hace un buen trabajo intentando medir ese momento de «valor» viendo cuánto tarda en cargarse el contenido principal.
Si optimizas tu sitio para conseguir un tiempo de Largest Contentful Paint rápido, puedes estar bastante seguro de que estás ofreciendo a los usuarios una experiencia sólida en tu sitio, al menos en lo que se refiere al rendimiento (también querrás un diseño agradable para el cliente y una buena usabilidad).
Por supuesto, eso no significa que debas ignorar otras métricas de rendimiento. Siempre recomendamos echar un vistazo holístico al rendimiento de tu sitio y a los cuellos de botella, razón por la cual hemos creado nuestra propia herramienta de gestión del rendimiento de aplicaciones (APM – Application Performance Monitoring), disponible de forma gratuita si utilizas el alojamiento de Kinsta: Kinsta APM.
Optimización para motores de búsqueda (SEO)
La optimización de motores de búsqueda, el Largest Contentful Paint forma parte del trío de métricas de Google Core Web Vitals, que Google empezó a utilizar como factor de clasificación SEO en su actualización del algoritmo 2022 Page Experience.
Esto significa que tener tiempos de Largest Contentful Paint pobres puede ser un lastre para el rendimiento de tu sitio en los resultados de búsqueda de Google.
Aunque otros factores como la calidad/relevancia del contenido y los vínculos de retroceso siguen desempeñando un papel mucho más importante en la clasificación de tu sitio web, es importante optimizar el Largest Contentful Paint de tu sitio para asegurarte de que sacas el máximo partido a tus esfuerzos de SEO.
¿Qué Puede Afectar a las Puntuaciones de Largest Contentful Paint?
Hay dos tipos «principales» de problemas que pueden afectar a los tiempos del Largest Contentful Paint de una página:
- Cuánto tarda tu servidor en responder con el documento HTML inicial.
- Cuánto tarda en cargarse el recurso LCP real.
El primer tipo de problema tiene que ver con el tiempo de respuesta del servidor, también conocido como tiempo hasta el primer byte (TTFB – time to first byte). Antes de que el navegador de un usuario pueda siquiera pensar en cargar el contenido principal, primero necesita obtener una respuesta del servidor.
He aquí algunos de los problemas más comunes que afectan a este aspecto:
- No utilizar la caché de páginas – no utilizar la caché de páginas obliga al servidor a hacer más «trabajo» antes de poder responder con el documento HTML.
- Alojamiento lento – un proveedor de alojamiento lento siempre tendrá un TTFB lento, independientemente de lo que hagas.
- No utilizar una CDN – una red de entrega de contenidos (CDN – Content Delivery Network) puede acelerar el TTFB sirviendo las páginas desde su red global en lugar de pedir a los usuarios que las descarguen desde el servidor de origen de tu sitio.
Después de que el servidor de tu sitio entregue el documento HTML inicial, podría haber más cuellos de botella a la hora de cargar el elemento de contenido principal propiamente dicho.
He aquí algunos de los problemas más comunes que afectan a esto:
- JavaScript o CSS que bloquean la renderización (o código no optimizado/innecesario en general) – si el navegador del usuario tiene que descargar y/o procesar JavaScript o CSS innecesarios antes de poder cargar el elemento principal, eso ralentizará tu LCP.
- Imágenes no optimizadas – si el elemento LCP es una imagen, utilizar imágenes no optimizadas ralentizará tu tiempo porque las imágenes más grandes tardan más en descargarse.
- Carga de fuentes no optimizada – si el elemento LCP es texto, cargar fuentes personalizadas de forma no optimizada puede hacer que ese texto tarde más en aparecer.
- Archivos sin comprimir – si no utilizas tecnologías de compresión como Gzip o Brotli, esto hará que el navegador del usuario tarde más en descargar los archivos de tu sitio.
Dependiendo de tu sitio, podrías estar experimentando cuellos de botella en ambas áreas o sólo en una de ellas. Aprenderás a resolver todos estos problemas un poco más adelante en este post.
¿Qué es Un «buen» Tiempo de Largest Contentful Paint?
Google define un «buen» tiempo de Largest Contentful Paint como inferior a 2,5 segundos.
Si el mayor tiempo del Largest Contentful Paintde tu página está entre 2,5 y 4,0 segundos, Google lo clasifica como «Necesita mejorar». Y si el tiempo de tu página es superior a 4,0 segundos, Google lo define como «Deficiente».
Aquí tienes un gráfico de Google que muestra esto visualmente:
Cómo Medir el Largest Contentful Paint: Las Mejores Herramientas de Prueba de LCP
Hay una serie de herramientas que puedes utilizar para comprobar el rendimiento de tu sitio web con respecto al Largest Contentful Paint; veamos algunas de las más útiles..
PageSpeed Insights
PageSpeed Insights es una de las mejores herramientas para evaluar Largest Contentful Paint porque ofrece cuatro datos útiles:
- Puedes ver los tiempos de Largest Contentful Paint de tu sitio con usuarios reales desde el informe Chrome UX (si tu sitio tiene suficiente tráfico para ser incluido en el informe).
- Puedes realizar pruebas simuladas para ver el rendimiento de tu sitio.
- Google te indicará el elemento LCP real que está utilizando para la prueba, lo que te permitirá saber qué elemento debes optimizar.
- Google te proporcionará sugerencias sobre cómo mejorar tu tiempo LCP.
He aquí cómo utilizarlo:
- Ve al sitio web de PageSpeed Insights.
- Introduce la URL de la página que quieres probar.
- Haz clic en Analyze.
Google te mostrará los resultados tanto para móvil como para escritorio: asegúrate de comprobar ambos.
Para encontrar el elemento principal que Google utiliza para calcular el LCP, puedes desplazarte hasta la sección Diagnostics y ampliar la sección Largest Contentful Paint element:
De nuevo, asegúrate de comprobar tanto en móvil como en escritorio porque el elemento LCP puede ser diferente para cada uno.
Herramientas para desarrolladores de Chrome
También puedes comprobar el tiempo del Largest Contentful Paint directamente desde las Herramientas para desarrolladores de Chrome utilizando la pestaña Rendimiento o su función de auditoría Lighthouse. Te recomendamos que utilices la pestaña Rendimiento porque te ofrece más información.
He aquí cómo empezar:
- Abre la página que quieras probar.
- Abre las Herramientas para desarrolladores de Chrome.
- Ve a la pestaña Performance.
- Asegúrate de que la casilla Web Vitals está marcada.
- Haz clic en el botón Reload (indicado más abajo).
Ahora deberías ver un análisis completo de tu sitio.
Si pasas el ratón por encima de LCP en la pestaña Network, podrás ver la hora:
Si pasas el ratón por encima de LCP en la pestaña Timings, puedes ver el elemento LCP real:
Google Search Console
Aunque Google Search Console no te permite comprobar el tiempo del Largest Contentful Paint de una página individual, es realmente útil para evaluar el rendimiento de todo el sitio.
Cada página de tu sitio tendrá un tiempo LCP diferente, por lo que no puedes simplemente probar tu página de inicio y darlo por terminado.
Con Google Search Console, podrás ver dónde se encuentra cada página de tu sitio en las categorizaciones de Google «Bueno», «Necesita mejorar» y «Deficiente». Los datos de rendimiento proceden del informe UX de Chrome, por lo que se basan en datos reales de los usuarios.
Si aún no lo has hecho, primero tendrás que verificar tu sitio con Google Search Console.
Una vez hecho esto, aquí tienes cómo acceder al informe LCP:
- Abre Google Search Console para tu sitio.
- Ve a Core Web Vitals en la pestaña Experience.
- Haz clic en Open Report junto al gráfico Móvil o Escritorio.
- Busca cualquier problema en la sección Why URLs aren’t considered good. Si haces clic en el problema, podrás ver más información sobre qué URL están causando problemas.
*Asegúrate de comprobar tanto los resultados de escritorio como los de móvil, ya que los datos pueden ser diferentes en cada uno.
WebPageTest
WebPageTest es otra opción práctica para ejecutar pruebas de rendimiento simuladas.
A diferencia de PageSpeed Insights, WebPageTest te permite personalizar completamente varias métricas de las pruebas, como la ubicación de la prueba, la velocidad de conexión, el dispositivo, etc. Esa es la principal ventaja de utilizarla frente a otras herramientas: te da más opciones para configurar la prueba.
A continuación te explicamos cómo realizar una prueba:
- Ve a WebPageTest.
- Añade la URL de la página que quieres probar.
- Amplía las opciones de Advanced Configuration para configurar completamente tu prueba.
En la página de resultados, verás los datos del LCP, junto con un montón de otras métricas de rendimiento (incluido un análisis en cascada).
Cómo Encontrar el Elemento del Largest Contentful Paint
Si quieres mejorar el Largest Contentful Paint, puede ser realmente útil saber exactamente qué elemento está utilizando Google para calcular tu tiempo LCP.
Por ejemplo, si sabes que Google está utilizando tu imagen principal como elemento LCP en tu página de inicio, sabrás que necesitas encontrar formas de servir esa imagen principal lo más rápidamente posible si quieres mejorar los tiempos LCP de tu página de inicio.
Como hemos mencionado antes, puedes encontrar tu elemento Largest Contentful Paint utilizando PageSpeed Insights o Chrome Developer Tools.
Asegúrate de comprobar tanto los resultados de móvil como los de escritorio, ya que tu elemento LCP puede ser diferente en distintos dispositivos.
Cómo Mejorar el Largest Contentful Paint en WordPress (u Otras Plataformas)
Ahora que ya lo sabes todo sobre el Largest Contentful Paint, pasemos a algunos consejos prácticos sobre cómo mejorar el Largest Contentful Paint en WordPress.
Aunque nos centraremos en WordPress para estos consejos, todos los consejos son universales y se aplican a otros tipos de sitios web.
Configura 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 debe realizar tu servidor antes de poder entregar el documento HTML terminado a los navegadores de los visitantes.
Si alojas tu sitio de WordPress con Kinsta, no tienes que preocuparte de configurar el almacenamiento en caché porque Kinsta implementa automáticamente el almacenamiento en caché optimizado por ti.
Si alojas tu sitio en otro sitio, puedes habilitar la caché en tu sitio utilizando un plugin gratuito como WP Super Cache o un plugin de pago como WP Rocket.
Para más opciones, consulta nuestro post con los mejores plugins de caché para WordPress.
Pásate a un alojamiento WordPress más rápido
Aunque todas las tácticas de esta lista pueden ayudarte a mejorar el tiempo de tu LCP, no hay que andarse con rodeos:
Si utilizas un alojamiento de WordPress lento y no optimizado, tus tiempos de LCP siempre se verán limitados por la calidad de tu alojamiento.
Podrás mejorar un poco las cosas, pero siempre te costará conseguir tiempos de LCP inferiores a 2,5 segundos si tu alojamiento es lento.
Si quieres la forma más fácil de mejorar tus tiempos de Largest Contentful Paint, puedes migrar tu sitio a Kinsta. Kinsta no sólo ofrece una infraestructura de alojamiento optimizada para el rendimiento, sino que también tenemos funciones integradas para gestionar muchas de las otras optimizaciones de esta lista.
Eso significa que puedes centrarte en hacer crecer tu sitio en lugar de perder el tiempo optimizando los tiempos de Largest Contentful Paint.
Si estás interesado, Kinsta migrará gratuitamente un número ilimitado de sitios web desde cualquier host – obtén más información sobre la migración gratuita aquí.
Si aún estás indeciso, prueba primero el resto de consejos de esta lista. Pero si sigues teniendo problemas después de hacer todo lo de esta lista, puede que necesites un alojamiento mejor.
Utiliza una Red de Entrega de Contenidos (CDN)
Sin una CDN, todos los visitantes de tu sitio tienen que descargar el HTML y los activos estáticos de una página desde tu servidor de alojamiento.
Si tus visitantes se encuentran cerca de tu servidor, eso no suele ser un problema. Pero si tus visitantes están repartidos por todo el mundo, esto puede ralentizar tu sitio debido a la distancia física entre un visitante y el servidor de tu sitio.
Con una CDN, puedes distribuir los activos estáticos de tu sitio (o incluso las páginas HTML terminadas de tu sitio) a la red global de la CDN. De este modo, los visitantes pueden descargar los archivos desde la ubicación más cercana de la CDN, lo que es mucho más rápido.
Si te alojas con Kinsta, te recomendamos que utilices la función Edge Caching de Kinsta para obtener los mejores resultados.
La función de Edge Caching de Kinsta funciona almacenando en caché las páginas HTML completas y los activos estáticos de tu sitio en la red global de Cloudflare (en lugar de almacenar sólo en caché los activos estáticos como la mayoría de las soluciones de CDN).
Esto significa que los visitantes de tu 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 tu recurso LCP.
Para activar el Edge Caching de Kinsta, ve a la pestaña Edge Caching en el panel de control de tu sitio en MyKinsta.
Si estás alojado en otro lugar, puedes configurar una CDN para los activos estáticos de tu sitio utilizando servicios CDN populares como KeyCDN, Bunny, StackPath y otros.
Evita el JavaScript que bloquea el renderizado (Aplazar o eliminar)
El JavaScript que bloquea la renderización es el que se carga antes de tu elemento LCP principal aunque no se necesite en ese momento.
Al retrasar la carga del elemento LCP, ralentizará los tiempos de carga de tu LCP.
Para solucionar esto, hay algunas estrategias que puedes poner en práctica:
- Elimina el JavaScript innecesario si es posible.
- Retrasa 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 la gente, la forma más fácil de implementar esta funcionalidad es mediante plugins como Autoptimize o WP Rocket.
Para una guía completa sobre cómo hacerlo, tenemos dos entradas de blog muy detallados:
- Cómo eliminar los recursos que bloquean la visualización en WordPress
- Cómo aplazar el análisis sintáctico de JavaScript
Evita el CSS que bloquee la renderización y optimiza la entrega de CSS
Al igual que un JavaScript no optimizado puede ralentizar tu sitio, un CSS no optimizado también puede hacer lo mismo.
Básicamente, debes cargar la menor cantidad posible de CSS. Y para el CSS que necesites cargar, debes hacerlo de forma óptima. Normalmente, esto significa que quieres cargar el CSS importante al principio, mientras retrasas el CSS no crítico hasta más adelante en el proceso de carga.
Si no eres desarrollador, la forma más sencilla de conseguirlo es utilizar plugins de optimización del rendimiento como Perfmatters, WP Rocket o FlyingPress.
Por ejemplo, WP Rocket ofrece funciones integradas para eliminar el CSS no utilizado página por página y servir el CSS de forma óptima.
Si quieres profundizar más en cómo hacer todo esto, consulta nuestra guía completa sobre cómo optimizar el CSS.
Minifica tu HTML, CSS y JavaScript
Además de las técnicas de optimización de código anteriores, también querrás minificar el HTML, CSS y JavaScript de tu sitio.
Básicamente, esto elimina los caracteres innecesarios y el espacio en blanco del código de tu sitio para reducir su tamaño.
Si te alojas con Kinsta, Kinsta puede gestionar automáticamente la minificación a través de nuestra integración con Cloudflare. Aquí te explicamos cómo controlar esta función:
- Abre el panel de control de tu sitio en MyKinsta.
- Ve a la pestaña CDN.
- Haz clic en Configuración junto a Optimización de imágenes.
- Marca las casillas para CSS y JS y guarda la configuración.
Si alojas tu sitio en otro lugar, puedes utilizar un plugin gratuito como Autoptimize para minificar tu código o uno de los plugins integrales premium como Perfmatters, WP Rocket o FlyingPress.
También puedes consultar nuestro tutorial completo sobre minificación de código para obtener más información. Aunque el tutorial se centra en JavaScript, también puedes utilizar los mismos métodos y plugins para minificar otro tipo de código.
Utiliza la compresión a nivel de servidor (Gzip o Brotli)
La compresión a nivel de servidor te permite reducir el tamaño de los archivos de tu sitio utilizando tecnologías como Gzip o Brotli.
Por ejemplo, la compresión que utilizamos 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 alojas tu sitio web WordPress con Kinsta, no tienes que preocuparte por esto porque Kinsta activa la compresión Brotli para todos los sitios automáticamente.
Si alojas tu sitio en otro sitio, puedes utilizar esta herramienta gratuita de GiftOfSpeed para comprobar si tu sitio tiene activado Gzip o Brotli.
Si tu sitio no utiliza compresión, puedes seguir nuestra guía sobre cómo activar la compresión Gzip para configurarla.
Si utilizas Cloudflare para servir el contenido de tu sitio, Cloudflare también tiene un ajuste integrado para activar la compresión Brotli:
- Abre tu sitio en el panel de control de Cloudflare.
- Ve a Velocidad → Optimización en el menú de la barra lateral.
- Activa el conmutador Brotli.
Comprimir y redimensionar imágenes
Si tu elemento LCP es una imagen, encontrar formas de reducir el tamaño de ese archivo de imagen reducirá el tiempo que tarda el navegador de un usuario en descargar la imagen (y, por tanto, acelerará el tiempo de tu LCP).
Para reducir el tamaño de la imagen, debes redimensionarla a las dimensiones a las que realmente la vas a utilizar, comprimirla utilizando compresión con o sin pérdida, y servirla en un formato optimizado como WebP.
Este enfoque es, en general, una mejor práctica de optimización del rendimiento – no es específica del Largest Contentful Paint.
Para una visión más completa, consulta nuestra guía detallada sobre optimización de imágenes para sitios web.
Y, por supuesto, si alojas tu sitio de WordPress con Kinsta, no tienes que preocuparte por esto porque Kinsta ofrece una función integrada para optimizar automáticamente las imágenes de tu sitio sin necesidad de herramientas de terceros.
Aquí te explicamos cómo activar esta función:
- Abre el panel de control de tu sitio en MyKinsta.
- Ve a la pestaña CDN.
- Haz clic en Configuración junto a Optimización de imagen.
- Elige el nivel de optimización de imagen que prefieras y guarda los ajustes – el uso de Lossy ofrecerá las mayores mejoras de velocidad, aunque puede tener un pequeño efecto en la calidad de la imagen.
Precargar la imagen del Largest Contentful Paint
Si tu elemento LCP es una imagen, otra estrategia para mejorar el LCP es precargar la imagen Largest Contentful Paint. Por eso es posible que veas una recomendación como «Precargar la imagen de pintura de mayor contenido» en PageSpeed Insights.
Con la precarga, puedes indicar al navegador de un usuario que dé prioridad a la descarga de determinados recursos, como la imagen específica que es el elemento LCP de tu sitio.
La forma menos técnica de precargar imágenes LCP es utilizar un plugin como Perfmatters, que ofrece una función dedicada de Preload Critical Images. Todo lo que tienes que hacer es especificar cuántas imágenes precargar; te recomendamos que empieces con una, ya que precargar demasiados activos puede tener un efecto negativo.
También hay algunos plugins gratuitos en WordPress.org para conseguirlo, como el plugin Preload Featured Images de WPZOOM, así como otros plugins premium, como FlyingPress.
Comprueba si hay problemas de Lazy Loading
Otro problema que puede desencadenar el mensaje «Precargar la imagen del Largest Contentful Paint» en PageSpeed Insights son los problemas con el modo en que tu sitio de WordPress realiza la carga perezosa de imágenes.
Esto también puede desencadenar una advertencia de «La imagen del Largest Contentful Paint más grande se cargó diferidamente» en PageSpeed Insights.
La carga lenta te permite acelerar los tiempos de carga iniciales de tu sitio esperando a cargar determinados recursos (como imágenes) hasta que el usuario empiece a interactuar con tu sitio.
Aunque normalmente esto es bueno, puede ralentizar tus tiempos de LCP si tu sitio está intentando cargar diferidamente la imagen que es tu elemento LCP. Por esta razón, deberás asegurarte de que tu sitio no carga diferidamente ninguna imagen visible en la ventana inicial.
Si utilizas la función de carga lenta nativa del navegador que WordPress introdujo en WordPress 5.5, no deberías experimentar este problema porque WordPress ya excluye automáticamente la primera imagen del contenido a partir de WordPress 5.9.
Si quieres excluir más de la primera imagen, puedes utilizar la función wp_omit_loading_attr_threshold (pero la mayoría de la gente no necesitará hacer nada aquí).
Sin embargo, si utilizas un complemento de carga diferida con JavaScript, es posible que tengas que configurar manualmente esta exclusión en los ajustes del complemento. Por ejemplo, el plugin Perfmatters incluye una opción que te permite excluir las primeras «X» imágenes de la carga diferida.
Si tu plugin de carga diferida no te permite configurar este tipo de exclusión, puedes cambiar a otro plugin que sí lo haga.
Optimizar la carga de fuentes con Font-Display: Opcional
Si tu elemento LCP es texto, el proceso de carga de fuentes de tu sitio puede retrasar la aparición del texto, lo que ralentizará el tiempo de LCP.
Normalmente, esto ocurre cuando se utilizan fuentes personalizadas. Si tu sitio está configurado para esperar a mostrar cualquier texto hasta que se haya cargado la fuente personalizada, esto ralentizará las cosas si el archivo de la fuente personalizada tarda mucho en cargarse.
Para solucionarlo, puedes utilizar el descriptor CSS Font-Display: Descriptor CSS opcional.
Esto indica al navegador que utilice una fuente alternativa si la fuente personalizada no se carga dentro de una ventana pequeña (normalmente unos 100 ms o menos).
En lenguaje llano, esto significa básicamente que el navegador debe dar a la fuente personalizada la oportunidad de cargarse. Pero si la fuente personalizada no se carga lo suficientemente rápido, el navegador debe utilizar una fuente de reserva del sistema para evitar retrasar más el contenido.
También puedes utilizar Font-Display: Swap, que carga la fuente de reserva de inmediato y luego «intercambia» la fuente personalizada una vez que ésta se carga. Sin embargo, este método puede causar problemas con el Desplazamiento de diseño acumulativo si las fuentes tienen tamaños diferentes, por lo que deberás tener cuidado.
A menos que tu fuente personalizada sea absolutamente necesaria para el diseño de tu sitio web, utilizar Font-Display: Opcional suele ser la mejor opción desde la perspectiva de Core Web Vitals.
Si te sientes cómodo utilizando CSS directamente, puedes editar manualmente la propiedad Font-Display en la hoja de estilos de tu tema hijo.
Si no quieres utilizar CSS, también puedes encontrar plugins que te ayuden a hacerlo, aunque la mayoría de ellos se centran en la optimización para Google Fonts:
- Asset CleanUp – acepta Google Fonts gratis y fuentes locales personalizadas con la versión Pro.
- Perfmatters – ofrece una función para Google Fonts.
Si utilizas Elementor para diseñar tu sitio, Elementor también incluye una opción integrada que te permite utilizar esto para las páginas que crees con Elementor:
- Ve a Elementor → Configuración.
- Abre la pestaña Avanzado.
- Establece el desplegable Carga de Google Fonts igual a Opcional.
Resumen
Aprender a mejorar Largest Contentful Paint es importante para mejorar la experiencia de usuario de tu sitio y maximizar tu posicionamiento en los motores de búsqueda.
Por lo general, hay dos partes para mejorar el Largest Contentful Paint: acelerar el tiempo de respuesta de tu servidor y, a continuación, optimizar el código de tu sitio para renderizar el elemento LCP lo más rápidamente posible.
Si no quieres preocuparte por la lentitud del tiempo de respuesta del servidor, puedes trasladar tu sitio WordPress a Kinsta. La arquitectura de rendimiento optimizado de Kinsta está diseñada específicamente para ofrecer tu sitio lo más rápido posible.
Además, con la función Edge Caching de Kinsta, puedes almacenar en caché las páginas de tu 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 rapidísimos (y, en consecuencia, de tiempos LCP rapidísimos).
Si quieres saber más, puedes consultar estas páginas para obtener más información sobre el alojamiento WordPress Gestionado de Kinsta, o el alojamiento WooCommerce gestionado de Kinsta.
Si quieres que un profesional te ayude con algunas optimizaciones personalizadas del rendimiento del LCP, también puedes encontrar un proveedor en el Directorio de Agencias de Kinsta.
Deja una respuesta