Résumé

Le chargement paresseux est une technique qui améliore la vitesse de la page et la visualisation des annonces en mettant en pause le chargement des annonces jusqu'à ce qu'elles soient sur le point d'entrer dans la fenêtre d'affichage de l'utilisateur. Il est idéal pour les articles longs ou les pages au défilement infini. Ce guide fournit des instructions étape par étape sur la façon d'intégrer le chargement paresseux pour les sites WordPress et non-WordPress.

1. Qu'est-ce que Lazy Loading ?

Le chargement paresseux vous permet de charger des pages plus rapidement, de réduire la consommation et la discorde des ressources et d'améliorer le taux d'affichage en mettant en pause la demande et le rendu des annonces jusqu'à ce qu'elles s'approchent de la fenêtre de l'utilisateur. Cela signifie que Lazy Loading consiste à ajouter une balise publicitaire de manière asynchrone, tous les X paragraphes de vos articles.

2. Comment fonctionne Lazy Loading ?

Notre système fournit normalement seulement deux mégabanners (haut et bas) par page pour plusieurs raisons:

Le chargement paresseux fournit une solution pour afficher plus d'annonces sur de longues pages sans ces effets négatifs.

3. Quand utiliser Lazy Loading

Lorsque vous avez de longs articles ou des pages de défilement infinies, nous vous recommandons de dupliquer dynamiquement nos balises comme vous le souhaitez dans les iframes au sein d'une même page.

Voici une page d'exemple:https://www.themoneytizer.com/demo/preview_lazy_loading

Dans cet exemple de site, les 2 mégabanners en haut de la page sont chargés normalement via une intégration copier-coller de nos balises JS dans le code, ils se chargent en même temps que la page. En revanche, les deux autres mégabanners qui se trouvent plus bas dans les articles, qui se trouvent dans le flux de l'article, sont déclenchés dès que leur emplacement devient visible par l'utilisateur lors du défilement de la page.

4. Comment intégrer le chargement paresseux

a) Chargement paresseux avec WordPress

Prérequis:

• Ardoise viergeextension

• Inserteur d'annonceextension

Mise en œuvre:

• Étape 1 : Créez la Page Annonce

1. Allez dans l'onglet "Pages" et créez une nouvelle page.

2. Dans la barre latérale droite, sous "Attributs de page", sélectionnez le modèle "Ardoise blanche".

3. Dans le contenu de la page, ajoutez un bloc "HTML personnalisé" et collez votre balise publicitaire.

4. Publiez cette page et revenez à la liste Pages.

5. Renommez le champ Slug de cette nouvelle page pourtmz-parazy-charging
   

• Étape 2: Configurer Ad Inserter

1. <iframe>Code :
   

<iframe src="../tmz-lazy-loading" loading="lazy" scrolling="no" width="310" height="260" frameborder="0"></iframe>

Attention :Ce code a les dimensions d'un Top Medium Rectangle (300x250).

<iframe src="../tmz-lazy-loading" loading="lazy" scrolling="no" width="738" height="100" frameborder="0"></iframe>

b) Loading paresseux sans WordPress

Prérequis:

• Accès FTP pour votre site web

• Notions en Javascript

Mise en œuvre:

• Par exemple, si vous choisissez un mégabanner à l'étape 1, votre code sera :

<iframe src="../tmz-lazy-loading" loading="lazy" scrolling="no" width="738" height="100" frameborder="0"></iframe>

Vous devez maintenant créer un script Javascript qui ciblera vos paragraphes et ajoutera l'iframe tous les X paragraphes de vos articles.

Html

<scripttype="texte/javascript">

(fonction(){

setTimeout(function(){

pour(varj=1 ;document.querySelectorAll("p").longueur>j ;j++){

si(j%3===0){

document.querySelectorAll("p")[j].insertAdjacentHTML('afterend',

'<iframesrc="../tmz-parazy-loading.html"chargement="paresseux"défilement="non"largeur="738"hauteur="100"frameborder="0">');

}

}

},2000) ;

})();

</script>