Come eliminare JavaScript e CSS che bloccano il rendering su WordPress

Come eliminare JavaScript e CSS che bloccano il rendering su WordPress

Avere un sito Web che si carica velocemente è cruciale se si desidera posizionarsi in alto nelle pagine dei risultati dei motori di ricerca (SERP). Ecco perché PageSpeed ​​Insights di Google è lì per aiutarti a ottimizzare la velocità di caricamento del tuo sito . Se ricevi lo strumento ” Elimina JavaScript e CSS che bloccano il rendering nei contenuti above the fold ” mentre usi lo strumento, non preoccuparti. In questo articolo, ti mostreremo come risolvere il problema.

Conoscere “Eliminare JavaScript e CSS che bloccano il rendering nei contenuti above the fold” Avvertenza

Se osservi le regole di Page Speed di Google , l’eliminazione di JavaScript e CSS che bloccano il rendering è una di queste. Qualsiasi errore in ciò comporterà una velocità di caricamento della pagina più lenta. Ma come possono JavaScript e CSS sulla tua pagina HTML rallentare il tuo sito?

Bene, ogni volta che installi un nuovo tema o plugin, aggiungono un codice JavaScript e CSS al front-end. Di conseguenza, i browser potrebbero richiedere più tempo per caricare la pagina.

Above-the-fold (ATF) indica la parte della tua pagina web che è visibile al primo caricamento della pagina. Qualsiasi parte della pagina che devi scorrere verso il basso per raggiungere non è ATF.

Pertanto, se il codice JavaScript e CSS non pertinente viene visualizzato quando i visitatori caricano il tuo sito Web, potresti ricevere un avviso per ridurre il numero di JavaScript e CSS che bloccano il rendering nelle risorse di contenuti above the fold.

Scopri JavaScript e CSS che bloccano il rendering utilizzando Google Page Speed ​​Insights

Il primo passo per correggere il blocco del rendering è testare la velocità del tuo sito utilizzando Google PageSpeed ​​Insights . Seguire questi passaggi per farlo:

  1. Visita la pagina e incolla l’URL del tuo sito Web nel campo ” Inserisci l’URL di una pagina Web “.
  2. Fai clic su Analizza per ottenere il rapporto.

    La maggior parte dei siti ha un punteggio compreso tra 50 e 70; questo dovrebbe servire come punto di riferimento per il tuo punteggio. Google elencherà anche suggerimenti per migliorare le prestazioni del tuo sito Web.

    Punteggio di informazioni sulla velocità della pagina Google del tuo sito web

Se trovi anche il suggerimento per eliminare JavaScript e CSS che bloccano il rendering nei contenuti above the fold, dovrai risolvere il problema.
elimina javascript e css che bloccano il rendering nell'avvertimento above the fold del contenutoTieni presente che non dovresti forzare il tuo sito Web a ottenere un punteggio perfetto di 100. Fai semplicemente del tuo meglio per ottenere un buon punteggio senza sacrificare l’esperienza dell’utente.

Se ci sono script sul tuo sito WordPress che sono essenziali per una UX robusta, non dovresti rimuoverli solo per ottenere un punteggio leggermente più alto su PageSpeed ​​Insights.

Le regole su cui Google classifica i tuoi siti Web sono solo linee guida e dovrebbero essere prese come tali.

Correzione dell’errore “Elimina JavaScript e CSS che bloccano il rendering nei contenuti above the fold”

Con WordPress, ridurre le risorse JavaScript e CSS che bloccano il rendering sul tuo sito WordPress è semplice. Puoi utilizzare i tre plugin che abbiamo elencato di seguito:

W3 cache totale

Uno dei nostri preferiti è il plugin W3 Total Cache . Una volta installato e attivato, segui questi passaggi sul pannello di amministrazione di WordPress:

  1. Vai a Prestazioni -> Impostazioni generali .
  2. Trova l’ intestazione Minify sulla pagina. Quindi, vedrai alcune opzioni sotto questo titolo.
  3. Spuntare la casella Abilita per Minify . Quindi, per l’ opzione Modalità minimizza , selezionare Manuale .
  4. Premi Salva tutte le impostazioni .
    minimizzare le risorse di script CSS e JS con il plugin W3 Total Cache
  5. Scarica tutti gli script JavaScript e CSS che bloccano il rendering, che puoi trovare tramite Google PageSpeed ​​Insights.
  6. Una volta trovato il piantagrane, torna a Prestazioni -> Minimizza sulla dashboard di WordPress.
  7. Trova la sezione JS . Nella sezione Operazioni nelle aree , selezionare il tipo di incorporamento Non-blocking usando “differisci” per il tag efore <head> .
  8. Per la gestione dei file JS , scegli il tema attivo e fai clic sul pulsante Aggiungi script . Copia e incolla gli URL JavaScript da Google Page Speed ​​Insights nei campi forniti, come mostrato di seguito.
    Elimina le risorse JS di blocco del rendering con il plugin W3 Total Cache
  9. Scorri verso il basso e trova la sezione CSS . Per la gestione dei file CSS , scegli il tema attivo e fai clic su Aggiungi un foglio di stile . Simile al passaggio precedente, copia gli URL dei fogli di stile CSS da PageSpeed ​​Insights e incollali nei campi richiesti.
    Elimina le risorse JSS che bloccano il rendering con il plugin W3 Total Cache
  10. Infine, fai clic sul pulsante Salva impostazioni ed elimina cache .

