Come rendere veloce il tuo blog: gestire i file CSS e JS

Vuoi eliminare i file (CSS e JS) che bloccano il caricamento delle pagine su WordPress? Se stai testando il tuo sito su Google Insights PageSpeed, probabilmente vedrai un suggerimento per eliminare gli script che bloccano il caricamento delle pagine. In questo tutorial, ti mostreremo come correggere questi file che bloccano il caricamento delle tue pagine, per migliorare il tuo punteggio di Google Page Speed.

Cosa sta bloccando il caricamento delle pagine?

Ogni sito WordPress ha un tema e plugin che aggiungono file JavaScript e CSS alla fine e prima che la pagina sia visibile sul browser. Questi script possono aumentare il tempo di caricamento della pagina del tuo sito e possono anche bloccare il rendering della pagina.

Il browser di un utente dovrà caricare script e CSS prima di caricare il contenuto della pagina. Ciò significa che gli utenti con una connessione più lenta dovranno attendere qualche millisecondo in più per visualizzare la pagina.

I proprietari di siti che cercano di ottenere un buon punteggio di Google Page Speed ​​dovranno risolvere questo problema.

1 - Come correggere il rendering della pagina con Autoptimize

Questo metodo è più semplice e consigliato per la maggior parte degli utenti.

La prima cosa che devi fare è installare e attivare il plugin " Autoptimize ". Per maggiori dettagli, vedi la nostra guida passo passo su come installare un plugin per WordPress.

Dopo aver attivato il plug-in, è necessario visitare " Impostazioni> Ottimizzazione automatica Per configurare le impostazioni del plugin.

Puoi iniziare selezionando la casella delle opzioni JavaScript e CSS e quindi fare clic sul pulsante "Salva modifiche".

Ora puoi testare il tuo sito web utilizzando lo strumento PageSpeed. Se sono ancora presenti script che bloccano il rendering della pagina, è necessario tornare alla pagina delle impostazioni del plug-in e fare clic sul pulsante "Mostra impostazioni avanzate" in alto.

Qui puoi consentire al plugin di includere JS inline e rimuovere gli script esclusi per impostazione predefinita come "seal.js" o "jquery.js".

Quindi scorri verso il basso fino all'opzione CSS e consenti al plug-in di combinare tutti i file CSS.

Fare clic sul pulsante "Salva modifiche e svuota cache" per salvare le modifiche e svuota la cache il plugin.

Una volta che hai finito, vai avanti e controlla il tuo sito web ancora con lo strumento PageSpeed.

Assicurati di testare attentamente il tuo sito per vedere che tutto funziona correttamente dopo aver ottimizzato i tuoi file JavaScript o CSS.

2 - Correzione del rendering dei file con W3 Total Cache

Questo metodo richiede un po' più di lavoro ed è consigliato a chi ha già W3 Total Cache sul proprio sito web.

Per prima cosa dovrai installare e attivare il plugin W3 Total Cache. Se hai bisogno d'aiuto, Vedi la nostra guida completa W3 Total Cache.

Quindi è necessario visitare "Prestazioni> Impostazioni generali" e scorrere verso il basso fino alla sezione "Riduci a icona".

Prima di tutto, è necessario selezionare la casella "Abilita" e quindi selezionare "Manuale" per l'opzione della modalità di minimizzazione.

Clicca sul bottone Salva tutte le impostazioni Per salvare le tue impostazioni.

Allora avete bisogno di aggiungere script e CSS da ridursi.

Puoi ottenere gli URL di tutti gli script e i fogli di stile che devono essere combinati in base a Google Page Speed ​​Insights.

Sotto i suggerimenti in cui si dice " Eliminare il rendering di blocco JavaScript e CSS ", Fare clic su" Mostra come risolvere ". Ti mostrerà l'elenco degli script e dei fogli di stile.

Muovi il mouse su uno script e ti mostrerà l'URL completo. Puoi selezionare questo URL, quindi utilizzare CTRL + C sulla tastiera (Comando + C su Mac) per copiare l'URL.

Ora vai al tuo pannello di amministrazione di WordPress e vai al " performance > minifier '.

Per prima cosa devi aggiungere i file JavaScript che vuoi comprimere. Scorri verso il basso fino alla sezione JS quindi sotto l'insieme "operazioni nelle zone" di tipo incorpora fino a "non bloccare utilizzando 'asincrono'" per la sezione .

Quindi devi fare clic sul pulsante Aggiungere script E quindi inizia ad aggiungere gli URL degli script che hai copiato dallo strumento Google Page Speed.

Al termine, scorri verso il basso fino alla sezione CSS e fai clic sul pulsante "Aggiungi foglio di stile". Ora inizia ad aggiungere gli URL del foglio di stile che hai copiato con lo strumento Google Page Speed.

Ora fai clic sul pulsante Salva impostazioni ed elimina cache Per memorizzare le tue impostazioni.

Visita lo strumento Google Page Speed ​​e prova di nuovo il tuo sito web.

Assicurati inoltre di testare attentamente il tuo sito Web per verificare che tutto funzioni correttamente.

Questo è tutto per questo tutorial, spero che ti permetta di migliorare le prestazioni del tuo blog WordPress.