Vai al contenuto principale

Come correggere il blocco del rendering JavaScript e CSS in WordPress

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 901.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

Vuoi eliminare il blocco del rendering JavaScript e CSS in WordPress?

Se stai testando il tuo sito web su Google PageSpeed ​​Insights, probabilmente vedrai un suggerimento per rimuovere script e blocchi di rendering CSS. Tuttavia, non fornisce dettagli su come farlo sul tuo sito Web WordPress.

In questo articolo, ti mostreremo come correggere facilmente il blocco del rendering JavaScript e CSS in WordPress per migliorare il tuo punteggio di Google Page Speed.

Ma prima scopriamo insieme Come installare un blog Wordpress passi 7 et Come trovare, installare e attivare un tema WordPress sul tuo blog.

Che cos'è JavaScript e CSS Render-Blocking?

Il blocco dei rendering JavaScript e CSS sono file che impediscono a un sito Web di visualizzare una pagina Web prima di caricarli.

Ogni sito Web WordPress ha un tema e plug-in che aggiungono file JavaScript e CSS al frontend del tuo sito web. Questi script possono aumentare il tempo di caricamento della pagina del tuo sito web e possono anche bloccare il rendering della pagina.

Come risolvere il blocco dei rendering javascript css wordpress blogpascher 1

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

Questi script e fogli di stile sono chiamati JavaScript e CSS render blocker.

I proprietari di siti web che cercano di ottenere un punteggio di Google PageSpeed ​​di 100 dovranno risolvere questo problema per ottenere quel punteggio perfetto.

Cos'è il punteggio di Google Page Speed?

Google PageSpeed ​​Insights è uno strumento di test della velocità creato da Google per aiutare i proprietari di siti web a ottimizzare e testare i loro siti web. Questo strumento testa il tuo sito web rispetto alle linee guida sulla velocità di Google e offre suggerimenti per migliorare i tempi di caricamento della pagina del tuo sito web.

Ti mostra un punteggio basato sul numero di regole che il tuo sito web passa. La maggior parte dei siti web ha un'età compresa tra 50 e 70. Tuttavia, alcuni proprietari di siti web si sentono spinti a raggiungere 100.

Hai davvero bisogno di un punteggio "100" su Google PageSpeed?

Lo scopo di Approfondimenti di Google PageSpeed è fornirti linee guida per migliorare la velocità e le prestazioni del tuo sito web. Non sei tenuto a seguire rigorosamente queste regole.

Ricorda, la velocità è solo una delle tante metriche SEO che aiutano Google a determinare come classificare il tuo sito web. Il motivo per cui la velocità è così importante è che migliora l'esperienza dell'utente sul tuo sito web.

Una migliore esperienza utente richiede molto di più della velocità. Devi anche offrire informazioni utili, migliore interfaccia utente e coinvolgere i contenuti con testo, immagini e video.

Il tuo obiettivo dovrebbe essere quello di creare un sito Web veloce che offra un'ottima esperienza utente.

Durante l'ultima riprogettazione di BlogPasCher, ci siamo concentrati sulla velocità e sul miglioramento dell'esperienza utente.

Ti consigliamo di utilizzare le regole di Google Pagespeed come suggerimento e, se puoi implementarle facilmente senza rovinare l'esperienza dell'utente, è fantastico. In caso contrario, dovresti sforzarti di fare il più possibile, e poi non preoccuparti per il resto.

Detto questo, diamo un'occhiata a cosa puoi fare per correggere JavaScript e il blocco del rendering CSS in WordPress.

Tratteremo due metodi che risolveranno questo problema. Puoi scegliere quello che funziona meglio sul tuo sito web.

1. Correggi gli script di blocco del rendering e CSS con WP Rocket

Per questo metodo, utilizzeremo il plugin WP Rocket. Questo è il miglior plugin per la memorizzazione nella cache di WordPress sul mercato e ti consente di migliorare rapidamente le prestazioni del tuo sito web senza dover configurare competenze tecniche o complesse.

Prima di tutto, devi installare e attivare il plugin WP Rocket. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin per WordPress..

WP Rocket attiva la sua cache con impostazioni ottimali. Per impostazione predefinita, non abilita le opzioni di ottimizzazione JavaScript e CSS. Queste ottimizzazioni possono potenzialmente influenzare l'aspetto del tuo sito web o alcune funzionalità, motivo per cui il plug-in ti consente di abilitare queste impostazioni come opzione.

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

Per farlo devi andare avanti Impostazioni »WP Rocket, quindi passa a "Ottimizzazione dei file '. Da lì, scorri verso il basso fino alla sezione File CSS e spunta le caselle  Minimizza CSS, Combina file CSS et Ottimizza la consegna CSS.

