Ritardare il caricamento delle immagini e di JavaScript in SharePoint Online

Questo articolo descrive come ridurre i tempi di caricamento delle pagine di SharePoint Online usando JavaScript per ritardare il caricamento delle immagini e attendere il caricamento della pagina prima di caricare JavaScript non essenziale.

Le immagini possono influire negativamente sulle velocità di caricamento delle pagine in SharePoint Online. Per impostazione predefinita, i browser Internet più moderni eseguono la prelettura delle immagini durante il caricamento di una pagina HTML. Questo può rallentare inutilmente il caricamento della pagina, se le immagini non sono visibili sullo schermo fino a quando l'utente non scorre verso il basso. Le immagini possono impedire al browser di caricare la parte visibile della pagina. Per risolvere il problema, è possibile usare JavaScript per saltare il caricamento iniziale delle immagini. Anche il caricamento di JavaScript non essenziale può rallentare il caricamento delle pagine di SharePoint. Questo argomento descrive alcuni metodi che permettono di migliorare i tempi di caricamento delle pagine con JavaScript in SharePoint Online.

Migliorare i tempi di caricamento delle pagine ritardando il caricamento delle immagini nelle pagine di SharePoint Online con JavaScript

È possibile usare JavaScript per impedire a un Web browser di eseguire la prelettura delle immagini. Questo permette di velocizzare il rendering complessivo dei documenti. A questo scopo è possibile rimuovere il valore dell'attributo src dal tag <img> e sostituirlo con il percorso di un file in un attributo dati, ad esempio data-src. Ad esempio:

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

Con questo metodo, il browser non scarica le immagini immediatamente. Se l'immagine è già nel riquadro di visualizzazione, JavaScript indica al browser di recuperare l'URL dall'attributo dati e inserirlo come valore per l'attributo src. L'immagine viene caricata solo man mano che l'utente scorre la visualizzazione rendendola visibile.

A questo scopo, è necessario usare JavaScript.

In un file di testo definire la funzione isElementInViewport()   , per verificare se un elemento si trova o meno nella parte del browser visibile all'utente.

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) 
  );
}

Usare quindi isElementInViewport()    nella funzione loadItemsInView()   . La funzione loadItemsInView()    caricherà tutte le immagini che hanno un valore per l'attributo data-src se si trovano nella parte del browser visibile all'utente. Aggiungere la funzione seguente al file di testo:

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"));
          }
      }
  });
}

Infine, chiamare loadItemsInView()    dall'interno di window.onscroll()   , come illustrato nell'esempio seguente. In questo modo tutte le immagini incluse nel riquadro di visualizzazione vengono caricate quando servono all'utente, ma non prima. Aggiungere quanto segue al file di testo:

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

Per SharePoint Online è necessario associare la funzione seguente all'evento di scorrimento nel tag <div> #s4-workspace. Gli eventi della finestra vengono sovrascritti per fare in modo che la barra multifunzione rimanga associata alla parte superiore della pagina.

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

Salvare il file di testo come file JavaScript con estensione js, ad esempio delayLoadImages.js.

Al termine della scrittura di delayLoadImages.js, è possibile aggiungere il contenuto del file a una pagina master in SharePoint Online. A questo scopo, aggiungere un collegamento di script all'intestazione nella pagina master. Quando si trova in una pagina master, il codice JavaScript viene applicato a tutte le pagine del sito di SharePoint Online che usano tale layout di pagina master. In alternativa, se si prevede di usarlo in una sola pagina del sito, usare la Web part Editor dello script per incorporare il codice JavaScript nella pagina. Per altre informazioni, vedere questi argomenti:

Esempio: Fare riferimento al file delayLoadImages.js di JavaScript da una pagina master in SharePoint Online   

A questo scopo è necessario fare riferimento anche a jQuery nella pagina master. L'esempio seguente mostra come durante il caricamento iniziale della pagina viene caricata una sola immagine, ma ce ne sono diverse altre nella pagina.

Immagine di una nuova attività in un diagramma reticolare.

Lo screenshot seguente mostra come le altre immagini vengono scaricate dopo che diventano visibili.

Screenshot di più immagini caricate in una pagina

Ritardare il caricamento delle immagini usando JavaScript può risultare efficace in termini di aumento delle prestazioni. Tuttavia, se questa tecnica viene applicata a un sito Web pubblico i motori di ricerca non potranno effettuare la ricerca per indicizzazione delle immagini come avviene per le immagini di formato corretto. Questo può influire sulle classifiche nei motori di ricerca, perché i metadati dell'immagine stessa non sono realmente presenti fino a quando non viene caricata la pagina. I crawler dei motori di ricerca leggono soltanto il codice HTML e non vedono le immagini come contenuto della pagina. Le immagini sono uno dei fattori usati per le classifiche delle pagine nei risultati della ricerca. Una possibile soluzione alternativa consiste nell'usare testo introduttivo per le immagini.

Esempio di codice in GitHub: inserimento di codice JavaScript per migliorare le prestazioni

Vedere l'articolo e il codice di esempio relativi all'inserimento di codice JavaScript disponibili in GitHub.

Vedere anche

Browser supportati in Office 2013 e Office 365 ProPlus

Procedura: Applicare una pagina master a un sito in SharePoint 2013

Procedura: Creare un layout di pagina in SharePoint 2013

Amplia le tue competenze
Esplora i corsi di formazione
Ottieni in anticipo le nuove caratteristiche
Partecipa al programma Office Insider

Queste informazioni sono risultate utili?

Grazie per i tuoi commenti e suggerimenti

Grazie per il tuo feedback! Potrebbe essere utile metterti in contatto con uno dei nostri operatori del supporto di Office.

×