Come velocizzare la navigazione con Chrome

Come attivare il lazy image loading e il lazy iframe loading nelle funzioni sperimentali di Chrome per caricare solo le immagini e i video visibili al lettore per velocizzare il caricamento

Gli amministratori di siti su Wordpress hanno a disposizione dei plugin che gli consentono di caricare le pagine dei loro siti più velocemente, quando siano aperti con qualsiasi browser. Il plugin più usato in questo senso è quello che utilizza la tecnologia denominata LazyLoading, che si potrebbe tradurre come Caricamento Pigro.

Con tale plugin le immagini dei post, dei widget e dell'header, oltre agli iframe dei video,  vengono caricati solo se servono, in modo da mostrare i contenuti della pagina ancor prima che i suoi elementi siano stati interamente caricati. In sostanza il browser carica alcuni oggetti HTML solo quando è necessario farlo. Se scriviamo dei post piuttosto lunghi, pieni di immagini e/o di video, con il Lazy Loading, verranno caricati solo i contenuti che servono dal punto di vista del lettore. Se il navigatore sta leggendo la prima parte del post, verranno caricate solo le immagini presenti in quella parte, mentre quelle più in basso, verranno caricate solo quando scorrerà la pagina.

Esiste uno script che applica questa tecnologia anche alla piattaforma Blogger e che magari presenterò prossimamente in un altro articolo. Utilizza la Libreria jQuery che è già presente di default in molti Temi Personalizzati di Blogger scaricati da internet o personalizzati dall'utente.

Anche Chrome ha recentemente implementato la tecnologia del Lazy Loading, sia pure come funzione sperimentale attivabile dalla pagine nascoste delle flag.

Attivando questa opzione sarà possibile visualizzare le pagine aperte dal browser caricando solo quello che è necessario, cioè che si trova nella parte della pagina che viene visualizzata. In questo modo si velocizza il caricamento della pagina e potremo vederne i primi contenuti in un tempo molto più breve. In sostanza con il Lazy Loading viene caricato solo quello che è visibile nello schermo.

Per attivare il Lazy Loading su Chrome andate sul menù in alto a destra e scegliete Impostazioni -> Informazioni su Chrome per controllare che il browser sia aggiornato. La versione stabile nel momento in cui scrivo il post è la 68. Dopo questa verifica aprite la pagina delle flag chrome://flags/.

Con Ctrl+F cercate Lazy. Visualizzerete la sezione Enable lazy frame loading, oppure aprite direttamente tale sezione incollando nel browser questo indirizzo chrome://flags/#enable-lazy-frame-loading

Nel menù accanto a tale sezione, selezionate la voce Enabled ,al posto di Default.

Verrà mostrato in basso a destra il pulsante Relaunch Now, su cui cliccare per riavviare il browser. Con questa opzione verranno caricati gli iframe solo quando il lettore scorrerà la pagina fino a visualizzarli.

Nella versione Chrome Dev, che attualmente è la 70, è presente anche la funzione sperimentale per attivare il Lazy Loading delle immagini. Si cerca sempre Lazy nella pagina delle flag. L'URL diretto è il seguente

chrome://flags/#enable-lazy-image-loading

Nel menù della sezione, si sceglie Enabled al posto di Default per poi andare su Relaunch Now in basso a destra. In questo modo oltre a posticipare il caricamento degli iframe (video di Youtube per esempio), verrà procrastinato anche il caricamento delle immagini.  Quando la versione 70 diventerà quella stabile di Chrome, cioè tra due aggiornamenti, Chrome diventerà ancora più veloce se verranno attivate queste due funzionalità. Per il momento potete fare un test aprendo, con il Lazy Loading attivato, una pagina con un video con la versione stabile di Chrome e una pagina con molte immagini nella versione Developers, per testare la differenza di velocità di caricamento. Ovviamente per tornare alla situazione iniziale, basterà selezionare Default al posto di Enabled e riavviare il browser.