Apprendimento dell'adozione dell'attributo di caricamento standardizzato
L'obiettivo di questo post è far capire agli sviluppatori e ai collaboratori della piattaforma CMS (ovvero le persone che sviluppano core CMS) che ora è giunto il momento di implementare il supporto per la funzionalità di caricamento lento delle immagini a livello di browser. Condividerò inoltre consigli su come garantire esperienze utente di alta qualità e abilitare la personalizzazione da parte di altri sviluppatori durante l'implementazione del caricamento lento. Queste linee guida derivano dalla nostra esperienza nell'aggiunta di supporto a WordPress e dall'aiuto di Joomla, Drupal e TYPO3 a implementare la funzionalità.
Che tu sia uno sviluppatore di una piattaforma CMS o un utente di CMS (ovvero una persona che crea siti web con un CMS), puoi leggere questo post per saperne di più sui vantaggi del caricamento lento a livello di browser nel tuo CMS. Consulta la sezione Passaggi successivi per suggerimenti su come incoraggiare la tua piattaforma CMS a implementare il caricamento lento.
Contesto
Nell'ultimo anno, il caricamento lento di immagini e iframe tramite l'attributo loading è entrato a far parte dello standard HTML WHATWG e ha notato una crescente adozione da parte di vari browser.
Questi traguardi, tuttavia, gettano solo le basi per un Web più rapido e risparmiando risorse.
Ora si trova nell'ecosistema web distribuito per utilizzare l'attributo loading.
I sistemi di gestione dei contenuti supportano circa il 60% dei siti web, perciò queste piattaforme svolgono un ruolo vitale nell'adozione sul web delle moderne funzionalità dei browser. Data la presenza di alcuni CMS open source popolari come
WordPress,
Joomla e
TYPO3 che hanno già
implementato il supporto per l'attributo loading nelle immagini, diamo un'occhiata ai
loro approcci e ai concetti pertinenti per l'adozione della funzionalità
anche in altre piattaforme CMS. Il caricamento lento dei contenuti multimediali è una funzionalità chiave per le prestazioni web di cui i siti dovrebbero trarre vantaggio su larga scala. Per questo motivo, consigliamo di adottarli a livello principale del CMS.
Il caso dell'implementazione del caricamento lento adesso
Standardizzazione
L'adozione di funzionalità del browser non standardizzate nei CMS facilita i test diffusi e può mettere in evidenza potenziali aree di miglioramento. Tuttavia, il consenso generale tra i CMS è che, finché una funzionalità del browser non è standardizzata, preferibilmente deve essere implementata sotto forma di estensione o plug-in per la rispettiva piattaforma. Solo una volta standardizzata, una funzionalità può essere presa in considerazione per l'adozione nel core della piattaforma.
Supporto del browser
Il supporto della funzionalità da parte dei browser è simile: la maggior parte degli utenti di CMS dovrebbe poter usufruire di questa funzionalità. Se esiste una notevole percentuale di browser in cui la funzionalità non è ancora supportata, la funzionalità deve garantire almeno che non producano effetti negativi.
Soglie di distanza dall'area visibile
Un problema comune delle implementazioni del caricamento lento è che, in linea di principio, aumentano la probabilità che un'immagine non venga caricata una volta che diventa visibile nell'area visibile dell'utente perché il ciclo di caricamento inizia in una fase successiva. Al contrario delle precedenti soluzioni basate su JavaScript, i browser adottano questo approccio conservativo e, inoltre, possono perfezionarlo in base a dati reali dell'esperienza utente, riducendo al minimo l'impatto, in modo che il caricamento lento a livello di browser possa essere adottato in sicurezza dalle piattaforme CMS.
Consigli sull'esperienza utente
Richiedi attributi di dimensione negli elementi
Per evitare variazioni del layout, da sempre consigliamo di
i contenuti incorporati, come immagini o iframe, debbano sempre includere gli attributi di dimensione width e height,
in modo che il browser possa dedurre le proporzioni di questi elementi prima
di caricarli effettivamente. Questo suggerimento è pertinente indipendentemente dal fatto che un elemento
venga caricato o meno con il caricamento lento. Tuttavia, data la maggiore probabilità dello 0,1% che un'immagine non venga caricata completamente una volta nell'area visibile, diventa leggermente più applicabile con il caricamento lento.
È preferibile che i CMS forniscano attributi relativi alle dimensioni su tutte le immagini e gli iframe. Se questo non è possibile per tutti gli elementi di questo tipo, ti consigliamo di saltare il caricamento lento delle immagini che non forniscono entrambi questi attributi.
Evitare il caricamento lento di elementi above the fold
Al momento, consigliamo ai CMS di aggiungere solo attributi loading="lazy" alle immagini e agli iframe posizionati below the fold, per evitare ritardi nella metrica Largest Contentful Paint, che in alcuni casi può essere significativa come rilevata a luglio 2021. Tuttavia, occorre
considerare che è complesso valutare la posizione di un elemento
relativa all'area visibile prima del processo di rendering. Ciò vale soprattutto se il CMS utilizza un approccio automatizzato per l'aggiunta degli attributi loading, ma anche in base all'intervento manuale, devono essere presi in considerazione diversi fattori come le diverse dimensioni e proporzioni dell'area visibile. Tuttavia, consigliamo vivamente di omettere le immagini hero e altre immagini o iframe che potrebbero essere visualizzati above the fold per via del caricamento lento.
Evita un fallback di JavaScript
Sebbene JavaScript possa essere utilizzato per fornire il caricamento lento ai browser che non (ancora) supportano l'attributo loading, questi meccanismi si basano sempre sulla rimozione iniziale dell'attributo src di un'immagine o di un iframe, il che causa un ritardo per i browser che supportano l'attributo. Inoltre, l'implementazione di una soluzione basata su JavaScript nei frontend di un CMS su larga scala aumenta la superficie di potenziali problemi, motivo per cui nessun importante CMS aveva adottato il caricamento lento nel suo nucleo prima della funzionalità del browser standardizzato.
Consigli tecnici
Attiva il caricamento lento per impostazione predefinita
In generale, per i CMS che implementano il caricamento lento a livello di browser, è consigliabile attivarlo per impostazione predefinita, ossia loading="lazy" deve essere aggiunto a immagini e iframe, preferibilmente solo per gli elementi che includono attributi di dimensione.
L'abilitazione della funzionalità per impostazione predefinita comporta un maggiore risparmio di risorse di rete rispetto all'abilitazione manuale, ad esempio in base alle singole immagini.
Il più possibile, l'elemento loading="lazy" dovrebbe
essere aggiunto soltanto agli elementi che probabilmente appaiono below the fold.
Anche se l'implementazione di questo requisito in un CMS può essere complessa a causa della mancanza di awareness lato client e di varie dimensioni dell'area visibile, è consigliabile almeno utilizzare euristiche approssimative per omettere elementi come le immagini hero che probabilmente appariranno above the fold dopo il caricamento lento.
Consenti modifiche per elemento
Anche se loading="lazy" deve essere aggiunto a immagini e iframe per impostazione predefinita, è fondamentale consentire l'omissione dell'attributo per alcune immagini, ad esempio per ottimizzare per LCP. Se il pubblico del CMS è in media considerato più esperto di tecnologia, potrebbe trattarsi di un controllo UI esposto per ogni immagine e iframe che consente di disattivare il caricamento lento per quell'elemento.
In alternativa o in aggiunta, un'API potrebbe essere esposta a sviluppatori di terze parti
in modo che possano apportare modifiche simili tramite codice.
Ad esempio, WordPress consente di ignorare l'attributo loading per un intero tag o contesto HTML o per un elemento HTML specifico nei contenuti.
Adattare i contenuti esistenti
A livello generale, esistono due approcci per aggiungere l'attributo loading agli elementi HTML in un CMS:
- Aggiungi l'attributo dall'editor di contenuti nel backend, salvandolo in modo permanente nel database.
- Aggiungi l'attributo in tempo reale quando esegui il rendering dei contenuti dal database nel frontend.
È consigliabile che il CMS scelga di aggiungere l'attributo in tempo reale durante il rendering, in modo da applicare i vantaggi del caricamento lento anche a tutti i contenuti esistenti. Se l'attributo potesse essere aggiunto esclusivamente tramite l'editor, solo i contenuti nuovi o modificati di recente riceverebbero i vantaggi, riducendo drasticamente l'impatto del CMS sul risparmio delle risorse di rete. Inoltre, l'aggiunta immediata dell'attributo consentirà di apportare facilmente modifiche future nel caso in cui le funzionalità del caricamento lento a livello di browser vengano ulteriormente estese.
L'aggiunta immediata dell'attributo dovrebbe soddisfare un attributo loading potenzialmente esistente su un elemento e consentire a tale attributo di avere la precedenza. In questo modo, il CMS o la relativa estensione potrebbe anche implementare
l'approccio basato sull'editor senza causare un conflitto con attributi duplicati.
Ottimizzare le prestazioni lato server
Quando aggiungi l'attributo loading ai contenuti all'istante utilizzando, ad esempio, un middleware lato server, la velocità è una considerazione. A seconda del CMS, l'attributo può essere aggiunto tramite attraversamento DOM o espressioni regolari, mentre quest'ultimo è consigliato per le prestazioni.
L'utilizzo delle espressioni regolari deve essere ridotto al minimo, ad esempio una singola regex
che raccoglie tutti i tag img e iframe nei contenuti, inclusi i relativi
attributi, e aggiunge l'attributo loading a ogni stringa tag come applicabile. Ad esempio, WordPress va fino a avere una singola espressione regolare generale per eseguire varie operazioni immediate su determinati elementi, di cui l'aggiunta di loading="lazy" è un solo, utilizzando una singola espressione regolare per facilitare più caratteristiche. Inoltre, questa forma di ottimizzazione è un altro motivo per cui l'adozione del caricamento lento nel core di un CMS è consigliata rispetto a un'estensione, poiché consente una migliore ottimizzazione delle prestazioni lato server.
Passaggi successivi
Verifica se esiste già un ticket di richiesta di funzionalità per aggiungere il supporto della funzionalità nel tuo CMS o aprine uno nuovo se non è ancora disponibile. Utilizza i riferimenti a questo post a supporto della tua proposta, se necessario.
Inviami un tweet (felixarntz@) per domande o commenti oppure per far sì che il tuo CMS venga elencato in questa pagina se è stato aggiunto il supporto per il caricamento lento a livello di browser. Se riscontri altri problemi, mi piacerebbe saperne di più per trovare una soluzione.
Se sei uno sviluppatore di una piattaforma CMS, scopri in che modo altri CMS hanno implementato il caricamento lento:
Puoi utilizzare le conoscenze apprese dalla tua ricerca e i consigli tecnici di questo post per iniziare a dare il tuo contributo al tuo CMS, ad esempio sotto forma di patch o richiesta di pull.
Foto hero di Colin Watts su Unsplash.