Så här flyttar du JavaScripts till Bottom eller Footer i WordPress

Nyligen frågade en av våra läsare hur de kan flytta JavaScripts till botten i WordPress för att öka deras Googles sidhastighetspoäng. Vi är glada att de frågade, för att vi ärligt talat om att skriva om detta. Tidigare har vi pratat om hur man korrekt lägger till JavaScripts och CSS-stilar i WordPress. I den här artikeln kommer vi att visa hur du flyttar JavaScripts längst ner i WordPress, så att du kan förbättra din webbplatsens laddningstid och din Google-sidhastighetspoäng.

Fördelar med att flytta JavaScripts till botten

JavaScript är ett programmeringsspråk för klientsidor. Det körs och drivs av en användares webbläsare och inte av din webbserver. När du placerar JavaScript högst upp kan webbläsare exekvera eller bearbeta JavaScript innan du laddar resten av din sida. När JavaScripts flyttas till botten kommer din webbserver snabbt att göra sidan och sedan användarens webbläsare skulle utföra JavaScripts. Eftersom alla serverns rendering redan är klar laddas JavaScript i bakgrunden vilket gör den totala belastningen snabbare.

Detta kommer att förbättra din hastighetspoäng när du testar med Google sidhastighet eller Yslow. Google och andra sökmotorer överväger nu sidhastighet som en av prestandamatriserna när de visar sökresultat. Det innebär att webbplatser som laddas snabbare kommer att visas mer framträdande i sökresultaten.

Det korrekta sättet att lägga till skript i WordPress

WordPress har ett kraftfullt enqueuing-system som låter temat och plugin-utvecklare lägga till sina skript i kö och ladda dem efter behov. Enqueuing-skript och format på rätt sätt kan förbättra sidhastigheten.

För att visa dig ett grundläggande exempel lägger vi till en liten JavaScript i ett WordPress-tema. Spara din JavaScript i en .js fil och placera det .js filen i ditt tema js katalogen. Om ditt tema inte har en katalog för JavaScripts, skapa sedan en. Efter att du har lagt in din skriptfil, redigera ditt tema functions.php fil och lägg till den här koden:

 funktion 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'); 

I denna kod har vi använt wp_register_script () funktionen. Denna funktion har följande parametrar:

För att lägga till manuset i sidfot eller botten på en WordPress-sida är allt du behöver göra att ställa in $ in_footer parameter till Sann.

Vi har också använt en annan funktion get_template_directory_uri () som returnerar webbadressen för mallkatalogen. Den här funktionen ska användas för att skriva in och registrera skript och stilar i WordPress-teman. För plugins ska vi använda plugins_url () fungera.

Problemet:

Problemet är att vissa gånger WordPress plugins lägger till sin egen JavaScript på sidor inom eller inom sidans kropp. För att flytta dessa skript till botten måste du redigera dina pluginfiler och flytta skripten till botten.

Hitta JavaScript-källan

Öppna din webbplats i webbläsaren och visa sidkällan. Du kommer att se länken till JavaScript-filen som anger platsen och ursprunget för filen. Till exempel berättar skärmdumpen nedan att vårt skript hör till ett plugin som heter "test-plugin101". Skriptfilen finns i js katalog.

Ibland kommer du att se JavaScript läggas direkt till sidan och inte länkade via en separat .js-fil. I så fall måste du avaktivera alla dina plugins en efter en. Uppdatera sidan efter att ha avaktiverat varje plugin tills du hittar den som lägger till skriptet på dina sidor. Om JavaScript inte försvinner, även efter att du avaktiverat alla plugins, försök att byta till ett annat tema för att se om JavaScript läggs till av ditt tema.

Registrera och skriva in skript

När du väl har hittat det plugin eller det tema som lägger till JavaScript i rubrikavsnittet, är nästa steg att ta reda på var plugin-programmet har ett samtal för filen. I ett av ditt php-filer i ditt tema eller plugin ser du ett samtal till det speciella .js fil.

Om plugin eller tema redan använder enqueuing för att lägga till JavaScript-fil, är allt du behöver göra genom att ändra wp_register_script-funktionen i ditt plugin eller tema och lägg till true för parametern $ in_footer. Så här:

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

Vi antar att ditt plugin eller tema lägger till rå JavaScript i rubriken eller mellan innehållet. Hitta den rätta JavaScript-koden i plugin- eller temafilerna, kopiera JavaScript och spara den i en .js fil. Använd sedan wp_register_script () funktionen som visas ovan, för att flytta JavaScript till botten.

Redaktörens anteckning: Det är viktigt att förstå att när du gör ändringar i kärnfilerna och uppdaterar plugin-programmet, kommer dina ändringar inte att överskridas. Ett bättre sätt att göra detta skulle vara att avregistrera skriptet och omregistrera det från ditt temas funktioner.php-fil. Se denna handledning.

Bortsett från att du flyttar skripten till sidfoten, bör du också överväga att använda snabbare sociala medier plugin och lat bilder. Tillsammans med det borde du också använda W3 Total Cache och MaxCDN för att förbättra din webbplatshastighet.

Vi hoppas att den här artikeln hjälper dig att flytta JavaScripts till botten i WordPress och förbättra sidhastigheten. För frågor och feedback, vänligen lämna en kommentar nedan.