Una catena di richieste critiche è una serie di richieste che dipendono l’una dall’altra ed è fondamentale per il caricamento della pagina. Segue il Critical Rendering Path, che determina l’ordine in cui le richieste vengono elaborate ed eseguite.
Lunghe catene di richieste critiche, soprattutto quelle che includono risorse importanti, possono rallentare notevolmente il caricamento della pagina perché bloccano il rendering. Ridurre il numero di queste catene diminuisce la latenza e accelera il tempo di caricamento.
- Il concatenamento delle richieste critiche può portare a caricamenti più lenti e a tempi di risposta peggiori sul tuo sito.
- Tutte le risorse vitali vengono renderizzate nell’ordine specificato nel tuo codice HTML, ritardando potenzialmente la prima visualizzazione del contenuto sugli schermi dei visitatori, in base alle dimensioni delle risorse e alla lunghezza della catena.
Questa guida esplorerà diversi metodi per evitare il concatenamento delle richieste critiche sul tuo sito. Iniziamo dalle basi.
Come le catene di richieste critiche influenzano la velocità del sito
All’inizio del processo di caricamento, il browser legge l’HTML e gestisce le richieste critiche in base ai loro livelli di priorità. Di solito, l’HTML viene gestito per primo, seguito da CSS, immagini e JavaScript.
Lunghe catene di queste richieste critiche possono rallentare il sito, aumentando la latenza e prolungando i tempi di caricamento. Il ritardo totale è dato dalla somma del tempo necessario per scaricare tutte le risorse della catena di richieste critiche più lunga.
- Puoi migliorare le prestazioni del sito e l’esperienza utente riducendo il numero di queste risorse critiche.
- Puoi farlo ritardandone il download, rimuovendole del tutto o accorciando i percorsi critici.
Comprendere le richieste critiche: la prospettiva di Lighthouse
Una richiesta critica riguarda qualsiasi risorsa necessaria al rendering della pagina. Lighthouse definisce una richiesta critica come:
- Non precaricata
- Bloccante per il rendering
- Dichiarata con priorità media, alta o molto alta.
Queste richieste includono spesso elementi come il titolo di un articolo del blog o le immagini di un hero banner, che dovrebbero apparire immediatamente sullo schermo del visitatore.
Analisi delle richieste critiche con GTmetrix
GTmetrix descrive una richiesta critica come:
- Bloccante per il rendering
- Non precaricata
- Dichiarata con priorità media, alta o molto alta.
Quando è presente almeno una di queste catene, GTmetrix avvia un audit. Mostra poi la catena di richieste critiche più lunga, dettagliando ogni richiesta e indicando la latenza massima del percorso critico.
Come evitare il concatenamento delle richieste critiche
Per migliorare le prestazioni del sito evitando il concatenamento delle richieste, puoi adottare il metodo del precaricamento delle richieste vitali. Questa tecnica specifica quali file devono essere caricati all’inizio del processo, perché sono critici per il rendering della parte visibile della pagina.
Ecco come implementarla efficacemente:
Nota: È una buona idea eseguire un backup del sito prima di apportare modifiche. Se qualcosa va storto, puoi rapidamente ripristinare lo stato precedente del sito*. Puoi usare WP Staging per backup automatici facili da gestire. Consulta la guida al backup e al ripristino per ulteriori informazioni.*
Precaricare le richieste chiave
Identifica le risorse più critiche che influenzano il caricamento della pagina. Spesso includono file CSS, JavaScript, font e immagini "above the fold".
Usa l’attributo rel= "preload" nella sezione <head> dell’HTML per dire al browser di caricare queste risorse il prima possibile. È fondamentale per risorse come CSS e JavaScript, che bloccano il rendering.
Specifica correttamente il tipo di contenuto precaricato usando l’attributo as (ad esempio as= "script" per JavaScript). Questo aiuta il browser a dare priorità a queste risorse in modo efficace.
Plan B: usare WP Rocket per il precaricamento
Se preferisci un approccio più semplice basato su plugin, WP Rocket è uno strumento altamente consigliato per automatizzare il precaricamento delle richieste vitali.
WP Rocket facilita il precaricamento di font e altre risorse critiche direttamente dal tuo dominio, assicurando che queste risorse vengano caricate rapidamente per ridurre il blocco del rendering.
Inoltre, WP Rocket offre funzionalità come l’ottimizzazione della distribuzione CSS, incluse opzioni per rimuovere il CSS inutilizzato e caricare il CSS in modo asincrono. Questo migliora ulteriormente le prestazioni del sito riducendo l’impatto del CSS bloccante.
Ridurre il numero di risorse critiche
Accelera il tuo sito riducendo al minimo il CSS e il JavaScript essenziali necessari per il contenuto "above the fold". Ottimizza il caricamento ritardando CSS e JavaScript non critici o rimuovendoli del tutto. Questa strategia aiuta il browser a caricare più velocemente i contenuti importanti evitando risorse inutili come CSS e JS non utilizzati.
Per ridurre il numero di risorse critiche sul tuo sito usando il plugin WP Rocket, segui questi passaggi per abilitare specifiche opzioni di ottimizzazione nella scheda "File Optimization":
- Minify CSS Files: Spunta questa opzione per comprimere i file CSS, rimuovendo spazi e commenti inutili. Riduce le dimensioni dei file e accelera il caricamento.
- Optimize CSS Delivery: Seleziona questa opzione per eliminare il CSS bloccante sul tuo sito, aiutando il rendering più rapido delle pagine. Ricorda che è possibile selezionare solo un metodo nelle impostazioni di ottimizzazione CSS.
- Minify JavaScript Files: Abilita questa opzione per comprimere i file JavaScript rimuovendo spazi e commenti.
- Combine JavaScript Files: Se il tuo sito non utilizza HTTP/2, considera la combinazione dei file JavaScript interni e di terze parti per ridurre le richieste HTTP.
- Load JavaScript Deferred: Attiva questa opzione per posticipare il caricamento dei file JavaScript fino al termine dell’analisi dell’HTML, migliorando significativamente i tempi di caricamento.
Evitare il concatenamento delle richieste con ‘font-display‘
Per evitare il concatenamento delle richieste e migliorare le prestazioni del sito, puoi usare la proprietà font-display per controllare come vengono visualizzati i web font durante il caricamento. Ecco i passaggi e i valori che puoi utilizzare:
Definire i valori di font-display:
- Auto: Usa la strategia predefinita del browser.
- Block: Mostra un segnaposto invisibile finché il font non viene caricato.
- Swap: Usa un font di fallback finché il web font non viene caricato, poi lo sostituisce.
- Fallback: Nasconde brevemente il testo, poi usa un font di fallback finché il web font non viene caricato.
- Optional: Simile a fallback, ma il browser può decidere di non usare il web font.
Per la maggior parte dei browser moderni, è consigliato font-display: swap; perché previene il Flash of Invisible Text (FOIT).
- Implementare font-display: Aggiungi la proprietà font-display alle tue regole @font-face nel CSS:
@font-face {
font-family: 'Your Font';
src: url('your-font.woff2') format('woff2');
font-display: swap;
}- Precaricare i font: Usa il tag
<link rel="preload">nel<head>dell’HTML per assicurarti che i font vengano caricati all’inizio del processo di rendering:
<link rel="preload" href="your-font.woff2" as="font" type="font/woff2" crossorigin="anonymous">Precaricare i font con WP Rocket
Caricare rapidamente i font è importante per evitare spostamenti del layout sul sito. WP Rocket, un noto plugin per WordPress, ti aiuta in questo. Ecco come precaricare i font:
Clicca sulla scheda "Preload" per accedere alle impostazioni relative al precaricamento dei font.
Scorri verso il basso fino alla sezione "Preload Fonts". Incolla gli URL dei font identificati in precedenza nell’apposito campo, assicurandoti che ciascun URL si trovi su una nuova riga. Poi clicca sul pulsante "Save Changes".
Precaricare i font con WP Rocket aiuta il sito a caricarsi in modo più fluido, riducendo il CLS e migliorando l’esperienza utente.
Riepilogo
- Comprendere e ridurre l’impatto del concatenamento delle richieste critiche è fondamentale per migliorare le prestazioni del sito.
- Affrontare questi problemi può aumentare significativamente la velocità di caricamento e offrire un’esperienza utente più fluida e reattiva.
- Questo migliora la soddisfazione degli utenti e influisce positivamente sui ranking SEO, rendendo il sito più favorevole ai motori di ricerca.
Articoli correlati
- Come correggere l’errore WordPress "Sidebar Not Appearing"
- Perché WordPress è lento + Come risolverlo
- Perché backup e disaster recovery sono necessari per WordPress?
- Come riparare e ottimizzare il database di WordPress
- Come annullare le modifiche in WordPress (revisioni, salvataggi automatici, snapshot)
