Informazioni sull'adozione dell'attributo di caricamento standardizzato
L'obiettivo di questo post è convincere gli sviluppatori e i collaboratori della piattaforma CMS (ovvero gli sviluppatori che sviluppano i core CMS) che ora è il momento di implementare il supporto per la funzionalità di caricamento lento delle immagini a livello di browser. Condividerò anche alcuni 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 provengono dalla nostra esperienza nell'aggiunta del supporto a WordPress e nell'implementazione di questa funzionalità da parte di Joomla, Drupal e TYPO3.
Indipendentemente dal fatto che tu sia uno sviluppatore di una piattaforma CMS o un utente di CMS (ad esempio una persona che crea siti web con un CMS), puoi consultare 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 utilizzando l'attributo loading
è diventato parte dello standard HTML WhatWG
e
si è registrato una crescente adozione da parte di vari browser.
Questi traguardi, tuttavia, gettano solo le basi per un
web più veloce e più efficiente.
Ora si trova nell'ecosistema web distribuito per utilizzare l'attributo loading.
Poiché i sistemi di gestione dei contenuti supportano circa il 60% dei siti web, queste piattaforme svolgono un ruolo fondamentale nel portare l'adozione di moderne funzionalità dei browser sul web. Poiché 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 agli insegnamenti pertinenti per l'adozione della funzionalità
anche in altre piattaforme CMS. Il caricamento lento dei contenuti multimediali è una funzionalità chiave per le prestazioni web da cui i siti dovrebbero trarre vantaggio su larga scala, motivo per cui è consigliabile adottarli a livello di CMS principale.
Il caso per implementare ora il caricamento lento
Standardizzazione
L'adozione di funzionalità del browser non standardizzate nei CMS facilita l'esecuzione di test diffusi e può far emergere potenziali aree di miglioramento. Tuttavia, in generale, i CMS sono concordi sul fatto che, a condizione che una funzionalità del browser non sia standardizzata, preferibilmente, sarà implementata sotto forma di estensione o plug-in per la rispettiva piattaforma. Solo una volta standardizzata, una funzionalità può essere considerata per l'adozione nel core della piattaforma.
Supporto del browser
Il supporto della funzionalità da parte dei browser è simile al problema: la maggior parte degli utenti CMS dovrebbe essere in grado di usufruire della funzionalità. Se esiste una percentuale considerevole di browser in cui la funzionalità non è ancora supportata, la funzionalità deve garantire almeno che non abbia effetti negativi.
Soglie distanza dall'area visibile
Un problema comune delle implementazioni con 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, in quanto il ciclo di caricamento inizia in una fase successiva. A differenza delle precedenti soluzioni basate su JavaScript, i browser adottano un approccio conservativo e, inoltre, possono perfezionare il loro approccio in base a dati reali relativi all'esperienza utente, riducendo al minimo l'impatto. Di conseguenza, il caricamento lento a livello di browser dovrebbe essere sicuro per le piattaforme CMS.
Consigli sull'esperienza utente
Richiedi attributi di dimensione negli elementi
Per evitare variazioni del layout, da tempo si consiglia di includere sempre gli attributi delle dimensioni width e height sui 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 per un elemento
sia stato eseguito il caricamento lento o meno. Tuttavia, a causa della maggior probabilità che un'immagine non venga caricata completamente una volta nell'area visibile, diventa leggermente più applicabile con il caricamento lento attivo.
È preferibile che i CMS forniscano gli attributi relativi alle dimensioni per tutte le immagini e gli iframe. Se questo non è possibile per tutti gli elementi, consigliamo di ignorare le immagini con caricamento lento, che non forniscono entrambi gli attributi.
Evita il caricamento lento degli elementi above the fold
Al momento si consiglia ai CMS 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 significativa come scoperta a luglio 2021. Tuttavia, bisogna riconoscere 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 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, si consiglia vivamente di omettere dal caricamento lento le immagini hero e altre immagini o iframe che potrebbero apparire above the fold.
Evita un codice JavaScript di riserva
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 un iframe, il che causa un ritardo per i browser che lo supportano. Inoltre, l'implementazione di questa soluzione basata su JavaScript nei frontend di un CMS su larga scala aumenta l'area della superficie per potenziali problemi, il che fa parte del motivo per cui nessun CMS principale aveva adottato il caricamento lento nel proprio core prima della funzionalità del browser standardizzata.
Consigli tecnici
Attiva il caricamento lento per impostazione predefinita
Generalmente, i CMS che implementano il caricamento lento a livello di browser consigliano di attivarlo per impostazione predefinita, ad esempio loading="lazy" deve essere aggiunto a immagini e iframe, preferibilmente solo per gli elementi che includono attributi di dimensione.
Abilitando la funzionalità per impostazione predefinita, avrai un risparmio maggiore di risorse di rete rispetto a quanto accadrebbe manualmente, ad esempio per singola immagine.
Per quanto possibile, loading="lazy" deve
essere aggiunto solo agli elementi che probabilmente appaiono below the fold.
Sebbene l'implementazione di questo requisito possa essere complessa per un CMS a causa della mancanza di notorietà lato client e di varie dimensioni dell'area visibile, è consigliabile utilizzare almeno un'euristica approssimativa per omettere elementi come immagini hero che probabilmente appariranno above the fold dal 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 su determinate immagini, ad esempio per ottimizzare per LCP. Se in media il pubblico del CMS è 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 il codice.
WordPress, ad esempio, consente di saltare l'attributo loading per un
intero tag HTML o contesto
o per un
elemento HTML specifico nei contenuti.
Modifica dei 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 al volo quando esegui il rendering dei contenuti dal database nel frontend.
Per il CMS consigliamo inoltre di aggiungere l'attributo in tempo reale durante il rendering, in modo da sfruttare i vantaggi del caricamento lento anche per 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, con una riduzione drastica dell'impatto del CMS sul risparmio delle risorse di rete. Inoltre, l'aggiunta all'istante dell'attributo consente di apportare facilmente modifiche in futuro, qualora le funzionalità di caricamento lento a livello di browser venissero ulteriormente ampliate.
Tuttavia, l'aggiunta immediata dell'attributo dovrebbe soddisfare i requisiti di un attributo
loading potenzialmente esistente su un elemento e lasciare che questo attributo abbia
la precedenza. In questo modo, il CMS o un'estensione corrispondente potrebbero implementare l'approccio basato sull'editor senza causare un conflitto con attributi duplicati.
Ottimizza le prestazioni lato server
Quando si aggiunge l'attributo loading ai contenuti in tempo reale utilizzando, ad esempio, un middleware lato server, la velocità viene presa in considerazione. A seconda del CMS, l'attributo potrebbe essere aggiunto tramite DOM traversal o tramite espressioni regolari, con la seconda opzione consigliata per le prestazioni.
L'utilizzo delle espressioni regolari dovrebbe essere ridotto al minimo, ad esempio una singola regex
che raccoglie tutti i tag img e iframe nel contenuto, inclusi i relativi
attributi, e poi aggiunge l'attributo loading a ogni stringa di tag
se necessario. Ad esempio, WordPress va oltre
avere un'unica espressione regolare generale per eseguire varie operazioni in tempo reale su determinati elementi,
di cui l'aggiunta di loading="lazy" è una sola, utilizzando un'unica espressione regolare
per semplificare l'utilizzo di più funzionalità. Questa forma di ottimizzazione è inoltre un altro motivo per cui è consigliabile adottare il caricamento lento nel core di un CMS piuttosto che un'estensione: consente una migliore ottimizzazione delle prestazioni lato server.
Passaggi successivi
Verifica se esiste già un ticket di richiesta di funzionalità per aggiungere il supporto per la funzionalità nel tuo CMS o apri un nuovo ticket se non è ancora presente. Utilizza i riferimenti a questo post in base alle tue esigenze a supporto della tua proposta.
Inviami un tweet (felixarntz@) per domande o commenti oppure per visualizzare il tuo CMS in questa pagina se è stato aggiunto il supporto del caricamento lento a livello di browser. Se riscontri altre difficoltà, sono curioso di saperne di più al riguardo 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 ciò che hai appreso 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.
Foto hero di Colin Watts su Unsplash.