Evita di concatenare richieste fondamentali e importanza del Rendering

Ricevi l’avviso “Evita di concatenare richieste fondamentali” quando esegui un test di velocità su PageSpeed Insights?

Niente panico! Google Pagespeed mostra semplicemente quali risorse vengono caricate per prime per eseguire il rendering della pagina. Questo controllo aiuta a stabilire la priorità delle richieste che devono essere analizzate per prime per mostrare il contenuto all’utente.

In questo articolo ti aiuteremo a capire cos’è una richiesta fondamentale, perché dovresti evitare di concatenarle e come risolvere questo avviso Google Page Speed per evitare problemi di prestazioni.

Che cos’è una richiesta fondamentale e il suo impatto sulle prestazioni

Qualsiasi richiesta da parte di una risorsa essenziale per eseguire il rendering della pagina è una richiesta critica(o fondamentale). Secondo Lighthouse, una richiesta critica è definita come:

  • Non precaricato
  • Blocco del rendering
  • Dichiarato con priorità media, alta o molto alta.

Ad esempio, il titolo di un post sul blog o un’immagine del banner principale attivano richieste fondamentali: il contenuto dovrebbe essere visualizzato sullo schermo del visitatore il prima possibile.

Metriche delle prestazioni interessate: First contentful paint (FCP) e Largest contentful paint (LCP)

 

Le richieste fondamentali hanno un impatto negativo sul tempo di caricamento e sulla velocità percepita del tuo sito web.

Le catene di richieste fondamentali lunghe e quelle con risorse di grandi dimensioni influiscono sul carico delle prestazioni perché sono considerate “bloccanti la visualizzazione”.

 Catene lunghe + dimensioni di download di grandi dimensioni = un impatto più significativo sulle prestazioni di caricamento della pagina.

Quando testi il tuo sito tramite PageSpeed Insights, potresti riscontrare diverse catene che influiscono negativamente sulle metriche FCP e LCP (un Core Web Vital).

Ecco come il concatenamento delle richieste fondamentali influisce su entrambi i KPI:

Impatto sul Largest Contentful Paint (LCP): lunghe catene di richieste fondamentali richiedono molto tempo per essere elaborate e ritardano il caricamento dei contenuti più importanti. LCP è un’importante metrica incentrata sull’utente perché misura la velocità con cui l’immagine o il blocco di testo più grande viene visualizzato su una pagina del sito web. Tre fattori influiscono su LCP: tempi di risposta lenti del server, codice che blocca il rendering (come lunghe catene di richieste critiche) e tempi di caricamento delle risorse lenti.

Impatto sul First Contentful Paint (FCP): FCP misura la prima apparizione di qualsiasi contenuto su una pagina web. Dal punto di vista degli utenti, percepiranno che il tuo sito si caricherà più velocemente e che qualcosa sta succedendo. Per rendere questo primo contenuto il più presto possibile, le richieste fondamentali devono essere brevi e leggere (per un download più veloce).

Cosa significa evitare di concatenare richieste fondamentali?

L’avviso “Evita il concatenamento di richieste fondamentali” significa che le risorse critiche necessarie per eseguire il rendering della pagina Web sono troppo grandi. Le catene di richieste fondamentali sono una sequenza di richieste che dipendono l’una dall’altra per visualizzare la pagina finale sullo schermo dell’utente.

Tutte queste richieste critiche sono determinate dal Critical Rendering Path, che fornisce l’ordine di priorità per analizzare ed eseguire ciascuna richiesta. In altre parole, il percorso critico mostra quali risorse vengono caricate per prime con una priorità alta.

Quando il browser inizia ad analizzare il codice, elabora le richieste fondamentali in base alla priorità assegnata. Se queste richieste critiche formano lunghe catene, aumenteranno la latenza e estenderanno il caricamento della pagina.

Cos’è la latenza massima del percorso critico?

La latenza massima del percorso critico è la somma totale del tempo impiegato per scaricare tutte le risorse nella catena di richieste fondamentali più lunga. L’esempio seguente mostra la catena di richieste critiche più lunga di GTmetrix e la latenza associata: 2,9 s.

Per ottimizzare il percorso critico e garantire il minor tempo possibile per il rendering, è necessario ridurre al minimo tre variabili:

  • Il numero di risorse fondamentali.
  • La lunghezza del percorso critico.
  • Il numero di byte critici.

Meno byte critici il browser deve scaricare, più velocemente potrà elaborare il contenuto e renderlo visibile sullo schermo.

Come evitare di concatenare richieste fondamentali su WordPress

Per evitare di concatenare richieste fondamentali su WordPress, puoi seguire quattro strategie principali:

  1. Elimina le risorse che bloccano il rendering (Impatto: alto)
  2. Precarica richieste chiave (Impatto: alto)
  3. Precarica immagini e caratteri (Impatto: medio)
  4. Minimizzazione CSS e JS (Impatto: medio)

Esaminiamo ciascuna strategia che ti consentirà di ottimizzare la lunghezza critica della catena di richieste.

1. Eliminare le risorse che bloccano il rendering (Impatto: Elevato 🚀 🚀 🚀)

Una risorsa che blocca la visualizzazione attiva parti di codice che impediscono il caricamento rapido di una pagina Web. Ridurrai la lunghezza totale delle richieste fondamentali eliminandole. Esistono due metodi efficaci per eliminare le risorse che bloccano la visualizzazione:

Rimuovi CSS non utilizzati: il codice non utilizzato deve essere sempre rimosso per evitare gonfiori. Oltre a ciò, non vuoi che il tuo browser sia occupato a caricare script non necessari.
Se hai dimestichezza con la manipolazione dei tuoi file CSS, puoi utilizzare uno strumento come PurifyCSS.

