{"id":21125,"date":"2022-07-22T21:40:57","date_gmt":"2022-07-22T19:40:57","guid":{"rendered":"\/tutoriales\/?p=21125"},"modified":"2025-02-20T13:37:42","modified_gmt":"2025-02-20T12:37:42","slug":"largest-contentful-paint","status":"publish","type":"post","link":"\/es\/tutoriales\/largest-contentful-paint","title":{"rendered":"Largest Contentful Paint (LCP): Qu\u00e9 es y 11 formas de mejorarlo"},"content":{"rendered":"<p>Entender las Core Web Vitals ayuda a garantizar que tu sitio web pueda ofrecer la mejor experiencia de usuario. Estas consisten en m&uacute;ltiples m&eacute;tricas que representan c&oacute;mo los usuarios interact&uacute;an con tu sitio web, una de las cuales es el <strong>largest contentful paint (LCP).<\/strong><\/p><figure class=\"wp-block-image size-large\"><a href=\"https:\/\/assets.hostinger.com\/content\/tutorials\/pdf\/Speed-Up-Your-Website-ES.pdf\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"283\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/eBook-Speed-Up-your-website-ES.png\/public\" alt=\"\" class=\"wp-image-25983\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/eBook-Speed-Up-your-website-ES.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/eBook-Speed-Up-your-website-ES.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/eBook-Speed-Up-your-website-ES.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/eBook-Speed-Up-your-website-ES.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/eBook-Speed-Up-your-website-ES.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><p>\n\n\n\n\n\n\n<div class=\"protip\">\n                    <h2 class=\"featured-snippet title\">&iquest;Qu&eacute; es el Largest Contentful Paint?<\/h2>\n                    <p> La pintura de mayor contenido (LCP) representa el tiempo de carga de un sitio web. Se centra en medir la rapidez con la que la p&aacute;gina web renderiza sus elementos m&aacute;s grandes, incluyendo im&aacute;genes y bloques de texto. Una buena puntuaci&oacute;n de LCP puede indicar una mejor experiencia de usuario y menores tasas de rebote.<\/p>\n                <\/div>\n\n\n\n<\/p><p>En este art&iacute;culo, profundizaremos en el largest contentful paint viendo c&oacute;mo medirlo y algunos m&eacute;todos &uacute;tiles para mejorarlo.<\/p><h2 class=\"wp-block-heading\" id=\"h-como-medir-el-largest-contentful-paint\">C&oacute;mo medir el Largest Contentful Paint<\/h2><p>La medici&oacute;n de las m&eacute;tricas de <strong>Core Web Vitals<\/strong>, desde la Interaction to Next Paint (INP) hasta el largest contentful paint (LCP), requiere ciertas herramientas y software. Los <strong>datos de campo<\/strong> se obtienen de usuarios reales y sus experiencias, mientras que los <strong>datos de laboratorio<\/strong> recogen informaci&oacute;n de un entorno simulado. <\/p><p>Algunas herramientas tambi&eacute;n combinan ambos tipos de datos para proporcionar un informe m&aacute;s detallado que te permita optimizar tu sitio web.<\/p><p>Una de las herramientas m&aacute;s populares para medir el LCP es <a href=\"https:\/\/pagespeed.web.dev\/?utm_source=psi&amp;utm_medium=redirect\" target=\"_blank\" rel=\"noreferrer noopener\">PageSpeed Insights<\/a> de Google. Es una herramienta gratuita que ayuda a los usuarios a analizar y diagnosticar el rendimiento de la web presentando auditor&iacute;as relevantes y oportunidades de mejora.<\/p><p>Utilizar PageSpeed Insights es relativamente f&aacute;cil. Esto es lo que hay que hacer para manejar esta herramienta:<\/p><ul class=\"wp-block-list\">\n<li>Escribe o pega la URL del sitio en la barra de b&uacute;squeda de la parte superior de la p&aacute;gina y haz clic en el bot&oacute;n <strong>Analizar<\/strong>. Ten en cuenta que completar el an&aacute;lisis de rendimiento puede llevar unos minutos.<\/li>\n<\/ul><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"833\" height=\"88\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/07\/pagespeed.jpg\/public\" alt=\"Cabecera de la p&aacute;gina PageSpeed donde se ingresa la URL\" class=\"wp-image-21171\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/07\/pagespeed.jpg\/w=833,fit=scale-down 833w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/07\/pagespeed.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/07\/pagespeed.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/07\/pagespeed.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 833px) 100vw, 833px\" \/><\/figure><\/div><ul class=\"wp-block-list\">\n<li>Una vez completado el an&aacute;lisis, revisa la secci&oacute;n <strong>Diagnosticar problemas de rendimiento<\/strong> para obtener m&eacute;tricas &uacute;tiles y recomendaciones para mejorar el rendimiento. Una puntuaci&oacute;n representa el resultado global.<\/li>\n<\/ul><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"541\" height=\"194\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/07\/pagespeed-rendimiento.jpg\/public\" alt=\"Gr&aacute;fico de rendimiento de una p&aacute;gina de ejemplo \" class=\"wp-image-21174\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/07\/pagespeed-rendimiento.jpg\/w=541,fit=scale-down 541w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/07\/pagespeed-rendimiento.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/07\/pagespeed-rendimiento.jpg\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 541px) 100vw, 541px\" \/><\/figure><\/div><ul class=\"wp-block-list\">\n<li>Puedes encontrar m&aacute;s m&eacute;tricas, incluyendo Largest Contentful Paint (LCP), Interaction to Next Paint (INP) y el Cumulative Layout Shift. Haz clic en <strong>Expandir vista<\/strong> para leer breves explicaciones de cada m&eacute;trica.<\/li>\n<\/ul><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"569\" height=\"166\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/07\/pagespeed-metricas.jpg\/public\" alt=\"M&eacute;tricas de PageSpeed de una p&aacute;gina de ejemplo \" class=\"wp-image-21175\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/07\/pagespeed-metricas.jpg\/w=569,fit=scale-down 569w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/07\/pagespeed-metricas.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/07\/pagespeed-metricas.jpg\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 569px) 100vw, 569px\" \/><\/figure><\/div><ul class=\"wp-block-list\">\n<li>PageSpeed Insights tambi&eacute;n te ofrece m&uacute;ltiples recomendaciones y diagn&oacute;sticos para mejorar el rendimiento del sitio. Tambi&eacute;n es posible filtrarlas en funci&oacute;n de las Core Web Vitals pertinentes.<\/li>\n<\/ul><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"555\" height=\"298\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/07\/pagespeed-oportunidades-diagnostico.jpg\/public\" alt=\"Ejemplo de algunas oportunidades y diagn&oacute;stico que ofrece PageSpeed\" class=\"wp-image-21176\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/07\/pagespeed-oportunidades-diagnostico.jpg\/w=555,fit=scale-down 555w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/07\/pagespeed-oportunidades-diagnostico.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/07\/pagespeed-oportunidades-diagnostico.jpg\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 555px) 100vw, 555px\" \/><\/figure><\/div><p>Otras herramientas que puedes considerar son <a href=\"https:\/\/developers.google.com\/web\/tools\/lighthouse\" target=\"_blank\" rel=\"noreferrer noopener\">Lighthouse<\/a> y<a href=\"https:\/\/search.google.com\/search-console\/\" target=\"_blank\" rel=\"noreferrer noopener\"> SearchConsole<\/a>.<\/p><h3 class=\"wp-block-heading\" id=\"h-que-es-una-buena-puntuacion-para-el-largest-contentful-paint\"><strong>&iquest;Qu&eacute; es una buena puntuaci&oacute;n para el Largest Contentful Paint?<\/strong><\/h3><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"999\" height=\"331\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/07\/LCP-Hostinger.jpg\/public\" alt=\"Imagen de Hostinger sobre la puntuaci&oacute;n del LCP\" class=\"wp-image-21180\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/07\/LCP-Hostinger.jpg\/w=999,fit=scale-down 999w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/07\/LCP-Hostinger.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/07\/LCP-Hostinger.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/07\/LCP-Hostinger.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 999px) 100vw, 999px\" \/><\/figure><\/div><p>La puntuaci&oacute;n del largest contentful paint se mide en segundos. Como regla general, una p&aacute;gina web deber&iacute;a ser capaz de renderizar sus elementos m&aacute;s grandes en menos de 2,5 segundos.<\/p><p>Una p&aacute;gina web con una puntuaci&oacute;n LCP de 1,2 segundos o menos significa que es lo suficientemente buena y que no hay que tomar m&aacute;s medidas. Una puntuaci&oacute;n entre 1,2 y 2,5 segundos sigue siendo aceptable. Sin embargo, es posible que quieras ajustar algunos elementos para mejorarla.<\/p><p>Una puntuaci&oacute;n de LCP superior a 2,5 segundos significa que tu sitio tiene un rendimiento deficiente que puede afectar negativamente a la experiencia del usuario y, en &uacute;ltima instancia, obstaculizar el crecimiento de tu sitio.<\/p><h3 class=\"wp-block-heading\" id=\"h-que-elementos-mide-el-largest-contentful-paint\">&iquest;Qu&eacute; elementos mide el Largest Contentful Paint?<\/h3><p>Cada m&eacute;trica mide diferentes elementos del sitio web. Por ejemplo, el first contentful paint (FCP) mide el tiempo necesario para que una p&aacute;gina web muestre el primer contenido. En este caso, el contenido incluye im&aacute;genes, gr&aacute;ficos y elementos de texto.<\/p><p>Mientras tanto, el LCP s&oacute;lo mide la rapidez con la que una p&aacute;gina puede cargar el elemento m&aacute;s grande dentro de la ventana gr&aacute;fica, que es el &aacute;rea de la ventana que muestra el contenido. Esto se debe a que el tiempo necesario para mostrar el elemento m&aacute;s grande es un indicador importante de la velocidad de carga de la p&aacute;gina.<\/p><p>Los elementos que activan las entradas LCP incluyen:<\/p><ul class=\"wp-block-list\">\n<li>Elementos de imagen (incluidos los que est&aacute;n dentro de un elemento SVG)<\/li>\n\n\n\n<li>Elementos de v&iacute;deo<\/li>\n\n\n\n<li>Elementos con una imagen de fondo cargada mediante la <a href=\"https:\/\/developer.mozilla.org\/es\/docs\/web\/css\/url\" target=\"_blank\" rel=\"noreferrer noopener\">funci&oacute;n url()<\/a><\/li>\n\n\n\n<li>Nodos de texto dentro de elementos de nivel de bloque<\/li>\n<\/ul><p>Lo que se considera el elemento m&aacute;s grande depende del tipo. En el caso de los elementos de imagen, el tama&ntilde;o notificado es su tama&ntilde;o visible o su tama&ntilde;o intr&iacute;nseco, el que sea menor. Para los elementos de texto, LCP s&oacute;lo considera el tama&ntilde;o de sus nodos de texto.<\/p><p>Adem&aacute;s, el largest contentful paint no considerar&aacute; ninguna parte de un elemento que se extienda o recorte fuera de la ventana gr&aacute;fica. Esto significa que el c&aacute;lculo del tama&ntilde;o no incluye ning&uacute;n margen, relleno o borde.<\/p><h2 class=\"wp-block-heading\" id=\"h-como-mejorar-el-largest-contentful-paint-11-metodos-eficaces\">C&oacute;mo mejorar el Largest Contentful Paint: 11 m&eacute;todos eficaces<\/h2><p>Dado que el largest contentful paint es un indicador importante de la <a href=\"\/es\/tutoriales\/test-velocidad-web\">velocidad de carga de la p&aacute;gina<\/a> de un sitio, una mala puntuaci&oacute;n de LCP puede dar lugar a una mala experiencia del usuario. Hay varias causas comunes de un mal rendimiento del sitio web, incluyendo:<\/p><ul class=\"wp-block-list\">\n<li>Tiempos de respuesta del servidor y de carga de recursos lentos<\/li>\n\n\n\n<li>Renderizaci&oacute;n del lado del cliente<\/li>\n\n\n\n<li>Recursos que bloquean la renderizaci&oacute;n<\/li>\n<\/ul><p>Afortunadamente, hay varias maneras de resolver estos problemas. Veamos 11 m&eacute;todos eficaces para mejorar la mayor puntuaci&oacute;n del largest contentful paint tu sitio<\/p><h3 class=\"wp-block-heading\" id=\"h-1-utilizar-una-cdn\">1. Utilizar una CDN<\/h3><p><strong>Nivel de dificultad: <\/strong>medio<\/p><p><strong>Impacto: <\/strong>bajo\/medio\/alto<\/p><p>Una <a href=\"\/es\/tutoriales\/que-es-cdn\/\">red de distribuci&oacute;n de contenidos (CDN)<\/a><strong> <\/strong>es una gran herramienta para mejorar la gesti&oacute;n del tr&aacute;fico de tu sitio. Una CDN utiliza servidores adicionales para ayudar cuando el servidor de origen necesita manejar un alto tr&aacute;fico. Por lo general, los sitios m&aacute;s grandes utilizan esta tecnolog&iacute;a para manejar muchos visitantes regularmente.<\/p><p>Por ello, una CDN puede ayudar a mejorar el LCP al equilibrar la carga de la red, ya que las peticiones de los visitantes no tienen que hacer cola en el mismo servidor. Esto puede dar lugar a una puntuaci&oacute;n LCP m&aacute;s r&aacute;pida y mejorar potencialmente la experiencia del usuario.<\/p><p>Una CDN tambi&eacute;n puede mejorarse con software adicional, como una CDN de imagen que optimiza y transforma los tama&ntilde;os de las im&aacute;genes en tiempo real. Esto puede mejorar a&uacute;n m&aacute;s la rapidez con la que un sitio web rico en medios renderiza su contenido.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"991\" height=\"418\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/07\/CDN-Cloudflare.jpg\/public\" alt=\"Visualizaci&oacute;n de la p&aacute;gina web de Cloudflare \" class=\"wp-image-21184\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/07\/CDN-Cloudflare.jpg\/w=991,fit=scale-down 991w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/07\/CDN-Cloudflare.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/07\/CDN-Cloudflare.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/07\/CDN-Cloudflare.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 991px) 100vw, 991px\" \/><\/figure><\/div><p>El proceso de configuraci&oacute;n de una CDN var&iacute;a en funci&oacute;n de tu proveedor de alojamiento. Por lo general, es relativamente sencillo. Si utilizas Hostinger, es posible habilitar una CDN directamente desde <a href=\"\/es\/tutoriales\/tutorial-hpanel\">hPanel<\/a>.<\/p><p>Una de las soluciones CDN m&aacute;s populares es <a href=\"https:\/\/www.cloudflare.com\/es-es\/cdn\/\" target=\"_blank\" rel=\"noreferrer noopener\">Cloudflare<\/a>, que ofrece m&aacute;s de 120 centros en todo el mundo. Este servicio proporciona un plan gratuito y tiene un proceso de configuraci&oacute;n sencillo, especialmente si se <a href=\"\/es\/tutoriales\/como-configurar-cloudflare-en-wordpress\">configura Cloudflare en WordPress<\/a>.<\/p><p>Puedes considerar otras soluciones CDN, como StackPath,<a href=\"https:\/\/sucuri.net\/website-performance\/\" target=\"_blank\" rel=\"noreferrer noopener\"> Sucuri<\/a>, y<a href=\"https:\/\/cloud.google.com\/cdn\" target=\"_blank\" rel=\"noreferrer noopener\"> Google Cloud CDN<\/a>.<\/p><h3 class=\"wp-block-heading\" id=\"h-2-garantizar-el-tamano-correcto-de-la-imagen\">2. Garantizar el tama&ntilde;o correcto de la imagen<\/h3><p><strong>Nivel de dificultad: <\/strong>f&aacute;cil<\/p><p><strong>Eficiencia: <\/strong>baja\/media\/alta<\/p><p>Como se ha mencionado anteriormente, algunas im&aacute;genes pueden constituir un elemento de pintura de gran contenido dependiendo de sus tama&ntilde;os. Por lo tanto, asegurarte de que tus p&aacute;ginas web tienen el tama&ntilde;o de imagen optimizado es importante para mantener una buena puntuaci&oacute;n LCP.<\/p><p>La clave aqu&iacute; es entender el tama&ntilde;o correcto de la imagen en funci&oacute;n del dispositivo del usuario. Para garantizar una buena puntuaci&oacute;n LCP, las p&aacute;ginas web deben utilizar im&aacute;genes responsivas.<\/p><p>Por ejemplo, si la versi&oacute;n de escritorio de tu sitio utiliza im&aacute;genes de tama&ntilde;o grande, la versi&oacute;n m&oacute;vil debe utilizar im&aacute;genes de tama&ntilde;o medio.<\/p><p>Tambi&eacute;n es importante conocer los tama&ntilde;os de imagen por defecto de tu plataforma web. Por ejemplo, hay cuatro <a href=\"\/es\/tutoriales\/tamanos-de-imagenes-en-wordpress\">tama&ntilde;os de imagen por defecto en WordPress<\/a>, que son:<\/p><ul class=\"wp-block-list\">\n<li><strong>Miniatura:<\/strong> precisamente 150 p&iacute;xeles cuadrados<\/li>\n\n\n\n<li><strong>Mediana:<\/strong> hasta 300 p&iacute;xeles cuadrados.<\/li>\n\n\n\n<li><strong>Grande:<\/strong> m&aacute;ximo 1024 p&iacute;xeles cuadrados.<\/li>\n\n\n\n<li><strong>Tama&ntilde;o completo:<\/strong> se refiere al tama&ntilde;o de la imagen original.<\/li>\n<\/ul><p>Ten en cuenta que las im&aacute;genes informan de su tama&ntilde;o de elemento m&aacute;s peque&ntilde;o. Esto significa que una imagen comprimida informar&aacute; de su tama&ntilde;o visible, mientras que una imagen ampliada informar&aacute; de su tama&ntilde;o original.<\/p><h3 class=\"wp-block-heading\" id=\"h-3-optimizar-imagenes\">3. Optimizar im&aacute;genes<\/h3><p><strong>Nivel de dificultad: <\/strong>f&aacute;cil<\/p><p><strong>Eficiencia: <\/strong>baja\/media\/alta<\/p><p>Adem&aacute;s de asegurar el tama&ntilde;o correcto, hay otras formas de <a href=\"\/es\/tutoriales\/optimizar-imagenes\">optimizar las im&aacute;genes en tu sitio<\/a> para mejorar el tiempo de carga.<\/p><p>Si est&aacute;s <a href=\"\/es\/tutoriales\/como-optimizar-imagenes-wordpress\/\">optimizando im&aacute;genes en WordPress,<\/a> el m&eacute;todo es relativamente sencillo, ya que s&oacute;lo tendr&aacute;s que elegir el formato de archivo adecuado o utilizar un plugin.<\/p><p>Algunas de las herramientas m&aacute;s populares para optimizar im&aacute;genes para sitios web son<a href=\"https:\/\/tinypng.com\/\" target=\"_blank\" rel=\"noopener\"> TinyPNG<\/a>,<a href=\"https:\/\/imagify.io\/\" target=\"_blank\" rel=\"noopener\"> Imagify<\/a>, y<a href=\"https:\/\/kraken.io\/\" target=\"_blank\" rel=\"noopener\"> Kraken<\/a>. Plugins como<strong> <\/strong><a href=\"https:\/\/es.wordpress.org\/plugins\/optimole-wp\/\" target=\"_blank\" rel=\"noreferrer noopener\">Optimole<\/a>,<a href=\"https:\/\/wordpress.org\/plugins\/ewww-image-optimizer\/\" target=\"_blank\" rel=\"noopener\"> <\/a><a href=\"https:\/\/es.wordpress.org\/plugins\/ewww-image-optimizer\/\" target=\"_blank\" rel=\"noreferrer noopener\">EWWW Image Optimizer<\/a>, y <a href=\"https:\/\/es.wordpress.org\/plugins\/shortpixel-image-optimiser\/\" target=\"_blank\" rel=\"noreferrer noopener\">ShortPixel<\/a> son tambi&eacute;n grandes opciones para los usuarios de WordPress.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"947\" height=\"432\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/07\/Optimole.jpg\/public\" alt=\"P&aacute;gina de descarga del plugin desarrollado por Optimole\" class=\"wp-image-21195\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/07\/Optimole.jpg\/w=947,fit=scale-down 947w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/07\/Optimole.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/07\/Optimole.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/07\/Optimole.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 947px) 100vw, 947px\" \/><\/figure><\/div><p>Optimizar las im&aacute;genes no s&oacute;lo es &uacute;til para mejorar la puntuaci&oacute;n de LCP. Te permite ahorrar espacio de almacenamiento y mejorar potencialmente el rendimiento de la <a href=\"\/es\/tutoriales\/que-es-seo\/\">optimizaci&oacute;n de tu sitio en los motores de b&uacute;squeda (SEO)<\/a><strong>.<\/strong> Si eres usuario de WordPress, consulta m&aacute;s formas de <a href=\"\/es\/tutoriales\/seo-en-wordpress\">mejorar tu SEO<\/a>.<\/p><p>\n\n\n\n<div class=\"protip\">\n                    <h4 class=\"title\">Lectura recomendada<\/h4>\n                    <p><\/p><p>Las im&aacute;genes no son el &uacute;nico elemento que debes optimizar para mejorar el rendimiento de tu sitio de WordPress. Lee <a href=\"\/es\/tutoriales\/mejorar-velocidad-wordpress\/\">c&oacute;mo acelerar WordPress<\/a> para saber m&aacute;s.<\/p>\n                <\/div>\n\n\n\n<\/p><h3 class=\"wp-block-heading\">4. Mejorar el tiempo de respuesta del servidor<\/h3><p><strong>Nivel de dificultad: <\/strong>medio<\/p><p><strong>Eficiencia: <\/strong>baja\/media\/alta<\/p><p>El tiempo de carga de tu p&aacute;gina est&aacute; estrechamente relacionado con los tiempos de respuesta del servidor web. El proceso de ida y vuelta entre la petici&oacute;n del navegador del usuario y la del servidor es uno de los principales factores que afectan a la velocidad de carga. Este proceso tambi&eacute;n se conoce como <strong>tiempo de ida y vuelta (RTT).<\/strong><\/p><p>Hay varias formas de mejorar el tiempo de respuesta del servidor, entre ellas:<\/p><ul class=\"wp-block-list\">\n<li><strong>Implementar el almacenamiento en cach&eacute; del lado del servidor:<\/strong> los propietarios de sitios web pueden aprovechar el almacenamiento en cach&eacute; del navegador y del lado del servidor. La funci&oacute;n de almacenamiento en cach&eacute; del lado del servidor suele estar disponible en tu configuraci&oacute;n de alojamiento.<\/li>\n\n\n\n<li><strong>Actualizar las especificaciones del servidor:<\/strong> las especificaciones de hardware de un servidor afectan significativamente a su rendimiento. Por lo tanto, considera actualizar a un servidor con mejores capacidades de CPU y mayor capacidad de almacenamiento.<\/li>\n\n\n\n<li><strong>Optimizar los c&oacute;digos de la aplicaci&oacute;n<\/strong>: la optimizaci&oacute;n de los c&oacute;digos utilizados en funciones como la consulta de una base de datos puede ayudar a mejorar la puntuaci&oacute;n de un LCP. Por ejemplo, eliminar el CSS no cr&iacute;tico puede ayudar a acelerar el renderizado inicial. No dudes en pedir ayuda a los desarrolladores web, ya que este paso puede ser muy t&eacute;cnico.<\/li>\n<\/ul><p>En el caso de los sitios web de WordPress, plugins como <a href=\"https:\/\/es.wordpress.org\/plugins\/wp-dbmanager\" target=\"_blank\" rel=\"noreferrer noopener\">WP-DBManager<\/a> pueden ayudar a optimizar la base de datos reduciendo la sobrecarga y programando limpiezas autom&aacute;ticas.<\/p><h3 class=\"wp-block-heading\" id=\"h-5-utilizar-un-proveedor-de-alojamiento-web-fiable\">5. Utilizar un proveedor de alojamiento web fiable<\/h3><p><strong>Nivel de dificultad: <\/strong>f&aacute;cil<\/p><p><strong>Eficiencia: <\/strong>alta<\/p><p>La calidad del <a href=\"\/es\/hosting-web\">hosting web<\/a> es un factor importante que afecta al rendimiento general de la web. Un buen alojamiento web suele estar configurado para mejorar la experiencia del usuario y viene con varias funciones para facilitar la gesti&oacute;n de la web.<\/p><p>Por lo tanto, <a href=\"\/es\/tutoriales\/planes-de-hostinger\">elegir un plan de alojamiento web<\/a> que se ajuste a las especificaciones de tu sitio puede mejorar la velocidad de carga percibida. Hostinger cuenta con una amplia gama de opciones de alojamiento que se adaptan a diversas necesidades y preferencias.<\/p><p>Por ejemplo, nuestros <a href=\"\/es\/hosting-wordpress\">planes de alojamiento de WordPress<\/a> est&aacute;n espec&iacute;ficamente ajustados para optimizar las capacidades del CMS y garantizar un tiempo de carga m&aacute;s r&aacute;pido. El proveedor tambi&eacute;n utiliza un panel de control intuitivo que hace que tu experiencia de gesti&oacute;n web sea menos complicada.<\/p><h3 class=\"wp-block-heading\" id=\"h-6-implantar-el-cache\">6. Implantar el cach&eacute;<\/h3><p><strong>Nivel de dificultad: <\/strong>f&aacute;cil\/medio\/dif&iacute;cil<\/p><p><strong>Eficiencia: <\/strong>baja\/media\/alta<\/p><p>El almacenamiento en cach&eacute; se refiere a guardar los activos est&aacute;ticos de una p&aacute;gina en un almacenamiento temporal. Esto permite acelerar el tiempo de carga de la p&aacute;gina al reducir la cantidad de datos transferidos durante el proceso inicial de renderizaci&oacute;n. Existen dos m&eacute;todos principales de almacenamiento en cach&eacute;: el almacenamiento en cach&eacute; del lado del servidor y el almacenamiento en cach&eacute; del navegador.<\/p><p>Al aprovechar el almacenamiento en cach&eacute; del navegador, los visitantes pueden guardar la cach&eacute; en su almacenamiento local. Como resultado, no tienen que descargar los mismos datos cuando vuelven a visitar tu sitio. Puedes activar la cach&eacute; del navegador de forma manual o mediante plugins.<\/p><p>Por otro lado, el almacenamiento en cach&eacute; del lado del servidor es un m&eacute;todo que consiste en almacenar una versi&oacute;n prefabricada de una p&aacute;gina web en el servidor de origen. Con este m&eacute;todo, el servidor no tiene que reconstruir o cargar el contenido de la p&aacute;gina desde la base de datos cuando un usuario vuelve a visitar el sitio.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"950\" height=\"432\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/07\/LiteSpeed.jpg\/public\" alt=\"P&aacute;gina para descargar el plugin LiteSpeed Cache\" class=\"wp-image-21207\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/07\/LiteSpeed.jpg\/w=950,fit=scale-down 950w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/07\/LiteSpeed.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/07\/LiteSpeed.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/07\/LiteSpeed.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 950px) 100vw, 950px\" \/><\/figure><\/div><p>Una de las herramientas m&aacute;s populares para habilitar el almacenamiento en cach&eacute; de sitios web es <a href=\"\/es\/tutoriales\/litespeed-cache-plugin\/\">LiteSpeed<\/a>. Viene con funciones avanzadas de almacenamiento en cach&eacute; y otras caracter&iacute;sticas &uacute;tiles como la optimizaci&oacute;n del contenido din&aacute;mico y un equilibrador de carga HTTP.<\/p><h3 class=\"wp-block-heading\" id=\"h-7-solucionar-los-problemas-de-lazy-loading\">7. Solucionar los problemas de lazy loading<\/h3><p><strong>Nivel de dificultad: <\/strong>medio<\/p><p><strong>Eficiencia: <\/strong>baja\/media\/alta<\/p><p>La carga perezosa o lazy loading es una t&eacute;cnica en la que una p&aacute;gina retrasa el CSS y otros recursos no cr&iacute;ticos durante el renderizado inicial. En su lugar, se centrar&aacute; en cargar el contenido de la parte superior de la p&aacute;gina y renderizar&aacute; los recursos no cr&iacute;ticos s&oacute;lo cuando sea necesario para que el proceso de carga de la p&aacute;gina sea m&aacute;s r&aacute;pido.<\/p><p>Con este m&eacute;todo, tu sitio puede cargar archivos de forma as&iacute;ncrona dependiendo de su distancia a la ventana gr&aacute;fica.<\/p><p>Por ejemplo, el contenido representado por encima del pliegue, como una imagen destacada, aparecer&aacute; inmediatamente durante la carga inicial. Sin embargo, los elementos como las miniaturas de v&iacute;deo fuera de la ventana gr&aacute;fica se sustituyen por im&aacute;genes de marcador de posici&oacute;n hasta que los usuarios se desplacen por ellas.<\/p><p>Sin embargo, el lazy loading puede a veces empeorar la puntuaci&oacute;n de LCP debido a varios problemas. Por ejemplo, los sitios web que implementan la carga perezosa nativa y hacen que todas sus im&aacute;genes sigan el comportamiento de carga perezosa pueden obtener una puntuaci&oacute;n LCP m&aacute;s baja.<\/p><p>Para solucionar este problema, simplemente marca la imagen principal o destacada que potencialmente se selecciona como el elemento de pintura de mayor contenido con el atributo <a href=\"https:\/\/web.dev\/browser-level-image-lazy-loading\/\" target=\"_blank\" rel=\"noreferrer noopener\">loading=&rdquo;eager&rdquo;<\/a>. Esta funci&oacute;n permite que el elemento de imagen se renderice inmediatamente independientemente de su distancia de la ventana gr&aacute;fica.<\/p><p>Esto tambi&eacute;n puede ocurrir con los m&eacute;todos de carga perezosa que utilizan JavaScript. Como el navegador necesita ejecutar el JavaScript antes de renderizar un elemento, puede prolongar el tiempo de carga y empeorar la puntuaci&oacute;n de LCP.<\/p><p>La soluci&oacute;n m&aacute;s eficaz para este problema es deshabilitar la carga lenta en las im&aacute;genes que se renderizan por encima del pliegue. De este modo, los navegadores las cargar&aacute;n sin tener que ejecutar JavaScript previamente.<\/p><h3 class=\"wp-block-heading\" id=\"h-8-minificar-los-archivos-js-css-y-html\">8. Minificar los archivos JS, CSS y HTML<\/h3><p><strong>Nivel de dificultad: <\/strong>f&aacute;cil<\/p><p><strong>Eficiencia: <\/strong>baja<\/p><p>La minificaci&oacute;n es un m&eacute;todo para disminuir el tama&ntilde;o del archivo, principalmente reduciendo las l&iacute;neas de c&oacute;digo dentro del archivo. Este es uno de los m&eacute;todos de optimizaci&oacute;n de archivos m&aacute;s comunes que puede ayudar a mejorar tu m&eacute;trica LCP.<\/p><p>Algunos de los archivos principales como CSS, JavaScript y HTML pueden contener muchos espacios en blanco innecesarios dentro del c&oacute;digo que hacen que su tama&ntilde;o sea mayor. Aunque no parezcan significativos individualmente, pueden empeorar el rendimiento del sitio cuando se acumulan.<\/p><p>Los propietarios de sitios web pueden <a href=\"\/es\/tutoriales\/minificar-html\">minificar los archivos CSS, HTML y JS<\/a> manualmente o mediante plugins de WordPress. Algunos de los plugins de minificaci&oacute;n m&aacute;s populares son <a href=\"https:\/\/es.wordpress.org\/plugins\/fast-velocity-minify\/\" target=\"_blank\" rel=\"noreferrer noopener\">Fast Velocity Minify<\/a> y<a href=\"https:\/\/wordpress.org\/plugins\/wp-super-minify\/\" target=\"_blank\" rel=\"noopener\"> <\/a><a href=\"https:\/\/es.wordpress.org\/plugins\/wp-super-minify\/\" target=\"_blank\" rel=\"noreferrer noopener\">WordPress Super Minify<\/a>.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"947\" height=\"430\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/07\/Fast-velocity-minify.jpg\/public\" alt=\"P&aacute;gina de descarga del plugin Fast Velocity Minify\" class=\"wp-image-21214\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/07\/Fast-velocity-minify.jpg\/w=947,fit=scale-down 947w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/07\/Fast-velocity-minify.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/07\/Fast-velocity-minify.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/07\/Fast-velocity-minify.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 947px) 100vw, 947px\" \/><\/figure><\/div><p>Despu&eacute;s de hacerlo, no olvides comprobar el informe Core Web Vitals. Herramientas como PageSpeed Insights pueden darte otras oportunidades de minificaci&oacute;n en caso de que te hayas perdido alguna.<\/p><h3 class=\"wp-block-heading\" id=\"h-9-eliminar-el-javascript-y-el-css-que-bloquean-la-renderizacion\">9. Eliminar el JavaScript y el CSS que bloquean la renderizaci&oacute;n<\/h3><p><strong>Nivel de dificultad: <\/strong>f&aacute;cil<\/p><p><strong>Eficiencia: <\/strong>baja\/media\/alta<\/p><p>Los recursos que bloquean la renderizaci&oacute;n son partes de archivos que pueden ralentizar el proceso de carga de la p&aacute;gina. Normalmente se encuentran en archivos CSS y JS. Estos recursos pueden hacer que los elementos de la p&aacute;gina se carguen m&aacute;s tiempo al mismo tiempo, dando la impresi&oacute;n de un mal rendimiento del sitio web.<\/p><p>Por ello, eliminar el CSS y el JavaScript que bloquean la renderizaci&oacute;n deber&iacute;a ser una de sus prioridades para obtener un mejor informe de Core Web Vitals. Esto te permitir&aacute; implementar la<strong> <\/strong><a href=\"https:\/\/developer.mozilla.org\/es\/docs\/Web\/Progressive_web_apps\/Loading\" target=\"_blank\" rel=\"noreferrer noopener\">carga progresiva<\/a>,<strong> <\/strong>que puede ayudar a reducir la tasa de rebote.<\/p><p>Algunos plugins de WordPress pueden ayudarte a <a href=\"\/es\/tutoriales\/quitar-el-javascript-que-bloquea-la-visualizacion-de-contenid-wordpress\">eliminar los recursos que bloquean la renderizaci&oacute;n<\/a> de forma m&aacute;s eficiente. Entre ellos se encuentran <a href=\"https:\/\/es.wordpress.org\/plugins\/w3-total-cache\/\" target=\"_blank\" rel=\"noreferrer noopener\">W3 Total Cache<\/a>,<a href=\"https:\/\/wordpress.org\/plugins\/autoptimize\/\" target=\"_blank\" rel=\"noopener\"> <\/a><a href=\"https:\/\/es.wordpress.org\/plugins\/autoptimize\/\" target=\"_blank\" rel=\"noreferrer noopener\">Autoptimize<\/a>, y <a href=\"https:\/\/es.wordpress.org\/plugins\/speed-booster-pack\/\" target=\"_blank\" rel=\"noreferrer noopener\">Speed Booster Pack<\/a>.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"949\" height=\"427\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/07\/w3-total-cache.jpg\/public\" alt=\"P&aacute;gina de descarga del plugin W3 Total Cache\" class=\"wp-image-21219\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/07\/w3-total-cache.jpg\/w=949,fit=scale-down 949w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/07\/w3-total-cache.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/07\/w3-total-cache.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/07\/w3-total-cache.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 949px) 100vw, 949px\" \/><\/figure><\/div><p>Recuerda tambi&eacute;n consultar las sugerencias de tus herramientas de laboratorio sobre qu&eacute; archivos CSS o JS no cr&iacute;ticos debes eliminar.<\/p><h3 class=\"wp-block-heading\" id=\"h-10-comprimir-recursos-de-texto\">10. Comprimir recursos de texto<\/h3><p><strong>Nivel de dificultad: <\/strong>f&aacute;cil\/medio\/dif&iacute;cil<\/p><p><strong>Eficiencia: <\/strong>alta<\/p><p>Adem&aacute;s de la minificaci&oacute;n, la compresi&oacute;n puede ser un buen m&eacute;todo para optimizar recursos de texto como CSS, HTML y JavaScript. Esto puede hacer que el proceso de transferencia sea m&aacute;s r&aacute;pido debido al menor tama&ntilde;o del archivo, lo que resulta en una mejor puntuaci&oacute;n de LCP.<\/p><p>Uno de los m&eacute;todos m&aacute;s comunes de compresi&oacute;n de recursos de texto es GZIP, que entra en la categor&iacute;a de compresi&oacute;n sin p&eacute;rdidas. Esto significa que mantendr&aacute; toda la informaci&oacute;n dentro del archivo durante el proceso de compresi&oacute;n.<\/p><p>Los propietarios de sitios web pueden habilitar la compresi&oacute;n GZIP utilizando plugins de WordPress como WP Rocket o servicios gratuitos de compresi&oacute;n en l&iacute;nea como <a href=\"https:\/\/gzip.swimburger.net\/\" target=\"_blank\" rel=\"noreferrer noopener\">gzip.swimburger.net<\/a>. Ten en cuenta que algunas empresas de alojamiento web tambi&eacute;n habilitan GZIP por defecto.<\/p><figure class=\"wp-block-image size-large\"><a href=\"\/es\/hosting-web\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2023\/02\/ES-Web-hosting_in-text-banner.png\/public\" alt=\"\" class=\"wp-image-29291\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2023\/02\/ES-Web-hosting_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2023\/02\/ES-Web-hosting_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2023\/02\/ES-Web-hosting_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2023\/02\/ES-Web-hosting_in-text-banner.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2023\/02\/ES-Web-hosting_in-text-banner.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h3 class=\"wp-block-heading\" id=\"h-11-aplazar-el-analisis-de-javascript\">11. Aplazar el an&aacute;lisis de JavaScript<\/h3><p><strong>Nivel de dificultad: <\/strong>f&aacute;cil\/medio\/dif&iacute;cil<\/p><p><strong>Eficiencia: <\/strong>alta<\/p><p>Un navegador web suele cargar los c&oacute;digos de arriba a abajo, pero dar&aacute; prioridad a cualquier JavaScript antes de continuar. Esto puede ralentizar la velocidad de carga de la p&aacute;gina y empeorar la experiencia del usuario.<\/p><p>Aplazar el an&aacute;lisis de JavaScript significa ajustar la p&aacute;gina para retrasar el procesamiento de cualquier c&oacute;digo JavaScript no cr&iacute;tico en la p&aacute;gina. Con este m&eacute;todo, el navegador puede priorizar la carga del contenido real de la p&aacute;gina m&aacute;s r&aacute;pidamente y mantener la atenci&oacute;n de los visitantes.<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"947\" height=\"428\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/07\/speed-booster.jpg\/public\" alt=\"P&aacute;gina de descarga del plugin Speed Booster Pack\" class=\"wp-image-21222\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/07\/speed-booster.jpg\/w=947,fit=scale-down 947w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/07\/speed-booster.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/07\/speed-booster.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/07\/speed-booster.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 947px) 100vw, 947px\" \/><\/figure><p>Puedes aplazar el an&aacute;lisis de JavaScript en tu p&aacute;gina manualmente modificando el archivo <strong>function.php <\/strong>o utilizando herramientas como Speed Booster Pack o WP Rocket.<\/p><h2 class=\"wp-block-heading\" id=\"h-conclusion\">Conclusi&oacute;n<\/h2><p>El largest contentful paint (LCP) es una de las m&eacute;tricas de Core Web Vitals que representa la rapidez con la que una p&aacute;gina web puede cargar su mayor contenido. Es una m&eacute;trica importante centrada en el usuario que afecta a la velocidad de carga y a la experiencia general del usuario.<\/p><p>En este art&iacute;culo, hemos aprendido a medir la puntuaci&oacute;n LCP y 11 formas de mejorarlo, a saber:<\/p><ol class=\"wp-block-list\">\n<li>Utilizar la red de distribuci&oacute;n de contenidos<\/li>\n\n\n\n<li>Garantizar el tama&ntilde;o correcto de las im&aacute;genes<\/li>\n\n\n\n<li>Optimizar las im&aacute;genes<\/li>\n\n\n\n<li>Mejorar el tiempo de respuesta del servidor<\/li>\n\n\n\n<li>Elegir un proveedor de alojamiento web fiable<\/li>\n\n\n\n<li>Implementar el almacenamiento en cach&eacute;<\/li>\n\n\n\n<li>Solucionar los problemas de carga lenta<\/li>\n\n\n\n<li>Reducir el CSS, el HTML y el JavaScript<\/li>\n\n\n\n<li>Eliminar los recursos que bloquean la renderizaci&oacute;n<\/li>\n\n\n\n<li>Comprimir los recursos de texto<\/li>\n\n\n\n<li>Aplazar el an&aacute;lisis de JavaScript<\/li>\n<\/ol><p>Esperamos que este art&iacute;culo te haya ayudado a mejorar tu puntuaci&oacute;n del largest contentful paint. Si tienes alg&uacute;n consejo o pregunta adicional sobre este tema, deja un comentario a continuaci&oacute;n.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Entender las Core Web Vitals ayuda a garantizar que tu sitio web pueda ofrecer la mejor experiencia de usuario. Estas consisten en m&uacute;ltiples m&eacute;tricas que representan c&oacute;mo los usuarios interact&uacute;an con tu sitio web, una de las cuales es el largest contentful paint (LCP). En este art&iacute;culo, profundizaremos en el largest contentful paint viendo c&oacute;mo [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/es\/tutoriales\/largest-contentful-paint\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":317,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"Largest Contentful Paint: Qu\u00e9 es y c\u00f3mo mejorarlo","rank_math_description":"El LCP es una m\u00e9trica que muestra el tiempo que tarda en renderizarse el elemento m\u00e1s grande de la p\u00e1gina. Aprende 11 formas de mejorarlo.","rank_math_focus_keyword":"largest contentful paint","footnotes":""},"categories":[5701],"tags":[14310],"class_list":["post-21125","post","type-post","status-publish","format-standard","hentry","category-desarrollo-web","tag-largest-contentful-paint"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/largest-contentful-paint","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/largest-contentful-paint","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/largest-contentful-paint","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/largest-contentful-paint","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/largest-contentful-paint","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/largest-contentful-paint","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/largest-contentful-paint","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/largest-contentful-paint","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/largest-contentful-paint","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/largest-contentful-paint","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/largest-contentful-paint","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/largest-contentful-paint","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/largest-contentful-paint","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/largest-contentful-paint","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/largest-contentful-paint","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/largest-contentful-paint","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/posts\/21125","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/users\/317"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/comments?post=21125"}],"version-history":[{"count":60,"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/posts\/21125\/revisions"}],"predecessor-version":[{"id":45485,"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/posts\/21125\/revisions\/45485"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/media?parent=21125"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/categories?post=21125"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/tags?post=21125"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}