Come eliminare le risorse che bloccano il rendering

Le risorse di blocco del rendering sono una parte fondamentale dell'ottimizzazione dell'infrastruttura della tua pagina web.

Ridurli può aiutare a caricare la tua pagina molto più velocemente e migliorare significativamente i Core Web Vitals della tua pagina.

Queste risorse di blocco del rendering includono cose come caratteri esterni che richiedono troppo tempo per essere caricati (che non devono essere utilizzati), file multimediali non necessari, codice gonfio che semplicemente non va via e plug-in aggiuntivi che non lo sono necessario.

Esiste una miriade di questi tipi di risorse che puoi comprimere e combinare per creare singoli file che si scaricano più velocemente sui tuoi dispositivi, creando una velocità della pagina molto più elevata.

Ottimizzando la struttura della tua pagina in questa materia, puoi ridurre la quantità di lavoro che Google deve svolgere per eseguire la scansione del tuo sito e, di conseguenza, puoi migliorare la tua esperienza utente.

In effetti, i vantaggi completi di eseguire questo processo includono:

• Maggiore velocità della pagina.
• Meno risorse richieste da Google per caricare la tua pagina.
• Riduzione dei problemi causati dal code bloat.
• Dimensione complessiva del file più piccola del tuo DOM (document object model).
• Meno file JavaScript e CSS da scaricare.
• Implementazione migliore e più rapida su una vasta gamma di piattaforme e dispositivi.
• Migliore interazione dell'utente sui dispositivi mobili.
• Prestazioni migliorate in generale.

Chiaramente, ci sono enormi vantaggi nell'eseguire questo tipo di processo di ottimizzazione sul tuo sito.

Perché dovresti identificare le risorse che bloccano il rendering?

Identificare e ridurre le risorse responsabili del blocco del rendering della tua pagina web è un punto critico di ottimizzazione che può aumentare o diminuire la velocità della tua pagina.

Di conseguenza, può essere così critico da poter ripagare le metriche dell'esperienza sulla pagina del tuo sito (e la soddisfazione dell'utente).

Nel 2021, il tempo medio necessario per il rendering completo di una pagina Web mobile è stato di 22 secondi. Nel 2018 erano 15 secondi.

Chiaramente, questo è un numero sostanzialmente più alto del tempo consigliato da Google di due o tre secondi. È anche sostanzialmente più alto di prima.

Cosa potrebbe causare questi problemi con le risorse che bloccano il rendering?

Qual è la causa di questo aumento della velocità complessiva di rendering della pagina?

Una tendenza interessante da notare è che c'è stata una crescente dipendenza da font di terze parti rispetto ai font di sistema. L'utilizzo di caratteri di terze parti come risorsa tende a interferire con l'elaborazione e il rendering di una pagina.

Con i font di sistema, il browser non deve caricare nulla in più, quindi non ha di conseguenza quella fase di elaborazione aggiuntiva.

Screenshot da Web Almanac, novembre 2022

È probabile che questa dipendenza in tutti i settori abbia un impatto su questo tempo di rendering. Naturalmente, questa non è l'unica causa di questo problema con le risorse che bloccano il rendering.

Inoltre, i servizi di Google tendono ad avere un impatto significativo sui tempi di rendering, come Google Analytics o l'utilizzo di un pixel di Facebook di terze parti per scopi di tracciamento.

Il desiderio di fare affidamento su tali tecnologie non è necessariamente terribile dal punto di vista del marketing.

Ma dal punto di vista delle risorse che bloccano il rendering, può causare un aumento significativo del tempo di caricamento della pagina e del modo in cui Google (e gli utenti) percepiscono la tua pagina.

La soluzione ideale è garantire che la tua pagina venga caricata per l'interazione dell'utente il più rapidamente possibile.

È anche possibile che la colpa sia delle cattive pratiche di sviluppo web utilizzate oggi dagli sviluppatori web.

Ad ogni modo, questo è qualcosa in ogni progetto di sito Web che dovrebbe essere affrontato come parte dei tuoi audit Core Web Vitals.

L'esperienza della pagina, tuttavia, non riguarda solo la velocità di caricamento dell'intera pagina.

Invece, si tratta più dell'esperienza complessiva della pagina misurata dal framework dell'esperienza della pagina di Google o Core Web Vitals.

Questo è il motivo per cui vuoi lavorare per migliorare e ottimizzare la velocità della tua pagina per il percorso di rendering critico attraverso il DOM o il modello a oggetti del documento.

Qual è il percorso di rendering critico?

