Apprendimento per l'adozione dell'attributo di caricamento standardizzato
L'obiettivo di questo post è convincere gli sviluppatori e i collaboratori della piattaforma CMS (ovvero le persone che sviluppano i core del CMS) che è arrivato 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 consentire la personalizzazione da parte di altri sviluppatori durante l'implementazione del caricamento lento. Queste linee guida si basano sulla nostra esperienza nell'aggiunta del supporto a WordPress, nonché nell'aiutare Joomla, Drupal e TYPO3 a implementare la funzionalità.
Indipendentemente dal fatto che tu sia uno sviluppatore di piattaforme CMS o un utente CMS (ovvero una persona che crea siti web con un CMS), puoi utilizzare questo post per scoprire 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.
Sfondo
Nell'ultimo anno,
il caricamento lento di immagini e iframe utilizzando l'attributo loading
è stato
inserito nello standard HTML WHATWG
e
ha registrato una crescente adozione da parte di vari browser.
Tuttavia, questi traguardi gettano le basi per un
web più veloce e che consuma meno risorse.
Ora è nell'ecosistema web distribuito che deve essere utilizzato l'attributo loading.
I sistemi di gestione dei contenuti
sono alla base di circa il 60% dei siti web,
pertanto queste piattaforme svolgono un ruolo fondamentale nell'adozione delle funzionalità dei browser moderni sul web. Alcuni CMS open source popolari come
WordPress,
Joomla e
TYPO3 hanno già
implementato il supporto per l'attributo loading sulle immagini, diamo un'occhiata ai loro approcci e ai punti chiave utili per adottare la funzionalità anche su altre piattaforme CMS. Il caricamento lento dei contenuti multimediali è una funzionalità chiave per il rendimento web di cui i siti dovrebbero trarre vantaggio su larga scala, motivo per cui è consigliabile adottarla a livello di core del CMS.
Il motivo per cui implementare subito il caricamento lento
Standardizzazione
L'adozione di funzionalità del browser non standardizzate nei CMS facilita i test su larga scala e può evidenziare potenziali aree di miglioramento. Tuttavia, il consenso generale tra i CMS è che, a meno che una funzionalità del browser non sia standardizzata, dovrebbe essere implementata preferibilmente sotto forma di estensione o plug-in per la rispettiva piattaforma. Solo dopo la standardizzazione, una funzionalità può essere presa in considerazione per l'adozione nel nucleo della piattaforma.
Supporto browser
Il supporto della funzionalità da parte del browser è un problema simile: la maggior parte degli utenti del CMS dovrebbe poter usufruire della funzionalità. Se esiste una percentuale considerevole di browser in cui la funzionalità non è ancora supportata, deve essere garantito che almeno non abbia effetti negativi su questi.
Soglie di distanza dall'area visibile
Un problema comune con le implementazioni del caricamento lento è che, in linea di principio, aumentano la probabilità che un'immagine non venga caricata quando diventa visibile nell'area visibile dell'utente perché il ciclo di caricamento inizia in un secondo momento. A differenza delle precedenti soluzioni basate su JavaScript, i browser adottano un approccio conservativo e inoltre possono perfezionare il loro approccio in base ai dati sull'esperienza utente reale, minimizzando l'impatto, pertanto il caricamento lento a livello di browser dovrebbe essere sicuro da adottare da parte delle piattaforme CMS.
Suggerimenti per l'esperienza utente
Richiedere attributi delle dimensioni negli elementi
Per evitare variazioni del layout, da molto tempo ormai è consigliabile includere sempre gli attributi delle dimensioni width e height per i contenuti incorporati, come immagini o iframe, in modo che il browser possa dedurre le proporzioni di questi elementi prima di caricarli effettivamente. Questo consiglio è pertinente indipendentemente dal fatto che un elemento sia sottoposto a caricamento differito o meno. Tuttavia, a causa della
probabilità maggiore dello 0,1% che un'immagine non venga caricata completamente una volta visualizzata nel viewport
diventa leggermente più applicabile con il caricamento differito.
È preferibile che i CMS forniscano gli attributi delle dimensioni su tutte le immagini e gli iframe. Se ciò non è possibile per ogni elemento, consigliamo di saltare le immagini con caricamento lento che non forniscono entrambi questi attributi.
Evita il caricamento differito degli elementi nella parte visibile della pagina
Al momento, si consiglia ai CMS di aggiungere attributi loading="lazy" solo alle immagini e agli iframe posizionati sotto la piega, per evitare un ritardo nella metrica Largest Contentful Paint, che in alcuni casi può essere significativo come scoperto a luglio 2021. Tuttavia, è necessario riconoscere che è complesso valutare la posizione di un elemento rispetto al viewport prima della procedura di rendering. Questo vale soprattutto se il CMS utilizza un approccio automatico per l'aggiunta di attributi loading, ma anche in base all'intervento manuale devono essere presi in considerazione diversi fattori, come le diverse dimensioni e proporzioni del viewport. Tuttavia, è vivamente consigliato di omettere il caricamento differito delle immagini hero e di altre immagini o iframe che potrebbero apparire nella parte visibile della pagina.
Evitare un fallback di JavaScript
Sebbene JavaScript possa essere utilizzato per
fornire il caricamento differito ai browser che non supportano (ancora) l'attributo loading,
tali meccanismi si basano sempre sulla rimozione iniziale dell'attributo src di un
immagine o 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 di grandi dimensioni aumenta la superficie per potenziali problemi, motivo per cui nessun CMS importante aveva adottato il caricamento lento nel proprio core prima della funzionalità standardizzata del browser.
Consigli tecnici
Attivare il caricamento lento per impostazione predefinita
Il consiglio generale per i CMS che implementano il caricamento lento a livello di browser è attivarlo per impostazione predefinita, ovvero loading="lazy" deve essere aggiunto alle immagini e agli iframe, preferibilmente solo per gli elementi che includono attributi delle dimensioni.
L'attivazione della funzionalità per impostazione predefinita consente di risparmiare maggiormente sulle risorse di rete rispetto all'attivazione manuale, ad esempio su base di immagine.
Per quanto possibile, loading="lazy" deve essere
aggiunto solo agli elementi che probabilmente vengono visualizzati sotto la piega.
Sebbene questo requisito possa essere complesso da implementare per un CMS a causa della mancanza di conoscenza lato client e delle varie dimensioni del viewport, è consigliabile almeno utilizzare approssimazioni di tipo euristico per omettere elementi come le immagini hero che probabilmente verranno visualizzate nella parte superiore della pagina dal caricamento differito.
Consenti modifiche per elemento
Sebbene loading="lazy" debba essere aggiunto alle immagini e agli iframe per impostazione predefinita, è fondamentale consentire l'omissione dell'attributo in determinate immagini, ad esempio per ottimizzare per il LCP. Se il pubblico del CMS è mediamente considerato più esperto di tecnologia, potrebbe essere un controllo dell'interfaccia utente 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 il codice.
WordPress, ad esempio, consente di saltare l'attributo loading per un
intero contesto o tag HTML
o per un
elemento HTML specifico nei contenuti.
Eseguire il retrofit dei contenuti esistenti
In linea di massima, esistono due approcci per aggiungere l'attributo loading agli elementi HTML in un CMS:
- Aggiungi l'attributo dall'editor dei contenuti nel backend, salvandolo in modo permanente nel database.
- Aggiungi l'attributo al volo durante il rendering dei contenuti dal database nel frontend.
È consigliabile che i CMS optino per l'aggiunta dell'attributo al volo durante il rendering, in modo da estendere i vantaggi del caricamento lento anche a tutti i contenuti esistenti. Se l'attributo potesse essere aggiunto solo tramite l'editor, solo i contenuti nuovi o modificati di recente ne trarrebbero vantaggio, riducendo drasticamente l'impatto del CMS sul risparmio delle risorse di rete. Inoltre, l'aggiunta dell'attributo al volo consentirà facilmente modifiche future, se le funzionalità del caricamento differito a livello di browser verranno ulteriormente ampliate.
L'aggiunta dell'attributo al volo dovrebbe tenere conto di un attributo loading potenzialmente esistente in un elemento e consentire a questo attributo di avere la precedenza. In questo modo, il CMS o un'estensione potrebbero anche implementare l'approccio basato sull'editor senza causare conflitti con gli attributi duplicati.
Ottimizzare il rendimento lato server
Quando aggiungi l'attributo loading ai contenuti in tempo reale utilizzando, ad esempio, un middleware lato server, la velocità è un fattore da considerare. A seconda del CMS, l'attributo può essere aggiunto tramite il traversale DOM o le espressioni regolari, con quest'ultima consigliata per il rendimento.
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, quindi aggiunge l'attributo loading a ogni stringa di tag, se
applicabile. WordPress, ad esempio, consente di avere una singola espressione regolare generale per eseguire varie operazioni dinamiche su determinati elementi, tra cui l'aggiunta di loading="lazy", utilizzando una singola espressione regolare per semplificare più funzionalità. Questa forma di ottimizzazione è inoltre un altro motivo per cui è consigliabile adottare il caricamento lento nel core di un CMS anziché in un'estensione: consente una migliore ottimizzazione delle prestazioni lato server.
Passaggi successivi
Controlla se esiste già un ticket di richiesta di funzionalità per aggiungere il supporto della funzionalità nel tuo CMS o apri un nuovo ticket se non ne esiste ancora uno. Fai riferimento a questo post se necessario per supportare la tua proposta.
Inviami un tweet (felixarntz@) per domande o commenti oppure per richiedere l'inserimento del tuo CMS in questa pagina se è stato aggiunto il supporto per il caricamento lento a livello di browser. Se riscontri altri problemi, sarei anche curioso di saperne di più per trovare una soluzione.
Se sei uno sviluppatore di piattaforme CMS, studia come altri CMS hanno implementato il caricamento lento:
Puoi utilizzare le informazioni acquisite durante la ricerca e i consigli tecnici di questo post per iniziare a contribuire con codice al tuo CMS, ad esempio sotto forma di patch o pull request.
Foto hero di Colin Watts su Unsplash.