Recentemente, uno dei nostri lettori ci ha chiesto come spostare gli script JavaScript in fondo in WordPress per aumentare il punteggio di velocità della pagina di Google. Siamo contenti che l'abbiano chiesto, perché onestamente volevamo scrivere di questo. In precedenza, abbiamo parlato di come aggiungere correttamente JavaScript e stili CSS in WordPress. In questo articolo, ti mostreremo come spostare gli script JavaScript in fondo in WordPress, in modo da poter migliorare il tempo di caricamento del tuo sito e il punteggio di velocità della pagina di Google.
Vantaggi dello spostamento degli script JavaScript in fondo
JavaScript è un linguaggio di programmazione lato client. Viene eseguito e gestito dal browser web di un utente e non dal tuo web server. Quando metti JavaScript in cima, i browser potrebbero eseguire o elaborare JavaScript prima di caricare il resto della tua pagina. Quando gli script JavaScript vengono spostati in fondo, il tuo web server renderizzerà rapidamente la pagina e quindi il browser dell'utente eseguirà gli script JavaScript. Poiché tutto il rendering lato server è già stato completato, JavaScript verrà caricato in background rendendo il caricamento complessivo più veloce.
Questo migliorerà il tuo punteggio di velocità quando testi con Google Page Speed o Yslow. Google e altri motori di ricerca considerano ora la velocità della pagina come una delle metriche di performance quando visualizzano i risultati di ricerca. Ciò significa che i siti web che si caricano più velocemente appariranno in modo più prominente nei risultati di ricerca.
Il modo corretto di aggiungere script in WordPress
WordPress ha un potente sistema di accodamento che consente agli sviluppatori di temi e plugin di aggiungere i propri script in coda e caricarli secondo necessità. Accodare correttamente script e stili può migliorare significativamente la velocità di caricamento della pagina.
Per mostrarti un esempio di base, aggiungeremo un po' di JavaScript a un tema WordPress. Salva il tuo JavaScript in un file .js e posiziona quel file .js nella directory js del tuo tema. Se il tuo tema non ha una directory per JavaScript, creane una. Dopo aver posizionato il tuo file di script, modifica il file functions.php del tuo tema e aggiungi questo codice:
function wpb_adding_scripts() {
wp_register_script('my-amazing-script', get_template_directory_uri() . '/js/my-amazing-script.js','','1.1', true);
wp_enqueue_script('my-amazing-script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
In questo codice, abbiamo utilizzato la funzione wp_register_script(). Questa funzione ha i seguenti parametri:
<?php wp_register_script( $handle, $src, $deps, $ver, $in_footer ); ?>
Per aggiungere lo script nel footer o in fondo a una pagina WordPress, tutto ciò che devi fare è impostare il parametro $in_footer su true.
Abbiamo anche utilizzato un'altra funzione get_template_directory_uri() che restituisce l'URL della directory del template. Questa funzione dovrebbe essere utilizzata per accodare e registrare script e stili nei temi WordPress. Per i plugin utilizzeremo la funzione plugins_url().
Il Problema:
Il problema è che a volte i plugin WordPress aggiungono il proprio JavaScript alle pagine all'interno di <head> o all'interno del corpo della pagina. Per spostare questi script in fondo è necessario modificare i file del tuo plugin e spostare correttamente gli script in fondo.
Trovare la Sorgente JavaScript
Apri il tuo sito nel browser web e visualizza l'origine della pagina. Vedrai il link al file JavaScript che indica la posizione e l'origine del file. Ad esempio, lo screenshot qui sotto ci dice che il nostro script appartiene a un plugin chiamato 'test-plugin101'. Il file di script si trova nella directory js.
A volte vedrai JavaScript aggiunto direttamente nella pagina e non collegato tramite un file .js separato. In tal caso, dovrai disattivare tutti i tuoi plugin uno per uno. Aggiorna la pagina dopo aver disattivato ogni plugin finché non trovi quello che aggiunge lo script alle tue pagine. Se il JavaScript non scompare nemmeno dopo aver disattivato tutti i plugin, prova a passare a un altro tema per vedere se il JavaScript viene aggiunto dal tuo tema.
Registra e Accoda Script
Una volta trovato il plugin o il tema che aggiunge JavaScript nella sezione dell'intestazione, il passo successivo è scoprire dove il plugin chiama il file. In uno dei file PHP del tuo tema o plugin vedrai una chiamata a quel particolare file .js.
Se il plugin o il tema sta già utilizzando l'accodamento (enqueuing) per aggiungere file JavaScript, allora tutto ciò che devi fare è cambiare la funzione wp_register_script nel tuo plugin o tema e aggiungere true per il parametro $in_footer. In questo modo:
wp_register_script('script-handle', plugins_url('js/script.js' , __FILE__ ),'','1.0',true);
Supponiamo che il tuo plugin o tema stia aggiungendo JavaScript grezzo nell'intestazione o tra i contenuti. Trova il codice JavaScript grezzo nei file del plugin o del tema, copia il JavaScript e salvalo in un file .js. Quindi utilizza la funzione wp_register_script() come mostrato sopra, per spostare JavaScript in fondo.
Nota dell'editore: È importante capire che quando apporti modifiche ai file principali e aggiorni il plugin, le tue modifiche non verranno sovrascritte. Un modo migliore per farlo sarebbe annullare la registrazione dello script e registrarlo nuovamente dal file functions.php del tuo tema. Vedi questo tutorial.
Oltre a spostare gli script nel footer, dovresti anche considerare l'utilizzo di un plugin per i social media più veloce e il caricamento pigro delle immagini. Insieme a ciò, dovresti anche utilizzare W3 Total Cache e MaxCDN per migliorare la velocità del tuo sito.
Speriamo che questo articolo ti abbia aiutato a spostare gli script JavaScript in fondo in WordPress e a migliorare la velocità della tua pagina. Per domande e feedback, lascia un commento qui sotto.
Ravi
I miei plugin si aggiorneranno normalmente quando sposterò i loro js in un singolo file? Sono un principiante.
Staff di WPBeginner
Ci sono diversi modi per farlo. Uno dei più comuni è incollare i file JavaScript caricati da diverse fonti in un unico file JS e poi metterlo in coda.
Catharine
Ottimo, grazie!
Catharine
Ciao Syed, grazie per il tutorial. Tuttavia, sono un principiante assoluto e ho una domanda molto basilare. Per quel pezzo di codice che hai pubblicato (l'intera funzione, ecc.), dobbiamo aggiungerlo nel file functions.php per ogni singolo pezzo di javascript che vogliamo mettere in coda? Immagino che quello che sto chiedendo è, come formatteresti quel codice se avessi più di un pezzo di javascript che veniva caricato negli header di più di una pagina?
Il tuo aiuto sarebbe molto apprezzato!
Marc Jacobs
Ciao, ottimo tutorial. Ho però una domanda. Ho eseguito il mio sito web tramite Google Page Speed Insights e ho ricevuto l'avviso che dovevo eliminare Javascript (e CSS) che bloccano il rendering per aumentare la velocità della mia pagina. Ho letto le informazioni su questo sito (ottima lettura!), ma non riesco a trovare i file php in cui il plugin “richiama” i file js che causano la lentezza del mio sito. Ho capito quale plugin causa la maggior parte del ritardo (Google-maps-ready), ma non ho idea di come procedere da lì. Ho cercato ogni file php nella cartella del plugin, ma non riesco a trovare un file js chiamato in modo simile ai file menzionati nel test di velocità di Google:
…
Come faccio a capire quale file php modificare? L'aiuto sarebbe molto apprezzato!
Saluti,
Marc.
Supporto WPBeginner
Un plugin sul tuo sito Google Maps Ready sta aggiungendo quei file.
Amministratore
Basavaraj Tonagatti
Ciao, mi sono recentemente trasferito a Genesis Framework + Eleven 40 Child Theme. Sto affrontando lo stesso problema quando eseguo il test di velocità della pagina di Google. Ma dato che non conosco il modo esatto di farlo, trovo difficile apportare modifiche. Qualcuno può guidarmi su quale sia la causa esatta sul mio sito e come rimuovere questo problema Javascript? (Non conosco lingue di stile e sono totalmente ignaro di questi linguaggi di codice.)
Joseph Stanley-Hunt
Grazie mille, mi stavo chiedendo come fare questo e alcuni altri trucchi (che ho anche trovato risposte qui).
Una domanda però, vedo che non c'è in-head nei parametri. questo significa che se in_footer è impostato su false, viene registrato automaticamente nell'head?
Supporto WPBeginner
Sì, il valore predefinito per in_footer è false. Quindi devi aggiungere esplicitamente in_footer a true altrimenti apparirà nell'head.
Amministratore
Mike
Anche l'aggiornamento del plugin mi è venuto subito in mente. Attendo altri consigli a riguardo.
Jason
Ottimo articolo! Mi sono posto questa domanda per molto tempo perché molti temi vengono penalizzati nel test di velocità di Google a causa degli script Java che si caricano per primi. Forse altri hanno saputo come mettere questi script nel footer.
Ancora grazie e proverò questo metodo e ti dirò come funziona.
Jeremy Myers
Ottimo tutorial.
Ma una volta aggiornato il plugin, dovremo rifare tutto da capo, giusto? E ogni volta che il plugin si aggiorna?
È possibile deregistrare il js in functions.php e poi semplicemente registrarlo di nuovo nel footer in qualche modo?
adam
Ciao, grazie per questi utili consigli. Ma, come spostare i file .js di W3 Total Cache minify nell'head?
Questa è la posizione dei file js nella cache in wp content, non in wp plugin.
Lucca
Grazie per la preziosa conoscenza – continua così con l'ottimo lavoro.
Raj
Nice and Simple guide. Thanks for posting this article to increase the speed of WordPress
Danyel Perales
Bel consiglio. Grazie per aver condiviso!