Il percorso di rendering critico si riferisce a tutti i passaggi necessari per eseguire il rendering dell'intera pagina, da quando il browser inizia a ricevere i dati per la prima volta a quando infine compila la pagina al rendering finale.

Questo è un processo che può richiedere solo diversi millisecondi se lo ottimizzi correttamente.

Ottimizzare per il percorso di rendering critico significa assicurarsi di ottimizzare le prestazioni di rendering su molti dispositivi diversi.

Ciò si ottiene ottimizzando il percorso di rendering critico per arrivare alla tua prima vernice il più rapidamente possibile.

Fondamentalmente, stai riducendo la quantità di tempo che gli utenti trascorrono guardando uno schermo bianco vuoto per visualizzare il contenuto visivo il prima possibile (vedi 0.0 sotto).

Screenshot da web.dev, novembre 2022

C'è un intero processo su come farlo, delineato nella documentazione della guida per gli sviluppatori di Google, ma mi concentrerò su uno in particolare: ridurre le risorse che bloccano il rendering.

Come funziona il percorso di rendering critico?

Il percorso di rendering critico si riferisce alla serie di passaggi che un browser intraprende nel suo viaggio per eseguire il rendering di una pagina convertendo HTML, CSS e JavaScript in pixel effettivi sullo schermo.

Screenshot da Medium, novembre 2022

Essenzialmente, il browser deve richiedere, ricevere e analizzare tutti i file HTML e CSS (più alcune operazioni aggiuntive) prima di iniziare a visualizzare qualsiasi contenuto visivo.

Questo processo avviene in una frazione di secondo (nella maggior parte dei casi). Gli utenti vedranno una pagina bianca vuota finché il browser non completa questi passaggi.

Di seguito è riportato un esempio di come gli utenti possono sperimentare il caricamento di una pagina in base alle diverse fasi del processo di caricamento della pagina:

Screenshot da web.dev, novembre 2022

Il miglioramento del percorso di rendering critico può quindi migliorare l'esperienza complessiva della pagina, che può contribuire a migliorare le prestazioni sulle metriche Core Web Vitals.

Come posso ottimizzare il percorso di rendering critico?

Per migliorare il percorso di rendering critico, è necessario analizzare le risorse che bloccano il rendering.

Eventuali risorse che bloccano il rendering possono finire per bloccare il rendering iniziale della pagina e di conseguenza avere un impatto negativo sui punteggi Core Web Vitals.

Ciò comporta un processo di ottimizzazione di:

• Riduzione del numero di risorse critiche per il percorso di rendering. Questa operazione può essere eseguita utilizzando un metodo di rinvio per qualsiasi possibile risorsa di blocco del rendering.
• Dare la priorità ai contenuti above the fold e scaricare risorse multimediali importanti il ​​prima possibile.
• Comprimere la dimensione del file di eventuali risorse critiche rimanenti.

In questo modo, è possibile migliorare sia i Core Web Vitals sia il modo in cui la tua pagina viene resa fisicamente all'utente.

Prima di discutere le tecniche di ottimizzazione che puoi usare per ottimizzare il percorso di rendering critico, è importante discutere il processo di caricamento iniziale del browser e perché il percorso di rendering critico è così importante.

E questo processo prevede:

• Precaricamento degli elementi della pagina.
• Inline stili critici.
• Rinvio del caricamento dei file JavaScript.
• Primi accenni.

Precaricamento degli elementi della pagina

Innanzitutto, quando la pagina viene recuperata dal browser dal server, il browser eseguirà inizialmente la scansione e troverà tutti gli elementi della pagina da scaricare. Per impostazione predefinita, ciò avviene in un processo in cui il browser scarica tutti gli elementi contemporaneamente.

Ma cosa succede quando hai molti elementi di pagina da scaricare (come succede spesso con un sito Web WordPress?) Bene, questo può impantanare le risorse del server, il che aumenta ulteriormente il tempo di caricamento della pagina.

Come si aggira questo? Utilizzando il collegamento di precaricamento per scaricare in modo asincrono i file critici che bloccano il rendering della pagina (discusso più avanti in questo articolo).

Il precaricamento degli elementi è una tecnica che consente di eliminare i fogli di stile che bloccano il rendering perché carica i file critici necessari per la prima fase di disegno del processo prima di caricare tutti gli altri file.

Puoi precaricare CSS, JS, caratteri o immagini. Ecco alcuni esempi di come precaricarli:

Precaricamento JavaScript

 <link rel="preload" as="script" href="critical.js">

