La porzione di immagini e video nel payload tipico di un sito web può essere significativo. Purtroppo, gli stakeholder del progetto potrebbero non essere disposti a eliminare le risorse multimediali diverse applicazioni. Questi impasse sono frustranti soprattutto quando tutte le parti coinvolte vogliono migliorare le prestazioni del sito, ma non siamo d'accordo su come arrivarci. Fortunatamente, il caricamento lento è una soluzione che riduce il payload iniziale della pagina e tempo di caricamento, senza tuttavia ridurre i contenuti.
Che cos'è il caricamento lento?
Il caricamento lento è una tecnica che rimanda il caricamento di risorse non critiche sulla pagina. il tempo di caricamento. Queste risorse non critiche vengono invece caricate al momento necessaria. Per quanto riguarda le immagini, i valori "non critici" è spesso sinonimo di "fuori schermo". Se hai usato Lighthouse ed esaminato alcune opportunità di di miglioramento delle prestazioni, potresti aver visto alcune indicazioni in questo ambito sotto forma di Rinvia il controllo delle immagini fuori schermo:
Probabilmente hai già visto il caricamento lento in azione, questo:
- Arriva in una pagina e inizi a scorrere man mano che leggi i contenuti.
- A un certo punto, puoi scorrere un'immagine segnaposto all'interno dell'area visibile.
- L'immagine segnaposto viene improvvisamente sostituita dall'immagine finale.
Un esempio di caricamento lento delle immagini è disponibile sulla popolare piattaforma di pubblicazione Medio, che carica immagini segnaposto leggere al caricamento pagina e le sostituisce con immagini caricate tramite caricamento lento mentre vengono fatte scorrere nell'area visibile.
Se non hai dimestichezza con il caricamento lento, ti starai chiedendo quanto sia utile della tecnica e quali sono i suoi vantaggi. Continua a leggere per scoprirlo.
Perché utilizzare il caricamento lento di immagini o video invece di caricarli?
Perché è possibile che tu stia caricando contenuti che l'utente potrebbe non visualizzare. Questo è problematico per due motivi:
- Spreca dati. Sulle connessioni unmetered, questa non è la cosa peggiore che potrebbe (anche se potresti utilizzare quella preziosa larghezza di banda per scaricare altre risorse che verranno effettivamente viste dall'utente). Su dati limitati piani, tuttavia, caricare contenuti che l'utente non vede mai potrebbe rappresentare uno spreco di risorse. dei loro soldi.
- Spreca tempo di elaborazione, batteria e altre risorse di sistema. Dopo un file multimediale risorsa viene scaricata, il browser deve decodificarla e visualizzare i suoi contenuti nella area visibile.
Il caricamento lento di immagini e video riduce il tempo di caricamento iniziale della pagina, peso della pagina e utilizzo delle risorse di sistema, tutti fattori che hanno un impatto positivo delle prestazioni.
Implementazione del caricamento lento
Esistono diversi modi per implementare il caricamento lento. La soluzione scelta deve tenere conto dei browser supportati, oltre ai contenuti su cui stai tentando di eseguire il caricamento lento.
I browser moderni implementano il caricamento lento a livello di browser,
che può essere attivato utilizzando l'attributo loading su immagini e iframe.
Per garantire la compatibilità con browser meno recenti
o il caricamento lento sugli elementi senza caricamento lento integrato
puoi implementare una soluzione con il tuo codice JavaScript.
A questo scopo, sono disponibili anche diverse librerie.
Per informazioni dettagliate su tutti questi approcci, consulta i post di questo sito:
Inoltre, abbiamo compilato un elenco di potenziali problemi relativi al caricamento lento, e gli aspetti a cui prestare attenzione nella tua implementazione.
Conclusione
Se utilizzata con cautela, il caricamento lento di immagini e video può ridurre notevolmente tempo di caricamento e payload delle pagine sul tuo sito, tra cui Core Web Vitals. Per gli utenti non è necessario incorrere in una rete attività, inclusa la contesa della rete su connessioni più lente, e i costi di elaborazione di risorse multimediali che potrebbero non vedere mai, ma possono comunque visualizzare le risorse, se lo desiderano.
Per quanto riguarda le tecniche di miglioramento delle prestazioni, il caricamento lento è ragionevolmente controverso. Se nel tuo sito sono presenti molte immagini in linea, un modo perfetto per ridurre i download non necessari. Gli utenti del tuo sito e gli stakeholder del progetto lo apprezzeranno.