Come eliminare le risorse di blocco del rendering dal tuo sito Web WordPress

Hai mai finito di creare un sito Web WordPress, ne hai amato tutto e hai subito iniziato a odiarlo dopo aver realizzato che ci vuole un'eternità per caricarsi? Padroneggiare l'eliminazione delle risorse che bloccano il rendering aiuterà a diagnosticare questo problema. Ma come?

Non solo le basse velocità di caricamento sono un fastidio per te e i tuoi visitatori, ma possono anche costarti molto quando si tratta di SEO. Dal 2010, gli algoritmi di Google hanno tenuto conto della velocità di caricamento nelle decisioni di ranking, quindi le pagine lente appaiono più in basso nelle pagine dei risultati.

Potresti avere familiarità con i colpevoli comuni delle scarse prestazioni della pagina: contenuto eccessivo, file di immagine non compressi, hosting insufficiente e mancanza di memorizzazione nella cache per citarne alcuni. Ma c'è un altro colpevole spesso trascurato in gioco: le risorse che bloccano il rendering.

Non fraintendetemi: CSS e JavaScript sono fantastici. Senza CSS, i siti Web sarebbero muri di testo semplice. Senza Ja=ooovaScript, non saremmo in grado di aggiungere elementi dinamici, interattivi e accattivanti ai nostri siti web. Tuttavia, se eseguiti nel momento sbagliato, sia CSS che JavaScript possono intaccare le prestazioni del tuo sito web.

Ecco perché: quando un browser Web carica per la prima volta una pagina Web, analizza tutto il codice HTML della pagina prima di mostrarlo sullo schermo a un visitatore. Quando il browser incontra un collegamento a un file CSS, un file JavaScript o uno script in linea (ovvero il codice JavaScript nel documento HTML stesso), interrompe l'analisi HTML per recuperare ed eseguire il codice, il che rallenta tutto.

Se hai ottimizzato le prestazioni della tua pagina in WordPress e riscontri ancora problemi, le risorse che bloccano il rendering potrebbero essere la causa. A volte questo codice è importante per essere eseguito al primo caricamento, ma la maggior parte delle volte può essere rimosso o spinto fino alla fine della coda.

In questo post, ti mostreremo come eliminare questo fastidioso codice dal tuo sito Web WordPress e dare una spinta alle tue prestazioni.

Se preferisci seguire un video, dai un'occhiata a questa procedura dettagliata creata da WP Casts:

1. Identificare le risorse che bloccano il rendering.

Prima di apportare modifiche, devi prima individuare le risorse che bloccano il rendering. Il modo migliore per farlo è con un test di velocità online gratuito come lo strumento PageSpeed ​​Insights di Google. Incolla l'URL del tuo sito e fai clic su Analizza .

Al termine della scansione, Google assegna al tuo sito web un punteggio di velocità aggregato, da 0 (il più lento) a 100 (il più veloce). Un punteggio compreso tra 50 e 80 è nella media, quindi ti consigliamo di atterrare nella parte superiore di questo intervallo o al di sopra di esso.

Per identificare i file che bloccano il rendering che rallentano la tua pagina, scorri verso il basso fino a Opportunità , quindi apri la fisarmonica Elimina risorse che bloccano il rendering .

Fonte immagine

Vedrai un elenco di file che rallentano il "primo disegno" della tua pagina: questi file influiscono sul tempo di caricamento di tutto il contenuto che appare nella finestra del browser al caricamento iniziale della pagina. Questo è anche chiamato contenuto "above the fold".

Prendi nota di tutti i file che terminano con le estensioni .css e .js, poiché sono quelli su cui ti concentrerai.

2. Elimina le risorse che bloccano il rendering manualmente o con un plug-in.

Ora che hai identificato il problema, ci sono due modi per risolverlo in WordPress: manualmente o con un plugin. Tratteremo prima la soluzione del plugin.

Diversi plugin di WordPress possono ridurre l'effetto delle risorse di blocco del rendering sui siti Web di WordPress. Tratterò due soluzioni popolari, Autoptimize e W3 Total Cache.

Come eliminare le risorse che bloccano il rendering con il plug-in Autoptimize