Inserisci semplicemente l’URL del tuo sito, genera il file CSS inutilizzato e caricalo nuovamente suWordPress:

Ritardare o rinviare JS: un’altra tecnica per eliminare le risorse che bloccano il rendering (incluso JS inutilizzato). Mira a ridurre il numero di risorse fondamentali necessarie nel viewport (contenuti above the fold) rinviando o ritardando le risorse non critiche.

Il browser impiegherà meno tempo a caricare risorse che non sono essenziali per l’esperienza dell’utente (come immagini below the fold, stili CSS per contenuti non critici, ecc.)
Puoi applicare due script al tuo JavaScript: differito o asincrono. Defer dice al browser di non attendere lo script mentre async viene caricato in background e viene eseguito quando è pronto.

Ecco un esempio di tag script con l’attributo async:

<script src='https://tuosito.it/js/scripts.js' async='async' type='text/javascript'></script>

Ecco un esempio di tag script con l’attributo defer:

<script src='http://tuosito.it/js/scripts.js' defer='defer' type='text/javascript'></script>

Entrambe queste tecniche mirano a eliminare le risorse che bloccano il rendering ed evitare il concatenamento di richieste fondamentali.

2. Precarica richieste chiave (Impatto: elevato)

Questa è un’altra tecnica di ottimizzazione che consente di precaricare le risorse fondamentali, migliorando così il Largest Contentful Paint (LCP) e il First Contentful Paint (FCP). Puoi utilizzare “link rel=”preload” per indicare al tuo browser quale script importante sarà necessario per una pagina specifica. Il precaricamento delle risorse fondamentali migliorerà la velocità di caricamento e renderà il percorso critico più breve.

3. Precarica immagini e caratteri (Impatto:medio)

La chiave è scaricare tutte le risorse fondamentali (immagini e caratteri) il prima possibile per ridurre la lunghezza del percorso critico. Lo script di precaricamento ti consente di indicare al browser il contenuto critico che desideri caricare prima che venga scoperto in HTML. La catena di richieste fondamentali indica in quale ordine le immagini e i caratteri vengono prioritari e recuperati dal browser.

Per precaricare le immagini, applica su di esse lo script <link rel=”preload”>. Ecco come appare il tuo <head> HTML con un’immagine reattiva precaricata:

4. Minimizzazione CSS e JS (Impatto: medio)

La minimizzazione del codice descrive il processo di rimozione dei caratteri non necessari nel codice sorgente (come spazi bianchi, interruzioni di riga, commenti, etc.). La riduzione del codice consente di ridurre le richieste fondamentali, con conseguente aumento della velocità del tuo sito web.

Tutte le tecniche di ottimizzazione avanzate sopra menzionate possono essere travolgenti se non ti senti molto a tuo agio con la codifica e la modifica dei tuoi file WordPress.

Esistono tantissimi strumenti gratuiti online che potrebbero aiutarti a ottimizzare le dimensioni del codice. Per utilizzarli dovrai inserire il tuo codice, quindi copiare la versione minimizzata/compressa e incollarla nuovamente nel tuo sito. Ecco un paio di suggerimenti:

Come evitare di concatenare richieste fondamentali con un plugin

Per ridurre gli effetti delle catene di richieste fondamentali e migliorare un sito wordpress lento sulle prestazioni devi implementare certamente al meglio la cache del tuo sito web.
Per raggiungere lo scopo puoi utilizzare uno dei migliori plugin di cache per WordPress e applicare le migliori pratiche per le velocizzare il sito web subito dopo l’attivazione.

 

Altre migliori pratiche per risolvere “Evitare il concatenamento di richieste fondamentali”

Crea sottoinsiemi di Font

Dopo esserti preso cura delle risorse CSS e JavaScript del tuo sito, il prossimo miglior candidato per l’ottimizzazione sono i tuoi caratteri web ovvero il font.

Per lo più trascurati, i caratteri web sono spesso file di grandi dimensioni che richiedono molto tempo per essere caricati e possono persino bloccare la visualizzazione del testo.

Per evitare ciò è necessario ridurne le dimensioni in modo che il browser possa caricarli immediatamente.

Inserisci la sottoimpostazione del carattere.

Creare un sottoinsieme dei caratteri è una tecnica di ottimizzazione che rimuove i glifi (caratteri) inutilizzati da un carattere per ridurne notevolmente le dimensioni.

Ad esempio, pensa a quanti glifi unici utilizza la tua home page. Siamo pronti a scommettere che non sono più di 100.

Per metterre in prospettiva quasta cosa, pensa che Font Awesome, il secondo font più utilizzato (il 7% di tutti i siti web lo utilizza), ha 26.107 caratteri.

 

Conclusioni

Evitare il concatenamento di richieste fondamentali può essere un operazione difficile da mettere in atto.

Per ricapitolare, ecco alcuni modi in cui puoi evitare di concatenare richieste critiche sul tuo negozio WooCommerce:

  • Elimina le risorse che bloccano il rendering e ottimizza il percorso di rendering critico in modo che sia facile per il browser elaborarlo e scaricarlo rapidamente.
  • Precarica le risorse fondamentali in modo che il browser le elabori rapidamente.
  • Ritarda le richieste AJAX e gli iframe per migliorare la velocità della pagina ed eliminare l’avviso “evita di concatenare richieste fondamentali”.

Inoltre, puoi anche consultare gli altri nostri tutorial su come migliorare il punteggio Core Web Vitals e il posizionamento del tuo sito nel test PageSpeed Insights:

Con i nostri servizi di ottimizzazione della velocita del sito web possiamo offrirti prestazioni ottimali per il tuo sito web.