Retarder le chargement des images et JavaScript dans SharePoint Online

Cet article décrit comment réduire le temps de chargement des pages SharePoint Online en utilisant JavaScript pour retarder le chargement des images, et en attendant la fin de celui des pages avant de charger le JavaScript non essentiel.

Des images peuvent ralentir le chargement de la page sur SharePoint Online. Par défaut, la plupart des navigateurs Internet modernes pré-récupèrent des images lors du chargement d’une page HTML. Cela peut ralentir inutilement le chargement de la page si les images ne sont pas visibles à l’écran tant que l’utilisateur ne fait pas défiler la page vers le bas. Des images peuvent empêcher le navigateur de charger la partie visible de la page. Pour contourner ce problème, vous pouvez commencer par utiliser JavaScript pour éviter de charger les images. Par ailleurs, le chargement de JavaScript non essentiel peut également ralentir les temps de chargement de vos pages SharePoint. Cette rubrique décrit des méthodes que vous pouvez utiliser pour améliorer les temps de chargement de page avec JavaScript dans SharePoint Online.

Améliorer les temps de chargement de page en retardant le chargement d’images dans des pages SharePoint Online avec JavaScript

Vous pouvez utiliser JavaScript pour empêcher un navigateur web de pré-récupérer des images. Cela accélère le rendu du document dans son ensemble. Pour ce faire, supprimez la valeur de l’attribut src de la balise <img>, et remplacez-le par le chemin d’accès d’un fichier dans un attribut de données, tel que : data-src. Par exemple :

<img src=”” data-src=”/sites/NavigationBySearch/_catalogs/masterpage/Images/microsoft-white-8.jpg” />

Avec cette méthode, le navigateur ne télécharge pas les images immédiatement. Si l’image se trouve déjà dans la fenêtre d’affichage, JavaScript indique au navigateur d’extraire l’URL de l’attribut data et de l’insérer en tant que valeur pour l’attribut src. L’image n’est chargée que quand l’utilisateur fait défiler la page jusqu’à l’emplacement où elle se trouve.

Pour que cela se passe, vous devez utiliser JavaScript.

Dans un fichier texte, définissez la fonction isElementInViewport()    pour vérifier si un élément figure ou non dans la partie du navigateur que l’utilisateur peut voir.

function isElementInViewport(el) {
  if (!el)
    return false;
  var rect = el.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth) 
  );
}

Utilisez ensuite isElementInViewport()    dans la fonction loadItemsInView()   . La fonction loadItemsInView()    charge toutes les images qui ont une valeur pour l’attribut data-src si elles figurent dans la partie du navigateur que l’utilisateur peut voir. Ajoutez la fonction suivante au fichier texte :

function loadItemsInView() {
  //Select elements by the row id.
  $("#row [data-src]").each(function () {
      var isVisible = isElementInViewport(this);
      if (isVisible) {
          if ($(this).attr("src") == undefined) {
              $(this).attr("src", $(this).data("src"));
          }
      }
  });
}

Enfin, appelez loadItemsInView()    à partir de window.onscroll()   , comme illustré dans l’exemple suivant. Cela garantit que toute image figurant dans la fenêtre d’affichage est chargée quand l’utilisateur en a besoin, mais pas avant. Ajoutez ce qui suit au fichier texte :

//Example of calling loadItemsInView() from within window.onscroll()
$(window).on("scroll", function () {
    loadItemsInView();
});

Pour SharePoint Online, vous devez associer la fonction suivante à l’événement de défilement sur la balise #s4-workspace <div>. Cela résulte du fait que les événements de fenêtre sont remplacés pour s’assurer que le ruban reste ancré en haut de la page.

//Keep the ribbon at the top of the page
$('#s4-workspace').on("scroll", function () {
    loadItemsInView();
});

Enregistrez le fichier texte en tant que fichier JavaScript avec l’extension .js, par exemple, delayLoadImages.js.

Lorsque vous avez fini d’écrire delayLoadImages.js, vous pouvez ajouter le contenu du fichier à une page maître dans SharePoint Online. Pour ce faire, ajoutez un lien de script à l’en-tête de la page maître. Une fois dans une page maître, le JavaScript est appliqué à toutes les pages de votre SharePoint Online site qui utilisent cette page maître. Par ailleurs, si vous envisagez de n’utiliser ce script que sur une seule page de votre site, utilisez le composant WebPart Éditeur de script pour incorporer le JavaScript dans la page. Pour plus d’informations, voir les rubriques suivantes :

Exemple : faire référence au fichier JavaScript delayLoadImages.js à partir d’une page maître dans SharePoint Online   

Pour ce faire, vous devez également faire référence à jQuery dans la page maître. Dans l’exemple suivant, que vous pouvez voir dans le chargement initial de la page initial qu’une seule image est chargée, mais que la page en contient plusieurs autres.

Capture d’écran montrant une seule image chargée sur la page

La capture d’écran suivante montre le reste des images téléchargées après leur défilement dans l’affichage.

Capture d’écran montrant plusieurs images chargées sur la page

Retarder le chargement des images à l’aide de JavaScript peut être une technique efficace pour accroître les performances. Toutefois, si la technique est appliquée à un site web public, les moteurs de recherche ne sont pas en mesure d’analyser les images de la même façon qu’ils le feraient si l’image était formée de façon classique. Cela peut affecter les classements sur les moteurs de recherche, car les métadonnées de l’image proprement dite ne sont pas vraiment disponibles tant que la page n’est pas chargée. Les robots des moteurs de recherche ne lisant que le code HTML, ils ne voient pas les images en tant que contenu de la page. Les images sont l’un des facteurs utilisés pour classer les pages dans les résultats de recherche. Une façon ce contourner ce problème consiste à utiliser un texte d’introduction pour vos images.

Exemple de code de GitHub : injection de JavaScript pour améliorer les performances

Ne manquez pas l’article et l’exemple de code sur l’injection de JavaScript disponible sur GitHub.

Voir aussi

Navigateurs pris en charge dans Office 2013 et Office 365 ProPlus

Comment appliquer une page maître à un site dans SharePoint 2013

Procédure : Créer une mise en page dans SharePoint 2013

Développez vos compétences
Découvrez des formations
Accédez aux nouvelles fonctionnalités en avant-première
Rejoignez le programme Office Insider

Ces informations vous ont-elles été utiles ?

Nous vous remercions pour vos commentaires.

Merci pour vos commentaires. Il serait vraisemblablement utile pour vous de contacter l’un de nos agents du support Office.

×