{"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":"\/co\/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\/40\/2022\/12\/eBook-Speed-Up-your-website-ES.png\/w=1024,h=1024,fit=scale-down\" alt=\"\" class=\"wp-image-25983\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2022\/12\/eBook-Speed-Up-your-website-ES.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2022\/12\/eBook-Speed-Up-your-website-ES.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2022\/12\/eBook-Speed-Up-your-website-ES.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2022\/12\/eBook-Speed-Up-your-website-ES.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/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\"><div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                   &iquest;Qu&eacute; es el Largest Contentful Paint?\n                <\/p>\n            <\/div>\n            <p class=\"protip__content\"> 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><\/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\/40\/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\/40\/2022\/07\/pagespeed.jpg\/w=833,fit=scale-down 833w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2022\/07\/pagespeed.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2022\/07\/pagespeed.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2022\/07\/pagespeed.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 833px) 100vw, 833px\" \/><\/figure>\n<\/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\/40\/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\/40\/2022\/07\/pagespeed-rendimiento.jpg\/w=541,fit=scale-down 541w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2022\/07\/pagespeed-rendimiento.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2022\/07\/pagespeed-rendimiento.jpg\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 541px) 100vw, 541px\" \/><\/figure>\n<\/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\/40\/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\/40\/2022\/07\/pagespeed-metricas.jpg\/w=569,fit=scale-down 569w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2022\/07\/pagespeed-metricas.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2022\/07\/pagespeed-metricas.jpg\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 569px) 100vw, 569px\" \/><\/figure>\n<\/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\/40\/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\/40\/2022\/07\/pagespeed-oportunidades-diagnostico.jpg\/w=555,fit=scale-down 555w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2022\/07\/pagespeed-oportunidades-diagnostico.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2022\/07\/pagespeed-oportunidades-diagnostico.jpg\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 555px) 100vw, 555px\" \/><\/figure>\n<\/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\/40\/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\/40\/2022\/07\/LCP-Hostinger.jpg\/w=999,fit=scale-down 999w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2022\/07\/LCP-Hostinger.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2022\/07\/LCP-Hostinger.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2022\/07\/LCP-Hostinger.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 999px) 100vw, 999px\" \/><\/figure>\n<\/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=\"\/co\/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=\"\/co\/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\/40\/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\/40\/2022\/07\/CDN-Cloudflare.jpg\/w=991,fit=scale-down 991w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2022\/07\/CDN-Cloudflare.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2022\/07\/CDN-Cloudflare.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2022\/07\/CDN-Cloudflare.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 991px) 100vw, 991px\" \/><\/figure>\n<\/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=\"\/co\/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=\"\/co\/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=\"\/co\/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=\"\/co\/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=\"\/co\/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\/40\/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\/40\/2022\/07\/Optimole.jpg\/w=947,fit=scale-down 947w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2022\/07\/Optimole.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2022\/07\/Optimole.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2022\/07\/Optimole.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 947px) 100vw, 947px\" \/><\/figure>\n<\/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=\"\/co\/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=\"\/co\/tutoriales\/seo-en-wordpress\/\">mejorar tu SEO<\/a>.<\/p><p>\n\n\n\n        <div class=\"protip\">\n            <div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                    Lectura recomendada                <\/p>\n            <\/div>\n            <p class=\"protip__content\"><\/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=\"\/co\/tutoriales\/mejorar-velocidad-wordpress\/\">c&oacute;mo acelerar WordPress<\/a> para saber m&aacute;s.<\/p>\n                    <\/div>\n        \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=\"\/co\/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=\"\/co\/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=\"\/co\/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\/40\/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\/40\/2022\/07\/LiteSpeed.jpg\/w=950,fit=scale-down 950w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2022\/07\/LiteSpeed.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2022\/07\/LiteSpeed.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2022\/07\/LiteSpeed.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 950px) 100vw, 950px\" \/><\/figure>\n<\/div><p>Una de las herramientas m&aacute;s populares para habilitar el almacenamiento en cach&eacute; de sitios web es <a href=\"\/co\/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=\"\/co\/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\/40\/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\/40\/2022\/07\/Fast-velocity-minify.jpg\/w=947,fit=scale-down 947w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2022\/07\/Fast-velocity-minify.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2022\/07\/Fast-velocity-minify.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2022\/07\/Fast-velocity-minify.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 947px) 100vw, 947px\" \/><\/figure>\n<\/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=\"\/co\/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\/40\/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\/40\/2022\/07\/w3-total-cache.jpg\/w=949,fit=scale-down 949w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2022\/07\/w3-total-cache.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2022\/07\/w3-total-cache.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2022\/07\/w3-total-cache.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 949px) 100vw, 949px\" \/><\/figure>\n<\/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=\"\/co\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/02\/ES-Web-hosting_in-text-banner.png\/w=1024,h=1024,fit=scale-down\" alt=\"\" class=\"wp-image-29291\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/02\/ES-Web-hosting_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/02\/ES-Web-hosting_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/02\/ES-Web-hosting_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2023\/02\/ES-Web-hosting_in-text-banner.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/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\/40\/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\/40\/2022\/07\/speed-booster.jpg\/w=947,fit=scale-down 947w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2022\/07\/speed-booster.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/2022\/07\/speed-booster.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/40\/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=\"\/co\/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":1},{"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-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/largest-contentful-paint\/","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/largest-contentful-paint\/","default":0},{"locale":"en-GB","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/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},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/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":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/largest-contentful-paint\/","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/posts\/21125","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/users\/317"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/comments?post=21125"}],"version-history":[{"count":60,"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/posts\/21125\/revisions"}],"predecessor-version":[{"id":45485,"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/posts\/21125\/revisions\/45485"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/media?parent=21125"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/categories?post=21125"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/tags?post=21125"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}