¡Es hora de cargar de forma diferida iframes fuera de la pantalla!

Contenidos

Le chargement différé au niveau du navigateur natif pour les iframes est ici

24 juillet 2020

Le chargement paresseux natif pour les images débarquées dans Chrome 76 via Chargement en cours attribut et puis il est venu à Firefox. Nous sommes heureux de partager cela
chargement différé natif pour les iframes est maintenant
normalisé et il est également compatible avec les navigateurs Chrome et Chromium.

< iframe src = " https://example.com "
 loading = " paresseux " 
width = " 600 "
 hauteur = " 400 " >  iframe >

Le chargement différé iframe natif diffère le chargement des iframes hors écran jusqu'à ce que l'utilisateur les fasse défiler. Cela enregistre les données, accélère le chargement des autres parties de la page et réduit l'utilisation de la mémoire.

Est manifestation de </code><br /> montre les incorporations vidéo à chargement différé:</p> <figure class="w-figure w-figure--fullbleed"> <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 /> </figure> <h3 id="why-should-we-lazy-load-iframes"><span class="ez-toc-section" id="%C2%BFPor-que-deberiamos-cargar-iframes-de-forma-diferida"></span>Pourquoi devrions-nous charger paresseusement des iframes? <span class="ez-toc-section-end"></span></h3> <p>Les intégrations tierces couvrent un large éventail de cas d'utilisation, des lecteurs vidéo aux publications et publicités sur les réseaux sociaux. Souvent, ce contenu n'est pas immédiatement visible dans la fenêtre utilisateur. Au contraire, il n'est visible qu'une fois qu'ils font défiler la page. Malgré cela, les utilisateurs paient le coût du téléchargement de données et de JavaScript coûteux pour chaque image, même s'ils ne font pas défiler jusqu'à celle-ci.</p> <figure class="w-figure"> <img width="1600" height="919" alt='iframe-lazyloading-6365905' src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201600%20919'%3E%3C/svg%3E" data-lazy-src="https://rmarketingdigital.com/wp-content/uploads/2020/09/iframe-lazyloading-6365905.png"><noscript><img width="1600" height="919" alt='iframe-lazyloading-6365905' src='https://rmarketingdigital.com/wp-content/uploads/2020/09/iframe-lazyloading-6365905.png'></noscript><br /> </figure> <p>Basé sur les recherches de Chrome sur <a rel="noopener noreferrer nofollow external" target="_self" href="https://blog.chromium.org/2019/10/automatically-lazy-loading-offscreen.html" data-wpel-link="external">iframes hors écran chargement paresseux automatiquement pour les utilisateurs de l'économiseur de données</a>, les iframes à chargement paresseux pourraient entraîner des économies de données moyennes de 2-3%, des réductions de première peinture avec un contenu de 1-2% dans la médiane et des améliorations de 2% du délai de première entrée (FID) au 95e centile.</p> <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>Comment fonctionne le chargement différé natif pour les iframes? <span class="ez-toc-section-end"></span></h3> <p>Les <code>Chargement en cours</code> L'attribut permet à un navigateur de différer le chargement des iframes et des images hors de l'écran jusqu'à ce que les utilisateurs les rapprochent. <code>Chargement en cours</code> prend en charge trois valeurs:</p> <ul> <li><code>fainéant</code>: est un bon candidat pour le chargement paresseux.</li> <li><code>désireux</code>: pas un bon candidat pour le chargement paresseux. Chargez immédiatement.</li> <li><code>voiture</code>: le navigateur déterminera s'il se charge paresseux.</li> </ul> <div class="w-aside w-aside--note"> <p><code>voiture</code> Il s'agit actuellement d'une valeur non standard, mais c'est la valeur par défaut dans Chrome aujourd'hui. Chrome a l'intention d'apporter une proposition de cette valeur au tableau des normes.</p> </div> <p>En utilisant le <code>Chargement en cours</code> l'attribut dans les iframes fonctionne comme suit:</p> <p><web-copy-code></p> <pre class="language-html"><code class="language-html"><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</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> paresseux <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">hauteur</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">></span></span> </</span> <span class="token tag"><span class="token tag"><span class="token punctuation">iframe</span> <span class="token punctuation">></span></span></span><p> <span class="token tag"><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</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">hauteur</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">></span></span></span> </</span> <span class="token tag"><span class="token tag"><span class="token tag"><span class="token punctuation">iframe</span> <span class="token punctuation">></span></span></span></span></p><p> <span class="token tag"><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</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> impatient <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">hauteur</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">></span></span></span> </</span> <span class="token tag"><span class="token tag"><span class="token tag"><span class="token punctuation">iframe</span> <span class="token punctuation">></span></span></span></span></p></code></pre> <p></web-copy-code></p> <p>Ne pas spécifier du tout l'attribut aura le même impact que de charger explicitement la ressource avec enthousiasme, sauf pour <a rel="noopener noreferrer nofollow external" target="_self" href="https://blog.chromium.org/2019/04/data-saver-is-now-lite-mode.html" data-wpel-link="external">Le mode lumière</a><br /> utilisateurs, où Chrome utilisera le <code>voiture</code> value pour décider s'il doit être chargé paresseusement.</p> <p>Si tu en as besoin <em>dynamiquement</em> créer des iframes via JavaScript, paramétrage<br /> <code>iframe.loading = 'paresseux'</code> dans l'élément est également<br /> <a rel="noopener noreferrer nofollow external" target="_self" href="https://bugs.chromium.org/p/chromium/issues/detail?id=993273" data-wpel-link="external">prise en charge</a>:</p> <p><web-copy-code></p> <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> chargement <span class="token operator">=</span> <span class="token string">'paresseux'</span> <span class="token punctuation">;</span></mark><br> <span class="highlight-line">document <span class="token punctuation">.</span> corps <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> <p></web-copy-code></p> <h4 id="iframe-specific-lazy-loading-behavior"><span class="ez-toc-section" id="Comportamiento-de-carga-diferida-especifico-de-iframe"></span>Comportement de chargement différé spécifique à Iframe <span class="ez-toc-section-end"></span></h4> <p>L'attribut load affecte les iframes différemment des images, selon que l'iframe est masqué ou non. (Les iframes cachés sont souvent utilisés à des fins d'analyse ou de communication.) Chrome utilise les critères suivants pour déterminer si une iframe est masquée:</p> <ul> <li>La largeur et la hauteur de l'iframe sont <code>4px</code> ou moins.</li> <li><code>affichage: aucun</code> ou <code>visibilité: masqué</code> Il est appliqué.</li> <li>L'iframe est positionné hors écran en utilisant un positionnement X ou Y négatif.</li> <li>Ce critère s'applique à la fois <code>chargement = paresseux</code> y <code>chargement = auto</code>.</li> </ul> <p>Si une iframe remplit l'une de ces conditions, Chrome la considère comme cachée et ne la charge pas paresseusement dans la plupart des cas. Les iframes qui ne sont pas masqués ne se chargeront que lorsqu'ils se trouvent dans le seuil de distance de chargement. Chrome affiche un espace réservé pour les iframes à chargement différé qui sont toujours en cours de récupération.</p> <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>Quel impact pourrions-nous voir dans les intégrations iframe populaires à chargement différé? <span class="ez-toc-section-end"></span></h3> <p>Et si nous pouvions changer le Web en général pour que les iframes de l'écran de chargement différé soient la valeur par défaut? Cela ressemblerait un peu à ceci:</p> <p>Intégration de vidéos YouTube à chargement différé (économise ~ 500 Ko lors du chargement initial de la page):</p> <p><web-copy-code></p> <pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>iframe</span><span class="token punctuation">></span></span></code></pre> <p></web-copy-code></p> <p><strong>Anecdote:</strong> Lorsque nous sommes passés au chargement paresseux des intégrations YouTube pour Chrome.com, nous avons économisé 10 secondes sur la rapidité avec laquelle nos pages pouvaient être interactives sur les appareils mobiles. J'ai ouvert une erreur interne avec YouTube pour discuter de la façon d'ajouter<br /> <code>chargement = paresseux</code> à votre code d'intégration.</p> <figure class="w-figure"> <img width="1600" height="919" alt='iframe-chromecom-3805627' src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201600%20919'%3E%3C/svg%3E" data-lazy-src="https://rmarketingdigital.com/wp-content/uploads/2020/09/iframe-chromecom-3805627.png"><noscript><img width="1600" height="919" alt='iframe-chromecom-3805627' src='https://rmarketingdigital.com/wp-content/uploads/2020/09/iframe-chromecom-3805627.png'></noscript><br /> </figure> <div class="w-aside w-aside--note"> <p>Si vous recherchez des moyens plus efficaces de télécharger des intégrations YouTube, vous serez peut-être intéressé par le <a rel="noopener noreferrer nofollow external" target="_self" href="https://github.com/paulirish/lite-youtube-embed" data-wpel-link="external">Composant YouTube Lite</a>.</p> </div> <p><strong>Chargement paresseux des insertions Instagram (enregistre> 100 Ko dans gzip lors du chargement initial):</strong></p> <p>Les intégrations Instagram fournissent un bloc de balisage et un script, qui injectent un iframe dans votre page. Le chargement différé de cette iframe évite d'avoir à charger tout le script requis pour l'insertion. Étant donné que ces incorporations sont souvent affichées sous la fenêtre d'affichage dans la plupart des articles, cela semble être un candidat raisonnable pour le chargement paresseux natif de votre iframe.</p> <p><strong>Lazy Loading Spotify Embeds (économise 514 Ko lors du chargement initial):</strong></p> <p><web-copy-code></p> <pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>iframe</span><span class="token punctuation">></span></span></code></pre> <p></web-copy-code></p> <p>Bien que les intégrations ci-dessus illustrent les avantages potentiels des iframes à chargement différé pour le contenu multimédia, il est également possible de voir ces avantages dans les publicités.</p> <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>Étude de cas: Chargement paresseux natif des plugins sociaux Facebook <span class="ez-toc-section-end"></span></h3> <p>De Facebook <em>plugins sociaux</em> Permettez aux développeurs d'intégrer du contenu Facebook sur leurs pages Web. Plusieurs de ces plugins sont proposés, tels que des posts intégrés, des photos, des vidéos, des commentaires ... Le plus populaire est le <a rel="noopener noreferrer nofollow external" target="_self" href="https://developers.facebook.com/docs/plugins/like-button/" data-wpel-link="external">En complément</a> - un bouton qui montre le décompte de ceux qui ont «aimé» la page. Par défaut, l'intégration du plugin Like sur une page Web (à l'aide du FB JSSDK) extrait ~ 215 Ko de ressources, dont 197 Ko en JavaScript. Dans de nombreux cas, le plugin peut apparaître à la fin d'un article ou vers le bas d'une page, donc le charger avec enthousiasme en dehors de l'écran peut ne pas être optimal.</p> <figure class="w-figure"> <img width="1600" height="142" alt='fblike-3107047' class="w-screenshot" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201600%20142'%3E%3C/svg%3E" data-lazy-src="https://rmarketingdigital.com/wp-content/uploads/2020/09/fblike-3107047.png"><noscript><img width="1600" height="142" alt='fblike-3107047' class="w-screenshot" src='https://rmarketingdigital.com/wp-content/uploads/2020/09/fblike-3107047.png'></noscript><br /> </figure> <p>Merci à l'ingénieur Stoyan Stefanov, <a rel="noopener noreferrer nofollow external" target="_self" href="https://developers.facebook.com/docs/plugins/like-button#settings" data-wpel-link="external">tous les plugins sociaux de Facebook prennent désormais en charge le chargement paresseux iframe natif</a>. Les développeurs optant pour le chargement paresseux via des plugins <code>paresseux de données</code><br /> Les paramètres pourront désormais empêcher le chargement jusqu'à ce que l'utilisateur fasse défiler à proximité. Cela permet à l'intégration de continuer à fonctionner pleinement pour les utilisateurs qui en ont besoin, tout en offrant des économies de données à ceux qui ne font pas défiler une page vers le bas. Espérons que ce soit le premier de nombreux ajouts à l'exploration du chargement différé iframe natif en production.</p> <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>Attendez, les navigateurs ne peuvent-ils pas simplement charger automatiquement les iframes hors écran paresseusement? <span class="ez-toc-section-end"></span></h3> <p>Ils peuvent certainement. Dans Chrome 77, Chrome a ajouté la prise en charge des images hors écran et des iframes à chargement différé en mode natif lorsqu'un utilisateur a opté pour<br /> <a rel="noopener noreferrer nofollow external" target="_self" href="https://blog.chromium.org/2019/04/data-saver-is-now-lite-mode.html" data-wpel-link="external">Le mode lumière</a><br /> (Mode d'économie de données) dans Chrome pour Android.</p> <p>Le mode de base est couramment utilisé dans les régions du monde où la qualité de la connexion réseau et des plans de données n'est pas la meilleure. Chaque octet est important, et par conséquent, les iframes à chargement différé ont le potentiel de faire une différence significative pour ces utilisateurs.</p> <p>Origins peut détecter le pourcentage de votre trafic provenant des utilisateurs du mode de base en vérifiant le <code>navigator.connection.saveData</code> propriété, qui fait partie de la <a rel="noopener noreferrer nofollow external" target="_self" href="https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation" data-wpel-link="external"><code>Informations sur le réseau</code> API</a>.</p> <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>Puis-je charger des iframes paresseux sur plusieurs navigateurs? Oui <span class="ez-toc-section-end"></span></h3> <p>Le chargement différé iframe natif peut être appliqué en tant qu'amélioration progressive. Navigateurs pris en charge <code>chargement = paresseux</code> dans les iframes, il chargera paresseusement l'iframe, tandis que le <code>Chargement en cours</code> L'attribut sera ignoré en toute sécurité dans les navigateurs qui ne le prennent pas encore en charge.</p> <p>Il est également possible de charger paresseusement des iframes hors écran à l'aide de la bibliothèque JavaScript. Cela peut être souhaitable si:</p> <ul> <li>nécessitent plus de seuils de chargement différé personnalisés que le chargement différé natif n'offre actuellement</li> <li>Nous souhaitons offrir aux utilisateurs une expérience de chargement différé iframe cohérente sur tous les navigateurs.</li> </ul> <p><web-copy-code></p> <pre class="language-html"><code class="language-html"><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></span><br><span class="highlight-line"></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</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"> <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">></span></span><br><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>iframe</span><span class="token punctuation">></span></span></span></code></pre> <p></web-copy-code></p> <p>Utilisez le modèle suivant pour détecter la fonction de chargement différé et obtenir des tailles différées lorsqu'elle n'est pas disponible:</p> <p><web-copy-code></p> <pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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"> <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">></span></span><br><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>iframe</span><span class="token punctuation">></span></span></span><br><span class="highlight-line"></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></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">=></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"></</span>script</span><span class="token punctuation">></span></span></code></pre> <p></web-copy-code></p> <h3 id="wordpress"><span class="ez-toc-section" id="Una-opcion-para-los-usuarios-de-WordPress"></span>Une option pour les utilisateurs de WordPress <span class="ez-toc-section-end"></span></h3> <p>Vous pourriez avoir beaucoup d'iframes dispersés au fil des années de publication de contenu sur un site WordPress. En option, vous pouvez ajouter le code suivant à votre thème WordPress <code>functions.php</code> fichier à insérer automatiquement <code>loading = "paresseux"</code> à vos iframes existants sans avoir à les mettre à jour manuellement individuellement.</p> <p>Notez que <a rel="noopener noreferrer nofollow external" target="_self" href="https://core.trac.wordpress.org/ticket/50756" data-wpel-link="external">Des travaux sont également en cours sur la prise en charge native des iframes à chargement différé dans le cœur de WordPress</a>. L'extrait de code suivant recherchera les indicateurs pertinents de sorte qu'une fois que WordPress aura la fonctionnalité intégrée, il n'ajoutera plus manuellement le <code>loading = "paresseux"</code> attribut, en s'assurant qu'il est interopérable avec ces modifications et n'entraînera pas un attribut en double.</p> <p><web-copy-code></p> <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">&&</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">'</span> <iframe '</span> <span class="token single-quoted-string string"><span class="token punctuation">,</span> <span class="token single-quoted-string string">'</span></span> <iframe loading="lazy" '</span> <span class="token single-quoted-string string"><span class="token single-quoted-string string"><span class="token punctuation">,</span> <span class="token variable">$contenu</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">'le_contenu'</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></span></span></p></code></pre> <p></web-copy-code></p> <p>Si votre site WordPress utilise la mise en cache (indice: il devrait), n'oubliez pas de reconstruire le cache de votre site par la suite.</p> <h3 id="conclusion"><span class="ez-toc-section" id="Conclusion"></span>conclusion <span class="ez-toc-section-end"></span></h3> <p>La prise en charge native des iframes à chargement différé vous permet d'améliorer beaucoup plus facilement les performances de vos pages Web. Si vous avez des commentaires sur le chargement différé iframe natif, n'hésitez pas à soumettre un problème à <a rel="noopener noreferrer nofollow external" target="_self" href="https://bugs.chromium.org/p/chromium/issues/entry?components=Blink%3ELoader%3ELazyLoad" data-wpel-link="external">Chrome Bug Tracker</a>.</p> <p>Et au cas où vous l'auriez manqué, consultez la collection d'images et de vidéos de chargement paresseux de web.dev pour plus d'idées de chargement paresseux.</p> <p><em>Nos remerciements à Dom Farolino, Scott Little, Houssein Djirdeh, Simon Pieters, Kayce Basques, Joe Medley et Stoyan Stefanov pour leurs commentaires.</em></p> <p> <web-feedback additional-questions="api"></web-feedback> </div> </div><div class='yarpp yarpp-related yarpp-related-website yarpp-template-list'>  <h5>Articles Similaires</h3><ol> <li><a href="https://rmarketingdigital.com/fr/windows-10/comment-activer-google-chrome-dark-theme-sur-votre-pc/" rel="bookmark" title="Comment activer le thème sombre de Google Chrome sur votre PC" data-wpel-link="internal">Comment activer le thème sombre de Google Chrome sur votre PC </a></li> <li><a href="https://rmarketingdigital.com/fr/windows-10/comment-supprimer-les-telechargements-de-google-chrome-automatiquement/" rel="bookmark" title="Comment supprimer automatiquement les téléchargements de Google Chrome" data-wpel-link="internal">Comment supprimer automatiquement les téléchargements de Google Chrome </a></li> <li><a href="https://rmarketingdigital.com/fr/wordpress/les-meilleurs-plugins-pour-optimisation-de-site-mobile-wordpress/" rel="bookmark" title="Meilleurs plugins pour l'optimisation de sites mobiles WordPress" data-wpel-link="internal">Meilleurs plugins pour l'optimisation de sites mobiles WordPress </a></li> <li><a href="https://rmarketingdigital.com/fr/elementor/widget-video/" rel="bookmark" title="Widget vidéo" data-wpel-link="internal">Widget vidéo </a></li> </ol> </div> </div> </div> </div> </article> </div> <div id="sidebar" data-nectar-ss="1" class="col span_3 col_last"> <div id="custom_html-9" class="widget_text widget widget_custom_html"><div class="textwidget custom-html-widget"><center><script type="rocketlazyloadscript" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-9047562926713908" data-ad-slot="9140386366" data-ad-format="auto" data-full-width-responsive="true"></ins> <script type="rocketlazyloadscript"> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center></div></div><div id="custom_html-24" class="widget_text widget widget_custom_html"><div class="textwidget custom-html-widget"><center><script type="rocketlazyloadscript" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-9047562926713908" data-ad-slot="9140386366" data-ad-format="auto" data-full-width-responsive="true"></ins> <script type="rocketlazyloadscript"> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center></div></div> </div> </div> <div class="row"> <div class="row vc_row-fluid full-width-section related-post-wrap" data-using-post-pagination="false" data-midnight="dark"> <div class="row-bg-wrap"><div class="row-bg"></div></div> <h3 class="related-title hidden" data-no-translation="" data-trp-gettext="">Articles Similaires</h3><div class="row span_12 blog-recent related-posts columns-3" data-style="material" data-color-scheme="light"> <div class="col span_4"> <div class="inner-wrap post-81486 post type-post status-publish format-standard has-post-thumbnail category-dev"> <a href="https://rmarketingdigital.com/fr/dev/donner-des-super-pouvoirs-aux-variables-css/" class="img-link" data-wpel-link="internal"><span class="post-featured-img"><img width="600" height="360" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20600%20360'%3E%3C/svg%3E" class="attachment-portfolio-thumb size-portfolio-thumb wp-post-image" alt="héros-7923897-5622351-jpg" title="" data-lazy-src="https://rmarketingdigital.com/wp-content/uploads/2020/09/hero-7923897-600x360.jpg" /><noscript><img width="600" height="360" src="https://rmarketingdigital.com/wp-content/uploads/2020/09/hero-7923897-600x360.jpg" class="attachment-portfolio-thumb size-portfolio-thumb wp-post-image" alt="héros-7923897-5622351-jpg" title="" loading="lazy" /></noscript></span></a> <span class="meta-category"><a class="dev" href="https://rmarketingdigital.com/fr/dev/" data-wpel-link="internal">Dev</a></span> <a class="entire-meta-link" href="https://rmarketingdigital.com/fr/dev/donner-des-super-pouvoirs-aux-variables-css/" aria-label="Dando superpoderes a las variables CSS" data-wpel-link="internal"></a> <div class="article-content-wrap"> <div class="post-header"> <span class="meta"> </span> <h3 class="title">Donner des super pouvoirs aux variables CSS</h3> </div> <div class="grav-wrap"><img alt='Marketing numérique' src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2070%2070'%3E%3C/svg%3E" data-lazy-srcset='https://secure.gravatar.com/avatar/42eef922ac92618c401c429d408c0225?s=140&d=mm&r=g 2x' class='avatar avatar-70 photo' height='70' width='70' data-lazy-src="https://secure.gravatar.com/avatar/42eef922ac92618c401c429d408c0225?s=70&d=mm&r=g" /><noscript><img alt='Marketing numérique' src='https://secure.gravatar.com/avatar/42eef922ac92618c401c429d408c0225?s=70&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/42eef922ac92618c401c429d408c0225?s=140&d=mm&r=g 2x' class='avatar avatar-70 photo' height='70' width='70' /></noscript><div class="text"> <a href="https://rmarketingdigital.com/fr/author/r-marketing-digital/" data-wpel-link="internal">Marketing numérique</a><span>22/10/2022</span></div></div> </div> </div> </div> <div class="col span_4"> <div class="inner-wrap post-83979 post type-post status-publish format-standard has-post-thumbnail category-dev"> <a href="https://rmarketingdigital.com/fr/dev/fix-an-overloaded-server/" class="img-link" data-wpel-link="internal"><span class="post-featured-img"><img width="600" height="360" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20600%20360'%3E%3C/svg%3E" class="attachment-portfolio-thumb size-portfolio-thumb wp-post-image" alt="héros-2836929-1047989-jpg" title="" data-lazy-src="https://rmarketingdigital.com/wp-content/uploads/2020/09/hero-2836929-600x360.jpg" /><noscript><img width="600" height="360" src="https://rmarketingdigital.com/wp-content/uploads/2020/09/hero-2836929-600x360.jpg" class="attachment-portfolio-thumb size-portfolio-thumb wp-post-image" alt="héros-2836929-1047989-jpg" title="" loading="lazy" /></noscript></span></a> <span class="meta-category"><a class="dev" href="https://rmarketingdigital.com/fr/dev/" data-wpel-link="internal">Dev</a></span> <a class="entire-meta-link" href="https://rmarketingdigital.com/fr/dev/fix-an-overloaded-server/" aria-label="Arreglar un servidor sobrecargado" data-wpel-link="internal"></a> <div class="article-content-wrap"> <div class="post-header"> <span class="meta"> </span> <h3 class="title">Réparer un serveur surchargé</h3> </div> <div class="grav-wrap"><img alt='Marketing numérique' src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2070%2070'%3E%3C/svg%3E" data-lazy-srcset='https://secure.gravatar.com/avatar/42eef922ac92618c401c429d408c0225?s=140&d=mm&r=g 2x' class='avatar avatar-70 photo' height='70' width='70' data-lazy-src="https://secure.gravatar.com/avatar/42eef922ac92618c401c429d408c0225?s=70&d=mm&r=g" /><noscript><img alt='Marketing numérique' src='https://secure.gravatar.com/avatar/42eef922ac92618c401c429d408c0225?s=70&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/42eef922ac92618c401c429d408c0225?s=140&d=mm&r=g 2x' class='avatar avatar-70 photo' height='70' width='70' /></noscript><div class="text"> <a href="https://rmarketingdigital.com/fr/author/r-marketing-digital/" data-wpel-link="internal">Marketing numérique</a><span>22/10/2022</span></div></div> </div> </div> </div> <div class="col span_4"> <div class="inner-wrap post-92984 post type-post status-publish format-standard has-post-thumbnail category-dev"> <a href="https://rmarketingdigital.com/fr/dev/quoi-de-neuf-dans-le-phare-6-0/" class="img-link" data-wpel-link="internal"><span class="post-featured-img"><img width="1" height="1" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" class="attachment-portfolio-thumb size-portfolio-thumb wp-post-image" alt="phare-logo-5769199-svg_-3706970-svgxml" title="" data-lazy-src="https://rmarketingdigital.com/wp-content/uploads/2020/10/lighthouse-logo-5769199.svg.svg+xml" /><noscript><img width="1" height="1" src="https://rmarketingdigital.com/wp-content/uploads/2020/10/lighthouse-logo-5769199.svg.svg+xml" class="attachment-portfolio-thumb size-portfolio-thumb wp-post-image" alt="phare-logo-5769199-svg_-3706970-svgxml" title="" loading="lazy" /></noscript></span></a> <span class="meta-category"><a class="dev" href="https://rmarketingdigital.com/fr/dev/" data-wpel-link="internal">Dev</a></span> <a class="entire-meta-link" href="https://rmarketingdigital.com/fr/dev/quoi-de-neuf-dans-le-phare-6-0/" aria-label="What’s New in Lighthouse 6.0" data-wpel-link="internal"></a> <div class="article-content-wrap"> <div class="post-header"> <span class="meta"> </span> <h3 class="title">Nouveautés de Lighthouse 6.0</h3> </div> <div class="grav-wrap"><img alt='Marketing numérique' src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2070%2070'%3E%3C/svg%3E" data-lazy-srcset='https://secure.gravatar.com/avatar/42eef922ac92618c401c429d408c0225?s=140&d=mm&r=g 2x' class='avatar avatar-70 photo' height='70' width='70' data-lazy-src="https://secure.gravatar.com/avatar/42eef922ac92618c401c429d408c0225?s=70&d=mm&r=g" /><noscript><img alt='Marketing numérique' src='https://secure.gravatar.com/avatar/42eef922ac92618c401c429d408c0225?s=70&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/42eef922ac92618c401c429d408c0225?s=140&d=mm&r=g 2x' class='avatar avatar-70 photo' height='70' width='70' /></noscript><div class="text"> <a href="https://rmarketingdigital.com/fr/author/r-marketing-digital/" data-wpel-link="internal">Marketing numérique</a><span>20/10/2022</span></div></div> </div> </div> </div> </div></div> <div class="comments-section" data-author-bio="false"> <div class="comment-wrap" data-midnight="dark" data-comments-open="false">   </div> </div> </div> </div> </div> <div id="footer-outer" data-midnight="light" data-cols="3" data-custom-color="true" data-disable-copyright="false" data-matching-section-color="false" data-copyright-line="true" data-using-bg-img="false" data-bg-img-overlay="0.3" data-full-width="1" data-using-widget-area="true" data-link-hover="default"> <div id="footer-widgets" data-has-widgets="true" data-cols="3"> <div class="container"> <div class="row"> <div class="col span_4"> <div id="media_image-2" class="widget widget_media_image"><img width="150" height="55" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20150%2055'%3E%3C/svg%3E" class="image wp-image-67039 attachment-thumbnail size-thumbnail" alt="" style="max-width: 100%; height: auto;" data-lazy-src="https://rmarketingdigital.com/wp-content/uploads/2018/10/headerlogo-blanco-footer-1-150x55.png" /><noscript><img width="150" height="55" src="https://rmarketingdigital.com/wp-content/uploads/2018/10/headerlogo-blanco-footer-1-150x55.png" class="image wp-image-67039 attachment-thumbnail size-thumbnail" alt="" style="max-width: 100%; height: auto;" /></noscript></div><div id="text-5" class="widget widget_text"> <div class="textwidget"><p>R Marketing numérique: Whatsapp Marketing. Gestion des médias sociaux, conception et gestion de sites Web, publicité en ligne, SEM et SEO, marketing par e-mail.</p> </div> </div><div id="media_image-4" class="widget widget_media_image"><img width="220" height="110" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20220%20110'%3E%3C/svg%3E" class="image wp-image-67115 attachment-full size-full" alt="partenaire facebook" style="max-width: 100%; height: auto;" data-lazy-src="https://rmarketingdigital.com/wp-content/uploads/2019/06/Webp.net-resizeimage-1.jpg" /><noscript><img width="220" height="110" src="https://rmarketingdigital.com/wp-content/uploads/2019/06/Webp.net-resizeimage-1.jpg" class="image wp-image-67115 attachment-full size-full" alt="partenaire facebook" style="max-width: 100%; height: auto;" /></noscript></div><div id="media_image-3" class="widget widget_media_image"><img width="220" height="110" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20220%20110'%3E%3C/svg%3E" class="image wp-image-67114 attachment-full size-full" alt="partenaire google" style="max-width: 100%; height: auto;" data-lazy-src="https://rmarketingdigital.com/wp-content/uploads/2019/06/Webp.net-resizeimage.png" /><noscript><img width="220" height="110" src="https://rmarketingdigital.com/wp-content/uploads/2019/06/Webp.net-resizeimage.png" class="image wp-image-67114 attachment-full size-full" alt="partenaire google" style="max-width: 100%; height: auto;" /></noscript></div> </div> <div class="col span_4"> <div id="custom_html-3" class="widget_text widget widget_custom_html"><div class="textwidget custom-html-widget"><h4>Tutoriels et formation</h4> <ul> <li><a href="https://rmarketingdigital.com/fr/formacion/" rel="noopener noreferrer nofollow external" target="_self" data-wpel-link="external">Formation</a></li> <li><a href="https://rmarketingdigital.com/fr/blog-power-bi/" rel="noopener noreferrer nofollow external" target="_self" data-wpel-link="external">Puissance Bi</a></li> <li><a href="https://rmarketingdigital.com/fr/marketing/" rel="noopener noreferrer nofollow external" target="_self" data-wpel-link="external">Le marketing</a></li> <li><a href="https://rmarketingdigital.com/fr/dev/" rel="noopener noreferrer nofollow external" target="_self" data-wpel-link="external">Dev</a></li> <li><a href="https://rmarketingdigital.com/fr/elementor/" rel="noopener noreferrer nofollow external" target="_self" data-wpel-link="external">Elementor</a></li> <li><a href="https://rmarketingdigital.com/fr/seo/" rel="noopener noreferrer nofollow external" target="_self" data-wpel-link="external">SEO</a></li> <li><a href="https://rmarketingdigital.com/fr/elementor/outils/" rel="noopener noreferrer nofollow external" target="_self" data-wpel-link="external">Des outils</a></li> <li><a href="https://rmarketingdigital.com/fr/excel-templates/" rel="noopener noreferrer nofollow external" target="_self" data-wpel-link="external">Modèles Excel</a></li> <li><a href="https://rmarketingdigital.com/fr/negocios/" rel="noopener noreferrer nofollow external" target="_self" data-wpel-link="external">Affaires</a></li> </ul> <p><br></p></div></div> </div> <div class="col span_4"> <div id="custom_html-2" class="widget_text widget widget_custom_html"><div class="textwidget custom-html-widget"><h4>Wordpress</h4> <ul> <ul> <li><a href="https://rmarketingdigital.com/fr/wordpress/" target="_self" rel="noopener noreferrer nofollow external" data-wpel-link="external">Wordpress 101</a></li> </ul> </ul> <h4>Réseaux sociaux</h4> <ul> <ul> <li><a href="https://rmarketingdigital.com/fr/facebook/" target="_self" rel="noopener noreferrer nofollow external" data-wpel-link="external">Facebook</a></li> <li><a href="https://rmarketingdigital.com/fr/instagram/" target="_self" rel="noopener noreferrer nofollow external" data-wpel-link="external">Instagram</a></li> <li><a href="https://rmarketingdigital.com/fr/whatsapp/" target="_self" rel="noopener noreferrer nofollow external" data-wpel-link="external">WhatsApp</a></li> <li><a href="https://rmarketingdigital.com/fr/telecharger-torrents/" target="_self" rel="noopener noreferrer nofollow external" data-wpel-link="external">Torrents</a></li> <li><a href="https://rmarketingdigital.com/fr/cine-series/" target="_self" rel="noopener noreferrer nofollow external" data-wpel-link="external">Films et séries</a></li> </ul> </ul></div></div><div id="nav_menu-4" class="widget widget_nav_menu"><h4>langage</h4><div class="menu-lenguaje-switcher-container"><ul id="menu-lenguaje-switcher" class="menu"><li id="menu-item-93714" class="trp-language-switcher-container menu-item menu-item-type-post_type menu-item-object-language_switcher menu-item-93714"><a href="https://rmarketingdigital.com/dev/es-hora-de-cargar-de-forma-diferida-iframes-fuera-de-la-pantalla/" data-wpel-link="external" target="_self" rel="nofollow external noopener noreferrer"><span data-no-translation><span class="trp-ls-language-name">Español</span></span></a></li> <li id="menu-item-110873" class="trp-language-switcher-container menu-item menu-item-type-post_type menu-item-object-language_switcher menu-item-110873"><a href="https://rmarketingdigital.com/de/dev/es-ist-zeit-faul-iframes-vom-bildschirm-zu-laden/" data-wpel-link="external" target="_self" rel="nofollow external noopener noreferrer"><span data-no-translation><span class="trp-ls-language-name">Deutsch</span></span></a></li> <li id="menu-item-129688" class="trp-language-switcher-container menu-item menu-item-type-post_type menu-item-object-language_switcher menu-item-129688"><a href="https://rmarketingdigital.com/en/dev/its-time-to-lazy-load-iframes-off-screen/" data-wpel-link="external" target="_self" rel="nofollow external noopener noreferrer"><span data-no-translation><span class="trp-ls-language-name">English</span></span></a></li> <li id="menu-item-129689" class="trp-language-switcher-container menu-item menu-item-type-post_type menu-item-object-language_switcher menu-item-129689"><a href="https://rmarketingdigital.com/fr/dev/il-est-temps-de-charger-les-iframes-paresseux-hors-ecran/" data-wpel-link="internal"><span data-no-translation><span class="trp-ls-language-name">Français</span></span></a></li> </ul></div></div><div id="custom_html-23" class="widget_text widget widget_custom_html"><div class="textwidget custom-html-widget"><h4>Utilisateur</h4> <ul> <li style="list-style-type: none;"> <ul> <li class="cookie-policy-p"><a href="https://rmarketingdigital.com/fr/politica-de-privacidad/" data-wpel-link="external" target="_self" rel="nofollow external noopener noreferrer">Politique de confidentialité</a></li> <li><a href="https://rmarketingdigital.com/fr/politica-de-cookies/" data-wpel-link="external" target="_self" rel="nofollow external noopener noreferrer">Politique de cookies</a></li> </ul> </li> </ul> </div></div> </div> </div> </div> </div> <div class="row" id="copyright" data-layout="centered"> <div class="container"> <div class="col span_5"> <div class="widget"> </div> <p>© 2022 R Marketing Digital. </p> </div> <div class="col span_7 col_last"> <ul class="social"> </ul> </div> </div> </div> </div> <div id="slide-out-widget-area-bg" class="slide-out-from-right solid"> </div> <div id="slide-out-widget-area" class="slide-out-from-right" data-dropdown-func="separate-dropdown-parent-link" data-back-txt="Retour" data-no-translation-data-back-txt=""> <div class="inner" data-prepend-menu-mobile="false"> <a class="slide_out_area_close" href="#"><span class="screen-reader-text" data-no-translation="" data-trp-gettext="">Fermer le menu</span> <span class="icon-salient-x icon-default-style"></span> </a> <div class="off-canvas-menu-container" role="navigation"> <ul class="menu"> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-67249"><a href="https://rmarketingdigital.com/fr/blog/" data-wpel-link="external" target="_self" rel="nofollow external noopener noreferrer">Blogue</a> <ul class="sub-menu"> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children current-menu-item menu-item-105292"><a>Développement</a> <ul class="sub-menu"> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-105258"><a href="https://rmarketingdigital.com/fr/android/" data-wpel-link="internal">Android</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-105259"><a href="https://rmarketingdigital.com/fr/bots/" data-wpel-link="internal">Bots</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-105261"><a href="https://rmarketingdigital.com/fr/dev/" data-wpel-link="internal">Dev</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-105268"><a href="https://rmarketingdigital.com/fr/freeware/" data-wpel-link="internal">Logiciel gratuit</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-105273"><a href="https://rmarketingdigital.com/fr/javascript/" data-wpel-link="internal">Javascript</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-105282"><a href="https://rmarketingdigital.com/fr/servidores-vps/" data-wpel-link="internal">Serveurs / VPS</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-129672"><a href="https://rmarketingdigital.com/fr/vpn/" data-wpel-link="internal">VPN</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-105287"><a href="https://rmarketingdigital.com/fr/windows-10/" data-wpel-link="internal">Windows 10</a></li> </ul> </li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-105276"><a href="https://rmarketingdigital.com/fr/negocios/" data-wpel-link="internal">Affaires</a> <ul class="sub-menu"> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-105264"><a href="https://rmarketingdigital.com/fr/emprendedores/" data-wpel-link="internal">Entrepreneurs</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-105265"><a href="https://rmarketingdigital.com/fr/estrategias/" data-wpel-link="internal">Stratégies</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-105267"><a href="https://rmarketingdigital.com/fr/formacion/" data-wpel-link="internal">Formation</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-105275"><a href="https://rmarketingdigital.com/fr/marketing/" data-wpel-link="internal">Le marketing</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-105637"><a href="https://rmarketingdigital.com/fr/excel-templates/" data-wpel-link="external" target="_self" rel="nofollow external noopener noreferrer">Modèles Excel</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-106686"><a href="https://rmarketingdigital.com/fr/blog-power-bi/" data-wpel-link="internal">Power BI</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-109500"><a href="https://rmarketingdigital.com/fr/software-gestion/" data-wpel-link="internal">Logiciel de gestion</a> <ul class="sub-menu"> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-109498"><a href="https://rmarketingdigital.com/fr/crm/" data-wpel-link="internal">CRM</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-109499"><a href="https://rmarketingdigital.com/fr/erp/" data-wpel-link="internal">ERP</a></li> </ul> </li> </ul> </li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-105270"><a href="https://rmarketingdigital.com/fr/guias/" data-wpel-link="internal">Guides</a> <ul class="sub-menu"> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-132612"><a href="https://rmarketingdigital.com/fr/files/" data-wpel-link="internal">🗂️Fichiers</a> <ul class="sub-menu"> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-132614"><a href="https://rmarketingdigital.com/fr/files/exe/" data-wpel-link="internal">EXE</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-132613"><a href="https://rmarketingdigital.com/fr/files/dll/" data-wpel-link="internal">dll</a></li> </ul> </li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-105271"><a href="https://rmarketingdigital.com/fr/herramientas/" data-wpel-link="internal">Outils</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-135948"><a href="https://rmarketingdigital.com/fr/marketing-deportivo/" data-wpel-link="internal">Marketing sportif</a></li> </ul> </li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-105280"><a href="https://rmarketingdigital.com/fr/redes-sociales/" data-wpel-link="internal">Réseaux sociaux</a> <ul class="sub-menu"> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-105266"><a href="https://rmarketingdigital.com/fr/facebook/" data-wpel-link="internal">Facebook</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-105272"><a href="https://rmarketingdigital.com/fr/instagram/" data-wpel-link="internal">Instagram</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-105274"><a href="https://rmarketingdigital.com/fr/linkedin/" data-wpel-link="internal">LinkedIn</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-106055"><a href="https://rmarketingdigital.com/fr/streaming/" data-wpel-link="internal">Diffusion</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-105283"><a href="https://rmarketingdigital.com/fr/tiktok/" data-wpel-link="internal">TitTok</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-105286"><a href="https://rmarketingdigital.com/fr/whatsapp/" data-wpel-link="internal">WhatsApp</a></li> </ul> </li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-129667"><a href="#">Loisirs</a> <ul class="sub-menu"> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-129668"><a href="https://rmarketingdigital.com/fr/cine-series/" data-wpel-link="internal">Cinéma et séries</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-129669"><a href="https://rmarketingdigital.com/fr/gaming/" data-wpel-link="internal">Jeux</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-129670"><a href="https://rmarketingdigital.com/fr/tv-online/" data-wpel-link="internal">Télévision en ligne</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-108306"><a href="https://rmarketingdigital.com/fr/telecharger-torrents/" data-wpel-link="internal">Torrents</a></li> </ul> </li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-105285"><a href="https://rmarketingdigital.com/fr/webs/" data-wpel-link="internal">Webs</a> <ul class="sub-menu"> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-105263"><a href="https://rmarketingdigital.com/fr/elementor/" data-wpel-link="internal">Elementor</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-105262"><a href="https://rmarketingdigital.com/fr/ecommerce/" data-wpel-link="internal">Commerce électronique</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-105288"><a href="https://rmarketingdigital.com/fr/wordpress/" data-wpel-link="internal">WordPress</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-105281"><a href="https://rmarketingdigital.com/fr/seo/" data-wpel-link="internal">SEO</a></li> </ul> </li> </ul> </li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children current-menu-item menu-item-67232"><a>Les services</a> <ul class="sub-menu"> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-78763"><a href="https://rmarketingdigital.com/fr/agence-de-referencement/" data-wpel-link="internal">Positionnement Web</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-67229"><a href="https://rmarketingdigital.com/fr/publicite-reseaux-sociaux-facebook-instagram/" data-wpel-link="internal">Publicité sur les réseaux sociaux</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-67230"><a href="https://rmarketingdigital.com/fr/gestionnaire-de-communaute/" data-wpel-link="internal">Gestionnaire de communauté</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-67228"><a href="https://rmarketingdigital.com/fr/abonne-boost-comptes-instagram/" data-wpel-link="internal">Boost suiveur</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-67231"><a href="https://rmarketingdigital.com/fr/ecommerce-tienda-online/" data-wpel-link="internal">Commerce électronique</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-67710"><a href="https://rmarketingdigital.com/fr/solutions-e-learning/" data-wpel-link="internal">Solutions d'apprentissage en ligne</a></li> </ul> </li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-93606"><a href="https://rmarketingdigital.com/fr/glossaire-marketing-digital/" data-wpel-link="external" target="_self" rel="nofollow external noopener noreferrer">Glossaire</a></li> </ul> </div> <div id="nav_menu-3" class="widget widget_nav_menu"><div class="menu-r-pop-up-menu-container"><ul id="menu-r-pop-up-menu" class="menu"><li id="menu-item-66980" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-66980"><a href="https://m.me/rmarketingdigital" data-wpel-link="external" target="_self" rel="nofollow external noopener noreferrer">Demandez votre budget</a></li> <li id="menu-item-78761" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-78761"><a href="https://rmarketingdigital.com/fr/travaille-avec-nous/" data-wpel-link="internal">Travaille avec nous</a></li> <li id="menu-item-129594" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-129594"><a href="#">langage</a> <ul class="sub-menu"> <li id="menu-item-129687" class="trp-language-switcher-container menu-item menu-item-type-post_type menu-item-object-language_switcher menu-item-129687"><a href="https://rmarketingdigital.com/en/dev/its-time-to-lazy-load-iframes-off-screen/" data-wpel-link="external" target="_self" rel="nofollow external noopener noreferrer"><span data-no-translation><span class="trp-ls-language-name">English</span></span></a></li> <li id="menu-item-129591" class="trp-language-switcher-container menu-item menu-item-type-post_type menu-item-object-language_switcher menu-item-129591"><a href="https://rmarketingdigital.com/de/dev/es-ist-zeit-faul-iframes-vom-bildschirm-zu-laden/" data-wpel-link="external" target="_self" rel="nofollow external noopener noreferrer"><span data-no-translation><span class="trp-ls-language-name">Deutsch</span></span></a></li> <li id="menu-item-129593" class="trp-language-switcher-container menu-item menu-item-type-post_type menu-item-object-language_switcher menu-item-129593"><a href="https://rmarketingdigital.com/dev/es-hora-de-cargar-de-forma-diferida-iframes-fuera-de-la-pantalla/" data-wpel-link="external" target="_self" rel="nofollow external noopener noreferrer"><span data-no-translation><span class="trp-ls-language-name">Español</span></span></a></li> <li id="menu-item-129635" class="trp-language-switcher-container menu-item menu-item-type-post_type menu-item-object-language_switcher menu-item-129635"><a href="https://rmarketingdigital.com/fr/dev/il-est-temps-de-charger-les-iframes-paresseux-hors-ecran/" data-wpel-link="internal"><span data-no-translation><span class="trp-ls-language-name">Français</span></span></a></li> </ul> </li> </ul></div></div> </div> <div class="bottom-meta-wrap"><ul class="off-canvas-social-links"><li><a target="_self" rel="noopener nofollow external noreferrer" href="https://www.facebook.com/R-Marketing-Digital-1995820950678942/" data-wpel-link="external"><i class="fa fa-facebook"></i></a></li><li><a target="_self" rel="noopener nofollow external noreferrer" href="https://www.linkedin.com/company/r-marketing-digital/" data-wpel-link="external"><i class="fa fa-linkedin"></i></a></li><li><a target="_self" rel="noopener nofollow external noreferrer" href="https://www.instagram.com/rmarketingdigital/" data-wpel-link="external"><i class="fa fa-instagram"></i></a></li><li><a target="_self" rel="noopener nofollow external noreferrer" href="http://m.me/rmarketingdigital" data-wpel-link="external"><i class="fa fa-phone"></i></a></li><li><a target="_blank" rel="noopener" href="mailto:hola@rmarketingdigital.com"><i class="fa fa-envelope"></i></a></li></ul></div> </div> </div>  <input type="hidden" id="ssp_main_postid" value="81559"/><input type="hidden" id="ssp_main_cateid" value="1356"/><script type="rocketlazyloadscript" async>(function(s,u,m,o,j,v){j=u.createElement(m);v=u.getElementsByTagName(m)[0];j.async=1;j.src=o;j.dataset.sumoSiteId='a8690200591270007327ac0016338e00c5659f009d28c0004bf13d0085ed8a00';j.dataset.sumoPlatform='wordpress';v.parentNode.insertBefore(j,v)})(window,document,'script','//load.sumo.com/');</script> <script type="rocketlazyloadscript" data-rocket-type="application/javascript">window.addEventListener('DOMContentLoaded', function() { var ajaxurl = "https://rmarketingdigital.com/wp-admin/admin-ajax.php"; function sumo_add_woocommerce_coupon(code) { jQuery.post(ajaxurl, { action: 'sumo_add_woocommerce_coupon', code: code, }); } function sumo_remove_woocommerce_coupon(code) { jQuery.post(ajaxurl, { action: 'sumo_remove_woocommerce_coupon', code: code, }); } function sumo_get_woocommerce_cart_subtotal(callback) { jQuery.ajax({ method: 'POST', url: ajaxurl, dataType: 'html', data: { action: 'sumo_get_woocommerce_cart_subtotal', }, success: function(subtotal) { return callback(null, subtotal); }, error: function(err) { return callback(err, 0); } }); } });</script> <script type='text/javascript' id='trp-dynamic-translator-js-extra'> /* <![CDATA[ */ var trp_data = {"trp_custom_ajax_url":"https:\/\/rmarketingdigital.com\/wp-content\/plugins\/translatepress-multilingual\/includes\/trp-ajax.php","trp_wp_ajax_url":"https:\/\/rmarketingdigital.com\/wp-admin\/admin-ajax.php","trp_language_to_query":"fr_FR","trp_original_language":"es_ES","trp_current_language":"fr_FR","trp_skip_selectors":["[data-no-translation]","[data-no-dynamic-translation]","[data-trp-translate-id-innertext]","script","style","head","trp-span","translate-press","[data-trp-translate-id]","[data-trpgettextoriginal]","[data-trp-post-slug]"],"trp_base_selectors":["data-trp-translate-id","data-trpgettextoriginal","data-trp-post-slug"],"trp_attributes_selectors":{"text":{"accessor":"outertext","attribute":false},"block":{"accessor":"innertext","attribute":false},"image_src":{"selector":"img[src]","accessor":"src","attribute":true},"submit":{"selector":"input[type='submit'],input[type='button']","accessor":"value","attribute":true},"placeholder":{"selector":"input[placeholder],textarea[placeholder]","accessor":"placeholder","attribute":true},"title":{"selector":"[title]","accessor":"title","attribute":true},"a_href":{"selector":"a[href]","accessor":"href","attribute":true},"button":{"accessor":"outertext","attribute":false},"option":{"accessor":"innertext","attribute":false},"image_alt":{"selector":"img[alt]","accessor":"alt","attribute":true},"meta_desc":{"selector":"meta[name=\"description\"],meta[property=\"og:title\"],meta[property=\"og:description\"],meta[property=\"og:site_name\"],meta[name=\"twitter:title\"],meta[name=\"twitter:description\"],meta[name=\"DC.Title\"],meta[name=\"DC.Description\"]","accessor":"content","attribute":true},"page_title":{"selector":"title","accessor":"innertext","attribute":false}},"trp_attributes_accessors":["outertext","innertext","src","value","placeholder","title","href","alt","content"],"gettranslationsnonceregular":"1143c4d0fd","showdynamiccontentbeforetranslation":"","skip_strings_from_dynamic_translation":[],"skip_strings_from_dynamic_translation_for_substrings":{"href":["amazon-adsystem","googleads","g.doubleclick"]},"duplicate_detections_allowed":"100","trp_translate_numerals_opt":"no"}; /* ]]> */ </script> <script type="rocketlazyloadscript" data-minify="1" data-rocket-type='text/javascript' src='https://rmarketingdigital.com/wp-content/cache/min/1/wp-content/plugins/translatepress-multilingual/assets/js/trp-translate-dom-changes.js?ver=1666599570' id='trp-dynamic-translator-js' defer></script> <script type="rocketlazyloadscript" data-minify="1" data-rocket-type='text/javascript' src='https://rmarketingdigital.com/wp-content/cache/min/1/wp-content/plugins/contact-form-7/includes/swv/js/index.js?ver=1666599567' id='swv-js' defer></script> <script type='text/javascript' id='contact-form-7-js-extra'> /* <![CDATA[ */ var wpcf7 = {"api":{"root":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/","namespace":"contact-form-7\/v1"},"cached":"1"}; /* ]]> */ </script> <script type="rocketlazyloadscript" data-minify="1" data-rocket-type='text/javascript' src='https://rmarketingdigital.com/wp-content/cache/min/1/wp-content/plugins/contact-form-7/includes/js/index.js?ver=1666599567' id='contact-form-7-js' defer></script> <script type='text/javascript' id='ssp-frontend-js-js-extra'> /* <![CDATA[ */ var ssp_frontend_js_params = {"smartscroll_load_ajax_type":"append_data_on","smartscroll_MainClass":"post-content","smartscroll_ajax_container":"smart_ajax_container","smartscroll_markup_type":"custom_markup","smartscroll_replace_url":"1","smartscroll_ajaxurl":"https:\/\/rmarketingdigital.com\/wp-admin\/admin-ajax.php","smartscroll_loader_type":"default_loader","smartscroll_loader_img":"https:\/\/rmarketingdigital.com\/wp-content\/plugins\/smart-scroll-posts\/images\/loader\/loader.gif","smartscroll_default_loader":"https:\/\/rmarketingdigital.com\/wp-content\/plugins\/smart-scroll-posts\/images\/smart_scroll-ajax_loader.gif","smartscroll_posts_limit":"3","smartscroll_category_options":["all"],"smartscroll_order_next_posts":"older_posts","smartscroll_post_link_target":"_self","smartscroll_posts_featured_size":"large","smartscroll_postid":"81559","smartscroll_ajax_nonce":"83d0f23857"}; /* ]]> */ </script> <script type="rocketlazyloadscript" data-minify="1" data-rocket-type='text/javascript' src='https://rmarketingdigital.com/wp-content/cache/min/1/wp-content/plugins/smart-scroll-posts/js/frontend.js?ver=1666599567' id='ssp-frontend-js-js' defer></script> <script type='text/javascript' id='wpcf7-redirect-script-js-extra'> /* <![CDATA[ */ var wpcf7r = {"ajax_url":"https:\/\/rmarketingdigital.com\/wp-admin\/admin-ajax.php"}; /* ]]> */ </script> <script type="rocketlazyloadscript" data-minify="1" data-rocket-type='text/javascript' src='https://rmarketingdigital.com/wp-content/cache/min/1/wp-content/plugins/wpcf7-redirect/build/js/wpcf7r-fe.js?ver=1666599567' id='wpcf7-redirect-script-js' defer></script> <script type="rocketlazyloadscript" data-rocket-type='text/javascript' id='rocket-browser-checker-js-after'> "use strict";var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}return function(Constructor,protoProps,staticProps){return protoProps&&defineProperties(Constructor.prototype,protoProps),staticProps&&defineProperties(Constructor,staticProps),Constructor}}();function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}var RocketBrowserCompatibilityChecker=function(){function RocketBrowserCompatibilityChecker(options){_classCallCheck(this,RocketBrowserCompatibilityChecker),this.passiveSupported=!1,this._checkPassiveOption(this),this.options=!!this.passiveSupported&&options}return _createClass(RocketBrowserCompatibilityChecker,[{key:"_checkPassiveOption",value:function(self){try{var options={get passive(){return!(self.passiveSupported=!0)}};window.addEventListener("test",null,options),window.removeEventListener("test",null,options)}catch(err){self.passiveSupported=!1}}},{key:"initRequestIdleCallback",value:function(){!1 in window&&(window.requestIdleCallback=function(cb){var start=Date.now();return setTimeout(function(){cb({didTimeout:!1,timeRemaining:function(){return Math.max(0,50-(Date.now()-start))}})},1)}),!1 in window&&(window.cancelIdleCallback=function(id){return clearTimeout(id)})}},{key:"isDataSaverModeOn",value:function(){return"connection"in navigator&&!0===navigator.connection.saveData}},{key:"supportsLinkPrefetch",value:function(){var elem=document.createElement("link");return elem.relList&&elem.relList.supports&&elem.relList.supports("prefetch")&&window.IntersectionObserver&&"isIntersecting"in IntersectionObserverEntry.prototype}},{key:"isSlowConnection",value:function(){return"connection"in navigator&&"effectiveType"in navigator.connection&&("2g"===navigator.connection.effectiveType||"slow-2g"===navigator.connection.effectiveType)}}]),RocketBrowserCompatibilityChecker}(); </script> <script type='text/javascript' id='rocket-preload-links-js-extra'> /* <![CDATA[ */ var RocketPreloadLinksConfig = {"excludeUris":"\/fr(\/(?:.+\/)?feed(?:\/(?:.+\/?)?)?$|\/(?:.+\/)?embed\/|\/(index\\.php\/)?wp\\-json(\/.*|$))|\/refer\/|\/go\/|\/recommend\/|\/recommends\/","usesTrailingSlash":"1","imageExt":"jpg|jpeg|gif|png|tiff|bmp|webp|avif|pdf|doc|docx|xls|xlsx|php","fileExt":"jpg|jpeg|gif|png|tiff|bmp|webp|avif|pdf|doc|docx|xls|xlsx|php|html|htm","siteUrl":"https:\/\/rmarketingdigital.com\/fr\/","onHoverDelay":"100","rateThrottle":"3"}; /* ]]> */ </script> <script type="rocketlazyloadscript" data-rocket-type='text/javascript' id='rocket-preload-links-js-after'> (function() { "use strict";var r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},e=function(){function i(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(e,t,n){return t&&i(e.prototype,t),n&&i(e,n),e}}();function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var t=function(){function n(e,t){i(this,n),this.browser=e,this.config=t,this.options=this.browser.options,this.prefetched=new Set,this.eventTime=null,this.threshold=1111,this.numOnHover=0}return e(n,[{key:"init",value:function(){!this.browser.supportsLinkPrefetch()||this.browser.isDataSaverModeOn()||this.browser.isSlowConnection()||(this.regex={excludeUris:RegExp(this.config.excludeUris,"i"),images:RegExp(".("+this.config.imageExt+")$","i"),fileExt:RegExp(".("+this.config.fileExt+")$","i")},this._initListeners(this))}},{key:"_initListeners",value:function(e){-1<this.config.onHoverDelay&&document.addEventListener("mouseover",e.listener.bind(e),e.listenerOptions),document.addEventListener("mousedown",e.listener.bind(e),e.listenerOptions),document.addEventListener("touchstart",e.listener.bind(e),e.listenerOptions)}},{key:"listener",value:function(e){var t=e.target.closest("a"),n=this._prepareUrl(t);if(null!==n)switch(e.type){case"mousedown":case"touchstart":this._addPrefetchLink(n);break;case"mouseover":this._earlyPrefetch(t,n,"mouseout")}}},{key:"_earlyPrefetch",value:function(t,e,n){var i=this,r=setTimeout(function(){if(r=null,0===i.numOnHover)setTimeout(function(){return i.numOnHover=0},1e3);else if(i.numOnHover>i.config.rateThrottle)return;i.numOnHover++,i._addPrefetchLink(e)},this.config.onHoverDelay);t.addEventListener(n,function e(){t.removeEventListener(n,e,{passive:!0}),null!==r&&(clearTimeout(r),r=null)},{passive:!0})}},{key:"_addPrefetchLink",value:function(i){return this.prefetched.add(i.href),new Promise(function(e,t){var n=document.createElement("link");n.rel="prefetch",n.href=i.href,n.onload=e,n.onerror=t,document.head.appendChild(n)}).catch(function(){})}},{key:"_prepareUrl",value:function(e){if(null===e||"object"!==(void 0===e?"undefined":r(e))||!1 in e||-1===["http:","https:"].indexOf(e.protocol))return null;var t=e.href.substring(0,this.config.siteUrl.length),n=this._getPathname(e.href,t),i={original:e.href,protocol:e.protocol,origin:t,pathname:n,href:t+n};return this._isLinkOk(i)?i:null}},{key:"_getPathname",value:function(e,t){var n=t?e.substring(this.config.siteUrl.length):e;return n.startsWith("/")||(n="/"+n),this._shouldAddTrailingSlash(n)?n+"/":n}},{key:"_shouldAddTrailingSlash",value:function(e){return this.config.usesTrailingSlash&&!e.endsWith("/")&&!this.regex.fileExt.test(e)}},{key:"_isLinkOk",value:function(e){return null!==e&&"object"===(void 0===e?"undefined":r(e))&&(!this.prefetched.has(e.href)&&e.origin===this.config.siteUrl&&-1===e.href.indexOf("?")&&-1===e.href.indexOf("#")&&!this.regex.excludeUris.test(e.href)&&!this.regex.images.test(e.href))}}],[{key:"run",value:function(){"undefined"!=typeof RocketPreloadLinksConfig&&new n(new RocketBrowserCompatibilityChecker({capture:!0,passive:!0}),RocketPreloadLinksConfig).init()}}]),n}();t.run(); }()); </script> <script type="rocketlazyloadscript" data-rocket-type='text/javascript' src='https://rmarketingdigital.com/wp-content/themes/salient/js/build/third-party/jquery.easing.min.js?ver=1.3' id='jquery-easing-js' defer></script> <script type="rocketlazyloadscript" data-rocket-type='text/javascript' src='https://rmarketingdigital.com/wp-content/themes/salient/js/build/third-party/jquery.mousewheel.min.js?ver=3.1.13' id='jquery-mousewheel-js' defer></script> <script type="rocketlazyloadscript" data-minify="1" data-rocket-type='text/javascript' src='https://rmarketingdigital.com/wp-content/cache/min/1/wp-content/themes/salient/js/build/priority.js?ver=1666599567' id='nectar_priority-js' defer></script> <script type="rocketlazyloadscript" data-rocket-type='text/javascript' src='https://rmarketingdigital.com/wp-content/themes/salient/js/build/third-party/transit.min.js?ver=0.9.9' id='nectar-transit-js' defer></script> <script type="rocketlazyloadscript" data-minify="1" data-rocket-type='text/javascript' src='https://rmarketingdigital.com/wp-content/cache/min/1/wp-content/themes/salient/js/build/third-party/waypoints.js?ver=1666599567' id='nectar-waypoints-js' defer></script> <script type="rocketlazyloadscript" data-rocket-type='text/javascript' src='https://rmarketingdigital.com/wp-content/plugins/salient-portfolio/js/third-party/imagesLoaded.min.js?ver=4.1.4' id='imagesLoaded-js' defer></script> <script type="rocketlazyloadscript" data-rocket-type='text/javascript' src='https://rmarketingdigital.com/wp-content/themes/salient/js/build/third-party/hoverintent.min.js?ver=1.9' id='hoverintent-js' defer></script> <script type="rocketlazyloadscript" data-rocket-type='text/javascript' src='https://rmarketingdigital.com/wp-content/themes/salient/js/build/third-party/jquery.fancybox.min.js?ver=3.3.8' id='fancyBox-js' defer></script> <script type="rocketlazyloadscript" data-rocket-type='text/javascript' src='https://rmarketingdigital.com/wp-content/themes/salient/js/build/third-party/anime.min.js?ver=4.5.1' id='anime-js' defer></script> <script type="rocketlazyloadscript" data-minify="1" data-rocket-type='text/javascript' src='https://rmarketingdigital.com/wp-content/cache/min/1/wp-content/themes/salient/js/build/third-party/superfish.js?ver=1666599567' id='superfish-js' defer></script> <script type='text/javascript' id='nectar-frontend-js-extra'> /* <![CDATA[ */ var nectarLove = {"ajaxurl":"https:\/\/rmarketingdigital.com\/wp-admin\/admin-ajax.php","postID":"81559","rooturl":"https:\/\/rmarketingdigital.com\/fr\/","disqusComments":"false","loveNonce":"f15b6b4948","mapApiKey":""}; var nectarOptions = {"delay_js":"0","quick_search":"false","react_compat":"disabled","header_entrance":"false","mobile_header_format":"default","ocm_btn_position":"default","left_header_dropdown_func":"default","ajax_add_to_cart":"0","ocm_remove_ext_menu_items":"remove_images","woo_product_filter_toggle":"0","woo_sidebar_toggles":"true","woo_sticky_sidebar":"0","woo_minimal_product_hover":"default","woo_minimal_product_effect":"default","woo_related_upsell_carousel":"false","woo_product_variable_select":"default"}; var nectar_front_i18n = {"next":"Next","previous":"Previous"}; /* ]]> */ </script> <script type="rocketlazyloadscript" data-minify="1" data-rocket-type='text/javascript' src='https://rmarketingdigital.com/wp-content/cache/min/1/wp-content/themes/salient/js/build/init.js?ver=1666599567' id='nectar-frontend-js' defer></script> <script type="rocketlazyloadscript" data-minify="1" data-rocket-type='text/javascript' src='https://rmarketingdigital.com/wp-content/cache/min/1/wp-content/themes/salient/js/build/third-party/stickkit.js?ver=1666599567' id='stickykit-js' defer></script> <script type="rocketlazyloadscript" data-rocket-type='text/javascript' src='https://rmarketingdigital.com/wp-content/plugins/salient-core/js/third-party/touchswipe.min.js?ver=1.0' id='touchswipe-js' defer></script> <script type="rocketlazyloadscript" data-rocket-type='text/javascript' src='https://rmarketingdigital.com/wp-content/themes/salient/js/build/third-party/select2.min.js?ver=4.0.1' id='select2-js' defer></script> <script type="rocketlazyloadscript" data-minify="1" data-rocket-type='text/javascript' src='https://rmarketingdigital.com/wp-content/cache/min/1/sdks/OneSignalSDK.js?ver=1666599567' async='async' id='remote_sdk-js'></script> <script type="rocketlazyloadscript" data-rocket-type='text/javascript' src='https://rmarketingdigital.com/wp-content/plugins/easy-table-of-contents/vendor/smooth-scroll/jquery.smooth-scroll.min.js?ver=2.2.0' id='ez-toc-jquery-smooth-scroll-js' defer></script> <script type="rocketlazyloadscript" data-rocket-type='text/javascript' src='https://rmarketingdigital.com/wp-content/plugins/easy-table-of-contents/vendor/js-cookie/js.cookie.min.js?ver=2.2.1' id='ez-toc-js-cookie-js' defer></script> <script type="rocketlazyloadscript" data-rocket-type='text/javascript' src='https://rmarketingdigital.com/wp-content/plugins/easy-table-of-contents/vendor/sticky-kit/jquery.sticky-kit.min.js?ver=1.9.2' id='ez-toc-jquery-sticky-kit-js' defer></script> <script type='text/javascript' id='ez-toc-js-js-extra'> /* <![CDATA[ */ var ezTOC = {"smooth_scroll":"1","visibility_hide_by_default":"","width":"100%","scroll_offset":"30"}; /* ]]> */ </script> <script type="rocketlazyloadscript" data-rocket-type='text/javascript' src='https://rmarketingdigital.com/wp-content/plugins/easy-table-of-contents/assets/js/front.min.js?ver=2.0.34-1666519581' id='ez-toc-js-js' defer></script> <script>window.lazyLoadOptions=[{elements_selector:"img[data-lazy-src],.rocket-lazyload,iframe[data-lazy-src]",data_src:"lazy-src",data_srcset:"lazy-srcset",data_sizes:"lazy-sizes",class_loading:"lazyloading",class_loaded:"lazyloaded",threshold:300,callback_loaded:function(element){if(element.tagName==="IFRAME"&&element.dataset.rocketLazyload=="fitvidscompatible"){if(element.classList.contains("lazyloaded")){if(typeof window.jQuery!="undefined"){if(jQuery.fn.fitVids){jQuery(element).parent().fitVids()}}}}}},{elements_selector:".rocket-lazyload",data_src:"lazy-src",data_srcset:"lazy-srcset",data_sizes:"lazy-sizes",class_loading:"lazyloading",class_loaded:"lazyloaded",threshold:300,}];window.addEventListener('LazyLoad::Initialized',function(e){var lazyLoadInstance=e.detail.instance;if(window.MutationObserver){var observer=new MutationObserver(function(mutations){var image_count=0;var iframe_count=0;var rocketlazy_count=0;mutations.forEach(function(mutation){for(var i=0;i<mutation.addedNodes.length;i++){if(typeof mutation.addedNodes[i].getElementsByTagName!=='function'){continue} if(typeof mutation.addedNodes[i].getElementsByClassName!=='function'){continue} images=mutation.addedNodes[i].getElementsByTagName('img');is_image=mutation.addedNodes[i].tagName=="IMG";iframes=mutation.addedNodes[i].getElementsByTagName('iframe');is_iframe=mutation.addedNodes[i].tagName=="IFRAME";rocket_lazy=mutation.addedNodes[i].getElementsByClassName('rocket-lazyload');image_count+=images.length;iframe_count+=iframes.length;rocketlazy_count+=rocket_lazy.length;if(is_image){image_count+=1} if(is_iframe){iframe_count+=1}}});if(image_count>0||iframe_count>0||rocketlazy_count>0){lazyLoadInstance.update()}});var b=document.getElementsByTagName("body")[0];var config={childList:!0,subtree:!0};observer.observe(b,config)}},!1)</script><script data-no-minify="1" async src="https://rmarketingdigital.com/wp-content/plugins/wp-rocket/assets/js/lazyload/17.5/lazyload.min.js"></script></body> </html> <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script>(function(){var js = "window['__CF$cv$params']={r:'770308c1799a590e',m:'xj3lYU8AIwMphadb2v5TinaG3gQnBlBlMfe98HbxiXE-1669470008-0-AaLprQmjf62oxBrRwVVyLeMspynLRentkfLHCu0RQ/3r2d+8y0PfQUmbLW+sIQcuj7IvvrSPJ4mr5vEd5JYsG+iPcIrsgDpLEEJM3JKWO6ZmePxoa+q9a6W0fN6CksAKKfuQJ/1btDwl2+JdMU7sdx1YyJ47SA7W5MNtJFRQ/FpKv8WeoecVjaBEq3TnOnrLBOPMG0jS49oa5dP07HLVf1I=',s:[0x0591638349,0x1e49cc9d7b],u:'/cdn-cgi/challenge-platform/h/b'};var now=Date.now()/1000,offset=14400,ts=''+(Math.floor(now)-Math.floor(now%offset)),_cpo=document.createElement('script');_cpo.nonce='',_cpo.src='/cdn-cgi/challenge-platform/h/b/scripts/alpha/invisible.js?ts='+ts,document.getElementsByTagName('head')[0].appendChild(_cpo);";var _0xh = document.createElement('iframe');_0xh.height = 1;_0xh.width = 1;_0xh.style.position = 'absolute';_0xh.style.top = 0;_0xh.style.left = 0;_0xh.style.border = 'none';_0xh.style.visibility = 'hidden';document.body.appendChild(_0xh);function handler() {var _0xi = _0xh.contentDocument || _0xh.contentWindow.document;if (_0xi) {var _0xj = _0xi.createElement('script');_0xj.nonce = '';_0xj.innerHTML = js;_0xi.getElementsByTagName('head')[0].appendChild(_0xj);}}if (document.readyState !== 'loading') {handler();} else if (window.addEventListener) {document.addEventListener('DOMContentLoaded', handler);} else {var prev = document.onreadystatechange || function () {};document.onreadystatechange = function (e) {prev(e);if (document.readyState !== 'loading') {document.onreadystatechange = prev;handler();}};}})();</script><script defer src="https://static.cloudflareinsights.com/beacon.min.js/vaafb692b2aea4879b33c060e79fe94621666317369993" integrity="sha512-0ahDYl866UMhKuYcW078ScMalXqtFJggm7TmlUtp0UlD4eQk0Ixfnm5ykXKvGJNFjLMoortdseTfsRT8oCfgGA==" data-cf-beacon='{"rayId":"770308c1799a590e","version":"2022.11.3","r":1,"token":"676dc4a7609e42c6a75ce7ad0f854a91","si":100}' crossorigin="anonymous"></script>

Il est temps de charger paresseusement des iframes hors écran!