Come risolvere il blocco dei rendering javascript css wordpress blogpascher 2

osservazione : WP Rocket tenterà di minimizzare tutti i tuoi file CSS, combinarli e caricare solo il CSS necessario per la parte visibile del tuo sito web. Potrebbe influenzare l'aspetto del tuo sito web, quindi dovresti testare attentamente il tuo sito web su più dispositivi e dimensioni dello schermo.

Quindi devi scorrere fino alla sezione File JavaScript. Da qui puoi spuntare tutte le opzioni per il massimo miglioramento delle prestazioni.

Come risolvere il blocco dei rendering javascript css wordpress blogpascher 3

Puoi minimizzare e combinare file JavaScript proprio come hai fatto con i file CSS.

Puoi anche impedire a WordPress di caricare il file. jQuery Migrazione. Questo è uno script che WordPress carica per fornire compatibilità per plugin e temi che utilizzano versioni precedenti di jQuery.

La maggior parte dei siti Web non ha bisogno di questo file, ma è una buona idea controllare il tuo sito Web per assicurarti che la sua rimozione non influisca sul tema o sui plug-in.

Quindi scorrere un po 'più in basso e controllare le opzioni'Carica JavaScript differito'e'Modalità provvisoria per jQuery'.

Come risolvere il blocco dei rendering javascript css wordpress blogpascher 4

Queste opzioni ritardano il caricamento di JavaScript non essenziale e la modalità provvisoria di jQuery ti consente di caricare jQuery per i temi che possono utilizzarlo in linea. 

Ricordati di fare clic sul pulsante Salva modifiche per memorizzare le tue impostazioni.

Successivamente, puoi anche svuotare la cache in WP Rocket prima di testare nuovamente il tuo sito web con Google Page Speed ​​Insights.

Sul nostro sito web di prova siamo stati in grado di ottenere il 100% del punteggio sui desktop e il problema del rendering bloccato è stato risolto sia nei punteggi mobili che desktop.

Come risolvere il blocco dei rendering javascript css wordpress blogpascher 5

2. Correggi il blocco del rendering JavaScript e CSS con l'autoptimize

Per questo metodo, utilizzeremo un plug-in diverso creato appositamente per migliorare la consegna dei file CSS e JS del tuo sito web. Sebbene questo plugin svolga il suo lavoro, manca delle altre potenti funzionalità offerte da WP Rocket.

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

Quando si attiva, è necessario visitare la pagina Impostazione »Ottimizzazione automatica per configurare le impostazioni del plugin.

Prima di tutto, devi controllare l'opzione 'Ottimizza il codice JavaScript'sotto il blocco JavaScript Opzioni. Assicurati che l'opzione "Aggrega tutti i file JS collegati" non sia selezionata.

Come risolvere il blocco dei rendering javascript css wordpress blogpascher 6

Quindi scorri verso il basso fino all'area Opzioni CSS e seleziona l'opzione " Ottimizzare il codice CSS?'. Assicurati che l'opzione "Aggrega tutti i file CSS collegati'non è selezionato.

Come risolvere il blocco dei rendering javascript css wordpress blogpascher 7

Stai cercando i migliori temi e plugin per WordPress?

Scarica i migliori plugin e temi WordPress su Envato e crea facilmente il tuo sito web. Già più di 49.720.000 download. [ESCLUSIVO]

È ora possibile fare clic sul pulsante "Salva modifiche e svuota cache" per memorizzare le impostazioni.

Vai avanti e testa il tuo sito web con Page Speed ​​Insights. Sul nostro sito Web dimostrativo, siamo stati in grado di risolvere il problema di blocco del rendering con queste impostazioni di base.

Come risolvere il blocco dei rendering javascript css wordpress blogpascher 9

Se sono ancora presenti script di blocco del rendering, è necessario tornare alla pagina delle impostazioni del plug-in e guardare le opzioni JavaScript e CSS.

Ad esempio, puoi consentire al plug-in di includere JS Inline e rimuovere gli script esclusi per impostazione predefinita come seal.js o jquery.js.

Fare clic sul pulsante "Salva modifiche e svuota cache" per salvare le modifiche e svuotare la cache del plug-in.

Al termine, vai avanti e controlla di nuovo il tuo sito Web con lo strumento Page Speed ​​Insights.

Come funziona?

L'ottimizzazione automatica raggruppa tutti i file JavaScript e CSS. Dopo di che crea file CSS e JavaScript minificati e offre copie cache del tuo sito web in modo sincronizzato o differito.

Ciò consente di risolvere il problema del blocco rendering script e stili di blocco. Tuttavia, tieni presente che ciò può anche influire sulle prestazioni o sull'aspetto del tuo sito web.