Precaricamento CSS

 <link rel="preload" href="style.css" as="style" />

Precaricamento dei caratteri

 <link rel="preload" href="fonts/webfont.woff2" as="font" type="font/woff2" crossorigin />

Immagini precaricate

 <link rel=preload href="cat.png" as=image image>

Questo aiuta ad accelerare il processo della pagina. Tuttavia, questo non è un metodo ideale.

Il metodo ideale è ottimizzare il sito in modo da utilizzare solo da due a tre plug-in, forse da due a tre altri file, e mantenere le cose al minimo indispensabile per il rendering dell'intera pagina.

Purtroppo, questo non è uno sforzo realistico da perseguire.

Poiché i siti WordPress tendono ad avere molti plug-in e risorse che gli sviluppatori non sono disposti a (o non vogliono) gestire, il percorso più semplice per il successo è lavorare per assicurarsi che queste risorse siano ottimizzate correttamente utilizzando determinati plug-in.

Stili critici incorporati

Critical CSS è una tecnica che estrae il CSS per il contenuto above the fold per rendere il contenuto all'utente il più velocemente possibile.

Come minimo, questo di solito richiede:

• Eventuali dichiarazioni di carattere.
• Qualsiasi CSS specifico per il layout.
• Tutte le regole di stile CSS per gli elementi DOM (document object model) above the fold.

Usando il nostro esempio precedente della pagina che carica tutte le risorse contemporaneamente, l'incorporamento di stili critici comporta l'utilizzo di codice all'interno del tag HTML <head> stesso.

Se controlli, ad esempio, il codice sorgente di google.com, lo vedrai inserito nel CSS critico nella sezione <head> dell'HTML.

Screenshot dal codice sorgente di Google.com, novembre 2022

Esistono diversi strumenti che possono aiutare a estrarre CSS critici.

• Criticalcss.com.
• Critico.
• Plugin Webpack critico HTML.

Rinvio del caricamento dei file JavaScript

Utilizzando questo metodo, è possibile posticipare il caricamento dei file JavaScript fino a dopo il caricamento di altri elementi critici dell'albero DOM. Tuttavia, questo viene fornito con alcuni avvertimenti.

Esempio di come rinviare il file JavaScript:

 <script defer src="script.js"></script>

Il numero uno è che puoi influire negativamente sull'aspetto del sito quando rinvii il caricamento dei file JavaScript perché alcuni di questi potrebbero essere elementi necessari per il caricamento completo della pagina.

Il numero due è che, se non si presta attenzione, rinviando il caricamento dei file JavaScript, si potrebbero potenzialmente introdurre problemi con l'interattività della pagina (interazione con la successiva metrica Paint Core Web Vitals).

Il numero tre è che puoi anche introdurre problemi con il funzionamento generale del sito.

L'idea è che devi stare attento quando lavori su questi tipi di ottimizzazioni, in modo da non causare inavvertitamente problemi in altre parti del processo.

In questo modo, puoi influire notevolmente sulla velocità della tua pagina e sul modo in cui Google vede il tuo sito.

L'altra preoccupazione, tuttavia, è quando si utilizzano plug-in come Nitro per rinviare file critici come CSS e JavaScript.

Sebbene ciò possa avere un impatto positivo sulla velocità della pagina, il problema principale è che il plug-in rinvia tutti i file CRITICAL fino a quando la pagina non ha caricato la parte HTML del documento.

Cosa significa questo? Ciò significa che Google non può vedere l'intero documento come dovrebbe essere visualizzato. È simile al blocco dei file CSS e dei file JavaScript tramite robots.txt, di cui Google ha bisogno per determinare se il tuo sito è ottimizzato per i dispositivi mobili.

La pagina ufficiale di Google Developer dice questo, come menzionato altrove:

"Per un rendering e un'indicizzazione ottimali, consenti sempre a Googlebot di accedere a JavaScript, CSS e ai file di immagine utilizzati dal tuo sito Web in modo che Googlebot possa vedere il tuo sito come un utente medio.

Se il file robots.txt del tuo sito non consente la scansione di queste risorse, danneggia direttamente il modo in cui i nostri algoritmi visualizzano e indicizzano i tuoi contenuti. Ciò può portare a classifiche subottimali”.

Se stai rinviando i file CSS e JavaScript critici per motivi SEO, purché ti assicuri che Google possa vedere questi file al caricamento della pagina, non dovresti incorrere in grossi problemi con il modo in cui Google può vedere il tuo sito.

Utilizzo dei primi suggerimenti per una migliore ottimizzazione del server