Autoptimize è un plug-in gratuito che modifica i file del tuo sito Web per fornire pagine più veloci. Autoptimize funziona aggregando i file, minimizzando il codice (ovvero riducendo le dimensioni del file eliminando i caratteri ridondanti o non necessari) e ritardando il caricamento delle risorse che bloccano il rendering.

Dal momento che stai modificando il back-end del tuo sito, ricorda di prestare attenzione con questo plug-in o qualsiasi plug-in simile. Per eliminare le risorse che bloccano il rendering con Autoptimize:

1. Installa e attiva il plug-in Autoptimize.

2. Dalla dashboard di WordPress, seleziona Impostazioni > Ottimizzazione automatica .

3. In Opzioni JavaScript , seleziona la casella accanto a Ottimizza codice JavaScript? .

4. Se la casella accanto a Aggrega file JS? è selezionato, deselezionalo.

5. In Opzioni CSS , seleziona la casella accanto a Ottimizza codice CSS? .

6. Se la casella accanto a Aggrega file CSS? è selezionato, deselezionalo.

7. Nella parte inferiore della pagina, fare clic su Salva modifiche e svuota cache .

8. Scansiona il tuo sito web con PageSpeed ​​Insights e controlla se ci sono miglioramenti.

9. Se PageSpeed ​​Insights segnala ancora file JavaScript che bloccano il rendering, torna a Impostazioni > Ottimizzazione automatica e seleziona le caselle accanto a Aggregare file JS? e Aggregare i file CSS? . Quindi, fai clic su Salva modifiche e svuota cache ed esegui nuovamente la scansione.

Come eliminare le risorse che bloccano il rendering con il plug-in W3 Total Cache

W3 Total Cache è un plug-in di memorizzazione nella cache ampiamente utilizzato che aiuta a risolvere il codice laggy. Per eliminare JavaScript che blocca il rendering con W3 Total Cache:

1. Installa e attiva il plug-in W3 Total Cache.

2. Una nuova opzione Prestazioni verrà aggiunta al menu della dashboard di WordPress. Seleziona Prestazioni > Impostazioni generali.

3. Nella sezione Minimizza , seleziona la casella accanto a Minimizza , quindi imposta la modalità Minimizza su Manuale .

4. Fare clic su Salva tutte le impostazioni nella parte inferiore della sezione Minimizza .

5. Nel menu del dashboard, seleziona Prestazioni > Minimizza .

6. Nella sezione JS accanto a JS minify settings , assicurati che la casella Abilita sia selezionata. Quindi, in Operazioni nelle aree , apri il primo menu a discesa Tipo di incorporamento e scegli Non bloccante utilizzando "rinvia" .

7. In Gestione file JS , scegli il tema attivo dal menu a discesa Tema .

8. Fai riferimento ai risultati di PageSpeed ​​Insights della scansione precedente. Per ogni elemento in Elimina le risorse che bloccano il rendering che terminano con .js, fai clic su Aggiungi uno script . Quindi, copia l'URL completo della risorsa JavaScript da PageSpeed ​​Insights e incollalo nel campo URI file .

9. Dopo aver incollato tutte le risorse JavaScript che bloccano il rendering segnalate da PageSpeed ​​Insights, fai clic su Salva impostazioni ed elimina cache nella parte inferiore della sezione JS .

10. Nella sezione CSS accanto a CSS minify settings , seleziona la casella accanto a CSS minify settings e assicurati che il metodo Minify sia impostato su Combine & Minify .

11. In Gestione file CSS , scegli il tema attivo dal menu a discesa Tema .

12. Per ciascun elemento in Elimina le risorse che bloccano il rendering che terminano con .css nei risultati della scansione di PageSpeed ​​Insights, fai clic su Aggiungi un foglio di stile . Quindi, copia l'URL completo della risorsa CSS da PageSpeed ​​Insights e incollalo nel campo File URI .

13. Dopo aver incollato tutte le risorse CSS che bloccano la visualizzazione segnalate da PageSpeed ​​Insights, fai clic su Salva impostazioni ed elimina cache nella parte inferiore della sezione CSS .

