Informazioni per l'adozione dell'attributo di caricamento standardizzato
Il mio obiettivo con questo post è convincere gli sviluppatori e i collaboratori delle piattaforme CMS (ovvero le persone che sviluppano i core dei CMS) che è giunto il momento di implementare il supporto per la funzionalità di caricamento lento delle immagini a livello di browser. Condividerò anche dei 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 derivano dalla nostra esperienza nell'aggiunta del supporto a WordPress e nell'aiutare Joomla, Drupal e TYPO3 a implementare la funzionalità.
Che siate sviluppatori di piattaforme CMS o utenti di CMS (ovvero persone che creano siti web con un CMS), potete utilizzare questo post per scoprire di più sui vantaggi del caricamento lento a livello di browser nel vostro 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
è
entrato a far parte dello standard HTML WHATWG
ed
è stato adottato sempre di più da vari browser.
Tuttavia, questi traguardi gettano solo le basi per un web più veloce e con un maggiore risparmio di risorse.
Ora spetta all'ecosistema web distribuito utilizzare l'attributo loading.
I sistemi di gestione dei contenuti alimentano 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 molto diffusi, come
WordPress,
Joomla e
TYPO3, hanno già
implementato il supporto per l'attributo loading sulle immagini. Diamo un'occhiata ai
loro approcci e ai risultati utili 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, motivo per cui è consigliabile adottarlo a livello di core del CMS.
Perché implementare il caricamento lento ora
Standardizzazione
L'adozione di funzionalità del browser non standardizzate nei CMS facilita i test diffusi e può far emergere potenziali aree di miglioramento. Tuttavia, il consenso generale tra i CMS è che, finché una funzionalità del browser non è standardizzata, dovrebbe essere preferibilmente 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 browser
Il supporto della funzionalità da parte del browser è un problema simile: la maggior parte degli utenti del CMS dovrebbe essere in grado di trarre vantaggio dalla funzionalità. Se esiste una percentuale considerevole di browser in cui la funzionalità non è ancora supportata, la funzionalità deve garantire che almeno non abbia effetti negativi su questi browser.
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 una volta diventata visibile nell'area visibile dell'utente, perché il ciclo di caricamento inizia in una fase successiva. A differenza delle precedenti soluzioni basate su JavaScript, i browser adottano un approccio conservativo e possono inoltre perfezionare il loro approccio in base ai dati sull'esperienza utente reale, riducendo al minimo l'impatto, per cui il caricamento lento a livello di browser dovrebbe essere sicuro da adottare per le piattaforme CMS.
Consigli per l'esperienza utente
Richiedi attributi di dimensione sugli elementi
Per evitare variazioni del layout, da tempo consigliamo di includere sempre gli attributi di dimensione width e height nei contenuti incorporati, come immagini o iframe, 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 con il caricamento lento o meno. Tuttavia, a causa della
probabilità maggiore dello 0,1% che un'immagine non venga caricata completamente una volta nell'area visibile,
diventa leggermente più applicabile con il caricamento lento attivo.
I CMS dovrebbero preferibilmente fornire attributi di dimensione su tutte le immagini e gli iframe. Se ciò non è possibile per ogni elemento, è consigliabile saltare il caricamento lento delle immagini che non forniscono entrambi questi attributi.
Evita il caricamento lento degli elementi above the fold
Al momento, ai CMS viene consigliato di aggiungere gli attributi loading="lazy" solo alle immagini e agli iframe posizionati below the fold, per evitare un ritardo nella metrica Largest Contentful Paint, che in alcuni casi può essere significativo, come scoperto a luglio 2021. Tuttavia, va riconosciuto che è complesso valutare la posizione di un elemento rispetto all'area visibile prima del processo di rendering. Questo vale soprattutto se il CMS utilizza un approccio automatico per l'aggiunta degli attributi loading, ma anche in base all'intervento manuale è necessario considerare diversi fattori, come le diverse dimensioni e proporzioni dell'area visibile. Tuttavia, ti consigliamo vivamente di omettere le immagini hero e altre immagini o iframe che potrebbero essere visualizzati above the fold dal caricamento lento.
Evita un comportamento di riserva di JavaScript
Sebbene JavaScript possa essere utilizzato per fornire il caricamento lento ai browser che non supportano (ancora) 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 per potenziali problemi, motivo per cui nessun CMS importante aveva adottato il caricamento lento nel suo core prima della funzionalità del browser standardizzata.
Consigli tecnici
Attiva il caricamento lento per impostazione predefinita
Il consiglio generale per i CMS che implementano il caricamento lento a livello di browser è di attivarlo per impostazione predefinita, ovvero loading="lazy" deve essere aggiunto alle immagini e agli iframe, preferibilmente solo per gli elementi che includono attributi di dimensione.
L'attivazione della funzionalità per impostazione predefinita comporterà un maggiore risparmio di risorse di rete rispetto all'attivazione manuale, ad esempio per ogni immagine.
Per quanto possibile, loading="lazy" deve essere aggiunto solo agli elementi che probabilmente vengono visualizzati below-the-fold.
Sebbene questo requisito possa essere complesso da implementare per un CMS a causa della mancanza di consapevolezza lato client e delle varie dimensioni dell'area visibile, si consiglia di utilizzare almeno un'euristica approssimativa per omettere elementi come le immagini hero che probabilmente verranno visualizzate above the fold dal caricamento lento.
Consenti modifiche per elemento
Sebbene loading="lazy" debba essere aggiunto alle immagini e agli iframe per impostazione predefinita, è fondamentale consentire l'omissione dell'attributo su determinate immagini, ad esempio per ottimizzare l'LCP. Se il pubblico del CMS è considerato in media più esperto di tecnologia, potrebbe essere 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 il codice.
Ad esempio, WordPress consente di saltare l'attributo loading per un
intero tag HTML o contesto
o per un
elemento HTML specifico nei contenuti.
Adatta i 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 di contenuti nel backend, salvandolo in modo permanente nel database.
- Aggiungi l'attributo in tempo reale durante il rendering dei contenuti dal database nel frontend.
È consigliabile che i CMS scelgano di aggiungere l'attributo in tempo reale durante il rendering, in modo da estendere i vantaggi del caricamento lento anche ai 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 di risorse di rete. Inoltre, l'aggiunta dell'attributo al volo consentirà di apportare facilmente modifiche future, qualora le funzionalità del caricamento lento a livello di browser venissero ulteriormente ampliate.
Tuttavia, l'aggiunta dell'attributo al volo dovrebbe tenere conto di un attributo loading potenzialmente esistente su un elemento e consentire a questo attributo di avere la precedenza. In questo modo, il CMS o un'estensione per il CMS potrebbero anche implementare l'approccio basato sull'editor senza causare un conflitto con attributi duplicati.
Ottimizza le prestazioni 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 potrebbe essere aggiunto tramite l'esplorazione del DOM o le espressioni regolari, con queste ultime consigliate per le prestazioni.
L'utilizzo delle espressioni regolari deve essere ridotto al minimo, ad esempio una singola espressione regolare che raccoglie tutti i tag img e iframe nei contenuti, inclusi i relativi attributi, e poi aggiunge l'attributo loading a ogni stringa di tag, se applicabile. WordPress, ad esempio, arriva al punto di avere una singola espressione regolare generale per eseguire varie operazioni on-the-fly su determinati elementi, di cui l'aggiunta di loading="lazy" è solo una, utilizzando una singola espressione regolare per facilitare più funzionalità. Inoltre, questa forma di ottimizzazione è un altro motivo per cui è consigliabile adottare il caricamento lento nel core di un CMS anziché in un'estensione, in quanto 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 aprine uno nuovo se non esiste ancora. Utilizza i riferimenti a questo post in base alle esigenze per supportare la tua proposta.
Inviatemi un tweet (felixarntz@) per domande o commenti o per inserire il vostro CMS in questa pagina se è stato aggiunto il supporto per il caricamento lento a livello di browser. Se riscontri altre difficoltà, mi piacerebbe 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 apprese dalla tua ricerca e i consigli tecnici di questo post per iniziare a contribuire al codice del tuo CMS, ad esempio sotto forma di patch o richiesta di pull.