Ritardare il caricamento di immagini e JavaScript in SharePoint
L'articolo descrive come ridurre il tempo di caricamento delle pagine di SharePoint usando JavaScript per ritardare il caricamento delle immagini e anche aspettando di caricare JavaScript non essenziale fino al caricamento della pagina.
Le immagini possono influire negativamente sulla velocità di caricamento delle pagine in SharePoint. Per impostazione predefinita, la maggior parte dei browser Internet moderni prelettura immagini durante il caricamento di una pagina HTML. Questo processo può causare un caricamento lento 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 questo problema, è possibile utilizzare JavaScript per ignorare prima il caricamento delle immagini. Inoltre, il caricamento di JavaScript non essenziale può rallentare anche i tempi di download nelle pagine di SharePoint. Questo articolo descrive alcuni metodi che è possibile usare per migliorare i tempi di caricamento delle pagine con JavaScript in SharePoint.
Migliorare i tempi di caricamento delle pagine ritardando il caricamento delle immagini nelle pagine di SharePoint usando JavaScript
È possibile usare JavaScript per impedire a un Web browser di prelettura delle immagini. Questa tecnica accelera il rendering complessivo dei documenti. A tale scopo, rimuovere il valore dell'attributo src dal <tag img> e sostituirlo con il percorso di un file in un attributo di dati, ad esempio: data-src. Ad esempio:
<img src="" data-src="/sites/NavigationBySearch/_catalogs/masterpage/media/microsoft-white-8.jpg" />
In questo metodo, il browser non scarica immediatamente le immagini. Se l'immagine è già nel riquadro di visualizzazione, JavaScript indica al browser di recuperare l'URL dall'attributo dati e di inserirlo come valore per l'attributo src. L'immagine viene caricata solo quando l'utente scorre e arriva all'immagine.
Per eseguire questa funzione, è necessario usare JavaScript.
In un file di testo, definire la funzione isElementInViewport() per controllare se un elemento fa o meno 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)
);
}
Utilizzare quindi isElementInViewport() nella funzione loadItemsInView(). La funzione loadItemsInView() carica tutte le immagini con un valore per l'attributo data-src se si trovano nella parte del browser visibile all'utente. Aggiungere la seguente funzione 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() da window.onscroll() come illustrato nell'esempio seguente. Questa funzione garantisce che tutte le immagini presenti nel riquadro di visualizzazione vengano caricate in base alle esigenze dell'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, è necessario collegare la funzione seguente all'evento di scorrimento nel tag div> #s4-workspace <perché gli eventi della finestra vengono sottoposti a override per garantire che la barra multifunzione rimanga collegata 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 un file JavaScript con estensione js, ad esempio delayLoadImages.js.
Al termine della scrittura delayLoadImages.js, è possibile aggiungere il contenuto del file a una pagina master in SharePoint aggiungendo un collegamento di script all'intestazione nella pagina master. Quando si trova in una pagina master, JavaScript viene applicato a tutte le pagine del sito di SharePoint che usano tale layout di pagina master. In alternativa, se si intende usare la funzionalità solo in una pagina del sito, usare la web part dell'editor di script per incorporare JavaScript nella pagina. Per ulteriori informazioni consulta:
Esempio: Fare riferimento al file di delayLoadImages.js JavaScript da una pagina master in SharePoint
Per il funzionamento di questo esempio, è anche necessario fare riferimento a jQuery nella pagina master. Nell'esempio seguente, nel caricamento iniziale della pagina è possibile notare che è caricata solo un'immagine, ma ce ne sono molte altre nella pagina.
Lo screenshot seguente mostra le altre immagini scaricate dopo lo scorrimento nella visualizzazione.
Ritardare il caricamento di immagini usando JavaScript può essere una tecnica efficace per aumentare le prestazioni; tuttavia, se la tecnica viene applicata su un sito Web pubblico, i motori di ricerca non sono in grado di eseguire la ricerca per indicizzazione delle immagini nello stesso modo in cui eseguirebbero la ricerca per indicizzazione di un'immagine regolarmente formata. Questa tecnica può influire sulle classificazioni nei motori di ricerca perché i metadati nell'immagine stessa non sono disponibili fino al caricamento della pagina. Search i crawler del motore leggono solo il codice HTML e pertanto non possono visualizzare le immagini come contenuto nella pagina. Le immagini sono uno dei fattori usati per classificare le pagine nei risultati della ricerca. Una soluzione alternativa consiste nell'usare testo introduttivo per le immagini.
Esempio di codice GitHub: inserimento di JavaScript per migliorare le prestazioni
Non perdere l'articolo e l'esempio di codice sull'inserimento JavaScript fornito in GitHub.
Vedere anche
Browser supportati in Office 2013 e Microsoft 365 Apps for enterprise
Procedura: Applicare una pagina master a un sito in SharePoint 2013