{"id":20538,"date":"2019-01-21T03:35:46","date_gmt":"2019-01-21T11:35:46","guid":{"rendered":"https:\/\/kinsta.com\/?p=5569"},"modified":"2023-08-25T11:02:30","modified_gmt":"2023-08-25T09:02:30","slug":"lazy-load-de-wordpress","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/lazy-load-de-wordpress\/","title":{"rendered":"\u00bfC\u00f3mo Implementar Carga Diferida (Lazy Loading) de WordPress en Im\u00e1genes y Videos?"},"content":{"rendered":"<p>La p\u00e1gina web promedio pesa alrededor de 3719 kB con im\u00e1genes y <a href=\"https:\/\/kinsta.com\/es\/blog\/hosting-video\/\">videos<\/a> ocupando casi el 78% del peso total, de acuerdo al <a href=\"http:\/\/httparchive.org\/interesting.php?a=All&#038;l=Mar%25201%25202018&#038;s=All\" target=\"_blank\" rel=\"noopener noreferrer\">HTTP Archive<\/a>. Esos son muchos bytes que el navegador de un visitante tiene que descargar y visualizar, y todas las tendencias apuntan a p\u00e1ginas a\u00fan m\u00e1s grandes y un incremento en el uso de im\u00e1genes para el futuro. WordPress est\u00e1 liderando la carga cuando se trata de compartir archivos multimedia e incorporando archivos multimedia en el dise\u00f1o del sitio. Con WordPress, es f\u00e1cil integrar im\u00e1genes y <a href=\"https:\/\/kinsta.com\/es\/blog\/integrar-incrustar-youtube-video-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">videos a las publicaciones, p\u00e1ginas<\/a>, e incluso en el fondo de un tema.<\/p>\n<p>Con el lanzamiento de <a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-5-5\/#native-image-lazyloading-in-wordpress-core\" target=\"_blank\" rel=\"noopener noreferrer\">WordPress 5.5 la lazy loading se convirti\u00f3 en parte<\/a> de la versi\u00f3n principal y hace muy f\u00e1cil la implementaci\u00f3n de esta t\u00e9cnica.<\/p>\n<p>Sin embargo, todos esos recursos pesados hacen que descargar una p\u00e1gina web, sea una experiencia costosa para los usuarios que tienen que esperar para descargar grandes archivos \u2013 incluyendo archivos que al inicio no son visibles \u2013 antes de ver la p\u00e1gina. Aqu\u00ed es donde entra en juego <strong>la carga diferida<\/strong> (Lazy Loading)<strong> de WordPress<\/strong>.<\/p>\n<ul>\n<li><a href=\"#what-is-lazy-loading\">\u00bfQu\u00e9 es carga diferida y c\u00f3mo funciona?<\/a><\/li>\n<li><a href=\"#wordpress-lazy-load\">Carga diferida de WordPress <\/a><\/li>\n<li><a href=\"#lazy-loading-plugins\">Mejorando la velocidad de carga de la p\u00e1gina con plugins de carga diferida<\/a><\/li>\n<li><a href=\"#lazy-loading-seo\">Impacto de carga diferida en el SEO<\/a><\/li>\n<\/ul>\n<h2 id=\"what-is-lazy-loading\">\u00bfQu\u00e9 Es Carga Diferida y C\u00f3mo Funciona?<\/h2>\n<p>Carga diferida es una t\u00e9cnica de optimizaci\u00f3n que carga contenido visible, pero retrasa la carga y la versi\u00f3n del contenido que aparece debajo del pliegue. Es el tipo de cosas que a <a href=\"https:\/\/developers.google.com\/speed\/docs\/insights\/PrioritizeVisibleContent\" target=\"_blank\" rel=\"noopener noreferrer\">Google le emociona<\/a>, y es una t\u00e9cnica que deber\u00eda considerar si sus publicaciones y p\u00e1ginas incluyen muchos videos e im\u00e1genes de alta resoluci\u00f3n.<\/p>\n<p>Carga diferida funciona as\u00ed:<\/p>\n<ul style=\"margin-left: 30px\">\n<li>El navegador construye la p\u00e1gina web DOM sin descargar im\u00e1genes y precargar videos.<\/li>\n<li>JavaScript es usado para determinar que im\u00e1genes descargar y que videos precargar, basado en el contenido que es inicialmente visible cuando la p\u00e1gina carga. Estas im\u00e1genes y videos son descargados y precargados como sea apropiado.<\/li>\n<li>El descargar y la versi\u00f3n de videos adicionales es retrasado hasta que el visitante del sitio baje a lo largo de la p\u00e1gina y un contenido adicional aparece.<\/li>\n<\/ul>\n<p>El resultado final es que las im\u00e1genes no son descargadas y los videos cargados hasta que realmente sean necesarios. Esto puede brindar un impulso significativo en el desempe\u00f1o para sitios que incluyan muchas im\u00e1genes de alta resoluci\u00f3n y videos.<\/p>\n\n<h2 id=\"wordpress-lazy-load\">Carga Diferida de WordPress<\/h2>\n<p>Como con muchos otros problemas de desempe\u00f1o de otros sitios, cuando se trata de carga diferida de WordPress, hay un plugin que puede utilizar para arreglar el problema. En realidad, hay <a href=\"https:\/\/wordpress.org\/plugins\/tags\/lazy-load\" target=\"_blank\" rel=\"noopener noreferrer\">muchos plugins gratuitos<\/a> disponibles en el directorio de WordPress que pueden ser usados para hacer carga diferida a im\u00e1genes y videos. Despu\u00e9s de considerar una docena de plugins y poniendo varios por sus ritmos, hemos identificado cinco plugins que producen una gran mejora en el desempe\u00f1o del sitio. Si usted est\u00e1 listo para implementar <strong>carga diferida<\/strong>, comience a considerar estas cinco opciones.<\/p>\n<h3>\u00bfLas im\u00e1genes y videos realmente hacen m\u00e1s lentos a los sitios web?<\/h3>\n<p>Antes que nada y antes de cargar im\u00e1genes a WordPress aseg\u00farese de que <a href=\"https:\/\/kinsta.com\/es\/blog\/optimizar-imagenes-para-la-web\/\" target=\"_blank\" rel=\"noopener noreferrer\">est\u00e9n optimizados<\/a>.<\/p>\n<p>Necesitamos una calificaci\u00f3n base para que podamos ver el impacto al agregar nuevas im\u00e1genes y videos. No tiene sentido arreglar un problema, si en realidad no hay un problema que haya que arreglar. Para probar las cosas, yo preparo una instalaci\u00f3n est\u00e1ndar de WordPress en una cuenta de hosting de Kinsta. <a href=\"https:\/\/wordpress.org\/themes\/twentysixteen\/\" target=\"_blank\" rel=\"noopener noreferrer\">TwentySixteen<\/a> es el tema activo y no se han implementado plugins de optimizaci\u00f3n ni t\u00e9cnicas como el almacenamiento en cach\u00e9.<\/p>\n<p>As\u00ed es como Pingdom website speed test califica el sitio antes de agregar cualquier imagen o video.<\/p>\n<figure style=\"width: 800px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"Speed test with no images or videos\" src=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2016\/07\/prueba-de-velocidad-sin-imagenes-o-videos.png\" alt=\"Prueba de velocidad sin im\u00e1genes o videos\" width=\"800\" height=\"233\"><figcaption class=\"wp-caption-text\">Prueba de velocidad sin im\u00e1genes o videos<\/figcaption><\/figure>\n<p>Como puede ver, la p\u00e1gina es muy liviana, pesa menos de 155 kb y carga en menos de medio segundo. Es dif\u00edcil encontrar una falla con estos resultados. \u00bfQu\u00e9 pasa si cargamos la p\u00e1gina con <a href=\"https:\/\/kinsta.com\/es\/blog\/tipos-de-archivos-de-imagen\/\">im\u00e1genes grandes<\/a> y videos de YouTube?<\/p>\n<figure style=\"width: 800px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"Speed test with no lazy loading plugin\" src=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2016\/07\/sin-carga-diferida.png\" alt=\"Prueba de velocidad sin el plugin de carga diferida\" width=\"800\" height=\"221\"><figcaption class=\"wp-caption-text\">Prueba de velocidad sin el plugin de carga diferida<\/figcaption><\/figure>\n<p>El tama\u00f1o de la p\u00e1gina subi\u00f3 a 1.7 MB y el tiempo de carga se ha triplicado, por tan s\u00f3lo debajo de los 1.3 segundos. TwentySixteen es un tema liviano y bien programado, as\u00ed que incluso con una media docena de im\u00e1genes y <a href=\"https:\/\/kinsta.com\/es\/blog\/integrar-incrustar-youtube-video-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">videos de YouTube<\/a>, el sitio sigue siendo bastante liviano y se carga s\u00faper r\u00e1pido. Sin embargo, podemos ver que, al agregar im\u00e1genes y videos, ha hecho mucho mayor el tama\u00f1o de la p\u00e1gina y a reducido su velocidad considerablemente.<\/p>\n<h2 id=\"lazy-loading-plugins\">Mejorando la Velocidad de la Carga de la P\u00e1gina con Clugins de Carga Diferida<\/h2>\n<p>Dos plugins que aceleran considerablemente la carga de esta p\u00e1gina son a3 Lazy Load y Lazy Load. Veamos como cada una se desempe\u00f1a. Tambi\u00e9n probamos muchos otros plugins, pero no mostraron una mejora considerable en el desempe\u00f1o del sitio. Cuando pruebe los plugins de carga diferida, aseg\u00farese de hacer una prueba antes y despu\u00e9s para asegurarse de que est\u00e1n produciendo los resultados que est\u00e1 buscando.<\/p>\n<h3>a3 Lazy Load<\/h3>\n<p><a href=\"https:\/\/wordpress.org\/plugins\/a3-lazy-load\/\" target=\"_blank\" rel=\"noopener noreferrer\">a3 Lazy Load<\/a> es otra opci\u00f3n popular de carga diferida para WordPress en el repositorio. Este plugin se encuentra activo en m\u00e1s de 50,000 sitios de WordPress y ha ganado una muy buena calificaci\u00f3n de 4.7 de 5, y ha recibido casi 40 rese\u00f1as de usuarios.<\/p>\n<figure style=\"width: 1348px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/wordpress.org\/plugins\/a3-lazy-load\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" title=\"A3 Lazy Load plugin\" src=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2016\/07\/plugin-de-a3-lazy-load.jpg\" alt=\"Plugin de a3 Lazy Load\" width=\"1348\" height=\"433\"><\/a><figcaption class=\"wp-caption-text\">Plugin de a3 Lazy Load<\/figcaption><\/figure>\n<p>Cuando se activa el plugin, este agrega una opci\u00f3n adicional <strong>Opciones &gt; a3 Lazy Load<\/strong>. Para prop\u00f3sitos de prueba, no mov\u00ed ni una de las opciones, con una excepci\u00f3n. Si usa la opci\u00f3n de <em>color de fondo de carga<\/em>, para que el color del marcador sea igual al color de la p\u00e1gina de fondo. Con este cambio, y las opciones base, el sitio tuvo un buen desempe\u00f1o.<\/p>\n<figure style=\"width: 800px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"Speed test with A3 Lazy Load plugin\" src=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2016\/07\/pingdom-con-a3.png\" alt=\"Prueba de velocidad con el plugin de A3 Lazy Load\" width=\"800\" height=\"236\"><figcaption class=\"wp-caption-text\">Prueba de velocidad con el plugin de A3 Lazy Load<\/figcaption><\/figure>\n<p>Estamos de vuelta a un tiempo de carga por debajo de medio segundo. Esto es destacable, considerando el n\u00famero de im\u00e1genes y videos incluidos en el sitio web.<\/p>\n<p><strong>Comparando los resultados de las pruebas<\/strong><\/p>\n<p>Sin duda alguna, usted notar\u00e1 que el tama\u00f1o de la p\u00e1gina y el n\u00famero de peticiones ha disminuido considerablemente, \u00bfQu\u00e9 est\u00e1 causando esta dram\u00e1tica diferencia? Pingdom brinda una imagen del tama\u00f1o del contenido, y una r\u00e1pida comparaci\u00f3n provee la respuesta. Primero, as\u00ed es como luce la imagen del tama\u00f1o del contenido con a3 lazy Load activado.<\/p>\n<figure style=\"width: 800px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"Content size with A3 Lazy Load plugin\" src=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2016\/07\/tamano-de-contenido-a3.png\" alt=\"Tama\u00f1o de contenido con el plugin de A3 Lazy Load\" width=\"800\" height=\"214\"><figcaption class=\"wp-caption-text\">Tama\u00f1o de contenido con el plugin de A3 Lazy Load<\/figcaption><\/figure>\n<p>La huella de la imagen es peque\u00f1a, con tan s\u00f3lo 150 kb. As\u00ed es como luce la imagen del contenido con un total de carga de 2.0 MB.<\/p>\n<figure style=\"width: 800px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"Content size with Lazy Load XT plugin\" src=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2016\/07\/tamano-del-contenido-xt.png\" alt=\"Tama\u00f1o del contenido con el plugin de Lazy Load XT\" width=\"800\" height=\"219\"><figcaption class=\"wp-caption-text\">Tama\u00f1o del contenido con el plugin de Lazy Load XT<\/figcaption><\/figure>\n<p>El script, HTML, CSS y otros tama\u00f1os de contenido son casi id\u00e9nticos. Sin embargo, el tama\u00f1o de la imagen es de 1.86 MB \u2013 b\u00e1sicamente el tama\u00f1o de la versi\u00f3n de resoluci\u00f3n completa es la primera imagen de la p\u00e1gina \u2013 en lugar de solo 150 kb. As\u00ed que, \u00bfQu\u00e9 est\u00e1 pasado?<\/p>\n<p>Como mencion\u00e9 anteriormente, WordPress autom\u00e1ticamente provee una variedad de tama\u00f1os de imagen y el navegador elige y visualiza la versi\u00f3n m\u00e1s peque\u00f1a posible basada en el tama\u00f1o en la que la imagen ser\u00e1 representada en la pantalla. A3 Lazy Load deja intacto el comportamiento predeterminado de WordPress y el resultado es que se entrega un archivo de imagen mucho m\u00e1s peque\u00f1o.<\/p>\n<h3>Lazy Load<\/h3>\n<p>La segunda opci\u00f3n es <a href=\"https:\/\/wordpress.org\/plugins\/rocket-lazy-load\/\" target=\"_blank\" rel=\"noopener noreferrer\">Lazy Load<\/a>, que es un plugin gratuito creado por el equipo de WP Rocket. Actualmente se encuentra activo en m\u00e1s de 10,000 instalaciones con una calificaci\u00f3n de 4 de 5. Si est\u00e1 buscando una opci\u00f3n simple de Lazy Load para WordPress, con una buena velocidad, esta es una buena opci\u00f3n.<\/p>\n<figure style=\"width: 1539px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/wordpress.org\/plugins\/rocket-lazy-load\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2016\/07\/plugin-de-lazy-load-por-wp-rocket.png\" alt=\"Plugin de Lazy Load por WP Rocket\" width=\"1539\" height=\"495\"><\/a><figcaption class=\"wp-caption-text\">Plugin de Lazy Load por WP Rocket<\/figcaption><\/figure>\n<p>El plugin <a href=\"https:\/\/kinsta.com\/es\/blog\/regenerar-las-miniaturas\/\" target=\"_blank\" rel=\"noopener noreferrer\">funciona con thumbnails<\/a>, todas las im\u00e1genes en el contenido de una publicaci\u00f3n o en el texto de un widget, avatars y smilies. La gran ventaja de este plugin es que <strong>no hay una biblioteca de <a href=\"https:\/\/kinsta.com\/es\/blog\/bibliotecas-javascript\/\">JavaScript<\/a> como la de jQuery que est\u00e9 siendo usada<\/strong> y el script pesa menos de 10 KB. No hay opciones para configurar, simplemente instale el plugin y lazy loading har\u00e1 el trabajo.<\/p>\n<h3>Native Lazy Loading<\/h3>\n<p>En los \u00faltimos a\u00f1os, ha habido un empuje para integrar la funcionalidad de lazy loading directamente en los navegadores web. En este momento, lazy loading nativa est\u00e1 disponible en los navegadores basados en Chromium como Chrome y Brave, as\u00ed como en Firefox.<\/p>\n<p>Lazy loading es excelente para el rendimiento del sitio porque no depende del c\u00f3digo Javascript en l\u00ednea o de scripts externos. Para agregar lazy loading a tu sitio, simplemente agrega un atributo <code>loading=lazy<\/code> a las im\u00e1genes y iframes que desees cargar.<\/p>\n<figure id=\"attachment_75944\" aria-describedby=\"caption-attachment-75944\" style=\"width: 1948px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/wordpress.org\/plugins\/native-lazyload\/\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-75944 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2016\/07\/google-native-lazyload.png\" alt=\"Plugin de Google Native Lazyload.\" width=\"1948\" height=\"912\"><\/a><figcaption id=\"caption-attachment-75944\" class=\"wp-caption-text\">Plugin de Google Native Lazyload.<\/figcaption><\/figure>\n<p>Google ha desarrollado el plugin <a href=\"https:\/\/wordpress.org\/plugins\/native-lazyload\/\">Native Lazyload<\/a> para facilitar este proceso. Despu\u00e9s de activar el plugin, WordPress insertar\u00e1 autom\u00e1ticamente el atributo de <code>loading<\/code> en tus etiquetas de <code>img<\/code> e <code>iframe<\/code>.<\/p>\n<h3 id=\"lazy-load-for-videos\">Lazy Load for Videos<\/h3>\n<p>Si s\u00f3lo le preocupa hacer lazy load a los videos, tambi\u00e9n le recomendamos checar el plugin de <a href=\"https:\/\/wordpress.org\/plugins\/lazy-load-for-videos\/\" target=\"_blank\" rel=\"noopener noreferrer\">Lazy Load for Videos<\/a>. Mientras que los plugins anteriores hacen esto tambi\u00e9n.<\/p>\n<figure style=\"width: 1539px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/wordpress.org\/plugins\/lazy-load-for-videos\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2016\/07\/plugin-de-lazy-load-for-videos.jpg\" alt=\"Plugin de Lazy Load for Videos\" width=\"1539\" height=\"495\"><\/a><figcaption class=\"wp-caption-text\">Plugin de Lazy Load for Videos<\/figcaption><\/figure>\n<h2 id=\"lazy-loading-seo\">Impacto de Lazy Loading en el SEO<\/h2>\n<p>Sin importar que plugin termine utilizando para el lazy loading en WordPress, es importante que no da\u00f1e su <a href=\"https:\/\/kinsta.com\/es\/blog\/que-quiere-decir-seo\/\">SEO<\/a>. Hay dos cosas que necesita chequear muy bien.<\/p>\n<ol>\n<li>Aseg\u00farese de que Google a\u00fan pueda buscar sus im\u00e1genes cargadas con lazy loading. F\u00e1cilmente puede chequear esto utilizando la herramienta de \u201cFetch as Google\u201d bajo la secci\u00f3n de crawl en el <a href=\"https:\/\/kinsta.com\/es\/blog\/google-search-console\/\" target=\"_blank\" rel=\"noopener noreferrer\">Google Search Console<\/a>. Si a\u00fan puede ver las im\u00e1genes en el c\u00f3digo fuente entonces es muy probable que todo est\u00e9 bien.<\/li>\n<li>Aseg\u00farese de que siga utilizando texto alternativo en sus im\u00e1genes ya que esto es importante para el posicionamiento de la b\u00fasqueda en Google image.<\/li>\n<\/ol>\n<p>https:\/\/twitter.com\/JohnMu\/status\/1036901608880254976<\/p>\n<h2>Resumen<\/h2>\n<p>Con el amplio soporte delazy loading nativa del navegador en el horizonte, recomendamos usar un plugin como Native Lazy Load de Google para establecer una l\u00ednea base de lazy loading para tu sitio.<\/p>\n<p>Con la compatibilidad con Chrome y Firefox, y la compatibilidad con Safari en el futuro, lazy loading nativa del navegador deber\u00eda ser todo lo que necesitas para con lazy loading tus im\u00e1genes y iframes. Dicho esto, si buscas una opci\u00f3n basada en JavaScript que tambi\u00e9n est\u00e9 dirigida a los navegadores m\u00e1s antiguos, a3 Lazy Load es una gran opci\u00f3n.<\/p>\n<p>Carga diferida es solo una t\u00e9cnica que puede usar para optimizar su sitio de WordPress. Sin embargo, tiene el potencial de tener un impacto profundo en la velocidad del sitio, si usted utiliza muchas im\u00e1genes y videos. A\u00fan as\u00ed, una vez que haya implementado lazy loading, hay varias <a href=\"https:\/\/kinsta.com\/es\/blog\/eliminar-bloqueadores-de-visualizacion\/\">t\u00e9cnicas adicionales<\/a> que podr\u00eda considerar e implementar para ofrecer el <a href=\"https:\/\/kinsta.com\/es\/aprender\/optimizacion-de-velocidad-del-sitio\/\" target=\"_blank\" rel=\"noopener noreferrer\">desempe\u00f1o m\u00e1s r\u00e1pido posible en su sitio web<\/a>.<\/p>\n<p>\u00bfNos falt\u00f3 alguna soluci\u00f3n de lazy load para WordPress? Si es as\u00ed, por favor comparta en la parte de abajo.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>La p\u00e1gina web promedio pesa alrededor de 3719 kB con im\u00e1genes y videos ocupando casi el 78% del peso total, de acuerdo al HTTP Archive. Esos &#8230;<\/p>\n","protected":false},"author":37,"featured_media":20555,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[408,172],"topic":[1332],"class_list":["post-20538","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-webperf","tag-wordpress","topic-optimizacion-de-video"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>\u00bfC\u00f3mo Implementar Carga Diferida (Lazy Loading) de WordPress en Im\u00e1genes y Videos?<\/title>\n<meta name=\"description\" content=\"Lea nuestro tutorial sobre c\u00f3mo implementar la carga diferida de WordPress en im\u00e1genes y videos. Esto puede ayudar a mejorar el rendimiento y ahorrar recursos.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/es\/blog\/lazy-load-de-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u00bfC\u00f3mo Implementar Carga Diferida (Lazy Loading) de WordPress en Im\u00e1genes y Videos?\" \/>\n<meta property=\"og:description\" content=\"Lea nuestro tutorial sobre c\u00f3mo implementar la carga diferida de WordPress en im\u00e1genes y videos. Esto puede ayudar a mejorar el rendimiento y ahorrar recursos.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/es\/blog\/lazy-load-de-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinsta.es\/\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/jonpenland\" \/>\n<meta property=\"article:published_time\" content=\"2019-01-21T11:35:46+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-25T09:02:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/01\/lazy-load-de-wordpress.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jon Penland\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Lea nuestro tutorial sobre c\u00f3mo implementar la carga diferida de WordPress en im\u00e1genes y videos. Esto puede ayudar a mejorar el rendimiento y ahorrar recursos.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/01\/lazy-load-de-wordpress.png\" \/>\n<meta name=\"twitter:creator\" content=\"@jonrichpen\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jon Penland\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/lazy-load-de-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/lazy-load-de-wordpress\/\"},\"author\":{\"name\":\"Jon Penland\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/dd665169ed69e4c363264e4f56c79d6a\"},\"headline\":\"\u00bfC\u00f3mo Implementar Carga Diferida (Lazy Loading) de WordPress en Im\u00e1genes y Videos?\",\"datePublished\":\"2019-01-21T11:35:46+00:00\",\"dateModified\":\"2023-08-25T09:02:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/lazy-load-de-wordpress\/\"},\"wordCount\":2021,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/lazy-load-de-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/01\/lazy-load-de-wordpress.png\",\"keywords\":[\"webperf\",\"WordPress\"],\"articleSection\":[\"Tutoriales de rendimienro de WordPress\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/lazy-load-de-wordpress\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/lazy-load-de-wordpress\/\",\"url\":\"https:\/\/kinsta.com\/es\/blog\/lazy-load-de-wordpress\/\",\"name\":\"\u00bfC\u00f3mo Implementar Carga Diferida (Lazy Loading) de WordPress en Im\u00e1genes y Videos?\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/lazy-load-de-wordpress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/lazy-load-de-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/01\/lazy-load-de-wordpress.png\",\"datePublished\":\"2019-01-21T11:35:46+00:00\",\"dateModified\":\"2023-08-25T09:02:30+00:00\",\"description\":\"Lea nuestro tutorial sobre c\u00f3mo implementar la carga diferida de WordPress en im\u00e1genes y videos. Esto puede ayudar a mejorar el rendimiento y ahorrar recursos.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/lazy-load-de-wordpress\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/lazy-load-de-wordpress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/lazy-load-de-wordpress\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/01\/lazy-load-de-wordpress.png\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/01\/lazy-load-de-wordpress.png\",\"width\":1460,\"height\":730,\"caption\":\"Carga diferida de WordPress\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/lazy-load-de-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Optimizaci\u00f3n de V\u00eddeo\",\"item\":\"https:\/\/kinsta.com\/es\/secciones\/optimizacion-de-video\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"\u00bfC\u00f3mo Implementar Carga Diferida (Lazy Loading) de WordPress en Im\u00e1genes y Videos?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/es\/#website\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluciones de alojamiento premium, r\u00e1pidas y seguras\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/es\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinsta.es\/\",\"https:\/\/x.com\/Kinsta_ES\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/dd665169ed69e4c363264e4f56c79d6a\",\"name\":\"Jon Penland\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/5a3b3098b301d11bc748055f89d57a0a?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/5a3b3098b301d11bc748055f89d57a0a?s=96&d=mm&r=g\",\"caption\":\"Jon Penland\"},\"description\":\"Jon is the Chief Operating Officer at Kinsta and is involved with Kinsta's sales, customer service, and technical support teams on a daily basis. Jon's a family man. So when he isn't feverishly tapping the keys of his laptop he's usually helping one of his kids fix a bike or setting up Netflix for an impatient preschooler.\",\"sameAs\":[\"http:\/\/www.jonpenland.com\",\"https:\/\/www.facebook.com\/jonpenland\",\"https:\/\/www.linkedin.com\/in\/jonpenland\",\"https:\/\/x.com\/jonrichpen\"],\"url\":\"https:\/\/kinsta.com\/es\/blog\/author\/jonpenland\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"\u00bfC\u00f3mo Implementar Carga Diferida (Lazy Loading) de WordPress en Im\u00e1genes y Videos?","description":"Lea nuestro tutorial sobre c\u00f3mo implementar la carga diferida de WordPress en im\u00e1genes y videos. Esto puede ayudar a mejorar el rendimiento y ahorrar recursos.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/es\/blog\/lazy-load-de-wordpress\/","og_locale":"es_ES","og_type":"article","og_title":"\u00bfC\u00f3mo Implementar Carga Diferida (Lazy Loading) de WordPress en Im\u00e1genes y Videos?","og_description":"Lea nuestro tutorial sobre c\u00f3mo implementar la carga diferida de WordPress en im\u00e1genes y videos. Esto puede ayudar a mejorar el rendimiento y ahorrar recursos.","og_url":"https:\/\/kinsta.com\/es\/blog\/lazy-load-de-wordpress\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinsta.es\/","article_author":"https:\/\/www.facebook.com\/jonpenland","article_published_time":"2019-01-21T11:35:46+00:00","article_modified_time":"2023-08-25T09:02:30+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/01\/lazy-load-de-wordpress.png","type":"image\/png"}],"author":"Jon Penland","twitter_card":"summary_large_image","twitter_description":"Lea nuestro tutorial sobre c\u00f3mo implementar la carga diferida de WordPress en im\u00e1genes y videos. Esto puede ayudar a mejorar el rendimiento y ahorrar recursos.","twitter_image":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/01\/lazy-load-de-wordpress.png","twitter_creator":"@jonrichpen","twitter_site":"@Kinsta_ES","twitter_misc":{"Escrito por":"Jon Penland","Tiempo de lectura":"10 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/es\/blog\/lazy-load-de-wordpress\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/blog\/lazy-load-de-wordpress\/"},"author":{"name":"Jon Penland","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/dd665169ed69e4c363264e4f56c79d6a"},"headline":"\u00bfC\u00f3mo Implementar Carga Diferida (Lazy Loading) de WordPress en Im\u00e1genes y Videos?","datePublished":"2019-01-21T11:35:46+00:00","dateModified":"2023-08-25T09:02:30+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/lazy-load-de-wordpress\/"},"wordCount":2021,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/lazy-load-de-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/01\/lazy-load-de-wordpress.png","keywords":["webperf","WordPress"],"articleSection":["Tutoriales de rendimienro de WordPress"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/es\/blog\/lazy-load-de-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/es\/blog\/lazy-load-de-wordpress\/","url":"https:\/\/kinsta.com\/es\/blog\/lazy-load-de-wordpress\/","name":"\u00bfC\u00f3mo Implementar Carga Diferida (Lazy Loading) de WordPress en Im\u00e1genes y Videos?","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/lazy-load-de-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/lazy-load-de-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/01\/lazy-load-de-wordpress.png","datePublished":"2019-01-21T11:35:46+00:00","dateModified":"2023-08-25T09:02:30+00:00","description":"Lea nuestro tutorial sobre c\u00f3mo implementar la carga diferida de WordPress en im\u00e1genes y videos. Esto puede ayudar a mejorar el rendimiento y ahorrar recursos.","breadcrumb":{"@id":"https:\/\/kinsta.com\/es\/blog\/lazy-load-de-wordpress\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/es\/blog\/lazy-load-de-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/blog\/lazy-load-de-wordpress\/#primaryimage","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/01\/lazy-load-de-wordpress.png","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/01\/lazy-load-de-wordpress.png","width":1460,"height":730,"caption":"Carga diferida de WordPress"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/es\/blog\/lazy-load-de-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/es\/"},{"@type":"ListItem","position":2,"name":"Optimizaci\u00f3n de V\u00eddeo","item":"https:\/\/kinsta.com\/es\/secciones\/optimizacion-de-video\/"},{"@type":"ListItem","position":3,"name":"\u00bfC\u00f3mo Implementar Carga Diferida (Lazy Loading) de WordPress en Im\u00e1genes y Videos?"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/es\/#website","url":"https:\/\/kinsta.com\/es\/","name":"Kinsta\u00ae","description":"Soluciones de alojamiento premium, r\u00e1pidas y seguras","publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/es\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinsta.es\/","https:\/\/x.com\/Kinsta_ES","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/dd665169ed69e4c363264e4f56c79d6a","name":"Jon Penland","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/5a3b3098b301d11bc748055f89d57a0a?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5a3b3098b301d11bc748055f89d57a0a?s=96&d=mm&r=g","caption":"Jon Penland"},"description":"Jon is the Chief Operating Officer at Kinsta and is involved with Kinsta's sales, customer service, and technical support teams on a daily basis. Jon's a family man. So when he isn't feverishly tapping the keys of his laptop he's usually helping one of his kids fix a bike or setting up Netflix for an impatient preschooler.","sameAs":["http:\/\/www.jonpenland.com","https:\/\/www.facebook.com\/jonpenland","https:\/\/www.linkedin.com\/in\/jonpenland","https:\/\/x.com\/jonrichpen"],"url":"https:\/\/kinsta.com\/es\/blog\/author\/jonpenland\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/20538","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/users\/37"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/comments?post=20538"}],"version-history":[{"count":15,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/20538\/revisions"}],"predecessor-version":[{"id":41826,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/20538\/revisions\/41826"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/20538\/translations\/en"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/20538\/translations\/pt"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/20538\/translations\/es"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/20538\/translations\/it"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/20538\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/20538\/translations\/de"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/20538\/translations\/nl"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/20538\/translations\/se"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/20538\/translations\/jp"},{"href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/20538\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media\/20555"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media?parent=20538"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/tags?post=20538"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/topic?post=20538"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}