Prima di poter parlare dei primi suggerimenti, dobbiamo discutere il processo di come il server carica una pagina web. I siti sono diventati davvero più sofisticati negli ultimi anni.

E quindi, anche i server. Ma ci sono dei limiti. Anche se i server possono e svolgono attività banali tutto il giorno, è comunque possibile che un server si impantani lavorando per pensare troppo a come gestisce le risorse di un sito.

Quindi, quando ciò accade, si verifica una latenza aggiuntiva rispetto a quella che altrimenti si verificherebbe e ciò accade prima che il browser possa iniziare a visualizzare la pagina.

Quando si verifica questa latenza, puoi imbatterti in situazioni in cui un sito potrebbe impiegare un paio di secondi prima di apparire nella finestra del browser.

E assicurarti che il tuo server esegua correttamente il rendering dei file è un ottimo primo passo per aumentare la velocità della tua pagina.

Ecco un esempio di ciò che accade quando il tuo server non risponde correttamente e impiega troppo tempo per elaborare determinate risorse:

Screenshot da developer.chrome.com, novembre 2022

Quindi, come funzionano i primi suggerimenti?

Secondo la guida per gli sviluppatori di Google Chrome, "i primi suggerimenti sono un codice di stato HTTP (103 suggerimenti iniziali) che viene utilizzato per inviare un'accurata risposta HTTP preliminare prima di una risposta finale".

Cosa realizza questo?

Ciò consente a un server di fornire determinati tipi di suggerimenti a un browser per determinate risorse critiche (file JavaScript, fogli di stile CSS e altro) che potrebbero essere caricate e utilizzate dalla pagina Web stessa.

Questo processo avviene nell'arco di pochi millisecondi o meno mentre il server lavora sul rendering delle risorse della pagina principale.

I primi suggerimenti sono qualcosa che "aiuta un browser lungo" e accelera il tempo di riflessione del server lavorando in anticipo su questo caricamento.

Per questo motivo, questo processo aiuta a velocizzare il tempo di caricamento della pagina.

Strumenti per aiutarti a ottimizzare il tuo percorso di rendering critico

Non sei uno straordinario maestro del codice e non sei in grado di lavorare e ottimizzare codice, plug-in e cose sotto il cofano del tuo sito web?

Beh, niente paura (troppo!). Sono disponibili plugin di WordPress che possono aiutarti a fare proprio questo.

Quanto segue include un elenco di strumenti che puoi utilizzare per ottimizzare il tuo percorso di rendering critico per il successo:

• Plugin CSS critico : questo pratico strumento ti consente di generare CSS critici di cui il tuo sito ha bisogno. Basta aggiungere il tuo URL, fare clic su genera e il gioco è fatto.
• Autoptimize Page Speed ​​Plugin: questo particolare plugin è un altro plugin per la velocità della pagina che consente anche di rinviare i file critici. Inoltre, aiuta a iniettare CSS in linea nell'intestazione della pagina, rimanda gli script al piè di pagina e minimizza i file HTML.
• Plugin per la velocità della pagina WP Rocket: questo plug-in per la velocità della pagina è uno dei plug-in di memorizzazione nella cache più potenti. Dopo l'installazione, questo particolare plug-in consente di sfruttare il caching delle pagine, la compressione GZIP, il precaricamento della cache e il caching del browser.
• WP-Optimize: questo è un plug-in di WordPress che ti consente di fare diverse cose per ottimizzare al meglio il tuo sito per tempi di caricamento rapidi. Includono l'ottimizzazione del database, la compressione delle immagini e la memorizzazione nella cache delle pagine, oltre alla minimizzazione e all'asincronizzazione dei file CSS e JavaScript.

Nota: questo autore non ha pregiudizi finanziari con nessuno di questi strumenti.

Perchè dovrebbe interessarmi?

I dati sul comportamento degli utenti di Google riportano che la maggior parte degli utenti abbandona un sito lento dopo circa tre secondi.

Oltre agli studi che dimostrano che la riduzione del tempo di caricamento della pagina e il miglioramento dell'esperienza della pagina porta a una maggiore soddisfazione degli utenti, ci sono anche diversi importanti aggiornamenti di Google all'orizzonte per i quali vorrai prepararti.

L'identificazione e l'ottimizzazione delle risorse di blocco del rendering sarà fondamentale per rimanere al passo con il gioco quando arriveranno questi aggiornamenti.

Google implementerà l'esperienza della pagina sul desktop nel 2022, iniziando il lancio dell'esperienza della pagina desktop a febbraio e terminando a marzo.