14. Scansiona il tuo sito web con PageSpeed ​​Insights e controlla se ci sono miglioramenti.

Come eliminare manualmente JavaScript che blocca il rendering

I plugin possono gestire il lavoro di backend per te. Poi di nuovo, i plugin stessi sono solo altri file aggiunti al tuo server web. Se vuoi limitare questi file extra, o se preferisci semplicemente gestire tu stesso la programmazione, puoi indirizzare manualmente il JavaScript che blocca il rendering.

Per fare ciò, individua i tag <script> nei file del tuo sito web per le risorse identificate nella scansione di PageSpeed ​​Insights. Avranno un aspetto simile a questo:

 
<script src="https://blog.hubspot.com/marketing/resource.js">

I tag <script> dicono al browser di caricare ed eseguire lo script identificato dall'attributo src (source). Il problema con questo processo è che questo caricamento ed esecuzione ritarda l'analisi della pagina Web da parte del browser, il che influisce sul tempo di caricamento complessivo:

Fonte immagine

Per risolvere questo problema, puoi aggiungere l'attributo async (asincrono) o defer ai tag di script per le risorse di blocco del rendering. async e defer sono posizionati in questo modo:

 
<script src="https://blog.hubspot.com/marketing/resource.js" async>
 <script src="https://blog.hubspot.com/marketing/resource.js" defer>

Sebbene abbiano effetti simili sui tempi di caricamento, questi attributi dicono al browser di fare cose diverse.

L'attributo async segnala al browser di caricare la risorsa JavaScript durante l'analisi del resto della pagina ed esegue questo script immediatamente dopo che è stato caricato. L'esecuzione dello script sospende l'analisi HTML:

Fonte immagine

Anche gli script con l'attributo defer vengono caricati mentre la pagina viene analizzata, ma questi script vengono caricati in ritardo fino a dopo il primo rendering o fino a quando le parti più essenziali non sono state caricate:

Fonte immagine

Gli attributi defer e async non dovrebbero essere usati insieme sulla stessa risorsa, ma uno potrebbe essere più adatto per una particolare risorsa rispetto all'altro. In genere, se uno script non essenziale si basa su uno script da eseguire prima di esso, utilizzare defer . L'attributo defer assicura che lo script venga eseguito dopo lo script necessario precedente. Altrimenti, usa async .

3. Eseguire nuovamente una scansione del sito.

Dopo aver apportato le modifiche, esegui un'ultima scansione del tuo sito web tramite PageSpeed ​​Insights e verifica l'impatto delle modifiche sul tuo punteggio.

Si spera che ci sia un notevole miglioramento, ma non preoccuparti in caso contrario. Molti fattori possono inibire le prestazioni della pagina e potrebbe essere necessario eseguire ulteriori ricerche per trovare l'origine delle scarse prestazioni.

4. Controlla la presenza di bug nel tuo sito web.

Oltre a una nuova scansione, controlla le tue pagine per assicurarti che il tuo sito funzioni. La pagina si carica correttamente? Vengono visualizzati tutti gli elementi? Se qualcosa non funziona o non si carica correttamente, annulla le modifiche e risolvi il problema.

Se hai raggiunto un punto in cui hai ripetutamente provato varie misure con guadagni di velocità minimi, potrebbe essere meglio prendere in considerazione altri modi per velocizzare le tue pagine, piuttosto che rischiare di danneggiare il tuo sito.

Ottimizzazione delle prestazioni del tuo sito WordPress

Molti fattori contribuiscono all'esperienza degli utenti sul tuo sito web, ma pochi sono più importanti del tempo di caricamento. Ogni volta che apporti grandi modifiche al contenuto o all'aspetto del tuo sito WordPress, dovresti sempre considerare come tali modifiche influiscono sulle prestazioni.

Ora che hai eliminato le risorse che bloccano il rendering, dovresti continuare a ottimizzare la velocità del tuo sito Web analizzando altre funzionalità note per rallentare le prestazioni. Cerca di incorporare regolari test di velocità nel programma di manutenzione del tuo sito: stare al passo con eventuali problemi potenziali sarà fondamentale per il tuo successo.