Aumenta le prestazioni del sito web con tre parametri

Jan 25, 2024

Il web è un mezzo in rapida crescita. Con migliaia di nuovi siti registrati ogni giorno, come puoi ottenere un vantaggio rispetto alla concorrenza? Una categoria trascurata che migliora il tuo sito web e aiuta ad aumentare il tempo di coinvolgimento degli utenti è la performance. Le prestazioni contano! Le prestazioni del sito web sono fondamentali per creare un'esperienza utente positiva, consentire l'accessibilità e aumentare il traffico. Prestazioni inadeguate possono alterare questi parametri e diventare una responsabilità, creando un ambiente più difficile per la crescita di un’azienda. Migliorare le prestazioni porterà anche a una migliore ottimizzazione dei motori di ricerca (SEO).

Esistono molti parametri per le prestazioni. Tratteremo i miglioramenti per tre: Cumulative Layout Shift (CLS), Largest Contentful Paint (LCP) e Total Blocking Time (TBT). Con l'attuale versione 9 di Lighthouse, i tre parametri cumulativi rappresentano il 70% del punteggio prestazionale di Lighthouse di Google.

Cumulative Layout Shift (CLS) è una delle metriche dell'esperienza utente più facili da comprendere. I singoli componenti di una determinata pagina possono creare o distruggere l'esperienza di un utente. A volte gli utenti non ottengono ciò che si aspettano quando caricano inizialmente una pagina. Ogni componente deve avere un'azione prevedibile per un utente.

La dimensione del contenuto implica l'impostazione di una larghezza e un'altezza per i selettori per ridurre lo spostamento del contenuto. Fornisce inoltre agli utenti con connessione lenta la consapevolezza che il contenuto verrà caricato in quella posizione una volta completato il processo di rendering. Alcuni elementi richiedono più tempo per essere caricati, influenzando CLS in modo negativo. Ad esempio, le immagini reattive richiedono una copertura aggiuntiva. Prendi in considerazione l'impostazione delle proporzioni o la conversione dell'elemento in assoluto mentre imposti il ​​suo pseudo-selettore con una percentuale di riempimento superiore.

Le animazioni sono un modo unico per rendere una pagina piacevole per l'utente, se eseguite correttamente. Evita di utilizzare le posizioni (in alto, a destra, in basso, a sinistra) e la larghezza/altezza per le animazioni. Utilizzare invece il selettore di trasformazione e il relativo attributo di traduzione per la posizione. Per una maggiore flessibilità, incorporare selettori di margine. Il selettore di trasformazione non attiva il layout a meno che non sia assolutamente necessario.

I caratteri Web stanno diventando un metodo sempre più popolare di branding per un sito web. Possono essere implementati internamente o richiamati da altri siti. Un utente con connessioni lente potrebbe riscontrare problemi nella visualizzazione dei webfont. In questi casi, i browser in genere mostrano la versione normale fino al caricamento del file. Una volta caricato, se il browser supporta i webfont, passerà automaticamente alla versione corretta. Altrimenti, l'utente riceverà i caratteri predefiniti.

La metrica Largest Contentful Paint (LCP) misura la quantità di tempo aggiuntivo impiegato per il rendering di un elemento (immagine, video, testo). Per offrire un'esperienza utente ottimale, punta a un punteggio metrico inferiore a 2,5 secondi. Per migliorare LCP tramite testo, utilizzare la stessa strategia utilizzata per CLS. Per ridurre le velocità LCP per le immagini, ottimizzare l'immagine con quanto segue.

L'intero processo per Largest Contentful Paint consiste nel rendere il suo elemento (immagine, video, testo) visualizzato nella pagina il più rapidamente possibile. Queste strategie aiutano a dare priorità agli elementi importanti nella scheda Rete. Tutti i file JavaScript che non saranno richiesti nel caricamento iniziale del viewport dovranno essere posticipati per il momento successivo.

Total Blocking Time (TBT) è una metrica delle prestazioni per misurare la reattività del carico su una pagina. Sebbene sia l'ultima categoria in questo articolo, ha anche il peso più elevato, pari al 30%. TBT misura il tempo in cui a una pagina viene impedito di rispondere all'input di un utente, indipendentemente dal fatto che tale input sia costituito da clic del mouse, tocchi sullo schermo o pressioni della tastiera. Time to Interactive (TTI) misura quanto tempo impiega una pagina per diventare reattiva. First Contentful Paint (FCP) avviene quando il browser esegue il rendering del primo bit di contenuto dal Document Object Model (DOM). Il TBT è la somma di tutti i periodi tra FCP e TTI. Per migliorare questa categoria, devi prima suddividere gli script interni e quelli di terze parti.

Di conseguenza, il tempo di blocco totale è la metrica delle prestazioni di maggior impatto. Time to Interactive e First Contentful Paint giocano entrambi un ruolo importante in TBT e nel suo filo conduttore principale. Prendi in considerazione l'analisi di FCP o TTI se bloccato su TBT.