Secondo Google, le stesse tre metriche Core Web Vitals (LCP, FID e CLS), insieme alle soglie associate, saranno ora collegate al ranking desktop.

Inoltre, Google sta lavorando a una metrica Core Web Vitals nuova di zecca, possibilmente sperimentale, che tenga conto della durata massima dell'evento e della durata totale dell'evento.

La loro spiegazione di questi fattori che stanno prendendo in considerazione sono:

Durata massima dell'evento: la latenza dell'interazione è uguale alla durata massima dell'evento singolo da qualsiasi evento nel gruppo di interazione.
Durata totale dell'evento: la latenza di interazione è la somma di tutte le durate degli eventi, ignorando qualsiasi sovrapposizione.

Con molti studi che collegano le riduzioni dei tempi di caricamento delle pagine ai miglioramenti dei preziosi KPI (conversioni, frequenza di rimbalzo, tempo sul sito), il miglioramento della latenza del sito è diventato un obiettivo aziendale prioritario per molte organizzazioni.

I professionisti SEO sono in una posizione unica per guidare questo sforzo, poiché il nostro ruolo è spesso quello di colmare il divario tra gli obiettivi aziendali e le priorità degli sviluppatori web.

Avere la possibilità di controllare un sito, analizzare i risultati e identificare le aree di miglioramento ci aiuta a lavorare con gli sviluppatori per migliorare le prestazioni e tradurre i risultati per le principali parti interessate.

Gli obiettivi dell'ottimizzazione delle risorse di blocco del rendering

Uno degli obiettivi principali dell'ottimizzazione del percorso di rendering critico è assicurarsi che le risorse necessarie per eseguire il rendering di quel contenuto importante e above the fold vengano caricate il più rapidamente possibile.

Tutte le risorse che bloccano il rendering devono essere depriorizzate e tutte le risorse che impediscono il rendering rapido della pagina.

Ogni punto di ottimizzazione contribuirà al miglioramento complessivo della velocità della pagina, dell'esperienza della pagina e dei punteggi Core Web Vitals.

Perché migliorare il CSS di blocco del rendering?

Google ha affermato molte volte che la codifica non è necessariamente importante per il posizionamento.

Ma, per lo stesso motivo, ottenere un vantaggio di posizionamento dai miglioramenti dell'ottimizzazione della velocità della pagina può potenzialmente aiutare, a seconda della query.

Quando si tratta di file CSS, sono considerati risorse che bloccano il rendering.

Perchè è questo?

Anche se accade entro un millisecondo o meno (nella maggior parte dei casi), il browser non inizierà a visualizzare alcun contenuto della pagina fino a quando non sarà in grado di richiedere, ricevere e gestire tutti gli stili CSS.

Se un browser esegue il rendering del contenuto che non ha uno stile corretto, tutto ciò che otterresti è un mucchio di testo ordinario e collegamenti che non hanno nemmeno uno stile.

Ciò significa che la tua pagina sarà fondamentalmente "nuda", in mancanza di un termine migliore.

La rimozione degli stili CSS risulterà in una pagina letteralmente inutilizzabile.

La maggior parte dei contenuti dovrà essere ridipinta per sembrare meno appetibile per un utente.

Se esaminiamo il processo di rendering della pagina, la casella grigia in basso rappresenta il tempo del browser necessario per ottenere tutte le risorse CSS. In questo modo, può iniziare a costruire il DOM di CSS (o albero CCSOM).

Questo potrebbe richiedere da un millisecondo a diversi secondi, a seconda di cosa deve fare il tuo server per caricare queste risorse.

Può anche variare, il che potrebbe dipendere dalla dimensione, insieme alla quantità, di questi file CSS.

Il seguente albero di rendering mostra un esempio di un browser che esegue il rendering di tutti i file insieme ai CSS all'interno del DOM:

Screenshot da Medium, novembre 2022

Inoltre, quanto segue mostra un esempio della sequenza di rendering di una pagina, in cui tutti i file vengono caricati in un processo, dalla costruzione del DOM alla pittura finale e composizione della pagina, noto come percorso di rendering critico .

Poiché CSS è una risorsa che blocca il rendering per impostazione predefinita, ha senso migliorare CSS fino al punto in cui non ha un impatto negativo sul processo di rendering della pagina.

La raccomandazione ufficiale di Google afferma quanto segue:

“I CSS sono una risorsa che blocca il rendering. Portalo al cliente il prima possibile e il più rapidamente possibile per ottimizzare i tempi del primo rendering."

