Come spostare JavaScripts in basso o in fondo in WordPress

Recentemente, uno dei nostri lettori ci ha chiesto come possono spostare i JavaScript in fondo in WordPress per aumentare il loro punteggio di velocità della pagina di Google. Siamo contenti che abbiano chiesto, perché sinceramente 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 JavaScripts in fondo in WordPress, in modo da poter migliorare il tempo di caricamento del tuo sito e il tuo punteggio di velocità della pagina di Google.

Vantaggi del passaggio di JavaScript al minimo

JavaScript è un linguaggio di programmazione lato client. Viene eseguito ed eseguito dal browser Web dell'utente e non dal tuo server web. Quando inserisci JavaScript nella parte superiore, i browser possono eseguire o elaborare il codice JavaScript prima di caricare il resto della pagina. Quando i JavaScript vengono spostati nella parte inferiore, il server Web eseguirà rapidamente il rendering della pagina e quindi il browser dell'utente eseguirà JavaScripts. Poiché tutto il rendering lato server è già stato eseguito, il codice JavaScript verrà caricato in background, rendendo più veloce il carico complessivo.

Ciò migliorerà il tuo punteggio di velocità durante i test con la velocità della pagina di Google o Yslow. Google e altri motori di ricerca stanno considerando la velocità della pagina come una delle matrici delle prestazioni durante la visualizzazione dei risultati di ricerca. Ciò significa che i siti web che caricano più velocemente appariranno più prominenti 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 loro script in coda e caricarli secondo necessità. Accumulare script e stili correttamente può migliorare significativamente la velocità di caricamento della pagina.

Per mostrarti un esempio di base, aggiungeremo un piccolo JavaScript in un tema WordPress. Salva il tuo JavaScript in a .js archiviare e posizionare .js file nel tuo tema js directory. Se il tuo tema non ha una directory per JavaScripts, quindi creane uno. Dopo aver posizionato il file di script, modifica i temi del tuo tema functions.php file 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', vero); wp_enqueue_script ('my-amazing-script' ); add_action ('wp_enqueue_scripts', 'wpb_adding_scripts'); 

In questo codice, abbiamo usato la funzione wp_register_script (). Questa funzione ha i seguenti parametri:

Per aggiungere lo script nel piè di pagina o in fondo a una pagina di WordPress, tutto ciò che devi fare è impostare il $ in_footer parametro a vero.

Abbiamo anche usato un'altra funzione get_template_directory_uri () che restituisce l'URL per la directory del modello. Questa funzione dovrebbe essere utilizzata per accodare e registrare script e stili in temi WordPress. Per i plugin che useremo plugins_url () funzione.

Il problema:

Il problema è che alcune volte i plugin WordPress aggiungono il loro JavaScript alle pagine all'interno o all'interno del corpo della pagina. Per spostare gli script in basso è necessario modificare i file del plugin e spostare correttamente gli script in fondo.

Trovare la fonte 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 nel js elenco.

A volte vedrai JavaScript aggiunto direttamente nella pagina e non collegato tramite un file .js separato. In tal caso, è necessario disattivare tutti i plugin uno per uno. Aggiorna la pagina dopo aver disattivato ciascun plug-in finché non trovi quello che aggiunge lo script alle tue pagine. Se il codice JavaScript non scompare anche dopo aver disattivato tutti i plugin, prova a passare a un altro tema per vedere se il codice JavaScript è stato 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 ha una chiamata per il file. In uno dei tuoi file PHP di temi o plugin vedrai una chiamata a quel particolare .js file.

Se il plugin o il tema sta già utilizzando l'enqueuing per aggiungere il file JavaScript, tutto ciò che devi fare è modificare la funzione wp_register_script nel tuo plugin o tema e aggiungere true per il parametro $ in_footer. Come questo:

 wp_register_script ('script-handle', plugins_url ('js / script.js', __FILE__), ", '1.0', vero); 

Supponiamo che il tuo plugin o tema stia aggiungendo JavaScript grezzo nell'intestazione o tra il contenuto. Trova il codice JavaScript non elaborato nel file del plugin o del tema, copia il codice JavaScript e salvalo in un file .js file. Quindi utilizzare wp_register_script () funzione come mostrato sopra, per spostare JavaScript in basso.

Nota del redattore: è importante capire che quando si apportano modifiche ai file principali e si aggiorna il plug-in, le modifiche non verranno sovrascritte. Un modo migliore per farlo sarebbe quello di annullare la registrazione dello script e registrarlo nuovamente dal file functions.php del tema. Vedi questo tutorial.

Oltre a spostare gli script sul piè di pagina, dovresti anche prendere in considerazione l'utilizzo di un plug-in social media più veloce e di immagini con caricamento lento. Oltre a ciò dovresti utilizzare anche W3 Total Cache e MaxCDN per migliorare la velocità del tuo sito.

Speriamo che questo articolo ti abbia aiutato a spostare JavaScripts in fondo in WordPress e migliorare la velocità della tua pagina. Per domande e commenti si prega di lasciare un commento qui sotto.