La porzione di immagini e video nel payload tipico di un sito web può essere significativa. Sfortunatamente, gli stakeholder del progetto potrebbero non essere disposti a eliminare risorse multimediali dalle applicazioni esistenti. Tali problemi sono frustranti, soprattutto quando tutte le parti coinvolte vogliono migliorare le prestazioni del sito, ma non sono d'accordo su come arrivarci. Fortunatamente, il caricamento lento è una soluzione che riduce il payload della pagina iniziale e il tempo di caricamento, ma non limita i contenuti.
Che cos'è il caricamento lento?
Il caricamento lento è una tecnica che impedisce il caricamento delle risorse non critiche al momento del caricamento della pagina. Queste risorse non critiche vengono invece caricate al momento del bisogno. Per le immagini, "non critico" è spesso sinonimo di "fuori schermo". Se hai utilizzato Lighthouse ed esaminato alcune opportunità di miglioramento, potresti aver visto alcune indicazioni in questo ambiente sotto forma di controllo Rimanda immagini fuori schermo:
Probabilmente hai già visto il caricamento lento in azione, che si presenta in questo modo:
- Arrivi a una pagina e inizi a scorrere mentre leggi i contenuti.
- A un certo punto, scorri un'immagine segnaposto all'interno dell'area visibile.
- L'immagine segnaposto viene improvvisamente sostituita dall'immagine finale.
Puoi trovare un esempio di caricamento lento delle immagini sulla popolare piattaforma di pubblicazione Medium, che carica immagini segnaposto leggere al caricamento della pagina e le sostituisce con immagini caricate lentamente quando si fanno scorrere nell'area visibile.
Se non hai dimestichezza con il caricamento lento, ti starai chiedendo quanto sia utile questa tecnica e quali siano i suoi vantaggi. Continua a leggere per scoprirlo.
Perché utilizzare il caricamento lento per le immagini o i video invece di caricarli solo?
Perché è possibile che tu stia caricando contenuti che l'utente potrebbe non vedere mai. Questo problema è problematico per un paio di motivi:
- Spreca dati. Sulle connessioni illimitate, questa non è la cosa peggiore che possa verificarsi (sebbene potresti utilizzare quella preziosa larghezza di banda per scaricare altre risorse che verranno effettivamente visualizzate dall'utente). Nel caso di piani dati limitati, tuttavia, caricare contenuti che l'utente non vede mai potrebbe essere effettivamente uno spreco di denaro.
- Spreca tempo di elaborazione, batterie e altre risorse di sistema. Una volta scaricata una risorsa multimediale, il browser deve decodificarla e visualizzare i relativi contenuti nell'area visibile.
Il caricamento lento di immagini e video riduce il tempo di caricamento iniziale della pagina, il suo peso iniziale e l'utilizzo delle risorse di sistema, il che ha un impatto positivo sulle prestazioni.
Implementazione del caricamento lento
Esistono vari modi per implementare il caricamento lento. La soluzione scelta deve prendere in considerazione i browser supportati e i browser a 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 per eseguire il caricamento lento su elementi senza caricamento lento integrato, puoi implementare una soluzione con il tuo codice JavaScript.
Esistono anche diverse librerie che possono aiutarti a farlo.
Per informazioni dettagliate su tutti questi approcci, consulta i post su questo sito:
Inoltre, abbiamo compilato un elenco di potenziali problemi con il caricamento lento e aspetti da considerare durante l'implementazione.
Conclusione
Se utilizzati con cautela, le immagini e i video con caricamento lento possono ridurre drasticamente il tempo di caricamento iniziale e i payload delle pagine sul tuo sito, inclusi i Segnali web essenziali. Gli utenti non devono sostenere attività di rete inutili, inclusi conflitti di rete per connessioni più lente, e costi di elaborazione delle risorse multimediali che potrebbero non vedere mai, ma se lo desiderano possono comunque visualizzare queste risorse.
Per quanto riguarda le tecniche di miglioramento delle prestazioni, il caricamento lento è ragionevolmente non controverso. Se il tuo sito include molte immagini in linea, è un metodo perfetto per ridurre i download inutili. Gli utenti del sito e gli stakeholder del progetto lo apprezzeranno.