Come evitare di concatenare richieste critiche
Pubblicato: 2023-08-03Ricevi l'avviso "Evita di concatenare richieste critiche" ogni volta che esegui un test di PageSpeed Insights?
Bene, questo finisce oggi.
Dopo aver letto questa guida, saprai tutto sulle richieste critiche, su come il loro concatenamento influisce sulle tue prestazioni e, cosa più importante, su come correggere l'avviso "Evita di concatenare richieste critiche".
- Che cosa è considerata una richiesta critica?
- Cosa significa "Evitare di concatenare richieste critiche".
- In che modo il concatenamento delle richieste critiche influisce sulle prestazioni
- Come evitare di concatenare richieste critiche su WordPress
- Bonus: altre best practice per correggere "Evitare di concatenare richieste critiche"
Continuare a leggere.
Che cosa è considerata una richiesta critica?
Una richiesta critica è una risorsa essenziale per il rendering della visualizzazione iniziale di una pagina web. In altre parole, tutto ciò che è caricato above the fold.
Ad esempio, ecco cosa vedo sul mio laptop quando carico la home page di NitroPack:
Tutti gli elementi above the fold sono considerati critici perché, a seconda della velocità con cui vengono caricati, l'utente può avere un'ottima esperienza o rimbalzare immediatamente.
Cosa significa evitare di concatenare richieste critiche?
In poche parole, l'avviso "Evita di concatenare richieste critiche" significa che le risorse critiche necessarie per il rendering della tua pagina sono troppo grandi.
Per quanto riguarda la parte di concatenamento, una catena di richieste critiche è una sequenza di richieste che dipendono l'una dall'altra e sono essenziali per il rendering della pagina. L'ordine in cui le richieste vengono analizzate ed eseguite è determinato dal Critical Rendering Path (CRP).
Il percorso di rendering critico si riferisce alla sequenza di passaggi che un browser Web esegue per convertire il codice HTML, CSS e JavaScript in una rappresentazione visiva sullo schermo di un utente.
Quando il browser inizia ad analizzare il codice, elabora le richieste critiche in base alla priorità assegnata:
Ora che sai cos'è CRP e come i browser assegnano le priorità, torniamo alla definizione di "catena di richieste critiche".
Poiché si tratta di una sequenza di richieste chedipendono l'una dall'altra , il caricamento di richieste critiche di grandi dimensioni e non ottimizzate comporterà inevitabilmente catene critiche più lunghe, rallentando il caricamento della pagina.
Per illustrare questa affermazione, diamo un'occhiata al seguente esempio:
Immagina una semplice pagina web che includa le seguenti risorse:
- index.html – il file HTML principale che definisce la struttura della pagina.
- styles.css – definisce l'aspetto visivo e il layout della pagina.
- main.js – contiene script che aggiungono interattività e funzionalità alla pagina web.
- logo.png (File immagine)
Considera una situazione in cui ogni risorsa fa parte di una lunga catena di richieste critiche. Ad esempio, immagina che il file HTML faccia riferimento a diversi file CSS e JavaScript e ciascuno di questi file, a sua volta, fa riferimento ad altre risorse, portando a una catena di dipendenze.
In uno scenario di questo tipo, un ritardo nel caricamento di una qualsiasi delle risorse nella catena avrà un effetto a cascata sulla latenza del percorso critico e sulle prestazioni complessive della tua pagina.
E parlando di prestazioni web, vediamo quali metriche subiranno il maggiore impatto dal concatenamento di richieste critiche...
In che modo il concatenamento delle richieste critiche influisce sulle prestazioni
Più lunga è la catena, più tempo impiega il browser a visualizzare le risorse necessarie per visualizzare i tuoi contenuti.
In termini di metriche delle prestazioni web, questo si traduce in uno scarso First Contentful Paint (FCP) e Largest Contentful Paint (LCP).
Prima vernice contenta fallita (FCP)
FCP misura quanto tempo impiega il browser a visualizzare la prima parte di contenuto DOM (ad es. immagine, SVG, elemento canvas non vuoto) su una pagina.
Questi elementi potrebbero sembrare insignificanti, ma sono fondamentali per l'esperienza utente del tuo sito. Dicono ai tuoi visitatori che il loro input è in fase di elaborazione e che il sito si sta caricando. Se una pagina rimane vuota per alcuni secondi prima di essere caricata, gli utenti non sanno se qualcosa sta accadendo o meno.
Per garantire che il browser possa eseguire il rendering di questa prima parte di contenuto DOM il prima possibile, le catene di richieste critiche devono essere brevi e leggere. Altrimenti, le possibilità che i tuoi visitatori rimbalzino a causa di uno schermo vuoto e di un FCP fallito sono moltoPIÙ ALTE.
Fallimento della più grande vernice contenta (LCP)
LCP misura il tempo necessario per caricare l'elemento above the fold più grande su una pagina.
È uno dei tre Core Web Vitals (CWV) che sono un insieme di metriche incentrate sull'utente che misurano il tempo di caricamento del tuo sito, la stabilità visiva e l'interattività. Sono anche un fattore di ranking di Google .
Quindi, avere un punteggio LCP scarso a causa del caricamento di lunghe catene di richieste critiche non solo significa che stai fallendo alcunemetriche delle prestazioni, ma stai anche:
- Diminuire le possibilità di superare il CWV
- Danneggiare il posizionamento del tuo sito
- Fornire un'esperienza utente negativa
Il modo infallibile per evitare tutto ciò è accorciare il percorso critico ottimizzando il numero e le dimensioni delle risorse.
Ed ecco come fare...
Come evitare di concatenare richieste critiche (su WordPress)
Se esiste un'unica strategia di riferimento per correggere "Evitare il concatenamento di richieste critiche", sarebbe l'eliminazione delle risorse che bloccano il rendering.
Le risorse che bloccano il rendering sono file che quando il browser li incontra, deve scaricarli, analizzarli ed eseguirli, prima di fare qualsiasi altra cosa, incluso il rendering.
I principali colpevoli più comunemente contrassegnati come "blocco del rendering" sono i file CSS e JavaScript non ottimizzati.
Le seguenti tecniche ti aiuteranno a gestirle con successo:
Rimuovi CSS inutilizzati
Il termine Unused CSS si riferisce alle regole CSS che non sono utilizzate nella pagina corrente.
Queste regole rendono i file più grandi del necessario, gonfiando il codice e creando lunghe catene di richieste critiche. Di conseguenza, il caricamento dei file e della pagina richiede un'eternità.
Se ti senti a tuo agio nel mettere a punto il tuo codice, puoi utilizzare uno strumento online come PurifyCSS.
Inserisci l'URL della tua pagina e lo strumento elimina automaticamente il codice non necessario. Quindi, puoi scaricare il CSS "purificato" e caricarlo sul tuo sito:
Importante : la modifica del codice nasconde il rischio di danneggiare il design e la funzionalità del tuo sito.Se non hai precedenti esperienze tecnologiche, contatta uno sviluppatore web o installa un plug-in che lo farà automaticamente per te.
Rimuovi i CSS inutilizzati con un clic di un pulsante. Installa NitroPack e ottimizza automaticamente il tuo sito →
Rinvia JavaScript
Il rinvio dei file JavaScript consente di caricarli solo quando necessario, in modo che il browser possa concentrarsi prima sulla pubblicazione dei contenuti più critici (above the fold).
Puoi caricare in modo pigro i tuoi file JS usando ilfile async e rinviare attributi.
- asincrono
Caricamento asincrono significa che lo script verrà recuperato in background mentre l'analisi HTML e il rendering della pagina continuano.
Quando lo script viene scaricato, metterà in pausa l'analisi HTML, eseguirà immediatamente lo script e quindi riprenderà l'analisi. Di conseguenza, l'ordine in cui vengono eseguiti gli script con l'attributo async può essere imprevedibile poiché possono completare il caricamento in momenti diversi.
L'attributo asyncè perfetto per gli script di terze parti che non vuoi bloccare il caricamento e il rendering della tua pagina.
- differire
Anche l'attributo defer , come async, carica lo script in modo asincrono, ma differisce nel modo in cui viene eseguito.
Gli script con l'attributo defer verranno scaricati in background mentre l'analisi HTML continua, ma l'esecuzione dello script verrà posticipata fino al completamento dell'analisi HTML. L'ordine di esecuzione degli script con defer viene mantenuto nell'ordine in cui appaiono nell'HTML.
Utilizzare l'attributodeferquando si desidera mantenere l'ordine di esecuzione degli script così come appaiono nell'HTML.
Compressione e minimizzazione del codice
Un altro livello di ottimizzazione della catena di richiesta critica consiste nel ridurre le dimensioni complessive delle risorse in quanto aiuterà il browser a scaricarle, analizzarle e renderle più velocemente.
E il modo per farlo è comprimere e minimizzare i tuoi file.
L'applicazionedella compressione riscriverà il codice binario dei tuoi file e codificherà le informazioni utilizzando meno bit rispetto all'originale.
Lo strumento di compressione più popolare è gzip. Gzipping funziona trovando le stringhe ripetitive e sostituendole con puntatori alla prima istanza della stringa. Il vantaggio è che i puntatori usano meno spazio del testo.
Minification , d'altra parte, rimuove elementi di codice non necessari come commenti, interruzioni di riga o spazi bianchi:
Fonte:KeyCDN
Tagliando il tuo codice, puoi abbreviare le tue richieste critiche, portando a un miglioramento della velocità per il tuo sito web.
Ci sono tonnellate di strumenti gratuiti online che potrebbero aiutarti a ottimizzare le dimensioni del tuo codice. Usarli ti richiederà di inserire il tuo codice, quindi copiare la versione minimizzata/compressa e incollarla nuovamente nel tuo sito. Ecco un paio di suggerimenti:
- CSSNano
- Minificatore JavaScript Toptal
- Abbellisci codice
Altre best practice per correggere "Evitare il concatenamento di richieste critiche"
Sottoimpostazione dei caratteri
Dopo esserti preso cura delle risorse CSS e JavaScript del tuo sito, il prossimo miglior candidato per l'ottimizzazione sono i tuoi font web.
Per lo più trascurati, i web font sono spesso file di grandi dimensioni che richiedono un po' di tempo per essere caricati e possono persino bloccare il rendering del testo.
Per evitare ciò è necessario ridurne le dimensioni in modo che il browser possa caricarli immediatamente.
Inserisci la sottoimpostazione del carattere.
Il subsetting dei font è una tecnica di ottimizzazione che rimuove i glifi (caratteri) inutilizzati da un font per ridurne le dimensioni in modo massiccio.
Ad esempio, pensa a quanti glifi univoci utilizza la tua home page. Siamo disposti a scommettere che non sono più di 100.
Per metterlo in prospettiva, Font Awesome, il secondo font più utilizzato (il 7% di tutti i siti web lo utilizza),ha 26.107 caratteri .
Fonte:Web Almanacco
Immagina quanto tempo potresti risparmiare al browser e ai tuoi visitatori caricando solo ciò che è assolutamente necessario per una determinata pagina.
Esistono alcuni strumenti online che potrebbero aiutarti ad applicare il subsetting dei caratteri. Dovrai caricare il tuo file di font e selezionare i glifi che vuoi rimuovere. Quindi, torna al tuo sito e carica il file con subset.
Inoltre, devi assicurarti di eseguire il processo ogni volta che aggiorni i tuoi contenuti.
Importante : la creazione di sottoinsiemi dei file dei caratteri tramite strumenti online nasconde il rischio di caratteri mancanti sulla pagina dopo l'ottimizzazione. Se non hai mai lavorato con i font in precedenza, ti consigliamo vivamente di contattare uno specialista delle prestazioni web o di installare un plug-in che lo farà automaticamente per te.
Crea un sottoinsieme dei tuoi font senza rischi. Riduci le loro dimensioni fino al 70% installando NitroPack →
Precarica le richieste di chiavi
L'utilizzo dell'attributo link rel=preload per precaricare le richieste critiche è un'altra strategia di ottimizzazione che migliorerà FCP e LCP e accorcerà il percorso critico.
Per identificare la tua richiesta più critica, esegui il tuo sito attraverso PageSpeed Insights e controlla l'avviso "Preload key request":
Quindi, vai al tuo codice e aggiungi il tag link rel=preload alla risorsa specifica:
Non dimenticare di includere l'attributo as in modo che il browser possa impostare la priorità della risorsa precaricata in base al suo tipo e determinare se esiste già nella cache.
Risorse aggiuntive: controlla l'elenco completo dei valori as.
Come evitare di concatenare richieste critiche con NitroPack
Ottimizzare le tue catene di richieste critiche potrebbe essere un compito noioso se non sei armato degli strumenti giusti.
Come già saprai, ci sono diverse occasioni in cui la messa a punto del tuo codice può ritorcersi contro e compromettere la funzionalità e il design del tuo sito.
Ma correggere un singolo avviso PSI non dovrebbe essere un tale mal di testa.
O almeno non lo è con NitroPack.
NitroPack è uno strumento di ottimizzazione della velocità all-in-one che aumenterà le prestazioni del tuo sito applicando:
- Rimuovi CSS inutilizzati
- Rinvia JavaScript
- Sottoimpostazione dei caratteri
E più di 32 altre comprovate tecniche di ottimizzazione per te.
Con NitroPack, non è richiesta alcuna codifica o esperienza tecnica precedente per migliorare le prestazioni del tuo sito.
Sembra troppo bello per essere vero?
Diamo un'occhiata a uno dei siti Web dei nostri clienti con e senza NitroPack.
Ecco i loro risultati senza NitroPack:
41 Punteggio delle prestazioni su dispositivi mobili, 47 catene e latenza del percorso critico di 3.781 ms.
Senza NitroPack
Ed ecco i risultati con NitroPack:
95 Punteggio delle prestazioni, 1 catena, latenza del percorso critico più di 2 volte più breve:
Con NitroPack
Puoi provare questo e anche molti altri miglioramenti delle prestazioni. Installa NitroPack oggi e lascia che ci occupiamo della velocità della luce del tuo sito.