aiutare

A seconda di come i plugin e il tuo tema WordPress utilizzano JavaScript e CSS, potrebbe essere abbastanza difficile risolvere completamente tutti i problemi con blocco della Rendering JavaScript e CSS.

Sebbene gli strumenti di cui sopra possano essere d'aiuto, i tuoi plugin potrebbero aver bisogno di determinati script con un livello di priorità diverso per funzionare correttamente. In questo caso, le soluzioni di cui sopra potrebbero interrompere la funzionalità di questi plugin o potrebbero comportarsi in modo imprevisto.

Google può ancora mostrarti alcuni problemi come l'ottimizzazione della consegna CSS. WP Rocket ti consente di risolvere questo problema aggiungendo manualmente il CSS critico necessario per visualizzare perfettamente il tuo tema WordPress.

Tuttavia, potrebbe essere abbastanza difficile sapere quale codice CSS è necessario visualizzare.

Scopri anche alcuni temi e plugin premium per WordPress  

Puoi utilizzare altri plugin di WordPress per dare un aspetto moderno e ottimizzare la presa del tuo blog o sito Web.

Ti offriamo qui alcuni plugin WordPress premium che ti aiuteranno a farlo.

1. WordPress Speed ​​Optimization Plugin

Stai lottando per gestire più plug-in di ottimizzazione della velocità del sito web? Sei preoccupato che stiano ostacolando la velocità di esecuzione del tuo sito web? quindi, questo plugin per WordPress sarà la soluzione definitiva per tutte le tue preoccupazioni.Plugin per l'ottimizzazione della velocità di Wordpress

Questo plugin è progettato per darti la funzionalità di quasi 6-8 diversi plugin di WordPress. Devi solo installarlo e configurarlo per vedere un netto miglioramento nel caricamento delle tue pagine.

Vorremmo sottolineare che questo non è un file plug-in cache o CDN, ma il risultato che offre è comunque impressionante. Non esitate a provare questo plugin per WordPress per vedere di cosa è capace.

Download | Demo | Web hosting

2. Social Share & Locker Pro

Il plugin Social Share & Locker Pro è stato progettato per aiutare il tuo sito web ad essere più visibile sui social media. Con pochi clic, puoi impostare la posizione delle tue icone social o bloccare i tuoi contenuti richiedendo la condivisione su uno dei social network da te offerti.

Plugin di social share locker pro wordpress

Hai temi predefiniti 10 e questo dovrebbe coprire i desideri più comuni. Tutti i suoi temi sono Retina e fanno miracoli. 

Inoltre, con Social Share & Locker Pro, sarai in grado di visualizzare il nome completo dei social network o solo l'icona. Dipenderà dal tuo design, dallo spazio disponibile o dai tuoi desideri.

Download | Demo | Web hosting

Crea facilmente il tuo negozio online

Scarica gratuitamente WooCommerce, i migliori plug-in di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress. [Consigliato]

3. WordPress PDF Immagini Lightbox

WordPress PDF Lightbox è un'estensione di WordPress che consente di creare visualizzatori PDF. Un visualizzatore PDF è una raccolta di foto che possono essere salvate come PDF.Wordpress immagini pdf lightbox plugin wordpress

Con questa estensione, puoi creare tutti i visualizzatori di PDF che desideri. Per ogni visualizzatore, l'amministratore può impostare alcune opzioni come:

  • L'immagine di copertina: che verrà aggiunta come prima pagina del PDF creato dall'utente
  • Numero massimo di immagini per visualizzatore
  • Un'immagine filigrana: da applicare alle pagine PDF
  • Invio tramite e-mail: se questa funzione è attivata, verrà proposto un modulo di contatto subito dopo la galleria di immagini. Attraverso questo modulo, gli utenti potranno inviare il PDF creato tramite posta elettronica a chiunque.

Download | Demo | Web hosting

Risorse raccomandate

Scopri altre risorse consigliate per aiutarti a costruire e gestire il tuo sito web.

Conclusione

Ecco ! Questo è tutto per questo tutorial. Speriamo che questo articolo ti abbia aiutato a imparare come correggere il blocco del rendering JavaScript e CSS in WordPress. Puoi anche vedere il nostro guida definitiva su come velocizzare le prestazioni di WordPress per i principianti.

Tuttavia, sarai anche in grado di consultare il nostro risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress.

Non esitare a condividi con i tuoi amici sui tuoi social network preferiti. E se hai suggerimenti o commenti, lasciali nella nostra sezione commentaires.

...  

Questo articolo contiene i commenti 0

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
0 azioni
quota
Tweet
Enregistrer