L'HTML deve essere convertito in qualcosa con cui il browser può lavorare: il DOM. I file CSS sono allo stesso modo. Questo deve essere convertito nel CSSOM.

Ottimizzando i file CSS all'interno di DOM e CSSOM, puoi contribuire a ridurre il tempo necessario a un browser per eseguire il rendering di tutto, il che contribuisce notevolmente a migliorare l'esperienza della pagina.

Perché migliorare JavaScript che blocca il rendering?

Sapevi che il caricamento di JavaScript non è sempre richiesto?

Con JavaScript, il download e l'analisi di tutte le risorse JavaScript non è un passaggio necessario per il rendering completo di una pagina.

Quindi, questa non è davvero una parte tecnicamente richiesta del rendering della pagina.

Ma l'avvertenza a questo è: la maggior parte dei siti moderni è codificata in modo tale che JavaScript (ad esempio, il framework Bootstrap JS) sia necessario per rendere l'esperienza above the fold.

Ma se un browser trova i file JavaScript prima del primo rendering di una pagina, il processo di rendering può essere interrotto fino a un momento successivo e dopo che i file JavaScript sono stati completamente eseguiti.

Questo può essere specificato in altro modo rinviando i file JavaScript per un uso successivo.

Un esempio di ciò è se ci sono funzioni JS come un avviso integrato nell'HTML. Ciò potrebbe interrompere il rendering della pagina fino a dopo l'esecuzione di questo codice JavaScript.

JavaScript ha il solo potere di modificare sia gli stili HTML che CSS, quindi questo ha senso.

L'analisi e l'esecuzione di JavaScript potrebbe essere ritardata a causa del fatto che JavaScript può potenzialmente modificare l'intero contenuto della pagina. Questo ritardo è integrato nel browser per impostazione predefinita, proprio per uno scenario di questo tipo "per ogni evenienza".

Raccomandazione ufficiale di Google:

“JavaScript può anche bloccare la costruzione del DOM e ritardare il rendering della pagina. Per offrire prestazioni ottimali... eliminare qualsiasi JavaScript non necessario dal percorso di rendering critico."

Come identificare le risorse che bloccano il rendering

Per identificare il percorso di rendering critico e analizzare le risorse critiche:

• Esegui un test utilizzando webpagetest.org e fai clic sull'immagine "cascata".
• Concentrati su tutte le risorse richieste e scaricate prima della riga verde "Avvia rendering".

Analizza la tua vista a cascata; cerca i file CSS o JavaScript richiesti prima della riga verde "start render" ma che non sono fondamentali per il caricamento di contenuti above the fold.

Screenshot da WebPageTest, novembre 2022

Dopo aver identificato una (potenzialmente) risorsa che blocca il rendering, prova a rimuoverla per vedere se il contenuto above the fold è interessato.

Nel mio esempio, ho notato alcune richieste JavaScript che potrebbero essere critiche.

Anche se sono fondamentali, a volte è una buona idea testare la rimozione di questi script per verificare come gli elementi mutevoli sul sito influiscono sull'esperienza.

Screenshot da WebPageTest, novembre 2022

Esistono anche altri modi per migliorare tali risorse.

Per i file JavaScript non critici, potresti voler combinare i file e rinviarli includendo questi file nella parte inferiore della pagina.

Per i file CSS non critici, puoi anche ridurre il numero di file CSS che hai combinandoli in un unico file e comprimendoli.

Migliorare le tue tecniche di codifica può anche portare a un file che è più veloce da scaricare e ha un impatto minore sulla velocità di rendering della tua pagina.

Come ridurre gli elementi di blocco del rendering sulla pagina

Una volta stabilito che una risorsa che blocca il rendering non è fondamentale per il rendering del contenuto above the fold, ti consigliamo di esplorare una miriade di metodi disponibili per migliorare il rendering della tua pagina e rinviare le risorse non critiche.

Esistono molte soluzioni a questo problema, dal rinvio dei file JavaScript e CSS alla riduzione dell'impatto che i CSS possono avere.

Una possibile soluzione è non aggiungere CSS utilizzando la regola @import.

Assicurati di non aggiungere CSS utilizzando la regola @Import

Dal punto di vista delle prestazioni, anche se @import sembra mantenere il file HTML più pulito, in realtà può creare problemi con le prestazioni.

La dichiarazione @import farà sì che il browser elabori un file CSS più lentamente. Come mai? Perché scarica anche tutti i file importati.

