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.
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 influire sulaspetto del tuo sito web o determinate funzionalità , ecco perché il plug-in ti consente di abilitare tali impostazioni come opzione.
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.
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. Ciò potrebbe influire sulaspetto del tuo sito web, quindi dovresti testare accuratamente 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.
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'.
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.
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.
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.
È 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.
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ò potrebbe influire anche sulle prestazioni oaspetto 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.
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.
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
3. WordPress PDF Immagini Lightbox
Lightbox PDF di WordPress è un Estensione di WordPress che consente di creare visualizzatori di file PDF. Un visualizzatore PDF è una raccolta di foto che possono essere salvate come PDF.
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, a modulo di contatto sarà offerto subito dopo la galleria di immagini. Attraverso questo modulo, gli utenti potranno inviare via e-mail il PDF creato a chiunque.
Download | Demo | Web hosting
Risorse raccomandate
Scopri altre risorse consigliate per aiutarti a costruire e gestire il tuo sito web.
- Plugin 10 WordPress per migliorare la SEO del tuo sito web
- 5 premium plugin WordPress per ottimizzare le categorie
- 10 plugin di WordPress per convertire valute monetarie
- plugin WordPress 10 di integrare un lettore audio in un 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.
...
