Risolvere l'avviso Lighthouse 'eliminate render-blocking resources'
Elimina le risorse che bloccano il rendering e migliora i Core Web Vitals
'Eliminate render-blocking resources' in breve
Durante il caricamento di qualsiasi pagina con risorse che bloccano il rendering, un browser non può avviare il processo di rendering fino a quando tutti gli elementi che causano questo blocco non sono stati scaricati e valutati.
Questo infrange la regola d'oro di PageSpeed: 'inizia sempre il rendering il prima possibile'. Qualsiasi ritardo nel rendering della pagina la fa caricare più lentamente del necessario.
Risolvi questo avviso di Lighthouse rimuovendo o differendo queste risorse che bloccano il rendering.
Cos'è l'avviso Lighthouse 'Eliminate render-blocking resources'?
Cosa causa l'avviso Eliminate render-blocking resources in Lighthouse? Lighthouse segnala le pagine che hanno:
- Un tag script nell'head che non è differito.
Gli script nell'head della pagina bloccano il rendering per impostazione predefinita se non hanno l'attributo defer o async. - Un foglio di stile collegato che corrisponde al media del dispositivo.
Un <link rel="stylesheet"> bloccherà il rendering della pagina se non è disabilitato e corrisponde al media del browser. Ad esempio <link rel="stylesheet" media="print"> non bloccherà il rendering sui dispositivi desktop
L'avviso 'Eliminate render-blocking resources' impatta direttamente alcune metriche di Lighthouse. In teoria, le pagine con risorse che bloccano il rendering potrebbero comunque caricarsi abbastanza velocemente. In pratica, spesso non è così. Troppe risorse che bloccano il rendering influenzeranno molto probabilmente metriche importanti di Lighthouse come First Contentful Paint (FCP) e Largest Contentful Paint (LCP).
Un rapido promemoria - Cos'è il rendering?
Il rendering è un processo utilizzato nello sviluppo web che trasforma il codice del sito web nelle pagine interattive che gli utenti vedono quando visitano un sito. Il termine si riferisce generalmente all'uso di codice HTML, CSS e JavaScript. Il processo è completato da un motore di rendering, il software utilizzato da un browser web per renderizzare una pagina web.
Cosa causa le 'risorse che bloccano il rendering'?
Le risorse che bloccano il rendering sono sempre fogli di stile e JavaScript nell'head della pagina. Questo significa che possono essere aggiunte solo dal tuo CMS, manualmente dal tuo sviluppatore web o da un plugin. Quando cerchi l'origine di una risorsa che blocca il rendering, prova a guardare in questi posti:
- Il template I file del template del tuo sito web sono il primo posto dove guardare. Trova il punto in cui si trova il codice <head> e cerca stili e script codificati direttamente.
- Il CMS a volte il CMS stesso richiede alcuni script (ad esempio jQuery) per funzionare correttamente.
- I plugin. I plugin sono noti per iniettare stili e script nella pagina.
Come le 'risorse che bloccano il rendering' influenzano la velocità della pagina
Le risorse che bloccano il rendering impediscono la generazione dell'albero di rendering. Quando l'albero di rendering non è stato costruito, il browser non inizierà il rendering. Questo significa che la pagina rimarrà completamente bianca fino a quando tutte le risorse che bloccano il rendering non saranno state scaricate e valutate. Questo impatterà metriche come First Contentful Paint e Largest Contentful Paint.
Come risolvere 'Eliminate render-blocking resources'
Per risolvere il problema delle 'risorse che bloccano il rendering' dovrai assicurarti che queste risorse non blocchino più il rendering. Il modo più semplice è semplicemente rimuovere queste risorse. A volte vecchie risorse inutilizzate stanno ancora bloccando il rendering della pagina. Se non puoi rimuoverle, dovresti differirle.
Differire JavaScript
JavaScript può essere differito aggiungendo l'attributo defer o async al tag script.
//deferred javascript
<script src="script.js"></script>
//async javascript
<script src="script.js"></script>
Differire i fogli di stile
Differire i fogli di stile può essere un po' più complicato. Quando un foglio di stile viene differito, la pagina verrà renderizzata prima senza gli stili. Poi, quando gli stili saranno caricati, il browser applicherà lo stile causando ogni tipo di sfarfallio e layout shift. Ecco perché avrai bisogno di CSS critico inline. Il CSS critico è una raccolta degli stili necessari per renderizzare la parte visibile della pagina.
<style>//cricical CSS here</style> <link rel="preload"
href="css.css"
type="text/css"
as="style"
onload="this.onload=null;this.rel='stylesheet';"/> Soluzioni alternative per 'eliminate render-blocking resources'
A volte non è possibile eliminare quelle risorse che bloccano il rendering. Potresti non avere accesso al template o il tuo CMS potrebbe richiedere determinati script. Ci sono alcune soluzioni alternative per ridurre l'impatto di quelle risorse che bloccano il rendering.
- Minimizza e comprimi i tuoi stili e script.
Minimizza e comprimi i tuoi stili e script attuali. Le risorse più piccole hanno un impatto minore sulle prestazioni di caricamento rispetto alle risorse più grandi. - Dividi i file grandi in più file.
Dividere i file grandi in più file potrebbe ridurre il tempo di caricamento delle risorse. - Scarica le risorse per pagina.
Quando una risorsa non può essere rimossa da una pagina, ciò non significa che sia necessaria su tutte le pagine. I plugin di WordPress, ad esempio, tendono ad aggiungere script e stili a tutte le pagine, anche se il plugin potrebbe non essere attivo su quella pagina.
Secure your Q3 Metrics.
Do not let technical debt derail your Core Web Vitals. I provide the strategy, the code, and the verification to pass Google's assessment.
- Strategic Planning
- Code Implementation
- Verification & Testing