Il rendering sarà completamente bloccato fino al completamento del processo.

In effetti, la soluzione migliore è utilizzare il metodo standard di includere un foglio di stile CSS utilizzando la dichiarazione <link rel=”stylesheet”> nell'HTML.

Minimizza i tuoi file CSS e JavaScript

Se utilizzi WordPress, l'utilizzo di un plug-in per minimizzare i tuoi file CSS e JavaScript può avere un impatto enorme.

Il processo di minificazione occupa tutti gli spazi non necessari all'interno di un file e lo comprime ulteriormente, in modo da ottenere un buon incremento delle prestazioni.

Inoltre, anche se non sei su WordPress, puoi utilizzare i servizi di uno sviluppatore qualificato per completare il processo manualmente.

Questo richiederà più tempo ma può valerne la pena.

I file minimizzati sono in genere molto più leggeri delle loro controparti precedenti, il che significa che il rendering iniziale verrà completato molto più velocemente.

Oltre a questo, dopo il processo di minimizzazione, puoi anche aspettarti che il processo di download sia più veloce perché è necessario meno tempo per scaricare le risorse che bloccano il non rendering.

Utilizza caratteri di sistema invece di caratteri di terze parti

Sebbene i caratteri di terze parti possano sembrare rendere un sito "più carino", non è esattamente così.

Sebbene possano sembrare sorprendenti in superficie, questi file di font di terze parti richiedono spesso più tempo per essere caricati e possono contribuire al problema delle risorse di blocco del rendering.

A causa dei file esterni, il browser deve effettuare richieste esterne per scaricare questi file per eseguire il rendering della pagina, il che potrebbe comportare tempi di download notevolmente più elevati.

Se fai parte di un team che dispone di best practice di sviluppo tutt'altro che ideali, allora potrebbe essere logico che tu abbia molti file di font di terze parti che non sono necessari per il rendering del tuo sito.

In questo caso, la rimozione di tutti questi file non necessari può migliorare in modo significativo le risorse di blocco del rendering e contribuire al miglioramento complessivo di Core Web Vitals.

L'utilizzo dei caratteri di sistema, invece, mantiene l'elaborazione solo all'interno del browser senza richieste esterne.

Inoltre, ci sono probabilmente caratteri di sistema che potrebbero essere molto simili ai caratteri di terze parti che utilizzi.

Tuttavia, se devi assolutamente utilizzare font di terze parti, ci sono due cose che vuoi fare per aiutare a mitigare i problemi con alcuni aspetti dei font di terze parti.

Innanzitutto, se vengono utilizzati in combinazione con il precaricamento e lo scambio di caratteri, i problemi con i caratteri di terze parti diventano un non problema.

L'altro problema quando si utilizzano caratteri di terze parti è che i caratteri sono invisibili fino a quando il carattere stesso non viene caricato, il che influisce negativamente su Core Web Vitals e sull'esperienza dell'utente. Per evitare ciò, puoi utilizzare CSS font-swap.

Ecco come funziona: il font-swap CSS spiega al browser che il testo che utilizza un particolare font deve essere visualizzato immediatamente utilizzando un font di sistema. Una volta che il carattere personalizzato è pronto, questo carattere personalizzato sostituirà il carattere di sistema. Questo è il metodo più efficace che puoi utilizzare per evitare caratteri invisibili durante il caricamento della pagina.

Il nuovo ragazzo sul blocco: caratteri variabili

A partire dal 2020, i caratteri variabili sono diventati ampiamente supportati nella maggior parte dei browser. Cosa sono esattamente i font variabili?

Con i caratteri variabili, tutti i tuoi stili di carattere sono contenuti in un unico file. Ma prima che i caratteri variabili diventassero comuni, avresti bisogno di diversi file di caratteri separati per i caratteri.

Ci sono anche diversi vantaggi nell'usare i font variabili, che includono:

• File di dimensioni inferiori: i caratteri variabili hanno dimensioni di file inferiori perché sono un file a carattere singolo che contiene tutte le variazioni di larghezza, peso e altri attributi.
• Una gamma di design più flessibile: con altri tipi di font, sono necessari da tre a cinque diversi file di font per fornire ogni singola rappresentazione del linguaggio/voce di design di un sito. E questo include ogni permutazione di intestazioni, copia del corpo, ecc. Ma con i caratteri variabili, l'utilizzo di un singolo file di caratteri consente di utilizzare tutte le possibili variazioni che potrebbero essere associate al design di un carattere.
• Meno e un solo file: a causa di questo risparmio di dimensioni del file, questo aiuta a comprimere ulteriormente le dimensioni della pagina e diminuisce la velocità della pagina. E il vantaggio del singolo file stesso consente al webmaster di comprimere ulteriormente la velocità della pagina.

