Nyligen frågade en användare oss om tips för att optimera prestandan på deras WordPress-webbplats. Ett av våra förslag var att ersätta standard WordPress jQuery-skriptet med jQuery från Google Hosted Libraries.
WordPress inkluderar jQuery med kärnprogramvaran som standard. Vi har dock funnit att ersätta det med den senaste jQuery-versionen från Googles bibliotek kan förbättra prestandan.
I den här artikeln visar vi dig hur du enkelt kan ersätta standard WordPress jQuery-skriptet med Googles bibliotek för att förbättra prestanda och hastighet.
Varför & när du bör ersätta standard WordPress jQuery
jQuery är ett populärt JavaScript-bibliotek som används av utvecklare för att skapa vackra webbapplikationer. Det används ganska ofta i WordPress för att lägga till funktioner som sliders, popups och mycket mer.
WordPress inkluderar ett jQuery-bibliotek som är paketerat med kärnprogramvaran WordPress. Många av de bästa WordPress-pluginsen och de flesta populära WordPress-teman förlitar sig på detta bibliotek för väsentlig funktionalitet och funktioner.
Men att ladda jQuery på en delad hosting-server kan vara resurskrävande och sakta ner din webbplats, särskilt om du använder dåligt kodade WordPress-teman eller plugins som inte följer WordPress bästa praxis.
Ett annat problem med att använda jQuery-versionen som ingår i WordPress är att den inte uppdateras om inte WordPress uppdaterar den. Det kan finnas nyare versioner av jQuery med prestanda- eller säkerhetskorrigeringar, men du får inte tillgång till dem förrän de ingår i en WordPress-uppdatering.
Det finns några lösningar för att åtgärda detta. Du kan till exempel ladda jQuery via Googles servrar eller jQuery:s officiella CDN.
Google Hosted Libraries är ett bra val eftersom deras servrar är stabila, uppdaterade och högt optimerade för hastighet, vilket gör att jQuery laddas mycket snabbare på din WordPress-webbplats.
Med det sagt, låt oss titta på hur du enkelt kan ersätta standard-WordPress jQuery med Googles bibliotek.
Ersätt standard WordPress jQuery med Google Library
WordPress levereras med en inbyggd metod för att enkelt lägga till skript och stilmallar. Detta gör det också möjligt för dig att säkert ta bort alla skript eller stilmallar som laddas med den inbyggda metoden.
Vi kommer att använda den här metoden för att först inaktivera standard-jQuery i WordPress. Därefter kommer vi att tala om för WordPress att ladda jQuery via Googles bibliotek.
Du behöver lägga till följande kod i ditt temas functions.php-fil, en webbplatsspecifikt plugin, eller ett kodsnutt-plugin.
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');
Vi rekommenderar att använda kodsnuttpluginet WPCode för att lägga till denna kod i WordPress. Det är gratis, enkelt att använda och kommer inte att förstöra din webbplats om något går fel.
Notera: Det finns också en premiumversion av WPCode som erbjuder avancerade funktioner som kodrevisioner, automatiska konverteringspixlar, schemalagda kodsnuttar, ett privat molnbibliotek och mer.
För att komma igång behöver du installera och aktivera WPCode. Om du behöver hjälp, se vår guide om hur man installerar ett WordPress-plugin.
När pluginet är aktiverat, navigera till Kodavsnitt » Lägg till avsnitt från din WordPress-instrumentpanel.
Därifrån, hitta alternativet 'Lägg till din anpassade kod (nytt utdrag)' och klicka på knappen '+ Lägg till anpassat utdrag' under den.
Sedan behöver du välja en kodtyp från listan med alternativ som visas på skärmen.
För den här handledningen, välj 'PHP-utdrag'.
Därefter kan du lägga till en titel för din kodsnutt. Detta kan vara vad som helst för att hjälpa dig att komma ihåg vad koden är till för.
Klistra sedan bara in koden ovan i rutan 'Kodförhandsgranskning'.
Slutligen, växla omkopplaren från 'Inaktiv' till 'Aktiv' och klicka på knappen 'Spara avsnitt'.
Det var allt! WordPress kommer nu att ersätta standard-jQuery och ladda det via Google-biblioteket istället.
Notera: Den här metoden kommer att fortsätta ladda jQuery-versionen som nämns i URL:en. I framtiden kan du behöva ändra Google-bibliotekets URL för att använda en nyare jQuery-version.
Google kommer inte automatiskt att uppdatera versionsnumret åt dig eftersom det kan orsaka kompatibilitetsproblem om ditt tema eller dina plugins är beroende av en annan version.
Du kan hitta den senaste URL:en genom att besöka Google-värdbibliotek-webbplatsen.
Därifrån kan du också hitta URL:erna för äldre versioner av jQuery som du kan använda för felsökning om det behövs.
Ersätta andra standard jQuery-bibliotek
Förutom kärnbiblioteket för jQuery inkluderar WordPress även en mängd andra jQuery-skript. Vissa av dessa skript, som jQuery Mobile och jQuery UI, finns på Googles bibliotek.
För andra bibliotek kan du använda jQuery:s egna CDN-servrar för att ladda dem mycket snabbare. I följande exempel har vi ersatt WordPress jquery-ui-core-skriptet med den officiella jquery-ui-versionen.
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');
Precis som Googles bibliotek måste du ersätta URL:en efter ett tag för att använda den senaste versionen av skriptet.
Inaktivera jQuery helt i WordPress
På grund av dess breda användning rekommenderar vi inte att du helt inaktiverar jQuery på din WordPress-webbplats. Även om ditt WordPress-tema inte använder jQuery, behöver många populära WordPress-plugins det fortfarande.
Om du däremot är säker på att din webbplats inte behöver jQuery, kan du säkert inaktivera det.
Lägg helt enkelt till följande kod i ditt temas funktionsfil, ett webbplatsspecifikt plugin eller ett kodavsnittplugin som WPCode.
if ( !is_admin() ) wp_deregister_script('jquery');
Det var allt. Den här koden inaktiverar helt enkelt jQuery-skriptet från att laddas på framsidan av din WordPress-webbplats.
Felsökning av jQuery-relaterade problem i WordPress
Nya versioner av jQuery kan ibland avveckla eller ta bort gamla metoder och funktioner. Om ett WordPress-plugin på din webbplats använder en äldre metod, kan detta potentiellt orsaka problem.
Du kanske märker varningar i Konsolområdet i Inspektera verktyget, eller så kanske du märker att vissa funktioner helt enkelt har slutat fungera.
WordPress använde tidigare ett skript som heter jQuery-migrate för att ge bakåtkompatibilitet med äldre versioner av jQuery. Men sedan WordPress 5.5 har detta skript tagits bort från WordPress.
Om du vill lägga tillbaka jQuery-migrate-skriptet eller felsöka mellan olika jQuery-versioner kan du prova följande metod.
Installera och aktivera helt enkelt pluginet Version Control for jQuery. För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.
Efter aktivering måste du besöka sidan Inställningar » jQuery Versionshantering. Härifrån kan du välja den jQuery-version du vill använda.
Pluginet kommer automatiskt att ladda den versionen från den officiella jQuery CDN.
Pluginet kommer också att ladda jQuery migrate-skriptet. Om du vill kan du inaktivera det under felsökning.
Glöm inte att klicka på knappen 'Spara ändringar' för att spara dina ändringar.
Vi hoppas att den här artikeln hjälpte dig att lära dig hur du ersätter standard WordPress jQuery med Googles bibliotek. Du kanske också vill se dessa användbara jQuery-handledningar för WordPress-användare, eller se vår kompletta guide för optimering av WordPress-prestanda.
Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.
Mrteesurez
När du ersätter den manuellt när WordPress kan släppa nya uppdateringar av WordPress och jag tycker att alla nödvändiga uppdateringar borde ha gjorts innan den släpps, eller finns det någon information om detta?
Dessutom, behöver jag helt inaktivera jQuery som du har instruerat i den här artikeln innan jag använder den från Googles bibliotek, som du har sagt att den inbyggda kan sakta ner webbplatsen, särskilt på delad hosting?
WPBeginner Support
WordPress kan också släppa en uppdatering, men det beror på individens behov om de vill ha en nyare version av jQuery.
Om du följer stegen i den här artikeln rekommenderar vi att du inaktiverar den gamla versionen för att förhindra att flera versioner av jQuery körs samtidigt och orsakar en konflikt.
Admin
Mrteesurez
Tack. Jag uppskattar ditt svar och din vägledning. Jag tänkte inte ens på konflikt, jag tänkte på om de två samtidigt skulle sakta ner en sajt helt. Jag kommer att följa dina instruktioner när jag utför. Tack för att du tog dig tid att svara.
ALEX
Hej,
Vi har en server i Kina, och alla resurser från Google blockeras av den kinesiska regeringens brandvägg.
Men Jquery- och typsnittsresurser laddas nu från Google på Wordpress som standard, och webbplatsen orsakas av allvarliga förseningar.
Så, finns det något sätt att tvinga Js- eller CSS-resurser att laddas från den lokala servern, tack?
Tack
WPBeginner Support
Om du har en webbadress för jquery-filerna på en lokal server då skulle du ändra URL:en i utdraget för att peka mot var jquery finns.
Admin
Wilbur
Hey, sorry for haling this post out of the grave…
How relevant is this still? In Terms of the latest P Core versions?
Tack
Jorge
Hej,
Här är en mer avancerad implementering:
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’);
}
}
Där "cdn.yourdomain.com" ska ersättas med filsökvägen, med användning av en CDN för ett bättre resultat.
Med vänliga hälsningar,
Jorge Ortiz
Simon
Både inläggets lösning och denna bryter min webbplats
Plato39
Jorges kod fungerade för mig – men citattecknen måste ersättas. Prova detta:
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 – det är den här webbsidan som lägger till de fina citattecknen. Gör bara en 'sök och ersätt' i din textredigerare (eller ersätt citattecknen manuellt med vanliga) så kommer koden att fungera i din temas functions.php-fil.
Shaurya
vad ska jag ange i url:en om jag inte har en cdn?
kommer
hej
tack så mycket för ditt inlägg, jag försökte ändra det och vet inte om jag gjorde rätt för min webbplats är nu 2 sekunder långsammare
Hur kontrollerar jag om jag gjorde rätt och om jag använder Googles bibliotek?
Ihsan
Jag testade koden ovan och jag ersatte den sista raden med detta för att få den att fungera och bli bättre
add_action( ‘wp_print_scripts’, ‘modify_jquery’, 100 );
Alejandro
Hej, tack för dina tips. Jag vet inte varför när jag använder den här funktionen laddas jquery från Google två gånger, jag menar, jag har två HTTP-förfrågningar istället för en. Här är testet: http://tools.pingdom.com/fpt/#!/dROQaF/http://elbauldelprogramador.com.
Med jquery.easing händer samma sak, men den här gången med 3 HTTP-förfrågningar för samma fil.
Några idéer? Jag har tittat i koden men hittade ingen dubblering av wp_enqueue_script(”);
Tack på förhand
Alejandro
Märkte precis att när jag är inloggad laddas jquery från Google bara en gång.
Mathieu
Tack! jQuery som brukade bryta upp min adminfunktionalitet är nu löst.
Mitch
Tack, mycket uppskattat.
Joseph Chambers
Vad händer om jag vill ladda antingen HTTP eller HTTPS baserat på vad besökaren besöker vår sida på.
för de flesta saker kan vi ändra: 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 och det fungerar. Dock; något i wp_register_script() kastar ett fel (vit sida med ordet: Error) när jag ändrar det. Tankar, lösningar?
Sajid Iqbal
Tack Syed för detta fantastiska inlägg. Sparade mig mycket tid.
Matt Ogborne
Mycket hjälpsamt, tack!
Matt
Riversatile
Hej,
Här är den senaste versionen av googleapi jquery-filen.
När du kopierar/klistrar in koden ovan, glöm inte att ersätta jquery URl med den här:
http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
Byt sedan ut ”1.4.4” mot ”1.6.2”
Som det här:
//Gör jQuery Google API-funktion modify_jquery() { if (!is_admin()) { // kommentera ut följande två rader för att ladda den lokala kopian av 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
Kan någon tala om för mig om jag behöver ändra (!is_admin) till "minimum"-behörighet om jag använder ett plugin som thetheflys flikar och dragspel. Så att flikarna som skapas på sidor kan ses av alla?
Tack!
Melissa Cleaver
Tack så mycket för koden, men när jag försökte använda den i min functions.php-fil fick jag ett fatalt fel, oavsett var i koden jag placerade den. Gör jag något fel här?
Redaktionell personal
Prova den nya koden som vi precis släppte.
Admin
swanie
Fråga: gör Google Library ett bra jobb med att hämta alt-tagginformationen från mediebiblioteket? … Jag har flera professionella teman som använder en jQuery-slider på huvudsidan, men de hämtar inte alt-taggen … därmed ser källkoden ut så här: alt=”” … vilket naturligtvis är ett SEO-nej. Jag har aldrig använt Google Library-skriptet … jag skulle vara nyfiken på hur det fungerar. Vad är din erfarenhet?
Redaktionell personal
Alt-tagg för vad? Detta ersätter bara javascript...
Admin
swanie
OK … jag antar att jag specifikt pratar om jQuery-sliders … Jag har köpt flera professionella teman med en jQuery-slider på huvudsidan … här är en av dem: http://coloradospringsautomechanics.com … om du tittar på källkoden, så hämtar den bilderna, men inte alt-taggarna … alt-taggen är tom.
Jag antar att genom att läsa det här inlägget kan detta Google Library-tillvägagångssätt eventuellt lösa det.
En annan lösning kan vara att öppna plugin-filerna och lägga till till alt-taggen så jag borde ha:
img src=”file.jpg” alt=”” title=””
Undrar bara varför dessa jQuery-sliders inte hämtar alt-taggarna. Är det rimligt? Är jag utanför ämnet?
Ni är bäst, förresten.
Aamir Rizwan
Din webbplats är flaggad som "skadlig kod" av Google.
Geraldo
//Offtopic
@Swanie
Gå och titta här: http://sitecheck.sucuri.net/results/coloradospringsautomechanics.com/
Säkerhetsrapport (Varningar hittade):
fel Svartlistad: Ja
fel Troligen komprometterad: Ja
//Ontopic
We can’t : “bundle” all our JQuery scripts? Do we have to make a call for every script seperate?
WPBeginner Support
@Geraldo: du kan lösa beroenden. Till exempel, om du laddar ett jQuery-skript skulle det uppenbarligen behöva jQuery, så du lägger till det som ett beroende och WordPress skulle köa det åt dig.