Autoptimize

In alternativa, è possibile utilizzare il plug-in Autoptimize per risolvere l’errore javascript e css che blocca il rendering. Eseguire questi passaggi sulla dashboard dopo aver installato e attivato il plug-in:

  1. Vai su Impostazioni -> Ottimizza automaticamente .
  2. Seleziona le caselle per Ottimizza codice JavaScript? “E ottimizzare il codice CSS?
  3. Premi il pulsante Salva modifiche e svuota cache .
    Ottimizza CSS e JavaScript con il plugin Autoptimize

Nella maggior parte dei casi, questo è sufficiente per correggere l’avviso. Tuttavia, il risultato può variare in base al tema e ai plug-in attivi.

Per assicurarti che il tuo problema sia stato risolto, esegui di nuovo il tuo sito tramite PageSpeed ​​Insights. Se sono rimaste delle risorse JS e CSS bloccanti, porta l’ottimizzazione ancora di più seguendo questi passaggi:

  1. Torna a Impostazioni -> Ottimizza automaticamente .
  2. Premi il pulsante Mostra impostazioni avanzate .
  3. Quindi, controlla le opzioni per Anche aggregare JS in linea e Anche aggregare CSS in linea .
    impostazione avanzata per ottimizzare css e js aggregando anche CSS e JS in linea
  4. Salva le tue modifiche.

Speed ​​Booster Pack

Un altro plugin popolare che potresti trovare utile per correggere errori javascript e css di blocco del rendering per il tuo sito Web WordPress è Speed ​​Booster Pack . Per fare ciò, segui questi passaggi nella tua area wp-admin:

  1. Vai alla sezione Speed ​​Booster Pack e accedi alla scheda Avanzate .
  2. Nel menu Ottimizzazione JavaScript , abilita Sposta script nel piè di pagina e Rinvia analisi dei file JavaScript .
    Abilitazione dello spostamento degli script nel piè di pagina e differimento dell'analisi dei file JavaScript nella sezione Ottimizzazione JavaScript per correggere l'eliminazione di javascript e CSS dei blocchi di rendering nell'errore above the fold
  3. Scorri verso il basso fino al menu Ottimizzazione CSS per impostare l’ottimizzazione del blocco del rendering CSS.
  4. Troverai ulteriori impostazioni per allineare tutti i CSS, minimizzare tutti i CSS (precedentemente) incorporati e spostare tutti i CSS incorporati nel piè di pagina. Sperimenta queste opzioni per trovare una soluzione adeguata.
    Sperimenta con le ottimizzazioni CSS per trovare la soluzione corretta

    La semplice abilitazione di tutti questi caricherà il tuo sito più velocemente, ma potrebbe anche introdurre l’ artefatto indesiderato di contenuti non stirati (FOUC). Ciò accade quando il browser carica la pagina Web senza attendere il caricamento del foglio di stile, causando un lampo momentaneo di pagina non modificata.

Dopo aver provato i metodi sopra, torna a PageSpeed ​​Insights di Google per assicurarti che il blocco del rendering non sia più un problema.

Conclusione

La velocità del sito Web è uno dei fattori più importanti per attirare e trattenere i visitatori. Questo perché i motori di ricerca tengono conto della velocità del sito quando classificano i risultati.

PageSpeed ​​Insights di Google assegna un punteggio ai siti Web in base alla velocità di caricamento. Se stai ottenendo il famigerato Elimina JavaScript e CSS che bloccano il rendering nei suggerimenti above the fold durante l’analisi del rendimento del tuo sito WordPress, risolvi semplicemente il problema con i plug-in.

Speriamo che questo tutorial sia utile per te. Sentiti libero di commentare qui sotto se hai domande. In bocca al lupo!

Open

info.ibdi.it@gmail.com

Close