Recentemente, un utente ci ha chiesto suggerimenti per ottimizzare le prestazioni del proprio sito web WordPress. Uno dei nostri suggerimenti è stato quello di sostituire lo script jQuery predefinito di WordPress con jQuery dalle librerie ospitate da Google.
WordPress include jQuery con il software principale per impostazione predefinita. Tuttavia, abbiamo scoperto che sostituirlo con la versione più recente di jQuery dalla libreria di Google può migliorare le prestazioni.
In questo articolo, ti mostreremo come sostituire facilmente lo script jQuery predefinito di WordPress con la libreria di Google per migliorare le prestazioni e la velocità.
Perché e quando dovresti sostituire il jQuery predefinito di WordPress
jQuery è una popolare libreria JavaScript utilizzata dagli sviluppatori per creare bellissime applicazioni web. Viene utilizzata abbastanza spesso in WordPress per aggiungere funzionalità come slider, popup e molto altro.
WordPress include una libreria jQuery impacchettata con il software WordPress principale. Molti dei migliori plugin WordPress e la maggior parte dei temi WordPress più popolari si basano su questa libreria per funzionalità ed elementi essenziali.
Tuttavia, caricare jQuery su un server di hosting condiviso può richiedere molte risorse e rallentare il tuo sito, specialmente se stai utilizzando temi o plugin WordPress scritti male che non seguono le best practice di WordPress.
Un altro problema con l'utilizzo della versione di jQuery inclusa con WordPress è che non verrà aggiornata a meno che WordPress non la aggiorni. Potrebbero esserci versioni più recenti di jQuery con correzioni di prestazioni o sicurezza, ma non potrai accedervi finché non saranno incluse in un aggiornamento di WordPress.
Ci sono alcune soluzioni alternative per risolvere questo problema. Ad esempio, puoi caricare jQuery tramite i server di Google o la CDN ufficiale di jQuery.
Google Hosted Libraries è una buona scelta perché i loro server sono stabili, aggiornati e altamente ottimizzati per la velocità, il che consente a jQuery di caricarsi molto più velocemente sul tuo sito WordPress.
Detto questo, diamo un'occhiata a come sostituire facilmente il jQuery predefinito di WordPress con la libreria di Google.
Sostituisci il jQuery predefinito di WordPress con la libreria di Google
WordPress viene fornito con un metodo integrato per aggiungere facilmente script e fogli di stile. Questo ti consente anche di rimuovere in sicurezza eventuali script o fogli di stile caricati utilizzando il metodo integrato.
Utilizzeremo questo metodo per disabilitare prima il jQuery predefinito di WordPress. Dopodiché, diremo a WordPress di caricare jQuery tramite la libreria di Google.
Dovrai aggiungere il seguente codice al file functions.php del tuo tema, a un plugin specifico per il sito o a un plugin per snippet di codice.
function wpb_modify_jquery() {
//check if front-end is being viewed
if (!is_admin()) {
// Remove default WordPress jQuery
wp_deregister_script('jquery');
// Register new jQuery script via Google Library
wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js', false, '3.6.0');
// Enqueue the script
wp_enqueue_script('jquery');
}
}
// Execute the action when WordPress is initialized
add_action('init', 'wpb_modify_jquery');
Ti consigliamo di utilizzare il plugin per snippet di codice WPCode per aggiungere questo codice in WordPress. È gratuito, facile da usare e non danneggerà il tuo sito web in caso di problemi.
Nota: Esiste anche una versione premium di WPCode che offre funzionalità avanzate come revisioni del codice, conversioni automatiche di pixel, snippet pianificati, una libreria cloud privata e altro ancora.
Per iniziare, dovrai installare e attivare WPCode. Se hai bisogno di aiuto, consulta la nostra guida su come installare un plugin WordPress.
Una volta attivato il plugin, naviga su Snippet di codice » Aggiungi snippet dal tuo pannello di controllo WordPress.
Da lì, trova l'opzione 'Aggiungi il tuo codice personalizzato (Nuovo snippet)' e fai clic sul pulsante '+ Aggiungi snippet personalizzato' sotto di essa.
Quindi, devi selezionare un tipo di codice dall'elenco delle opzioni che appaiono sullo schermo.
Per questo tutorial, scegli ‘PHP Snippet.’
Successivamente, puoi aggiungere un titolo per il tuo snippet di codice. Può essere qualsiasi cosa per aiutarti a ricordare a cosa serve il codice.
Dopodiché, incolla semplicemente il codice sopra nella casella ‘Anteprima Codice’.
Infine, sposta l'interruttore da 'Inattivo' ad 'Attivo' e fai clic sul pulsante 'Salva snippet'.
Tutto qui! WordPress sostituirà ora il jQuery predefinito e lo caricherà tramite la libreria Google invece.
Nota: Questo metodo continuerà a caricare la versione di jQuery menzionata nell'URL. In futuro, potrebbe essere necessario modificare l'URL della libreria Google per utilizzare una versione più recente di jQuery.
Google non aggiornerà automaticamente il numero di versione per te perché ciò potrebbe causare problemi di compatibilità se il tuo tema o i tuoi plugin si basano su una versione diversa.
Puoi trovare l'URL più recente visitando il sito web Librerie ospitate da Google.
Da lì, puoi anche trovare gli URL per le versioni precedenti di jQuery che puoi utilizzare per la risoluzione dei problemi, se necessario.
Sostituzione di altre librerie jQuery predefinite
Oltre alla libreria jQuery principale, WordPress include anche una serie di altri script jQuery. Alcuni di questi script, come jQuery Mobile e jQuery UI, sono ospitati sulla libreria Google.
Per altre librerie, puoi utilizzare i server CDN di jQuery per caricarle molto più velocemente. Nell'esempio seguente, abbiamo sostituito lo script jquery-ui-core di WordPress con la versione ufficiale di jquery-ui.
function wpb_modify_jquery_ui() {
if (!is_admin()) {
wp_deregister_script('jquery-ui-core');
wp_register_script('jquery-ui-core', 'https://code.jquery.com/ui/1.12.1/jquery-ui.min.js', false, '1.12.1');
wp_enqueue_script('jquery-ui-core');
}
}
add_action('init', 'wpb_modify_jquery_ui');
Proprio come le librerie di Google, dovrai sostituire l'URL dopo un po' per utilizzare la versione più recente dello script.
Disabilitare completamente jQuery in WordPress
A causa del suo ampio utilizzo, sconsigliamo di disabilitare completamente jQuery sul tuo sito WordPress. Anche se il tuo tema WordPress non utilizza jQuery, molti plugin WordPress popolari ne hanno ancora bisogno.
Tuttavia, se sei certo che il tuo sito web non necessiti di jQuery, allora puoi disabilitarlo in sicurezza.
Aggiungi semplicemente il seguente codice al file functions del tuo tema, a un plugin specifico per il sito o a un plugin per snippet di codice come WPCode.
if ( !is_admin() ) wp_deregister_script('jquery');
Tutto qui. Questo codice disabilita semplicemente il caricamento dello script jQuery sul front-end del tuo sito WordPress.
Risoluzione dei problemi relativi a jQuery in WordPress
Le nuove versioni di jQuery possono a volte deprecate o rimuovere vecchi metodi e funzioni. Se un plugin WordPress sul tuo sito utilizza un metodo più vecchio, ciò potrebbe potenzialmente causare problemi.
Potresti notare avvisi nell'area Console dello strumento Inspect, oppure potresti notare che alcune funzionalità hanno semplicemente smesso di funzionare.
WordPress utilizzava uno script chiamato jQuery-migrate per fornire compatibilità di backup con le versioni precedenti di jQuery. Tuttavia, da WordPress 5.5 questo script è stato ritirato da WordPress.
Se desideri riaggiungere lo script jQuery-migrate o risolvere problemi tra diverse versioni di jQuery, puoi provare il seguente metodo.
Installa e attiva semplicemente il plugin Version Control for jQuery. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin per WordPress.
Dopo l'attivazione, devi visitare la pagina Impostazioni » Controllo versione jQuery. Da qui, puoi scegliere la versione di jQuery che desideri utilizzare.
Il plugin caricherà automaticamente quella versione dal CDN ufficiale di jQuery.
Il plugin caricherà anche lo script jQuery migrate. Se lo desideri, puoi disattivarlo durante la risoluzione dei problemi.
Non dimenticare di fare clic sul pulsante 'Salva modifiche' per salvare le tue modifiche.
Speriamo che questo articolo ti abbia aiutato a imparare come sostituire il jQuery predefinito di WordPress con la libreria di Google. Potresti anche voler vedere questi utili tutorial jQuery per utenti WordPress, o vedere la nostra guida completa all'ottimizzazione delle prestazioni di WordPress.
Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.
Mrteesurez
Quando lo si sostituisce manualmente quando WordPress potrebbe rilasciare nuove versioni di aggiornamento di WordPress e penso che tutti gli aggiornamenti necessari dovrebbero essere stati eseguiti prima di rilasciarlo, o ci sono fatti a riguardo?
Inoltre, devo disabilitare completamente jQuery come mi hai istruito in questo articolo prima di utilizzare quello della libreria di Google come hai detto che quello integrato potrebbe rallentare il sito web soprattutto su un hosting condiviso?
Supporto WPBeginner
WordPress potrebbe rilasciare un aggiornamento, ma dipende dalle esigenze individuali se si desidera avere una versione più recente di jQuery.
Se stai seguendo i passaggi in questo articolo, ti consigliamo di disabilitare la vecchia versione per evitare che più versioni di jQuery vengano eseguite contemporaneamente e causino conflitti.
Amministratore
Mrteesurez
Grazie. Apprezzo la tua risposta e la tua guida. Non avevo nemmeno pensato al conflitto, stavo pensando se i due contemporaneamente non avrebbero rallentato totalmente un sito. Seguirò le tue istruzioni quando eseguirò. Grazie per aver dedicato il tuo tempo a rispondere.
ALEX
Salve,
Abbiamo un server in Cina e tutte le risorse di Google sono bloccate dal firewall del governo cinese.
Tuttavia, le risorse Jquery e Fonts vengono caricate da Google su Wordpress per impostazione predefinita ora, e il sito subisce un grave ritardo.
Quindi, c'è un modo per forzare il caricamento delle risorse Js o CSS dal server locale, per favore?
Grazie
Supporto WPBeginner
Se hai un indirizzo web per i file jquery su un server locale, cambieresti l'URL nello snippet per puntare a dove si trova jquery.
Amministratore
Wilbur
Hey, sorry for haling this post out of the grave…
How relevant is this still? In Terms of the latest P Core versions?
Grazie
Jorge
Ciao,
Ecco un'implementazione più avanzata:
add_action( ‘wp_enqueue_scripts’, ‘register_jquery’ );
function register_jquery() {
if (!is_admin()) {
wp_deregister_script(‘jquery-core’);
wp_register_script(‘jquery-core’, ‘http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js’, true, ‘1.11.3’);
wp_enqueue_script(‘jquery-core’);
wp_deregister_script(‘jquery-migrate’);
wp_register_script(‘jquery-migrate’, ‘http://cdn.yourdomain.com/wp-includes/js/jquery/jquery-migrate.min.js’, true, ‘1.2.1’);
wp_enqueue_script(‘jquery-migrate’);
}
}
Dove “cdn.yourdomain.com” dovrebbe essere sostituito dal percorso del file, utilizzando una CDN per un risultato migliore.
Cordiali saluti,
Jorge Ortiz
Simon
Sia la soluzione del post che questa rompono il mio sito
Plato39
Il codice di Jorge ha funzionato per me – ma le virgolette devono essere sostituite. Prova questo:
add_action( ‘wp_enqueue_scripts’, ‘register_jquery’ );
function register_jquery() {
if (!is_admin()) {
wp_deregister_script(‘jquery-core’);
wp_register_script(‘jquery-core’, ‘https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js’, true, ‘1.11.3’);
wp_enqueue_script(‘jquery-core’);
wp_deregister_script(‘jquery-migrate’);
wp_register_script(‘jquery-migrate’, ‘http://cdn.yourdomain.com/wp-includes/js/jquery/jquery-migrate.min.js’, true, ‘1.2.1’);
wp_enqueue_script(‘jquery-migrate’);
}
}
Plato39
OK – è questa pagina web che aggiunge le virgolette eleganti. Fai semplicemente un 'trova e sostituisci' nel tuo editor di testo (o sostituisci manualmente le virgolette con quelle normali) e il codice funzionerà nel file functions.php del tuo tema.
Shaurya
cosa metto nell'url se non ho una cdn?
will
ciao
ti ringrazio molto per il tuo post, ho provato a cambiarlo e non so se ho fatto bene perché il mio sito ora è 2 secondi più lento
Come faccio a controllare se ho fatto bene e sto usando le librerie di Google?
Ihsan
Ho testato il codice sopra e ho sostituito l'ultima riga con questa per farlo funzionare meglio
add_action( ‘wp_print_scripts’, ‘modify_jquery’, 100 );
Alejandro
Ciao, grazie per i tuoi consigli. Non so perché quando uso questa funzione, il jquery di Google viene caricato due volte, cioè, ho due richieste HTTP invece di una. Ecco il test: http://tools.pingdom.com/fpt/#!/dROQaF/http://elbauldelprogramador.com.
Con jquery.easing succede la stessa cosa, ma questa volta con 3 richieste HTTP per lo stesso file.
Qualche idea? Ho guardato nel codice ma non ho trovato duplicazioni di wp_enqueue_script(”);
Grazie in anticipo
Alejandro
Ho appena notato che quando sono loggato, il jquery di Google viene caricato una sola volta.
Mathieu
Grazie! Il jQuery prima interrompeva la funzionalità del mio admin, ora è risolto.
Mitch
Grazie mille, molto apprezzato.
Joseph Chambers
Cosa succede se voglio caricare HTTP o HTTPS in base a quale dei due il visitatore sta visitando la mia pagina?
per la maggior parte delle cose possiamo cambiare: http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js -> //ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js e funziona. Tuttavia; qualcosa in wp_register_script() sta causando un errore (pagina bianca con la parola: Errore) quando lo cambio. pensieri, soluzioni?
Sajid Iqbal
Grazie Syed per questo ottimo post. Mi ha fatto risparmiare molto tempo.
Matt Ogborne
Molto utile, grazie!
Matt
Riversatile
Ciao,
Ecco l'ultima versione del file googleapi jquery.
Quando copi/incolli il codice sopra, non dimenticare di sostituire l'URL di jquery con questo:
http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
Quindi sostituisci "1.4.4" con "1.6.2"
Così:
//Rendere la funzione Google API di jQueryfunction modify_jquery() { if (!is_admin()) { // commenta le prossime due righe per caricare la copia locale di jQuery wp_deregister_script(‘jquery’); wp_register_script(‘jquery’, ‘http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js’, false, ‘1.6.2’); wp_enqueue_script(‘jquery’); }}add_action(‘init’, ‘modify_jquery’);
vnu
Qualcuno potrebbe dirmi se devo modificare (!is_admin) in "minimum" capability se uso un plugin come i tab e gli accordion di thethefly? In modo che i tab creati nelle pagine siano visibili a tutti?
Grazie!
Melissa Cleaver
Grazie mille per il codice, ma quando ho provato a usarlo nel mio file functions.php, ho ricevuto un errore fatale, non importa dove lo mettessi nel codice. Sto facendo qualcosa di sbagliato?
Staff editoriale
Prova il nuovo codice che abbiamo appena pubblicato.
Amministratore
swanie
Domanda: la libreria Google fa un buon lavoro nel recuperare le informazioni dell'alt tag dalla libreria multimediale? ... Ho diversi temi professionali che utilizzano uno slider jQuery nella pagina principale, ma non recuperano l'alt tag ... quindi, il codice sorgente appare così: alt="" ... che ovviamente è un "no-no" per la SEO. Non ho mai usato lo script della libreria Google ... sarei curioso di sapere come funziona. Qual è la tua esperienza?
Staff editoriale
Alt tag per cosa? Questo sta solo sostituendo il javascript....
Amministratore
swanie
OK… immagino che stia parlando specificamente di slider jQuery… ho acquistato diversi temi professionali con uno slider jQuery nella pagina principale… eccone uno: http://coloradospringsautomechanics.com… se visualizzi il sorgente, carica le immagini, ma non i tag alt… il tag alt è vuoto.
Immagino che leggendo questo post, questo approccio Google Library potrebbe potenzialmente risolverlo.
Un'altra soluzione potrebbe essere quella di aprire i file del plugin e aggiungere al tag alt, quindi dovrei avere:
img src=”file.jpg” alt=”” title=””
Mi chiedo solo perché questi slider jQuery non carichino i tag alt. Ha senso? Sono fuori tema?
Siete fantastici, comunque.
Aamir Rizwan
Il tuo sito web è segnalato come “malware” da Google.
Geraldo
//Fuori tema
@Swanie
Vai a vedere qui: http://sitecheck.sucuri.net/results/coloradospringsautomechanics.com/
Report di sicurezza (Avvisi trovati):
error Blacklisted: Yes
error Likely compromised: Yes
//In tema
Non possiamo: "raggruppare" tutti i nostri script JQuery? Dobbiamo fare una chiamata separata per ogni script?
Supporto WPBeginner
@Geraldo: puoi risolvere le dipendenze. Ad esempio, se stai caricando uno script jQuery, questo ovviamente necessiterebbe di jQuery, quindi lo aggiungi come dipendenza e WordPress lo metterà in coda per te.