\u00bfQu\u00e9 Es el Largest Contentful Paint (LCP)? Explicaci\u00f3n del Significado del Largest Contentful Paint<\/h2>\n
El \u00a0Despliegue del contenido m\u00e1s extenso (LCP – Largest Contentful Paint)\u00a0 es una m\u00e9trica de rendimiento que mide el tiempo que tarda en cargarse el contenido principal de una p\u00e1gina web.<\/p>\n
El Largest Contentful Paint forma parte de las m\u00e9tricas de Google Core Web Vitals<\/a>, junto con el Cumulative Layout Shift (CLS)<\/a>.<\/p>\n T\u00e9cnicamente, el Largest Contentful Paint mide el tiempo que transcurre desde que el usuario inicia la carga de la p\u00e1gina hasta que el bloque de texto, imagen o v\u00eddeo m\u00e1s grande se renderiza dentro de la ventana gr\u00e1fica.<\/p>\n \u00bfQu\u00e9 significa \u00abcontenido principal\u00bb en t\u00e9rminos de LCP?<\/p>\n Bueno, el contenido principal depender\u00e1 de la p\u00e1gina en cuesti\u00f3n, pero podr\u00eda ser cualquiera de los siguientes:<\/p>\n M\u00e1s adelante en este post, aprender\u00e1s a encontrar el elemento exacto de \u00a0Largest Contentful Paint para cualquier p\u00e1gina de tu sitio.<\/p>\n\n Una pregunta habitual que puedes hacerte es cu\u00e1l es la diferencia entre el Largest Contentful Paint y First Contentful Paint<\/a> otra m\u00e9trica de rendimiento habitual.<\/p>\n Aunque los dos t\u00e9rminos son similares, la diferencia clave es que Largest Contentful Paint mide cu\u00e1nto tarda en cargarse el \u00abcontenido principal\u00bb de la p\u00e1gina, mientras que First Contentful Paint mide cu\u00e1nto tarda en cargarse el \u00abprimer objeto\u00bb(sea o no el contenido principal<\/em>).<\/p>\n B\u00e1sicamente:<\/p>\n Como tal, tu tiempo LCP casi siempre ser\u00e1 ligeramente superior a tu tiempo FCP, porque el elemento de \u00abcontenido principal\u00bb no suele ser el primero en cargarse.<\/p>\n Existen dos razones principales por las que importan los tiempos del despliegue del contenido m\u00e1s extenso de tu sitio:<\/p>\n La mayor raz\u00f3n por la que deber\u00edas preocuparte por los tiempos del Largest Contentful Paint de tu sitio es que esta m\u00e9trica es una buena aproximaci\u00f3n para comprender las experiencias de tus usuarios en lo que se refiere al rendimiento de tu sitio.<\/p>\n A la mayor\u00eda de los usuarios no les importa cu\u00e1nto tarda tu sitio web en cargar completamente cada script y elemento. En cambio, les importa cu\u00e1nto tardan en empezar a obtener valor de tu sitio web.<\/p>\n Largest Contentful Paint hace un buen trabajo intentando medir ese momento de \u00abvalor\u00bb viendo cu\u00e1nto tarda en cargarse el contenido principal.<\/p>\n Si optimizas tu sitio para conseguir un tiempo de Largest Contentful Paint r\u00e1pido, puedes estar bastante seguro de que est\u00e1s ofreciendo a los usuarios una experiencia s\u00f3lida en tu sitio, al menos en lo que se refiere al rendimiento (tambi\u00e9n querr\u00e1s un dise\u00f1o agradable para el cliente<\/a> y una buena usabilidad<\/a>).<\/p>\n Por supuesto, eso no significa que debas ignorar otras m\u00e9tricas de rendimiento. Siempre recomendamos echar un vistazo hol\u00edstico al rendimiento de tu sitio y a los cuellos de botella<\/a>, raz\u00f3n por la cual hemos creado nuestra propia herramienta de gesti\u00f3n del rendimiento de aplicaciones (APM – Application Performance Monitoring)<\/a>, disponible de forma gratuita si utilizas el alojamiento de Kinsta: Kinsta APM<\/a>.<\/p>\n La optimizaci\u00f3n de motores de b\u00fasqueda<\/a>, el Largest Contentful Paint forma parte del tr\u00edo de m\u00e9tricas de Google Core Web Vitals, que Google empez\u00f3 a utilizar como factor de clasificaci\u00f3n SEO<\/a> en su actualizaci\u00f3n del algoritmo 2022 Page Experience.<\/p>\n 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\u00fasqueda de Google.<\/p>\n Aunque otros factores como la calidad\/relevancia del contenido<\/a> y los v\u00ednculos de retroceso siguen desempe\u00f1ando un papel mucho m\u00e1s importante en la clasificaci\u00f3n de tu sitio web<\/a>, es importante optimizar el Largest Contentful Paint de tu sitio para asegurarte de que sacas el m\u00e1ximo partido a tus esfuerzos de SEO.<\/p>\n Hay dos tipos \u00abprincipales\u00bb de problemas que pueden afectar a los tiempos del Largest Contentful Paint de una p\u00e1gina:<\/p>\n El primer tipo de problema tiene que ver con el tiempo de respuesta del servidor, tambi\u00e9n conocido como tiempo hasta el primer byte (TTFB – time to first byte)<\/a>. Antes de que el navegador de un usuario pueda siquiera pensar en cargar el contenido principal, primero necesita obtener una respuesta del servidor.<\/p>\n He aqu\u00ed algunos de los problemas m\u00e1s comunes que afectan a este aspecto:<\/p>\n Despu\u00e9s de que el servidor de tu sitio entregue el documento HTML inicial, podr\u00eda haber m\u00e1s cuellos de botella a la hora de cargar el elemento de contenido principal propiamente dicho.<\/p>\n He aqu\u00ed algunos de los problemas m\u00e1s comunes que afectan a esto:<\/p>\n Dependiendo de tu sitio, podr\u00edas estar experimentando cuellos de botella en ambas \u00e1reas o s\u00f3lo en una de ellas. Aprender\u00e1s a resolver todos estos problemas un poco m\u00e1s adelante en este post.<\/p>\n Google define un \u00abbuen\u00bb tiempo de Largest Contentful Paint como inferior a 2,5 segundos.<\/p>\n Si el mayor tiempo del Largest Contentful Paintde tu p\u00e1gina est\u00e1 entre 2,5 y 4,0 segundos, Google lo clasifica como \u00abNecesita mejorar\u00bb. Y si el tiempo de tu p\u00e1gina es superior a 4,0 segundos, Google lo define como \u00abDeficiente\u00bb.<\/p>\n Aqu\u00ed tienes un gr\u00e1fico de Google que muestra esto visualmente:<\/p>\n Hay una serie de herramientas que puedes utilizar para comprobar el rendimiento de tu sitio web<\/a> con respecto al Largest Contentful Paint; veamos algunas de las m\u00e1s \u00fatiles..<\/p>\n PageSpeed Insights<\/a>\u00a0es una de las mejores herramientas para evaluar Largest Contentful Paint porque ofrece cuatro datos \u00fatiles:<\/p>\n He aqu\u00ed c\u00f3mo utilizarlo:<\/p>\n Google te mostrar\u00e1 los resultados tanto para m\u00f3vil como para escritorio: aseg\u00farate de comprobar ambos.<\/p>\n Para encontrar el elemento principal que Google utiliza para calcular el LCP, puedes desplazarte hasta la secci\u00f3n Diagnostics\u00a0<\/strong>y ampliar la secci\u00f3n Largest Contentful Paint element<\/strong>:<\/p>\n De nuevo, aseg\u00farate de comprobar tanto en m\u00f3vil como en escritorio porque el elemento LCP puede ser diferente para cada uno.<\/p>\n Tambi\u00e9n puedes comprobar el tiempo del Largest Contentful Paint directamente desde las Herramientas para desarrolladores de Chrome<\/a> utilizando la pesta\u00f1a Rendimiento o su funci\u00f3n de auditor\u00eda Lighthouse. Te recomendamos que utilices la pesta\u00f1a Rendimiento <\/strong>porque te ofrece m\u00e1s informaci\u00f3n.<\/p>\n He aqu\u00ed c\u00f3mo empezar:<\/p>\n Ahora deber\u00edas ver un an\u00e1lisis completo de tu sitio.<\/p>\n Si pasas el rat\u00f3n por encima de LCP en la pesta\u00f1a Network<\/strong>, podr\u00e1s ver la hora:<\/p>\n Si pasas el rat\u00f3n por encima de LCP en la pesta\u00f1a Timings<\/strong>, puedes ver el elemento LCP real:<\/p>\n Aunque Google Search Console no te permite comprobar el tiempo del Largest Contentful Paint de una p\u00e1gina individual, es realmente \u00fatil para evaluar el rendimiento de todo el sitio.<\/p>\n Cada p\u00e1gina de tu sitio tendr\u00e1 un tiempo LCP diferente, por lo que no puedes simplemente probar tu p\u00e1gina de inicio y darlo por terminado.<\/p>\n Con Google Search Console<\/a>, podr\u00e1s ver d\u00f3nde se encuentra cada p\u00e1gina de tu sitio en las categorizaciones de Google \u00abBueno\u00bb, \u00abNecesita mejorar\u00bb y \u00abDeficiente\u00bb. Los datos de rendimiento proceden del informe UX de Chrome, por lo que se basan en datos reales de los usuarios.<\/p>\n Si a\u00fan no lo has hecho, primero tendr\u00e1s que verificar tu sitio con Google Search Console<\/a>.<\/p>\n Una vez hecho esto, aqu\u00ed tienes c\u00f3mo acceder al informe LCP:<\/p>\n *Aseg\u00farate de comprobar tanto los resultados de escritorio como los de m\u00f3vil, ya que los datos pueden ser diferentes en cada uno.<\/em><\/p>\n WebPageTest<\/a> es otra opci\u00f3n pr\u00e1ctica para ejecutar pruebas de rendimiento simuladas<\/a>.<\/p>\n A diferencia de PageSpeed Insights, WebPageTest te permite personalizar completamente varias m\u00e9tricas de las pruebas, como la ubicaci\u00f3n de la prueba, la velocidad de conexi\u00f3n, el dispositivo, etc. Esa es la principal ventaja de utilizarla frente a otras herramientas: te da m\u00e1s opciones para configurar la prueba.<\/p>\n A continuaci\u00f3n te explicamos c\u00f3mo realizar una prueba:<\/p>\n En la p\u00e1gina de resultados, ver\u00e1s los datos del LCP, junto con un mont\u00f3n de otras m\u00e9tricas de rendimiento (incluido un an\u00e1lisis en cascada).<\/p>\n Si quieres mejorar el Largest Contentful Paint, puede ser realmente \u00fatil saber exactamente qu\u00e9 elemento est\u00e1 utilizando Google para calcular tu tiempo LCP.<\/p>\n Por ejemplo, si sabes que Google est\u00e1 utilizando tu imagen principal como elemento LCP en tu p\u00e1gina de inicio, sabr\u00e1s que necesitas encontrar formas de servir esa imagen principal lo m\u00e1s r\u00e1pidamente posible si quieres mejorar los tiempos LCP de tu p\u00e1gina de inicio.<\/p>\n Como hemos mencionado antes, puedes encontrar tu elemento Largest Contentful Paint utilizando PageSpeed Insights o Chrome Developer Tools.<\/p>\n Aseg\u00farate de comprobar tanto los resultados de m\u00f3vil como los de escritorio, ya que tu elemento LCP puede ser diferente en distintos dispositivos.<\/strong><\/p>\n Ahora que ya lo sabes todo sobre el Largest Contentful Paint, pasemos a algunos consejos pr\u00e1cticos sobre c\u00f3mo mejorar el Largest Contentful Paint en WordPress.<\/p>\n Aunque nos centraremos en WordPress para estos consejos, todos los consejos son universales y se aplican a otros tipos de sitios web.<\/p>\n El almacenamiento en cach\u00e9<\/a>\u00a0 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.<\/p>\n Si alojas tu sitio de WordPress con Kinsta, no tienes que preocuparte de configurar el almacenamiento en cach\u00e9 porque Kinsta implementa autom\u00e1ticamente el almacenamiento en cach\u00e9 optimizado por ti<\/a>.<\/p>\n Si alojas tu sitio en otro sitio, puedes habilitar la cach\u00e9 en tu sitio utilizando un plugin gratuito como WP Super Cache<\/a> o un plugin de pago como WP Rocket<\/a>.<\/p>\n Para m\u00e1s opciones, consulta nuestro post con los mejores plugins de cach\u00e9 para WordPress<\/a>.<\/p>\n Aunque todas las t\u00e1cticas de esta lista pueden ayudarte a mejorar el tiempo de tu LCP, no hay que andarse con rodeos:<\/p>\n Si utilizas un alojamiento de WordPress lento y no optimizado<\/a>, tus tiempos de LCP siempre se ver\u00e1n limitados por la calidad de tu alojamiento.<\/p>\n Podr\u00e1s mejorar un poco las cosas, pero siempre te costar\u00e1 conseguir tiempos de LCP inferiores a 2,5 segundos si tu alojamiento es lento.<\/p>\n Si quieres la forma m\u00e1s f\u00e1cil de mejorar tus tiempos de Largest Contentful Paint, puedes migrar tu sitio a Kinsta<\/a>. Kinsta no s\u00f3lo ofrece una infraestructura de alojamiento optimizada para el rendimiento<\/a>, sino que tambi\u00e9n tenemos funciones integradas para gestionar muchas de las otras optimizaciones de esta lista.<\/p>\n Eso significa que puedes centrarte en hacer crecer tu sitio en lugar de perder el tiempo optimizando los tiempos de Largest Contentful Paint.<\/p>\n Si est\u00e1s interesado, Kinsta migrar\u00e1 gratuitamente un n\u00famero ilimitado de sitios web desde cualquier<\/strong> host<\/strong> – obt\u00e9n m\u00e1s informaci\u00f3n sobre la migraci\u00f3n gratuita aqu\u00ed<\/a>.<\/p>\n Si a\u00fan est\u00e1s indeciso, prueba primero el resto de consejos de esta lista. Pero si sigues teniendo problemas despu\u00e9s de hacer todo lo de esta lista, puede que necesites un alojamiento mejor.<\/p>\n Sin una CDN, todos los visitantes de tu sitio tienen que descargar el HTML y los activos est\u00e1ticos de una p\u00e1gina desde tu servidor de alojamiento.<\/p>\n Si tus visitantes se encuentran cerca de tu servidor, eso no suele ser un problema. Pero si tus visitantes est\u00e1n repartidos por todo el mundo, esto puede ralentizar tu sitio debido a la distancia f\u00edsica entre un visitante y el servidor de tu sitio.<\/p>\n Con una CDN, puedes distribuir los activos est\u00e1ticos de tu sitio (o incluso las p\u00e1ginas HTML terminadas de tu sitio) a la red global de la CDN. De este modo, los visitantes pueden descargar los archivos desde la ubicaci\u00f3n m\u00e1s cercana de la CDN, lo que es mucho m\u00e1s r\u00e1pido<\/a>.<\/p>\n Si te alojas con Kinsta<\/a>, te recomendamos que utilices la funci\u00f3n Edge Caching de Kinsta<\/a> para obtener los mejores resultados.<\/p>\n La funci\u00f3n de Edge Caching de Kinsta funciona almacenando en cach\u00e9 las p\u00e1ginas HTML completas y los activos est\u00e1ticos de tu sitio en la red global de Cloudflare<\/a> (en lugar de almacenar s\u00f3lo en cach\u00e9 los activos est\u00e1ticos como la mayor\u00eda de las soluciones de CDN<\/em>).<\/p>\n Esto significa que los visitantes de tu sitio pueden descargar la p\u00e1gina completa desde la ubicaci\u00f3n de borde m\u00e1s cercana, lo que acelera tanto el tiempo de respuesta del servidor como<\/em> el tiempo que tarda en cargarse tu recurso LCP.<\/p>\n Para activar el Edge Caching de Kinsta, ve a la pesta\u00f1a Edge Caching<\/strong> en el panel de control de tu sitio en MyKinsta<\/a>.<\/p>\n Si est\u00e1s alojado en otro lugar, puedes configurar una CDN para los activos est\u00e1ticos de tu sitio utilizando servicios CDN populares como KeyCDN, Bunny, y otros.<\/p>\n El JavaScript que bloquea la renderizaci\u00f3n es el que se carga antes de tu elemento LCP principal aunque no se necesite en ese momento.<\/p>\n Al retrasar la carga del elemento LCP, ralentizar\u00e1 los tiempos de carga de tu LCP.<\/p>\n Para solucionar esto, hay algunas estrategias que puedes poner en pr\u00e1ctica:<\/p>\n Para la mayor\u00eda de la gente, la forma m\u00e1s f\u00e1cil de implementar esta funcionalidad es mediante plugins como Autoptimize<\/a> o WP Rocket<\/a>.<\/p>\n Para una gu\u00eda completa sobre c\u00f3mo hacerlo, tenemos dos entradas de blog muy detallados:<\/p>\n Al igual que un JavaScript no optimizado puede ralentizar tu sitio, un CSS no optimizado tambi\u00e9n puede hacer lo mismo.<\/p>\n B\u00e1sicamente, debes cargar la menor cantidad posible de CSS. Y para el CSS que necesites cargar, debes hacerlo de forma \u00f3ptima. Normalmente, esto significa que quieres cargar el CSS importante al principio, mientras retrasas el CSS no cr\u00edtico hasta m\u00e1s adelante en el proceso de carga.<\/p>\n Si no eres desarrollador, la forma m\u00e1s sencilla de conseguirlo es utilizar plugins de optimizaci\u00f3n del rendimiento como Perfmatters<\/a>, WP Rocket<\/a> o FlyingPress<\/a>.<\/p>\n Por ejemplo, WP Rocket ofrece funciones integradas para eliminar el CSS no utilizado p\u00e1gina por p\u00e1gina y servir el CSS de forma \u00f3ptima.<\/p>\n Si quieres profundizar m\u00e1s en c\u00f3mo hacer todo esto, consulta nuestra gu\u00eda completa sobre c\u00f3mo optimizar el CSS<\/a>.<\/p>\n Adem\u00e1s de las t\u00e9cnicas de optimizaci\u00f3n del c\u00f3digo anteriores, tambi\u00e9n deber\u00e1s minificar el HTML, CSS y JavaScript de tu sitio. Esencialmente, esto elimina los caracteres innecesarios y el espacio en blanco del c\u00f3digo de tu sitio para reducir su tama\u00f1o.<\/p>\n Puedes utilizar un plugin gratuito como Autoptimize para minificar tu c\u00f3digo<\/a> o uno de los plugins integrales premium como Perfmatters, WP Rocket o FlyingPress.<\/p>\n Tambi\u00e9n puedes consultar nuestro tutorial completo sobre minificaci\u00f3n<\/a> de c\u00f3digo para obtener m\u00e1s informaci\u00f3n. Aunque el tutorial se centra en JavaScript, tambi\u00e9n puedes utilizar los mismos m\u00e9todos y plugins para minificar otro tipo de c\u00f3digo.<\/p>\n La compresi\u00f3n a nivel de servidor te permite reducir el tama\u00f1o de los archivos de tu sitio utilizando tecnolog\u00edas como Gzip o Brotli<\/a>.<\/p>\n Por ejemplo, la compresi\u00f3n que utilizamos para el sitio web de Kinsta redujo el tama\u00f1o del archivo de la p\u00e1gina de inicio de Kinsta en un 85,82%.<\/p>\n Si alojas tu sitio web WordPress con Kinsta, no tienes que preocuparte por esto porque Kinsta activa la compresi\u00f3n Brotli para todos los sitios autom\u00e1ticamente.<\/p>\n Si alojas tu sitio en otro sitio, puedes utilizar esta herramienta gratuita de GiftOfSpeed<\/a> para comprobar si tu sitio tiene activado Gzip o Brotli.<\/p>\n Si tu sitio no utiliza compresi\u00f3n, puedes seguir nuestra gu\u00eda sobre c\u00f3mo activar la compresi\u00f3n Gzip para configurarla<\/a>.<\/p>\n Si utilizas Cloudflare para servir el contenido de tu sitio, Cloudflare tambi\u00e9n tiene un ajuste integrado para activar la compresi\u00f3n Brotli:<\/p>\n Si tu elemento LCP es una imagen, encontrar formas de reducir el tama\u00f1o de ese archivo de imagen reducir\u00e1 el tiempo que tarda el navegador de un usuario en descargar la imagen (y, por tanto, acelerar\u00e1 el tiempo de tu LCP).<\/p>\n Para reducir el tama\u00f1o de la imagen, debes redimensionarla a las dimensiones a las que realmente la vas a utilizar, comprimirla utilizando compresi\u00f3n con o sin p\u00e9rdida<\/a>, y servirla en un formato optimizado como WebP<\/a>.<\/p>\n Este enfoque es, en general, una<\/em> mejor pr\u00e1ctica de optimizaci\u00f3n del rendimiento<\/em><\/a> – no es espec\u00edfica del Largest Contentful Paint.<\/em><\/p>\n Para una visi\u00f3n m\u00e1s completa, consulta nuestra gu\u00eda detallada sobre optimizaci\u00f3n de im\u00e1genes para sitios web<\/a>.<\/p>\n Y, por supuesto, si alojas tu sitio de WordPress con Kinsta, no tienes que preocuparte por esto porque Kinsta ofrece una funci\u00f3n integrada para optimizar autom\u00e1ticamente las im\u00e1genes de tu sitio<\/a> sin necesidad de herramientas de terceros.<\/p>\n Aqu\u00ed te explicamos c\u00f3mo activar esta funci\u00f3n:<\/p>\n 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\u00f3n como \u00abPrecargar la imagen de pintura de mayor contenido\u00bb en PageSpeed Insights.<\/p>\n Con la precarga, puedes indicar al navegador de un usuario que d\u00e9 prioridad a la descarga de determinados recursos, como la imagen espec\u00edfica que es el elemento LCP de tu sitio.<\/p>\n La forma menos t\u00e9cnica de precargar im\u00e1genes LCP es utilizar un plugin como Perfmatters<\/a>, que ofrece una funci\u00f3n dedicada de Preload Critical Images<\/strong>. Todo lo que tienes que hacer es especificar cu\u00e1ntas im\u00e1genes precargar; te recomendamos que empieces con una, ya que precargar demasiados activos puede tener un efecto negativo.<\/p>\n Tambi\u00e9n hay algunos plugins gratuitos en WordPress.org para conseguirlo, como el plugin Preload Featured Images de WPZOOM<\/a>, as\u00ed como otros plugins premium, como FlyingPress<\/a>.<\/p>\n Otro problema que puede desencadenar el mensaje \u00abPrecargar la imagen del Largest Contentful Paint\u00bb en PageSpeed Insights son los problemas con el modo en que tu sitio de WordPress realiza la carga perezosa de im\u00e1genes<\/a>.<\/p>\n Esto tambi\u00e9n puede desencadenar una advertencia de \u00abLa imagen del Largest Contentful Paint m\u00e1s grande se carg\u00f3 diferidamente\u00bb en PageSpeed Insights.<\/p>\n La carga lenta te permite acelerar los tiempos de carga iniciales de tu sitio esperando a cargar determinados recursos (como im\u00e1genes) hasta que el usuario empiece a interactuar con tu sitio.<\/p>\n Aunque normalmente esto es bueno, puede ralentizar tus tiempos de LCP si tu sitio est\u00e1 intentando cargar diferidamente la imagen que es tu elemento LCP. Por esta raz\u00f3n, deber\u00e1s asegurarte de que tu sitio no carga diferidamente ninguna imagen visible en la ventana inicial.<\/p>\n Si utilizas la funci\u00f3n de carga lenta nativa del navegador que WordPress introdujo en WordPress 5.5<\/a>, no deber\u00edas experimentar este problema porque WordPress ya excluye autom\u00e1ticamente la primera imagen del contenido a partir de WordPress 5.9<\/a>.<\/p>\n Si quieres excluir m\u00e1s de la primera imagen, puedes <\/em>utilizar la funci\u00f3n wp_omit_loading_attr_threshold<\/em><\/a> (pero la mayor\u00eda de la gente no necesitar\u00e1 hacer nada aqu\u00ed).<\/em><\/p>\n Sin embargo, si utilizas un complemento de carga diferida con JavaScript, es posible que tengas que configurar manualmente esta exclusi\u00f3n en los ajustes del complemento. Por ejemplo, el plugin Perfmatters incluye una opci\u00f3n que te permite excluir las primeras \u00abX\u00bb im\u00e1genes de la carga diferida.<\/p>\n Si tu plugin de carga diferida no te permite configurar este tipo de exclusi\u00f3n, puedes cambiar a otro plugin que s\u00ed lo haga.<\/p>\n Por ejemplo, WP Rocket<\/a> excluye autom\u00e1ticamente de la carga lenta todas las im\u00e1genes por encima del pliegue, incluida la de LCP, lo que te ayuda a ahorrar tiempo y la molestia de hacerlo manualmente. El plugin realiza la optimizaci\u00f3n por defecto nada m\u00e1s activarlo, as\u00ed que no necesitas marcar ninguna opci\u00f3n.<\/p>\n Si tu elemento LCP es texto, el proceso de carga de fuentes de tu sitio puede retrasar la aparici\u00f3n del texto, lo que ralentizar\u00e1 el tiempo de LCP.<\/p>\n Normalmente, esto ocurre cuando se utilizan fuentes personalizadas<\/a>. Si tu sitio est\u00e1 configurado para esperar a mostrar cualquier texto hasta que se haya cargado la fuente personalizada, esto ralentizar\u00e1 las cosas si el archivo de la fuente personalizada tarda mucho en cargarse.<\/p>\n Para solucionarlo, puedes utilizar el descriptor CSS Font-Display: Descriptor CSS opcional<\/a>.<\/p>\n Esto indica al navegador que utilice una fuente alternativa si la fuente personalizada no se carga dentro de una ventana peque\u00f1a (normalmente unos 100 ms o menos).<\/p>\n En lenguaje llano, esto significa b\u00e1sicamente que el navegador debe dar a la fuente personalizada la oportunidad de cargarse. Pero si la fuente personalizada no se carga lo suficientemente r\u00e1pido, el navegador debe utilizar una fuente de reserva del sistema para evitar retrasar m\u00e1s el contenido.<\/p>\n Tambi\u00e9n puedes utilizar Font-Display: Swap, que carga la fuente de reserva de inmediato y luego \u00abintercambia\u00bb la fuente personalizada una vez que \u00e9sta se carga. Sin embargo, este m\u00e9todo puede causar problemas con el Desplazamiento de dise\u00f1o acumulativo<\/a> si las fuentes tienen tama\u00f1os diferentes, por lo que deber\u00e1s tener cuidado.<\/p>\n A menos que tu fuente personalizada sea absolutamente necesaria para el dise\u00f1o de tu sitio web, utilizar Font-Display: Opcional suele ser la mejor opci\u00f3n desde la perspectiva de Core Web Vitals.<\/p>\n Si te sientes c\u00f3modo utilizando CSS directamente<\/a>, puedes editar manualmente la propiedad Font-Display en la hoja de estilos de tu tema hijo<\/a>.<\/p>\n Si no quieres utilizar CSS, tambi\u00e9n puedes encontrar plugins que te ayuden a hacerlo, aunque la mayor\u00eda de ellos se centran en la optimizaci\u00f3n para Google Fonts:<\/p>\n Si utilizas Elementor para dise\u00f1ar tu sitio, Elementor tambi\u00e9n incluye una opci\u00f3n integrada que te permite utilizar esto para las p\u00e1ginas que crees con Elementor:<\/p>\n\n
La Largest Contentful Paint frente al First Contentful Paint<\/h3>\n
\n
\u00bfPor Qu\u00e9 es Importante el Tiempo del Largest Contentful Paint de Tu Sitio?<\/h2>\n
\n
Experiencia del usuario<\/h3>\n
Optimizaci\u00f3n para motores de b\u00fasqueda (SEO)<\/h3>\n
\u00bfQu\u00e9 Puede Afectar a las Puntuaciones de Largest Contentful Paint?<\/h2>\n
\n
\n
\n
\u00bfQu\u00e9 es Un \u00abbuen\u00bb Tiempo de Largest Contentful Paint?<\/h2>\n
![\"Tiempos](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/good-largest-contentful-paint-times-1024x253.jpg\")
C\u00f3mo Medir el Largest Contentful Paint: Las Mejores Herramientas de Prueba de LCP<\/h2>\n
PageSpeed Insights<\/h3>\n
\n
\n
![\"Tiempos](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/pagespeed-insights-lcp-test-1024x682.jpg\")
![\"C\u00f3mo](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/pagespeed-insights-lcp-test-2-1024x779.jpg\")
Herramientas para desarrolladores de Chrome<\/h3>\n
\n
![\"C\u00f3mo](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/lcp-test-chrome-dev-tools-1-1024x694.jpg\")
![\"C\u00f3mo](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/lcp-test-chrome-dev-tools-2-1024x714.jpg\")
![\"C\u00f3mo](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/lcp-test-chrome-dev-tools-3-1024x861.jpg\")
Google Search Console<\/h3>\n
\n
![\"C\u00f3mo](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/lcp-times-in-google-search-console-1024x860.jpg\")
WebPageTest<\/h3>\n
\n
![\"C\u00f3mo](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/webpagetest-lcp-test-1-1024x727.jpg\")
C\u00f3mo Encontrar el Elemento del Largest Contentful Paint<\/h2>\n
C\u00f3mo Mejorar el Largest Contentful Paint en WordPress (u Otras Plataformas)<\/h2>\n
Configura el almacenamiento en cach\u00e9 para mejorar el tiempo de respuesta del servidor<\/h3>\n
P\u00e1sate a un alojamiento WordPress m\u00e1s r\u00e1pido<\/h3>\n
Utiliza una Red de Entrega de Contenidos (CDN)<\/h3>\n
![\"C\u00f3mo](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/kinsta-edge-caching-1024x704.jpg\")
Evita el JavaScript que bloquea el renderizado (Aplazar o eliminar)<\/h3>\n
\n
\n
Evita el CSS que bloquee la renderizaci\u00f3n y optimiza la entrega de CSS<\/h3>\n
Minifica tu HTML, CSS y JavaScript<\/h3>\n
Utiliza la compresi\u00f3n a nivel de servidor (Gzip o Brotli)<\/h3>\n
![\"Un](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/gzip-brotli-test-1024x624.jpg\")
\n
![\"C\u00f3mo](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/cloudflare-brotli-compression-1024x865.jpg\")
Comprimir y redimensionar im\u00e1genes<\/h3>\n
\n
![\"C\u00f3mo](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/kinsta-image-optimization-feature-1024x845.jpg\")
Precargar la imagen del Largest Contentful Paint<\/h3>\n
![\"C\u00f3mo](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/preload-critical-images-1024x685.jpg\")
Comprueba si hay problemas de Lazy Loading<\/h3>\n
![\"C\u00f3mo](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/perfmatters-exclude-leading-images-1024x791.jpg\")
Optimizar la carga de fuentes con Font-Display: Opcional<\/h3>\n
\n
\n