Ottimizzazione del caricamento delle immagini
Parliamo di caricamento pigro
Su Tilda, il caricamento pigro è abilitato di default per tutti i siti web. Permette ai siti web di caricarsi più velocemente, anche sui dispositivi mobili.
L'implementazione del caricamento pigro è un ulteriore passo avanti nell'ottimizzazione dei siti web su Tilda per un caricamento più rapido. Le tecnologie sono in continua evoluzione e noi lavoriamo sempre per rendere il caricamento ancora più veloce.
Lazy Load è un plugin che blocca il caricamento delle immagini al di fuori dell'area di visualizzazione. In altre parole, le immagini vengono caricate man mano che l'utente scorre la pagina. Vediamo come funziona.
Selezioniamo un normale modello Tilda e pubblichiamolo: http://project130385.tilda.ws/
Apriamo la console sviluppatori del browser, abilitiamo l'imitazione a bassa velocità (3G) nelle impostazioni e aggiorniamo la pagina.
Selezioniamo un normale modello Tilda e pubblichiamolo: http://project130385.tilda.ws/
Apriamo la console sviluppatori del browser, abilitiamo l'imitazione a bassa velocità (3G) nelle impostazioni e aggiorniamo la pagina.
DOMContentLoaded: 628 millisecondi
Questo parametro indica che tutti gli script di base e l'HTML sono stati caricati, consentendo all'utente di visualizzare subito la pagina.
Finish: 1,65 secondi
Questo parametro indica il tempo di caricamento dell'intero sito web.
Trasferito: 263KB
Questo parametro indica la quantità di dati trasferiti (in byte).
Questo parametro indica che tutti gli script di base e l'HTML sono stati caricati, consentendo all'utente di visualizzare subito la pagina.
Finish: 1,65 secondi
Questo parametro indica il tempo di caricamento dell'intero sito web.
Trasferito: 263KB
Questo parametro indica la quantità di dati trasferiti (in byte).
Queste cifre sembrano molto ottimistiche, ma tutto è relativo, no? Andate nelle Impostazioni del sito → Altro e selezionate la casella di controllo "Disabilita il caricamento pigro delle immagini". Testate ancora una volta la pagina.
DOMContentLoaded: 697 millisecondi
Questo parametro indica che tutti gli script di base e il codice HTML sono stati caricati, il che significa che l'utente può visualizzare subito la pagina.
Finish: 10,14 secondi
Questo parametro indica il tempo di caricamento dell'intero sito web.
Trasferito: 1,8MB
Questo parametro indica la quantità di dati trasferiti (in byte).
Questo parametro indica che tutti gli script di base e il codice HTML sono stati caricati, il che significa che l'utente può visualizzare subito la pagina.
Finish: 10,14 secondi
Questo parametro indica il tempo di caricamento dell'intero sito web.
Trasferito: 1,8MB
Questo parametro indica la quantità di dati trasferiti (in byte).
Il tempo di caricamento complessivo della pagina e la quantità di dati trasferiti si sono moltiplicati.
Vediamo cos'altro possiamo imparare utilizzando PageSpeed Insights. Controlliamo la pagina con l'ottimizzazione disattivata.
Vediamo cos'altro possiamo imparare utilizzando PageSpeed Insights. Controlliamo la pagina con l'ottimizzazione disattivata.
Ora, abilitiamo il caricamento pigro delle immagini:
Lazy Load blocca le immagini che non sono visibili agli utenti,
che permette ai siti web di caricarsi più velocemente.
che permette ai siti web di caricarsi più velocemente.
Nota
Come posso rimuovere il codice JavaScript e CSS che impedisce la visualizzazione della parte superiore della pagina?
Questa domanda sorge spesso dopo aver fatto il test. Google sconsiglia l'uso di script all'inizio della pagina.
In teoria, è possibile rimuovere gli script. Tuttavia, bisogna tenere presente che si tratta di un'analisi automatizzata e non è accurata. Come abbiamo visto, le pagine si caricano molto velocemente quando il Lazy Load è abilitato, perché abbiamo ottimizzato tutto ciò che c'era da ottimizzare. L'analisi ha mostrato che la rimozione degli script fa risparmiare 0,3 secondi, ma non fa praticamente alcuna differenza.
Per questo motivo consigliamo di ignorare i risultati del test automatico che reagisce così male agli script nella parte superiore della pagina.
A proposito, come fa Google a superare il suo stesso test?
Per questo motivo consigliamo di ignorare i risultati del test automatico che reagisce così male agli script nella parte superiore della pagina.
A proposito, come fa Google a superare il suo stesso test?
Ops!
