La risorsa più veloce e ottimizzata è una risorsa non inviata. Dovresti eliminare le risorse non necessarie dalla tua applicazione. È buona norma mettere in discussione e rivedere periodicamente le ipotesi implicite ed esplicite con il tuo team. Ecco alcuni esempi:
- Hai sempre incluso la risorsa X nelle tue pagine, ma il costo del download e della visualizzazione compensa il valore che offre all'utente? Puoi misurare e dimostrare il suo valore?
- La risorsa (soprattutto se si tratta di una risorsa di terze parti) offre un rendimento coerente? Questa risorsa si trova nel percorso critico o deve esserlo? Se la risorsa si trova nel percorso critico, potrebbe essere un single point of failure per il sito? In altre parole, se la risorsa non è disponibile, ciò influisce sulle prestazioni e sull'esperienza utente delle tue pagine?
- Questa risorsa richiede o ha uno SLA? Questa risorsa segue le best practice per le prestazioni: compressione, memorizzazione nella cache e così via?
Troppo spesso le pagine contengono risorse non necessarie o, peggio, che ostacolano le prestazioni della pagina senza offrire un valore significativo al visitatore o al sito su cui sono ospitate. Questo vale sia per le risorse e i widget proprietari sia per quelli di terze parti:
- Il sito A ha deciso di mostrare un carosello di foto sulla sua home page per consentire al visitatore di visualizzare in anteprima più foto con un clic rapido. Tutte le foto vengono caricate quando viene caricata la pagina e l'utente le scorre.
- Domanda: hai misurato quanti utenti visualizzano più foto nel carosello? Potresti incorrere in un overhead elevato scaricando risorse che la maggior parte dei visitatori non visualizza mai.
- Il sito B ha deciso di installare un widget di terze parti per mostrare contenuti correlati, migliorare il coinvolgimento sui social o fornire un altro servizio.
- Domanda: hai monitorato quanti visitatori utilizzano il widget o fanno clic sui contenuti forniti dal widget? Il coinvolgimento generato da questo widget è sufficiente a giustificare l'overhead? Inoltre, è possibile utilizzare una strategia di caricamento per garantire che lo script non venga caricato finché non è necessario?
Per determinare se eliminare i download non necessari, spesso sono necessarie un'attenta riflessione e una misurazione accurata. Per ottenere risultati ottimali, esegui periodicamente l'inventario e rivedi queste domande per ogni asset delle tue pagine.
Effetti su Core Web Vitals
L'iniziativa Core Web Vitals è stata introdotta da Google per fornire un insieme di metriche che riflettono l'esperienza degli utenti durante l'utilizzo del web. Sebbene esistano molte strategie di ottimizzazione per Core Web Vitals, chiedersi se caricare o meno una determinata risorsa su una pagina può aiutarti a migliorare queste metriche sul tuo sito web. Di seguito sono riportati alcuni esempi, raggruppati per ogni Core Web Vital, che vale la pena prendere in considerazione. Sebbene non si tratti di un elenco esaustivo di esempi (e ce ne sono molti), leggerli potrebbe darti spunti di riflessione.
Largest Contentful Paint (LCP)
Largest Contentful Paint (LCP) misura il momento in cui vengono caricati i contenuti più grandi (ad esempio un'immagine hero o un titolo). È considerata un'importante metrica percettiva che dà all'utente l'impressione che un sito si carichi rapidamente.
In generale, scaricare meno risorse significa che la larghezza di banda a disposizione dell'utente verrà allocata su un numero inferiore di risorse, il che potrebbe tradursi in un miglioramento dell'LCP. Un esempio classico è il caricamento lento, in cui le immagini al di fuori dell'area visibile durante il caricamento della pagina non vengono scaricate finché il browser non determina che l'utente ha maggiori probabilità di visualizzarle. Se hai una galleria di miniature di grandi dimensioni, ad esempio 50 immagini, il caricamento lento di tutte le immagini tranne le prime dieci consente al browser di utilizzare in modo più efficiente la larghezza di banda disponibile e le prime immagini che l'utente vedrà verranno caricate più rapidamente.
Tuttavia, non si tratta necessariamente solo di caricare meno immagini. Il browser ha uno schema di priorità interno che determina la quantità di larghezza di banda che deve ricevere ogni risorsa. Tuttavia, anche con questo, tutte le risorse, in particolare quelle scaricate con priorità elevata, possono privare una risorsa dipendente di un potenziale elemento LCP. Questo è particolarmente vero per le connessioni di rete lente. Questa risorsa dipendente potrebbe essere un file immagine che rappresenta l'elemento LCP della pagina, ma potrebbe anche essere una risorsa di web font di cui il browser ha bisogno per eseguire il rendering di un nodo di testo che potrebbe essere determinato come l'elemento LCP della pagina.
Se il tuo sito web contiene molto testo, è possibile che l'elemento LCP di una pagina sia un nodo di testo. Sebbene esistano molte strategie di ottimizzazione e caricamento dei caratteri, potrebbe valere la pena valutare se un carattere di sistema è sufficiente per le esigenze del tuo sito web, in modo che gli elementi LCP che sono nodi di testo possano essere caricati senza dipendere da una risorsa di carattere web e vengano visualizzati quasi immediatamente quando il CSS e l'HTML arrivano dal server.
Cumulative Layout Shift (CLS)
Ogni risorsa caricata può contribuire alla Cumulative Layout Shift (CLS) di una pagina, in particolare se il download non è stato completato al momento del primo paint. Per le immagini, evitare il CLS comporta pratiche come l'impostazione di dimensioni esplicite. Per i caratteri, la gestione del caricamento dei caratteri e l'eventuale corrispondenza dei caratteri di riserva possono ridurre al minimo le variazioni durante il periodo di scambio di un carattere web. Per JavaScript, potrebbe trattarsi di gestire il modo in cui lo script manipola il DOM in modo che le variazioni del layout siano ridotte a una quantità accettabile.
Ogni risorsa che contribuisce al CLS di una pagina richiede un certo lavoro per garantire che il layout della pagina sia sufficientemente stabile. Chiedendoti se hai bisogno o meno di una risorsa specifica, non solo velocizzi i caricamenti pagina, ma riduci anche lo sforzo cognitivo necessario per preservare la stabilità del layout. In questo modo, non solo l'esperienza utente è molto meno frustrante, ma anche l'esperienza degli sviluppatori è meno frustrante, in quanto avrai più tempo per perseguire altri obiettivi nei tuoi progetti.
Interaction to Next Paint (INP)
Interaction to Next Paint (INP) misura l'adattabilità agli input utente durante l'intero ciclo di vita di una pagina. La metrica INP di una pagina può essere influenzata notevolmente dal codice JavaScript che carica, poiché JavaScript è ciò che determina la maggior parte dell'interattività che si riscontra sul web. In particolare, la quantità di risorse di script scaricate durante il caricamento pagina può dare il via a un lavoro potenzialmente oneroso di valutazione e compilazione degli script. Meno JavaScript carichi durante l'avvio, meno lavoro deve svolgere il browser in quel momento critico dell'esperienza sulle pagine, in cui gli utenti potrebbero tentare di interagire con la pagina.
Sebbene esistano strategie per ridurre le dimensioni delle risorse JavaScript scaricate durante l'avvio, come la suddivisione del codice e il tree shaking, vale la pena controllare i pacchetti che utilizzi nei tuoi progetti per verificare se sono effettivamente necessari. Ad esempio, lodash ha molti metodi che sono ancora utili oggi, ma viene fornito con metodi che il browser fornisce già, come le funzioni specifiche di Array per mappatura, riduzione e filtraggio e molti altri.
Il potenziamento progressivo è anche un approccio utile a JavaScript, in quanto ti consente di offrire un'esperienza di base (ma comunque funzionale) per gli utenti, che puoi aggiungere per gli utenti con dispositivi più potenti e connessioni di rete più veloci. Che tu segua o meno il principio del potenziamento progressivo, il punto rimane: ogni risorsa JavaScript che puoi evitare di scaricare può tradursi in un'esperienza che risponde più rapidamente alle interazioni degli utenti, un aspetto fondamentale delle prestazioni web.
Conclusione
Il controllo del tuo sito web per individuare download non necessari potrebbe essere solo un aspetto della fornitura di esperienze utente rapide, ma ha il potenziale per un impatto elevato. Riepilogo:
- Fai un inventario dei tuoi asset e di quelli di terze parti sulle tue pagine.
- Misura le prestazioni di ogni asset: il suo valore e le sue prestazioni tecniche.
- Determina se le risorse forniscono un valore sufficiente.
- Comprendere l'effetto dei download non necessari sui Core Web Vitals e sulle metriche di supporto.
Ottimizzando l'efficienza dei contenuti in questo modo, non solo migliori le prestazioni complessive, ma eviti anche di sprecare la larghezza di banda degli utenti, oltre a migliorare potenzialmente le metriche incentrate sugli utenti e offrire un'esperienza utente migliore.