La risorsa più veloce e ottimizzata meglio è una risorsa non inviata. Dovresti eliminare le risorse non necessarie dalla tua applicazione. È buona prassi mettere in discussione e rivedere periodicamente i presupposti impliciti ed espliciti 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 offerto all'utente? Sai misurarne e dimostrarne il valore?
- La risorsa (soprattutto se è di terze parti) offre prestazioni costanti? Questa risorsa si trova nel percorso critico o deve esserlo? Se la risorsa si trova nel percorso critico, potrebbe trattarsi di 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 che non sono necessarie o, peggio ancora, che ne limitano il rendimento senza offrire un valore aggiunto al visitatore o al sito su cui sono ospitate. Questo vale sia per le risorse e i widget proprietari che di terze parti:
- Il sito A ha deciso di visualizzare un carosello di foto sulla sua home page per consentire al visitatore di visualizzare l'anteprima di più foto con un rapido clic. Tutte le foto vengono caricate quando la pagina è caricata e l'utente passa da una foto all'altra.
- Domanda: hai misurato il numero di utenti che visualizzano più foto del carosello? Il download di risorse che la maggior parte dei visitatori non visualizza mai potrebbe causare un overhead elevato.
- Il sito B ha deciso di installare un widget di terze parti per mostrare contenuti correlati, migliorare il coinvolgimento sui social network o fornire altri servizi.
- Domanda: hai monitorato il numero di visitatori che utilizzano il widget o il clickthrough sui contenuti forniti dal widget? Il coinvolgimento generato da questo widget è sufficiente per giustificarne l'overhead? Inoltre, è possibile utilizzare una strategia di caricamento per garantire che lo script non venga caricato fino a quando non è necessario?
Determinare se eliminare i download non necessari spesso richiede un'attenta riflessione e misurazione. Per ottenere risultati ottimali, fai un inventario e rivedi periodicamente queste domande per ogni risorsa delle tue pagine.
Effetti sui Core Web Vitals
L'iniziativa Core Web Vitals è stata introdotta da Google per fornire un insieme di metriche che riflettono l'esperienza degli utenti mentre utilizzano il web. Anche se esistono molte strategie di ottimizzazione per Core Web Vitals, chiedersi se caricare una determinata risorsa su una pagina potrebbe aprire la strada a un modo per migliorare queste metriche sul tuo sito web. Di seguito sono riportati alcuni esempi, raggruppati per Core Web Vitals, che ti consigliamo di prendere in considerazione. Anche se questo non è un elenco esaustivo di esempi (e ce ne sono molti), leggerli potrebbe aiutarti a rifletti.
Largest Contentful Paint (LCP)
L'attributo Largest Contentful Paint (LCP) misura il momento in cui vengono caricati i contenuti di maggiori dimensioni (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, il download di meno risorse significa che la larghezza di banda a disposizione dell'utente verrà allocata a meno risorse e questo può portare a un miglioramento della metrica LCP. Un esempio classico è il caricamento lento, in cui le immagini all'esterno dell'area visibile durante il caricamento della pagina non vengono scaricate fino a quando il browser non avrà stabilito che l'utente ha maggiori probabilità di vederle. Se disponi di una grande galleria di miniature, ad esempio 50 immagini, il caricamento lento, tranne le prime dieci, significa che il browser può 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 di caricare meno immagini. Il browser ha uno schema di priorità interna che determina la quantità di larghezza di banda che ogni risorsa dovrebbe ricevere. Tuttavia, anche con tutte le risorse, in particolare quelle scaricate con priorità elevata, hanno il potenziale per privare la potenziale risorsa dipendente di un elemento LCP. Ciò vale in particolare 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 carattere 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 molti testi, è possibile che l'elemento LCP di una pagina sia un nodo di testo. Anche se esistono molte strategie di caricamento e ottimizzazione dei caratteri efficaci, vale la pena valutare se un carattere di sistema è sufficiente per le esigenze del tuo sito web, in modo che gli elementi LCP, ovvero nodi di testo, possano essere caricati senza dipendenza da una risorsa di carattere web e 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 è ancora terminato al momento della visualizzazione iniziale. Per le immagini, evita che la CLS richieda pratiche come l'impostazione di dimensioni esplicite. Per i caratteri, la gestione del caricamento e della potenziale corrispondenza dei caratteri di riserva può ridurre al minimo le variazioni durante il periodo di scambio di un carattere web. Per JavaScript, potrebbe essere la gestione del 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 alla CLS di una pagina richiede una certa quantità di lavoro per garantire che il layout della pagina sia sufficientemente stabile. Chiedendo se è necessaria o meno una risorsa specifica, non solo si velocizza il caricamento delle pagine, ma si riduce anche lo sforzo cognitivo necessario per preservare la stabilità del layout. Questo si traduce non solo in un'esperienza utente molto meno frustrante, ma anche in un'esperienza meno frustrante per gli sviluppatori, in quanto avrai più tempo per perseguire altri obiettivi nei tuoi progetti.
Interaction to Next Paint (INP)
L'interazione con Next Paint (INP) misura la reattività all'input dell'utente durante l'intero ciclo di vita di una pagina. L'INP di una pagina può essere influenzato notevolmente dal codice JavaScript che viene caricato, poiché JavaScript è ciò che determina la maggior parte dell'interattività sperimentata sul web. In particolare, la quantità di risorse di script scaricate durante il caricamento pagina può dare inizio al lavoro potenzialmente costoso necessario per valutare e compilare gli script. Minore è il numero di codice JavaScript caricato all'avvio, minore è il lavoro che il browser deve svolgere nel punto critico dell'esperienza sulle pagine, in cui gli utenti potrebbero tentare di interagire con il codice.
Anche se esistono strategie per ridurre le dimensioni delle risorse JavaScript scaricate durante l'avvio, ad esempio la suddivisione del codice e l'assorbimento degli alberi, vale la pena controllare i pacchetti che utilizzi nei tuoi progetti per vedere se sono necessari. Ad esempio, lodash offre molti metodi che sono ancora utili oggi, ma viene fornito con metodi predefiniti forniti dal browser, ad esempio funzioni specifiche di Array
per la mappatura, la riduzione, il filtro e molti altri.
Il miglioramento progressivo è anche un approccio utile a JavaScript, in quanto ti consente di offrire un'esperienza di base (ma comunque funzionante) per gli utenti che puoi integrare per quelli con dispositivi più potenti e connessioni di rete più veloci. A prescindere dal fatto che rispetti o meno il principio del miglioramento progressivo, il punto è sempre: ogni risorsa JavaScript che puoi evitare di scaricare può generare un'esperienza che risponde più rapidamente alle interazioni degli utenti, che è un aspetto vitale delle prestazioni sul web.
Conclusione
Verificare la presenza di download superflui sul tuo sito web può essere solo un aspetto della velocità offerta agli utenti, ma è un aspetto che può avere un grande impatto. Riepilogo:
- Fai un inventario delle tue risorse e di quelle di terze parti sulle tue pagine.
- Misurare le prestazioni di ogni risorsa: il valore e le prestazioni tecniche.
- Determina se le risorse forniscono un valore sufficiente.
- Comprendi l'effetto dei download non necessari sui Segnali web essenziali e sulle metriche di supporto.
Ottimizzando l'efficienza dei contenuti in questo modo, non solo migliori il rendimento complessivo, ma ti assicurerai anche di non sprecare la larghezza di banda degli utenti, oltre a migliorare potenzialmente le metriche incentrate sugli utenti e di offrire una migliore esperienza utente.