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 con il team le ipotesi implicite ed esplicite. 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? Riesci a misurarne e dimostrarne il valore?
- La risorsa (soprattutto se di terze parti) offre un rendimento costante? Questa risorsa fa parte del percorso critico o deve esserlo? Se la risorsa si trova nel percorso critico, potrebbe essere un singolo punto di errore per il sito? In altre parole, se la risorsa non è disponibile, influisce sulle prestazioni e sull'esperienza utente delle tue pagine?
- Questa risorsa ha o richiede un SLA? Questa risorsa segue le best practice per il rendimento: compressione, memorizzazione nella cache e così via?
Troppo spesso le pagine contengono risorse non necessarie o, peggio, che ne ostacolano il rendimento senza offrire molto valore al visitatore o al sito su cui sono ospitate. Questo vale allo stesso modo per le risorse e i widget proprietari e di terze parti:
- Il sito A ha deciso di mostrare un carosello di foto nella home page per consentire al visitatore di visualizzare l'anteprima di più foto con un semplice clic. Tutte le foto vengono caricate quando viene caricata la pagina e l'utente le sfoglia.
- Domanda: hai misurato il numero di utenti che 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 il numero di visitatori che utilizzano il widget o i clic sui contenuti forniti dal widget? Il coinvolgimento generato da questo widget è sufficiente a giustificarne il costo? Inoltre, è possibile utilizzare una strategia di caricamento per assicurarti che lo script non venga caricato finché non è necessario?
Spesso, per decidere se eliminare i download non necessari è necessario un'attenta riflessione e misurazione. Per ottenere risultati ottimali, rispondi periodicamente a queste domande per ogni asset nelle tue pagine.
Effetti sui Core Web Vitals
L'iniziativa Core Web Vitals è stata introdotta da Google per fornire un insieme di metriche che riflettano l'esperienza degli utenti quando utilizzano il web. Sebbene esistano molte strategie di ottimizzazione per Core Web Vitals, chiedersi se caricare una determinata risorsa in una pagina può aiutarti a migliorare queste metriche sul tuo sito web. Di seguito sono riportati alcuni esempi, raggruppati per ogni métrica di Core Web Vital, che meritano di essere presi in considerazione. Anche se non si tratta di un elenco esaustivo di esempi (e ce ne sono molti), leggerli potrebbe darti da pensare.
Largest Contentful Paint (LCP)
La metrica Largest Contentful Paint (LCP) misura il momento in cui vengono caricati i contenuti più grandi (ad esempio un'immagine hero o un titolo). È considerata una metrica percettiva importante che dà all'utente l'impressione che un sito si carichi rapidamente.
In generale, scaricare meno risorse significa che la larghezza di banda di cui dispone l'utente verrà allocata a meno risorse e potrebbe tradursi in un miglioramento del LCP. Un esempio classico è il caricamento lento, in cui le immagini esterne all'area visibile durante il caricamento della pagina non vengono scaricate finché il browser non ha stabilito 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 significa che il browser può utilizzare in modo più efficiente la larghezza di banda a sua disposizione e le prime immagini che l'utente vedrà verranno caricate più rapidamente.
Tuttavia, non si tratta necessariamente di caricare meno immagini. Il browser ha uno schema di definizione delle priorità interno che determina la quantità di larghezza di banda che ogni risorsa deve ricevere. Tuttavia, anche con questa impostazione, tutte le risorse, in particolare quelle scaricate con priorità elevata, hanno il potenziale di privare la risorsa dipendente di un potenziale elemento LCP. Questo è particolarmente vero per le connessioni di rete lente. Questa risorsa dipendente può essere un file immagine che rappresenta l'elemento LCP della pagina, ma potrebbe anche essere una risorsa di caratteri web necessaria al browser per visualizzare un nodo di testo che può essere determinato come 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 buone strategie di ottimizzazione e caricamento dei caratteri, potrebbe essere opportuno 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 caratteri web e dipingere quasi immediatamente quando CSS e HTML arrivano dal server.
Cumulative Layout Shift (CLS)
Ogni risorsa caricata ha il potenziale di contribuire alla variazione layout cumulativa (CLS) di una pagina, in particolare se il download non è stato completato al momento della visualizzazione iniziale. Per le immagini, evitare un CLS elevato comporta pratiche come l'impostazione di dimensioni esplicite. Per i caratteri, la gestione del caricamento dei caratteri e la potenziale corrispondenza dei caratteri di riserva può ridurre al minimo i cambiamenti durante il periodo di scambio di un carattere web. Per JavaScript, potrebbe essere necessario gestire il modo in cui lo script manipola il DOM in modo che i cambiamenti di layout siano ridotti a un livello accettabile.
Ogni risorsa che contribuisce al CLS di una pagina richiede un certo lavoro per garantire che il layout della pagina sia sufficientemente stabile. Se ti chiedi se hai bisogno o meno di una risorsa specifica, non solo velocizzi i caricamenti delle pagine, ma riduci anche lo sforzo cognitivo necessario per preservare la stabilità del layout. Ciò non solo porta a un'esperienza utente molto meno frustrante, ma anche a un'esperienza dello sviluppatore 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 la vita di una pagina. L'INP di una pagina può essere influenzato notevolmente dal codice JavaScript che carica, in quanto è questo il codice che genera la maggior parte dell'interattività che si sperimenta sul web. In particolare, la quantità di risorse dello script scaricate durante il caricamento della pagina può avviare un lavoro potenzialmente costoso per la valutazione e la compilazione dello script. Meno JavaScript carichi durante l'avvio, meno lavoro deve fare il browser in quel punto critico dell'esperienza della pagina, in cui gli utenti potrebbero provare a interagire con la pagina.
Sebbene esistano strategie per ridurre le dimensioni delle risorse JavaScript scaricate durante l'avvio, come la suddivisione del codice e lo tree shaking, vale la pena controllare i pacchetti che utilizzi nei tuoi progetti per verificare se sono necessari. Ad esempio, lodash ha molti metodi ancora utili oggi, ma viene fornito con i metodi forniti dal browser, come le funzioni specifiche per Array per mappatura, riduzione e filtraggio e molti altri.
Il miglioramento progressivo è anche un approccio utile a JavaScript, in quanto ti consente di offrire agli utenti un'esperienza di base (ma comunque funzionale) che puoi migliorare per gli utenti con dispositivi più potenti e connessioni di rete più veloci. Che tu segua o meno il principio del miglioramento progressivo, il punto rimane: ogni risorsa JavaScript che puoi evitare di scaricare può comportare un'esperienza che risponde più rapidamente alle interazioni degli utenti, un aspetto fondamentale del rendimento web.
Conclusione
Il controllo del sito web per rilevare i download non necessari potrebbe essere solo un aspetto dell'offerta di esperienze utente rapide, ma ha il potenziale per un impatto elevato. Riepilogo:
- Fai l'inventario delle tue risorse e di quelle di terze parti nelle tue pagine.
- Misura il rendimento di ogni risorsa: il suo valore e le sue prestazioni tecniche.
- Determina se le risorse offrono un valore sufficiente.
- Scopri l'effetto dei download non necessari su Core Web Vitals e sulle metriche di supporto.
Se ottimizzi l'efficienza dei contenuti in questo modo, non solo migliori le prestazioni complessive, ma fai anche in modo di non sprecare la larghezza di banda degli utenti, oltre a migliorare potenzialmente le metriche incentrate sull'utente e offrire un'esperienza utente migliore.