{"id":81559,"date":"2022-07-26T19:37:58","date_gmt":"2022-07-26T17:37:58","guid":{"rendered":"https:\/\/rmarketingdigital.com\/development\/es-hora-de-cargar-de-forma-diferida-iframes-fuera-de-la-pantalla\/"},"modified":"2020-09-16T15:05:33","modified_gmt":"2020-09-16T18:05:33","slug":"es-hora-de-cargar-de-forma-diferida-iframes-fuera-de-la-pantalla","status":"publish","type":"post","link":"https:\/\/rmarketingdigital.com\/de\/dev\/es-hora-de-cargar-de-forma-diferida-iframes-fuera-de-la-pantalla\/","title":{"rendered":"Zeit zum faulen Laden von Iframes au\u00dferhalb des Bildschirms!"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Contenidos<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/es-hora-de-cargar-de-forma-diferida-iframes-fuera-de-la-pantalla\/#%C2%BFPor-que-deberiamos-cargar-iframes-de-forma-diferida\" >\u00bfPor qu\u00e9 deber\u00edamos cargar iframes de forma diferida?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/es-hora-de-cargar-de-forma-diferida-iframes-fuera-de-la-pantalla\/#%C2%BFComo-funciona-la-carga-diferida-nativa-para-iframes\" >\u00bfC\u00f3mo funciona la carga diferida nativa para iframes?<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/es-hora-de-cargar-de-forma-diferida-iframes-fuera-de-la-pantalla\/#Comportamiento-de-carga-diferida-especifico-de-iframe\" >Comportamiento de carga diferida espec\u00edfico de iframe<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/es-hora-de-cargar-de-forma-diferida-iframes-fuera-de-la-pantalla\/#%C2%BFQue-impacto-podriamos-ver-en-las-incrustaciones-de-iframe-populares-de-carga-diferida\" >\u00bfQu\u00e9 impacto podr\u00edamos ver en las incrustaciones de iframe populares de carga diferida?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/es-hora-de-cargar-de-forma-diferida-iframes-fuera-de-la-pantalla\/#Estudio-de-caso-carga-diferida-nativa-de-los-complementos-sociales-de-Facebook\" >Estudio de caso: carga diferida nativa de los complementos sociales de Facebook<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/es-hora-de-cargar-de-forma-diferida-iframes-fuera-de-la-pantalla\/#Espera-%C2%BFno-pueden-los-navegadores-simplemente-cargar-automaticamente-iframes-fuera-de-la-pantalla-de-forma-diferida\" >Espera, \u00bfno pueden los navegadores simplemente cargar autom\u00e1ticamente iframes fuera de la pantalla de forma diferida?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/es-hora-de-cargar-de-forma-diferida-iframes-fuera-de-la-pantalla\/#%C2%BFPuedo-cargar-iframes-de-forma-diferida-en-varios-navegadores-si\" >\u00bfPuedo cargar iframes de forma diferida en varios navegadores?  si<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/es-hora-de-cargar-de-forma-diferida-iframes-fuera-de-la-pantalla\/#Una-opcion-para-los-usuarios-de-WordPress\" >Una opci\u00f3n para los usuarios de WordPress<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/es-hora-de-cargar-de-forma-diferida-iframes-fuera-de-la-pantalla\/#Conclusion\" >Conclusi\u00f3n<\/a><\/li><\/ul><\/nav><\/div>\n<p><\/p>\n<div>\n<header class=\"w-article-header\">\n<p class=\"w-article-header__subhead w-mb--non\">\n<p>          La carga diferida nativa a nivel del navegador para iframes est\u00e1 aqu\u00ed\n        <\/p>\n<p>\n          <time>24 de julio de 2020<\/time><\/p>\n<\/header>\n<p>La carga diferida nativa para im\u00e1genes aterrizadas en Chrome 76 a trav\u00e9s de <code>loading<\/code> atributo y luego lleg\u00f3 a Firefox.  Estamos felices de compartir eso<br \/>\n<strong>carga diferida nativa para iframes<\/strong> es ahora<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/whatwg\/html\/pull\/5579\">estandarizado<\/a> y tambi\u00e9n es compatible con los navegadores Chrome y Chromium.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>iframe<\/span> <span class=\"token attr-name\">src<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>https:\/\/example.com<span class=\"token punctuation\">\"<\/span><\/span><br><mark class=\"highlight-line highlight-line-active\">        <span class=\"token attr-name\">loading<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>lazy<span class=\"token punctuation\">\"<\/span><\/span><\/mark><br><span class=\"highlight-line\">        <span class=\"token attr-name\">width<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>600<span class=\"token punctuation\">\"<\/span><\/span><\/span><br><span class=\"token attr-name\">height<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>400<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>iframe<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>La carga diferida nativa de iframes difiere la carga de iframes fuera de la pantalla hasta que el usuario se desplaza cerca de ellos.  Esto ahorra datos, acelera la carga de otras partes de la p\u00e1gina y reduce el uso de memoria.<\/p>\n<p>Esta <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/lazy-load.netlify.app\/iframes\/\">manifestaci\u00f3n<\/a> de <code>&lt;iframe loading=lazy&gt;<\/code><br \/>\nmuestra incrustaciones de video de carga diferida:<\/p>\n<figure class=\"w-figure w-figure--fullbleed\">\n  <video controls=\"\" autoplay=\"\" loop=\"\" muted=\"\" class=\"w-screenshot\"><source src=\"https:\/\/storage.googleapis.com\/web-dev-assets\/iframe-lazy-loading\/lazyload-iframes-compressed.webm\" type=\"video\/webm\"><source src=\"https:\/\/storage.googleapis.com\/web-dev-assets\/iframe-lazy-loading\/lazyload-iframes-compressed.mp4\" type=\"video\/mp4\"><\/source><\/source><\/video><br \/>\n<\/figure>\n<h3 id=\"why-should-we-lazy-load-iframes\"><span class=\"ez-toc-section\" id=\"%C2%BFPor-que-deberiamos-cargar-iframes-de-forma-diferida\"><\/span>\u00bfPor qu\u00e9 deber\u00edamos cargar iframes de forma diferida? <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Las incrustaciones de terceros cubren una amplia gama de casos de uso, desde reproductores de video hasta publicaciones en redes sociales y anuncios.  A menudo, este contenido no es inmediatamente visible en la ventana gr\u00e1fica del usuario.  M\u00e1s bien, solo se ve una vez que se desplazan hacia abajo en la p\u00e1gina.  A pesar de esto, los usuarios pagan el costo de descargar datos y JavaScript costoso por cada marco, incluso si no se desplazan hasta \u00e9l.<\/p>\n<figure class=\"w-figure\">\n<img alt='iframe-lazyloading-6365905' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/iframe-lazyloading-6365905.png' alt=\"Ahorro de datos al usar la carga diferida de iframe para un iframe.  La carga ansiosa extrae 3 MB en este ejemplo, mientras que la carga diferida no extrae este c\u00f3digo hasta que el usuario se desplaza m\u00e1s cerca del iframe.\"><br \/>\n<\/figure>\n<p>Basado en la investigaci\u00f3n de Chrome sobre <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/blog.chromium.org\/2019\/10\/automatically-lazy-loading-offscreen.html\">iframes fuera de pantalla de carga diferida autom\u00e1ticamente para usuarios de Data Saver<\/a>, los iframes de carga diferida podr\u00edan generar un ahorro medio de datos del 2-3%, reducciones de la primera pintura con contenido del 1-2% en la mediana y mejoras del 2% en el retardo de la primera entrada (FID) en el percentil 95.<\/p>\n<h3 id=\"how-does-native-lazy-loading-for-iframes-work\"><span class=\"ez-toc-section\" id=\"%C2%BFComo-funciona-la-carga-diferida-nativa-para-iframes\"><\/span>\u00bfC\u00f3mo funciona la carga diferida nativa para iframes? <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>los <code>loading<\/code> El atributo permite que un navegador difiera la carga de iframes e im\u00e1genes fuera de la pantalla hasta que los usuarios se desplacen cerca de ellos. <code>loading<\/code> admite tres valores:<\/p>\n<ul>\n<li><code>lazy<\/code>: es un buen candidato para la carga diferida.<\/li>\n<li><code>eager<\/code>: no es un buen candidato para la carga diferida.  Cargue de inmediato.<\/li>\n<li><code>auto<\/code>: el navegador determinar\u00e1 si se carga de forma diferida.<\/li>\n<\/ul>\n<div class=\"w-aside w-aside--note\">\n<p><code>auto<\/code>  es actualmente un valor no est\u00e1ndar, pero es el predeterminado en Chrome en la actualidad.  Chrome tiene la intenci\u00f3n de llevar una propuesta de este valor a la mesa de est\u00e1ndares.<\/p>\n<\/div>\n<p>Utilizando la <code>loading<\/code> atributo en iframes funciona de la siguiente manera:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-html\"><code class=\"language-html\"><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>iframe<\/span> <span class=\"token attr-name\">src<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>https:\/\/example.com<span class=\"token punctuation\">\"<\/span><\/span> <br><span class=\"token attr-name\">loading<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>lazy<span class=\"token punctuation\">\"<\/span><\/span> <br><span class=\"token attr-name\">width<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>600<span class=\"token punctuation\">\"<\/span><\/span> <br><span class=\"token attr-name\">height<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>400<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>iframe<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><p><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>iframe<\/span> <span class=\"token attr-name\">src<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>https:\/\/example.com<span class=\"token punctuation\">\"<\/span><\/span> <br><span class=\"token attr-name\">width<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>600<span class=\"token punctuation\">\"<\/span><\/span> <br><span class=\"token attr-name\">height<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>400<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>iframe<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><\/p><p><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>iframe<\/span> <span class=\"token attr-name\">src<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>https:\/\/example.com<span class=\"token punctuation\">\"<\/span><\/span> <br><span class=\"token attr-name\">loading<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>eager<span class=\"token punctuation\">\"<\/span><\/span> <br><span class=\"token attr-name\">width<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>600<span class=\"token punctuation\">\"<\/span><\/span> <br><span class=\"token attr-name\">height<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>400<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>iframe<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><\/p><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>No especificar el atributo en absoluto tendr\u00e1 el mismo impacto que cargar expl\u00edcitamente el recurso con entusiasmo, excepto por <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/blog.chromium.org\/2019\/04\/data-saver-is-now-lite-mode.html\">El modo ligero<\/a><br \/>\nusuarios, donde Chrome utilizar\u00e1 el <code>auto<\/code> value para decidir si debe cargarse de forma diferida.<\/p>\n<p>Si lo necesitas <em>dinamicamente<\/em> crear iframes a trav\u00e9s de JavaScript, configurando<br \/>\n<code>iframe.loading = 'lazy'<\/code> en el elemento tambi\u00e9n es<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/bugs.chromium.org\/p\/chromium\/issues\/detail?id=993273\">soportado<\/a>:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"highlight-line\"><span class=\"token keyword\">var<\/span> iframe <span class=\"token operator\">=<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">createElement<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'iframe'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\">iframe<span class=\"token punctuation\">.<\/span>src <span class=\"token operator\">=<\/span> <span class=\"token string\">'https:\/\/example.com'<\/span><span class=\"token punctuation\">;<\/span><\/span><br><mark class=\"highlight-line highlight-line-active\">iframe<span class=\"token punctuation\">.<\/span>loading <span class=\"token operator\">=<\/span> <span class=\"token string\">'lazy'<\/span><span class=\"token punctuation\">;<\/span><\/mark><br><span class=\"highlight-line\">document<span class=\"token punctuation\">.<\/span>body<span class=\"token punctuation\">.<\/span><span class=\"token function\">appendChild<\/span><span class=\"token punctuation\">(<\/span>iframe<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h4 id=\"iframe-specific-lazy-loading-behavior\"><span class=\"ez-toc-section\" id=\"Comportamiento-de-carga-diferida-especifico-de-iframe\"><\/span>Comportamiento de carga diferida espec\u00edfico de iframe <span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>El atributo de carga afecta a los iframes de manera diferente a las im\u00e1genes, dependiendo de si el iframe est\u00e1 oculto.  (Los iframes ocultos se utilizan a menudo con fines anal\u00edticos o de comunicaci\u00f3n). Chrome utiliza los siguientes criterios para determinar si un iframe est\u00e1 oculto:<\/p>\n<ul>\n<li>El ancho y la altura del iframe son <code>4px<\/code> o menor.<\/li>\n<li><code>display: none<\/code>  o <code>visibility: hidden<\/code> Est\u00e1 aplicado.<\/li>\n<li>El iframe se coloca fuera de la pantalla mediante un posicionamiento X o Y negativo.<\/li>\n<li>Este criterio se aplica tanto a <code>loading=lazy<\/code> y <code>loading=auto<\/code>.<\/li>\n<\/ul>\n<p>Si un iframe cumple alguna de estas condiciones, Chrome lo considera oculto y no lo cargar\u00e1 de forma diferida en la mayor\u00eda de los casos.  Los iframes que no est\u00e1n ocultos solo se cargar\u00e1n cuando est\u00e9n dentro del umbral de distancia de carga.  Chrome muestra un marcador de posici\u00f3n para los iframes cargados de forma diferida que a\u00fan se est\u00e1n recuperando.<\/p>\n<h3 id=\"what-impact-might-we-see-from-lazy-loading-popular-iframe-embeds\"><span class=\"ez-toc-section\" id=\"%C2%BFQue-impacto-podriamos-ver-en-las-incrustaciones-de-iframe-populares-de-carga-diferida\"><\/span>\u00bfQu\u00e9 impacto podr\u00edamos ver en las incrustaciones de iframe populares de carga diferida? <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u00bfQu\u00e9 pasar\u00eda si pudi\u00e9ramos cambiar la web en general para que los iframes fuera de pantalla de carga diferida fueran los predeterminados?  Se ver\u00eda un poco as\u00ed:<\/p>\n<p>Incrustaciones de videos de YouTube de carga diferida (ahorra ~ 500 KB en la carga de la p\u00e1gina inicial):<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>iframe<\/span> <span class=\"token attr-name\">src<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>https:\/\/www.youtube.com\/embed\/YJGCZCaIZkQ<span class=\"token punctuation\">\"<\/span><\/span><br><mark class=\"highlight-line highlight-line-active\">        <span class=\"token attr-name\">loading<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>lazy<span class=\"token punctuation\">\"<\/span><\/span> <\/mark><br><span class=\"highlight-line\">        <span class=\"token attr-name\">width<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>560<span class=\"token punctuation\">\"<\/span><\/span> <\/span><br><span class=\"highlight-line\">        <span class=\"token attr-name\">height<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>315<span class=\"token punctuation\">\"<\/span><\/span> <\/span><br><span class=\"highlight-line\">        <span class=\"token attr-name\">frameborder<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>0<span class=\"token punctuation\">\"<\/span><\/span> <\/span><br><span class=\"token attr-name\">allow<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>accelerometer; autoplay; <br><span class=\"highlight-line\">        encrypted-media; gyroscope; <\/span><br>picture-in-picture<span class=\"token punctuation\">\"<\/span><\/span> <br><span class=\"token attr-name\">allowfullscreen<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>iframe<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p><strong>An\u00e9cdota:<\/strong> cuando cambiamos a incrustaciones de YouTube de carga diferida para Chrome.com, ahorramos 10 segundos de la rapidez con que nuestras p\u00e1ginas podr\u00edan ser interactivas en dispositivos m\u00f3viles.  Abr\u00ed un error interno con YouTube para discutir c\u00f3mo agregar<br \/>\n<code>loading=lazy<\/code> a su c\u00f3digo de inserci\u00f3n.<\/p>\n<figure class=\"w-figure\">\n<img alt='iframe-chromecom-3805627' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/iframe-chromecom-3805627.png' alt=\"Chrome.com logr\u00f3 una reducci\u00f3n de 10 segundos en el tiempo para interactuar mediante la carga diferida de iframes fuera de la pantalla para su video incrustado de YouTube\"><br \/>\n<\/figure>\n<div class=\"w-aside w-aside--note\">\n<p>Si est\u00e1 buscando formas m\u00e1s eficientes de cargar incrustaciones de YouTube, es posible que le interese la <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/paulirish\/lite-youtube-embed\">Componente de YouTube lite<\/a>.<\/p>\n<\/div>\n<p><strong>Inserciones de Instagram de carga diferida (ahorra> 100 KB en gzip en la carga inicial):<\/strong><\/p>\n<p>Las incrustaciones de Instagram proporcionan un bloque de marcado y un script, que inyecta un iframe en su p\u00e1gina.  La carga diferida de este iframe evita tener que cargar todo el script necesario para la inserci\u00f3n.  Dado que tales incrustaciones a menudo se muestran debajo de la ventana gr\u00e1fica en la mayor\u00eda de los art\u00edculos, esto parece un candidato razonable para la carga diferida nativa de su iframe.<\/p>\n<p><strong>Incrustaciones de Spotify de carga diferida (ahorra 514 KB en la carga inicial):<\/strong><\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>iframe<\/span> <span class=\"token attr-name\">src<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>https:\/\/open.spotify.com\/embed\/album\/1DFixLWuPkv3KT3TnV35m3<span class=\"token punctuation\">\"<\/span><\/span> <br><span class=\"token attr-name\">loading<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>lazy<span class=\"token punctuation\">\"<\/span><\/span><br><span class=\"token attr-name\">width<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>300<span class=\"token punctuation\">\"<\/span><\/span> <br><span class=\"token attr-name\">height<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>380<span class=\"token punctuation\">\"<\/span><\/span> <br><span class=\"token attr-name\">frameborder<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>0<span class=\"token punctuation\">\"<\/span><\/span> <br><span class=\"token attr-name\">allowtransparency<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>true<span class=\"token punctuation\">\"<\/span><\/span> <br><span class=\"token attr-name\">allow<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>encrypted-media<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>iframe<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Aunque las incrustaciones anteriores ilustran los beneficios potenciales de los iframes de carga diferida para el contenido de medios, existe la posibilidad de ver estos beneficios tambi\u00e9n en los anuncios.<\/p>\n<h3 id=\"case-study:-natively-lazy-loading-the-facebook's-social-plugins\"><span class=\"ez-toc-section\" id=\"Estudio-de-caso-carga-diferida-nativa-de-los-complementos-sociales-de-Facebook\"><\/span>Estudio de caso: carga diferida nativa de los complementos sociales de Facebook <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>De Facebook <em>complementos sociales<\/em> Permitir a los desarrolladores incrustar contenido de Facebook en sus p\u00e1ginas web.  Se ofrecen varios de estos complementos, como publicaciones incrustadas, fotos, videos, comentarios &#8230; El m\u00e1s popular es el <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.facebook.com\/docs\/plugins\/like-button\/\">Como complemento<\/a> &#8211; un bot\u00f3n que muestra un recuento de a qui\u00e9n le ha \u00abgustado\u00bb la p\u00e1gina.  De forma predeterminada, incrustar el complemento Me gusta en una p\u00e1gina web (utilizando el FB JSSDK) extrae ~ 215 KB de recursos, 197 KB de los cuales son JavaScript.  En muchos casos, el complemento puede aparecer al final de un art\u00edculo o cerca del final de una p\u00e1gina, por lo que cargarlo con entusiasmo cuando est\u00e1 fuera de la pantalla puede no ser \u00f3ptimo.<\/p>\n<figure class=\"w-figure\">\n  <img alt='fblike-3107047' class=\"w-screenshot\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/fblike-3107047.png' alt=\"Bot\u00f3n Me gusta de Facebook\"><br \/>\n<\/figure>\n<p>Gracias al ingeniero Stoyan Stefanov, <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.facebook.com\/docs\/plugins\/like-button#settings\">todos los complementos sociales de Facebook ahora admiten la carga diferida de iframe nativa<\/a>.  Desarrolladores que optan por la carga diferida a trav\u00e9s de los complementos <code>data-lazy<\/code><br \/>\nLa configuraci\u00f3n ahora podr\u00e1 evitar que se cargue hasta que el usuario se desplace cerca.  Esto permite que la inserci\u00f3n siga funcionando completamente para los usuarios que la necesitan, al tiempo que ofrece ahorros de datos para aquellos que no se desplazan hacia abajo en una p\u00e1gina.  Tenemos la esperanza de que esta sea la primera de muchas incorporaciones para explorar la carga diferida de iframe nativa en producci\u00f3n.<\/p>\n<h3 id=\"wait-can't-browsers-just-automatically-lazy-load-offscreen-iframes\"><span class=\"ez-toc-section\" id=\"Espera-%C2%BFno-pueden-los-navegadores-simplemente-cargar-automaticamente-iframes-fuera-de-la-pantalla-de-forma-diferida\"><\/span>Espera, \u00bfno pueden los navegadores simplemente cargar autom\u00e1ticamente iframes fuera de la pantalla de forma diferida? <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Ciertamente pueden.  En Chrome 77, Chrome agreg\u00f3 soporte para im\u00e1genes fuera de pantalla e iframes de carga diferida de forma nativa cuando un usuario ha optado por<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/blog.chromium.org\/2019\/04\/data-saver-is-now-lite-mode.html\">El modo ligero<\/a><br \/>\n(Modo de ahorro de datos) en Chrome para Android.<\/p>\n<p>El modo b\u00e1sico se usa com\u00fanmente en regiones del mundo donde la calidad de la conexi\u00f3n de red y los planes de datos no son los mejores.  Cada byte es importante y, por lo tanto, los iframes de carga diferida tienen el potencial de marcar una diferencia significativa para estos usuarios.<\/p>\n<p>Origins puede detectar qu\u00e9 porcentaje de su tr\u00e1fico proviene de los usuarios del modo b\u00e1sico marcando el <code>navigator.connection.saveData<\/code> propiedad, que es parte de la <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/NetworkInformation\"><code>NetworkInformation<\/code>  API<\/a>.<\/p>\n<h3 id=\"can-i-lazy-load-iframes-cross-browser-yes\"><span class=\"ez-toc-section\" id=\"%C2%BFPuedo-cargar-iframes-de-forma-diferida-en-varios-navegadores-si\"><\/span>\u00bfPuedo cargar iframes de forma diferida en varios navegadores?  si <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>La carga diferida de iframe nativa se puede aplicar como una mejora progresiva.  Navegadores que admiten <code>loading=lazy<\/code> en iframes cargar\u00e1 de forma diferida el iframe, mientras que el <code>loading<\/code> El atributo se ignorar\u00e1 con seguridad en los navegadores que a\u00fan no lo admitan.<\/p>\n<p>Tambi\u00e9n es posible cargar de forma diferida iframes fuera de la pantalla utilizando la biblioteca de JavaScript lazysizes.  Esto puede ser deseable si:<\/p>\n<ul>\n<li>requieren m\u00e1s umbrales de carga diferida personalizados que los que ofrece actualmente la carga diferida nativa<\/li>\n<li>Deseamos ofrecer a los usuarios una experiencia coherente de carga diferida de iframe en todos los navegadores.<\/li>\n<\/ul>\n<p><web-copy-code><\/p>\n<pre class=\"language-html\"><code class=\"language-html\"><span class=\"highlight-line\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>script<\/span> <span class=\"token attr-name\">src<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>lazysizes.min.js<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">async<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token script\"><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>script<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><\/span><br><span class=\"highlight-line\"><\/span><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>iframe<\/span> <span class=\"token attr-name\">frameborder<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>0<span class=\"token punctuation\">\"<\/span><\/span><br><mark class=\"highlight-line highlight-line-active\">\t  <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>lazyload<span class=\"token punctuation\">\"<\/span><\/span><\/mark><br><span class=\"highlight-line\">    <span class=\"token attr-name\">allowfullscreen<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span><span class=\"token punctuation\">\"<\/span><\/span><\/span><br><span class=\"highlight-line\">    <span class=\"token attr-name\">width<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>600<span class=\"token punctuation\">\"<\/span><\/span><\/span><br><span class=\"highlight-line\">    <span class=\"token attr-name\">height<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>400<span class=\"token punctuation\">\"<\/span><\/span><\/span><br><span class=\"token attr-name\">data-src<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>\/\/www.youtube.com\/embed\/ZfV-aYdU4uE<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br><span class=\"highlight-line\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>iframe<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Use el siguiente patr\u00f3n para detectar la funci\u00f3n de carga diferida y obtener tama\u00f1os diferidos cuando no est\u00e9 disponible:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>iframe<\/span> <span class=\"token attr-name\">frameborder<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>0<span class=\"token punctuation\">\"<\/span><\/span><br><span class=\"highlight-line\">\t  <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>lazyload<span class=\"token punctuation\">\"<\/span><\/span><\/span><br><mark class=\"highlight-line highlight-line-active\">    <span class=\"token attr-name\">loading<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>lazy<span class=\"token punctuation\">\"<\/span><\/span><\/mark><br><span class=\"highlight-line\">    <span class=\"token attr-name\">allowfullscreen<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span><span class=\"token punctuation\">\"<\/span><\/span><\/span><br><span class=\"highlight-line\">    <span class=\"token attr-name\">width<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>600<span class=\"token punctuation\">\"<\/span><\/span><\/span><br><span class=\"highlight-line\">    <span class=\"token attr-name\">height<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>400<span class=\"token punctuation\">\"<\/span><\/span><\/span><br><span class=\"token attr-name\">data-src<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>\/\/www.youtube.com\/embed\/ZfV-aYdU4uE<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br><span class=\"highlight-line\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>iframe<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><\/span><br><span class=\"highlight-line\"><\/span><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>script<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token script\"><span class=\"token language-javascript\"><br><span class=\"highlight-line\">  <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token string\">'loading'<\/span> <span class=\"token keyword\">in<\/span> <span class=\"token class-name\">HTMLIFrameElement<\/span><span class=\"token punctuation\">.<\/span>prototype<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">    <span class=\"token keyword\">const<\/span> iframes <span class=\"token operator\">=<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">querySelectorAll<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'iframe[loading=\"lazy\"]'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\"><\/span><br><span class=\"highlight-line\">    iframes<span class=\"token punctuation\">.<\/span><span class=\"token function\">forEach<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">iframe<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">      iframe<span class=\"token punctuation\">.<\/span>src <span class=\"token operator\">=<\/span> iframe<span class=\"token punctuation\">.<\/span>dataset<span class=\"token punctuation\">.<\/span>src<span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\">    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\"><\/span><br><span class=\"highlight-line\">  <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">else<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">    <\/span><br><span class=\"highlight-line\">    <span class=\"token keyword\">const<\/span> script <span class=\"token operator\">=<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">createElement<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'script'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\">    script<span class=\"token punctuation\">.<\/span>src <span class=\"token operator\">=<\/span><\/span><br><span class=\"highlight-line\">      <span class=\"token string\">'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/lazysizes\/5.2.2\/lazysizes.min.js'<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\">    document<span class=\"token punctuation\">.<\/span>body<span class=\"token punctuation\">.<\/span><span class=\"token function\">appendChild<\/span><span class=\"token punctuation\">(<\/span>script<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\">  <span class=\"token punctuation\">}<\/span><\/span><br><span class=\"highlight-line\"><\/span><br><\/span><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>script<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h3 id=\"wordpress\"><span class=\"ez-toc-section\" id=\"Una-opcion-para-los-usuarios-de-WordPress\"><\/span>Una opci\u00f3n para los usuarios de WordPress <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Es posible que tenga muchos iframes dispersos a lo largo de a\u00f1os de contenido de publicaci\u00f3n en un sitio de WordPress.  Opcionalmente, puede agregar el siguiente c\u00f3digo a su tema de WordPress <code>functions.php<\/code> archivo para insertar autom\u00e1ticamente <code>loading=\"lazy\"<\/code> a sus iframes existentes sin tener que actualizarlos manualmente de forma individual.<\/p>\n<p>Tenga en cuenta que <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/core.trac.wordpress.org\/ticket\/50756\">Tambi\u00e9n se est\u00e1 trabajando en el soporte nativo para iframes de carga diferida en el n\u00facleo de WordPress<\/a>.  El siguiente fragmento buscar\u00e1 las banderas relevantes para que, una vez que WordPress tenga la funcionalidad incorporada, ya no agregar\u00e1 manualmente la <code>loading=\"lazy\"<\/code> atributo, asegur\u00e1ndose de que sea interoperable con esos cambios y no dar\u00e1 como resultado un atributo duplicado.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-php\"><code class=\"language-php\"><br><span class=\"token keyword\">function<\/span> <span class=\"token function\">wp_lazy_load_iframes_polyfill<\/span><span class=\"token punctuation\">(<\/span> <span class=\"token variable\">$content<\/span> <span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span> <span class=\"token function\">function_exists<\/span><span class=\"token punctuation\">(<\/span> <span class=\"token single-quoted-string string\">'wp_lazy_loading_enabled'<\/span> <span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&amp;&amp;<\/span> <span class=\"token function\">wp_lazy_loading_enabled<\/span><span class=\"token punctuation\">(<\/span> <span class=\"token single-quoted-string string\">'iframe'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token single-quoted-string string\">'the_content'<\/span> <span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">return<\/span> <span class=\"token variable\">$content<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><p><span class=\"token keyword\">return<\/span> <span class=\"token function\">str_replace<\/span><span class=\"token punctuation\">(<\/span> <span class=\"token single-quoted-string string\">'&lt;iframe '<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token single-quoted-string string\">'&lt;iframe loading=\"lazy\" '<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token variable\">$content<\/span> <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><br><span class=\"token function\">add_filter<\/span><span class=\"token punctuation\">(<\/span> <span class=\"token single-quoted-string string\">'the_content'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token single-quoted-string string\">'wp_lazy_load_iframes_polyfill'<\/span> <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Si su sitio de WordPress utiliza almacenamiento en cach\u00e9 (pista: deber\u00eda), no olvide reconstruir el cach\u00e9 de su sitio despu\u00e9s.<\/p>\n<h3 id=\"conclusion\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusi\u00f3n <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Hornear en soporte nativo para iframes de carga diferida hace que sea mucho m\u00e1s f\u00e1cil para usted mejorar el rendimiento de sus p\u00e1ginas web.  Si tiene alg\u00fan comentario sobre la carga diferida de iframe nativo, no dude en enviar un problema al <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/bugs.chromium.org\/p\/chromium\/issues\/entry?components=Blink%3ELoader%3ELazyLoad\">Rastreador de errores de cromo<\/a>.<\/p>\n<p>Y, en caso de que se lo haya perdido, consulte la colecci\u00f3n de carga diferida de im\u00e1genes y videos de web.dev para obtener m\u00e1s ideas de carga diferida.<\/p>\n<p><em>Nuestro agradecimiento a Dom Farolino, Scott Little, Houssein Djirdeh, Simon Pieters, Kayce Basques, Joe Medley y Stoyan Stefanov por sus rese\u00f1as.<\/em><\/p>\n<p>    <web-feedback additional-questions=\"api\"><\/web-feedback>\n  <\/div>\n","protected":false},"excerpt":{"rendered":"<p>La carga diferida nativa a nivel del navegador para iframes est\u00e1 aqu\u00ed 24 de julio de 2020 La carga diferida nativa para im\u00e1genes aterrizadas en Chrome 76 a trav\u00e9s de&#8230;<\/p>","protected":false},"author":1,"featured_media":81560,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1356],"tags":[1434,1435,1430],"class_list":["post-81559","post","type-post","status-publish","format-standard","has-post-thumbnail","category-dev","tag-chrome","tag-spotify","tag-youtube"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v28.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>\u00a1Es hora de cargar de forma diferida iframes fuera de la pantalla! - R Marketing Digital<\/title>\n<meta name=\"description\" content=\"La carga diferida nativa a nivel del navegador para iframes est\u00e1 aqu\u00ed 24 de julio de 2020 La carga diferida nativa para im\u00e1genes aterrizadas en Chrome 76\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/es-hora-de-cargar-de-forma-diferida-iframes-fuera-de-la-pantalla\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u00a1Es hora de cargar de forma diferida iframes fuera de la pantalla!\" \/>\n<meta property=\"og:description\" content=\"La carga diferida nativa a nivel del navegador para iframes est\u00e1 aqu\u00ed 24 de julio de 2020 La carga diferida nativa para im\u00e1genes aterrizadas en Chrome 76\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rmarketingdigital.com\/de\/dev\/es-hora-de-cargar-de-forma-diferida-iframes-fuera-de-la-pantalla\/\" \/>\n<meta property=\"og:site_name\" content=\"R Marketing Digital\" \/>\n<meta property=\"article:published_time\" content=\"2022-07-26T17:37:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-6123822.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"R Marketing Digital\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/es-hora-de-cargar-de-forma-diferida-iframes-fuera-de-la-pantalla\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/es-hora-de-cargar-de-forma-diferida-iframes-fuera-de-la-pantalla\\\/\"},\"author\":{\"name\":\"R Marketing Digital\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"headline\":\"\u00a1Es hora de cargar de forma diferida iframes fuera de la pantalla!\",\"datePublished\":\"2022-07-26T17:37:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/es-hora-de-cargar-de-forma-diferida-iframes-fuera-de-la-pantalla\\\/\"},\"wordCount\":1627,\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/es-hora-de-cargar-de-forma-diferida-iframes-fuera-de-la-pantalla\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-6123822.png\",\"keywords\":[\"Chrome\",\"Spotify\",\"Youtube\"],\"articleSection\":[\"Dev\"],\"inLanguage\":\"de\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/es-hora-de-cargar-de-forma-diferida-iframes-fuera-de-la-pantalla\\\/\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/es-hora-de-cargar-de-forma-diferida-iframes-fuera-de-la-pantalla\\\/\",\"name\":\"\u00a1Es hora de cargar de forma diferida iframes fuera de la pantalla! - R Marketing Digital\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/es-hora-de-cargar-de-forma-diferida-iframes-fuera-de-la-pantalla\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/es-hora-de-cargar-de-forma-diferida-iframes-fuera-de-la-pantalla\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-6123822.png\",\"datePublished\":\"2022-07-26T17:37:58+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"description\":\"La carga diferida nativa a nivel del navegador para iframes est\u00e1 aqu\u00ed 24 de julio de 2020 La carga diferida nativa para im\u00e1genes aterrizadas en Chrome 76\",\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/es-hora-de-cargar-de-forma-diferida-iframes-fuera-de-la-pantalla\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/es-hora-de-cargar-de-forma-diferida-iframes-fuera-de-la-pantalla\\\/#primaryimage\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-6123822.png\",\"contentUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-6123822.png\",\"width\":1200,\"height\":600,\"caption\":\"hero-6123822-7416973-png\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/\",\"name\":\"R Marketing Digital\",\"description\":\"Agencia SEO | Publicidad redes sociales | Community Management\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/rmarketingdigital.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\",\"name\":\"R Marketing Digital\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"caption\":\"R Marketing Digital\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"\u00a1Es hora de cargar de forma diferida iframes fuera de la pantalla! - R Marketing Digital","description":"Das native verz\u00f6gerte Laden auf Browser-Ebene f\u00fcr Iframes ist hier 24. Juli 2020 Natives verz\u00f6gertes Laden f\u00fcr gelandete Bilder in Chrome 76","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:\/\/rmarketingdigital.com\/de\/dev\/es-hora-de-cargar-de-forma-diferida-iframes-fuera-de-la-pantalla\/","og_locale":"de_DE","og_type":"article","og_title":"\u00a1Es hora de cargar de forma diferida iframes fuera de la pantalla!","og_description":"La carga diferida nativa a nivel del navegador para iframes est\u00e1 aqu\u00ed 24 de julio de 2020 La carga diferida nativa para im\u00e1genes aterrizadas en Chrome 76","og_url":"https:\/\/rmarketingdigital.com\/de\/dev\/es-hora-de-cargar-de-forma-diferida-iframes-fuera-de-la-pantalla\/","og_site_name":"R Marketing Digital","article_published_time":"2022-07-26T17:37:58+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-6123822.png","type":"image\/png"}],"author":"R Marketing Digital","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/rmarketingdigital.com\/dev\/es-hora-de-cargar-de-forma-diferida-iframes-fuera-de-la-pantalla\/#article","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/dev\/es-hora-de-cargar-de-forma-diferida-iframes-fuera-de-la-pantalla\/"},"author":{"name":"R Marketing Digital","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"headline":"\u00a1Es hora de cargar de forma diferida iframes fuera de la pantalla!","datePublished":"2022-07-26T17:37:58+00:00","mainEntityOfPage":{"@id":"https:\/\/rmarketingdigital.com\/dev\/es-hora-de-cargar-de-forma-diferida-iframes-fuera-de-la-pantalla\/"},"wordCount":1627,"image":{"@id":"https:\/\/rmarketingdigital.com\/dev\/es-hora-de-cargar-de-forma-diferida-iframes-fuera-de-la-pantalla\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-6123822.png","keywords":["Chrome","Spotify","Youtube"],"articleSection":["Dev"],"inLanguage":"de"},{"@type":"WebPage","@id":"https:\/\/rmarketingdigital.com\/dev\/es-hora-de-cargar-de-forma-diferida-iframes-fuera-de-la-pantalla\/","url":"https:\/\/rmarketingdigital.com\/dev\/es-hora-de-cargar-de-forma-diferida-iframes-fuera-de-la-pantalla\/","name":"\u00a1Es hora de cargar de forma diferida iframes fuera de la pantalla! - R Marketing Digital","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rmarketingdigital.com\/dev\/es-hora-de-cargar-de-forma-diferida-iframes-fuera-de-la-pantalla\/#primaryimage"},"image":{"@id":"https:\/\/rmarketingdigital.com\/dev\/es-hora-de-cargar-de-forma-diferida-iframes-fuera-de-la-pantalla\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-6123822.png","datePublished":"2022-07-26T17:37:58+00:00","author":{"@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"description":"Das native verz\u00f6gerte Laden auf Browser-Ebene f\u00fcr Iframes ist hier 24. Juli 2020 Natives verz\u00f6gertes Laden f\u00fcr gelandete Bilder in Chrome 76","inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rmarketingdigital.com\/dev\/es-hora-de-cargar-de-forma-diferida-iframes-fuera-de-la-pantalla\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/rmarketingdigital.com\/dev\/es-hora-de-cargar-de-forma-diferida-iframes-fuera-de-la-pantalla\/#primaryimage","url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-6123822.png","contentUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-6123822.png","width":1200,"height":600,"caption":"hero-6123822-7416973-png"},{"@type":"WebSite","@id":"https:\/\/rmarketingdigital.com\/#website","url":"https:\/\/rmarketingdigital.com\/","name":"R Digitales Marketing","description":"SEO Agentur | Werbung f\u00fcr soziale Netzwerke | Community Management","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rmarketingdigital.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Person","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e","name":"R Digitales Marketing","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","caption":"R Marketing Digital"}}]}},"_links":{"self":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/posts\/81559","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/comments?post=81559"}],"version-history":[{"count":0,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/posts\/81559\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/media\/81560"}],"wp:attachment":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/media?parent=81559"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/categories?post=81559"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/tags?post=81559"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}