La seguente documentazione parla dei font variabili e di come implementarli. A causa dei loro vantaggi, l'utilizzo di caratteri variabili è un'alternativa accettabile se è assolutamente necessario implementare caratteri di terze parti.

Migliora le tue tecniche di codifica e la combinazione di file

Se stai lavorando tu stesso con il codice, potresti (o meno ... nessuno sta giudicando qui) scoprire che le tecniche non sono ottimali.

Un esempio: stai utilizzando CSS inline ovunque e questo sta causando problemi di elaborazione e rendering all'interno del browser.

La soluzione semplice è assicurarsi di prendere tutti i CSS incorporati e codificarli correttamente all'interno del file del foglio di stile CSS.

Se il codice di un altro sviluppatore non è all'altezza, ciò può creare grossi problemi con il rendering della pagina.

Ad esempio: supponi di avere una pagina codificata utilizzando tecniche precedenti piuttosto che moderne e più snelle.

Le tecniche meno recenti potrebbero includere un significativo aumento del codice e, di conseguenza, comportare un rendering più lento della pagina.

Per eliminare questo, puoi migliorare le tue tecniche di codifica creando un codice più snello e meno gonfio, ottenendo un'esperienza di rendering della pagina molto migliore.

La combinazione di file può anche migliorare la situazione

Ad esempio: se disponi di otto o dieci file JavaScript che contribuiscono tutti alla stessa attività, puoi assumere uno sviluppatore che possa combinare tutti questi file per te.

E se sono file JavaScript meno critici, per ridurre ulteriormente i problemi di rendering della pagina, questi file possono anche essere posticipati aggiungendoli alla fine del codice HTML sulla pagina.

Combinando i file e migliorando le tue tecniche di codifica, puoi contribuire in modo significativo a migliorare le esperienze di rendering delle pagine.

Punti chiave

Se vuoi creare il tuo processo per trovare e ridurre le risorse che bloccano il rendering, ora hai gli strumenti per farlo. Il processo è delineato come segue:

• Passaggio 1: esegui la scansione del tuo sito utilizzando Screaming Frog o altri strumenti di scansione.
• Passaggio 2: identificare le pagine con velocità di pagina ridotta.
• Passaggio 2a: a questo scopo puoi anche utilizzare Google Search Console o Google Analytics.
• Passaggio 3: organizza le pagine con le prestazioni più basse che trovi in ​​un elenco di priorità.
• Passaggio 4: scorri gli elementi dell'elenco di controllo sopra (puoi anche creare un foglio di calcolo di ciascun elemento per pagina, se preferisci) e trova, riduci o ripara queste risorse di blocco del rendering secondo necessità.
• Passaggio 5: risciacqua e ripeti per ogni pagina del tuo sito.

L'idea è quella di creare un processo che sia facilmente scalabile, facilmente implementabile e che possa metterti sulla strada del successo con una velocità della pagina molto inferiore come risultato.

Con questo processo, anche tu puoi beneficiare del vantaggio che avrai e potresti anche sperimentare una spinta dai Core Web Vitals di Google.

L'identificazione e la riparazione delle risorse che bloccano il rendering è una parte fondamentale dell'ottimizzazione della velocità che la maggior parte degli audit prevede in questo passaggio. Il ragionamento alla base di ciò è che aiutano a creare i migliori tempi di rendering possibili per le tue pagine di classifica.

Google sta lavorando per migliorare continuamente la velocità della pagina. Ma c'è una cosa che è sempre stata coerente: maggiore è la velocità della tua pagina, meglio è.

Integrando un processo scalabile in cui è possibile eseguire questo rapidamente, è possibile affrontare con relativa facilità anche i progetti di ottimizzazione della velocità della pagina più grandi e complessi.

E questo si traduce anche in una migliore esperienza utente.

Trovando e riparando le risorse che bloccano il rendering, puoi anche migliorare il modo in cui l'utente utilizza il tuo sito e continuerai a rendere felici i visitatori del tuo sito web.

After all, keeping your site in top shape for prime time is what all of this optimization work is all about!

Altre risorse:

• Advanced Core Web Vitals: A Technical SEO Guide
• Difference Between Search Console CWV Report & PageSpeed Insights
• Core Web Vitals: A Complete Guide

Featured Image: SuperOhMo/Shutterstock