Hur man flyttar JavaScripts till botten eller sidfoten i WordPress

Hur man flyttar JavaScripts till botten eller sidfoten i WordPress

Nyligen frÄgade en av vÄra lÀsare oss hur de kan flytta JavaScripts till botten i WordPress för att öka deras Google-sidhastighetspoÀng. Vi Àr glada att de frÄgade, för Àrligt talat ville vi 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 visar vi dig hur du flyttar JavaScripts till botten i WordPress, sÄ att du kan förbÀttra webbplatsens laddningstid och din Google-sidhastighetspoÀng.

Fördelar med att flytta JavaScripts till botten

JavaScript Àr ett programmeringssprÄk pÄ klientsidan. Det körs och körs av en anvÀndares webblÀsare och inte av din webbserver. NÀr du placerar JavaScript högst upp kan webblÀsare köra eller bearbeta JavaScript innan du laddar resten av din sida. NÀr JavaScripts flyttas till botten skulle din webbserver snabbt göra sidan och sedan skulle anvÀndarens webblÀsare köra JavaScripts. Eftersom all serverrendering redan Àr klar kommer JavaScript att laddas i bakgrunden vilket gör den totala belastningen snabbare.

Detta förbÀttrar din hastighetspoÀng nÀr du testar med Googles sidhastighet eller Yslow. Google och andra sökmotorer övervÀger nu sidhastighet som en av prestandamatriserna nÀr sökresultaten visas. Detta innebÀr att webbplatser som laddas snabbare visas mer framtrÀdande i sökresultaten.

Det rÀtta sÀttet att lÀgga till skript pÄ WordPress

WordPress har ett kraftfullt inhÀgnadssystem som gör det möjligt för tema- och pluginutvecklare att lÀgga till sina skript i kö och ladda dem efter behov. Om du lÀser in skript och stilar ordentligt kan du förbÀttra sidhÀmtningshastigheten avsevÀrt.

För att visa dig ett grundlÀggande exempel lÀgger vi till lite JavaScript i ett WordPress-tema. Spara din JavaScript i en .js-fil och placera den .js-filen i ditt temas js-katalog. Om ditt tema inte har en katalog för JavaScripts, skapa sedan en. NÀr du har placerat din skriptfil redigerar du temas funktioner.php-fil och lÀgger till den hÀr koden:


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

I den hÀr koden har vi anvÀnt funktionen wp_register_script (). Denna funktion har följande parametrar:


<?php
wp_register_script( $handle, $src, $deps, $ver, $in_footer );
?>

För att lÀgga till skriptet i sidfoten eller botten av en WordPress-sida behöver du bara stÀlla in parametern $ in_footer till true.

Vi har ocksÄ anvÀnt en annan funktion get_template_directory_uri () som returnerar webbadressen för mallkatalogen. Denna funktion ska anvÀndas för att anslÄ och registrera skript och stilar i WordPress-teman. För plugins anvÀnder vi plugins_url () -funktionen.

Problemet:

Problemet Àr att WordPress-plugins ibland lÀgger till sin egen JavaScript pÄ sidor i eller inuti sidans kropp. För att flytta dessa skript till botten mÄste du redigera dina plugin-filer och flytta skripten ordentligt 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 filens ursprung. Till exempel berĂ€ttar skĂ€rmdumpen nedan att vĂ„rt skript tillhör ett plugin som heter ‘test-plugin101’. Skriptfilen finns i js-katalogen.

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

Registrera och starta skript

NÀr du vÀl har hittat pluginet eller temat som lÀgger till JavaScript i rubriksektionen Àr nÀsta steg att ta reda pÄ var plugin har ett samtal för filen. I ett av ditt temas eller plugins PHP-filer ser du ett samtal till just den .js-filen.

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



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


LÄt oss anta att ditt plugin eller tema lÀgger till rÄ JavaScript i rubriken eller mellan innehÄllet. Hitta den rÄa JavaScript-koden i plugin- eller temafilerna, kopiera JavaScript och spara den i en .js-fil. AnvÀnd sedan funktionen wp_register_script () som visas ovan för att flytta JavaScript till botten.

Redaktörens anmÀrkning: Det Àr viktigt att förstÄ att nÀr du gör Àndringar i kÀrnfilerna och uppdaterar pluginprogrammet kommer dina Àndringar inte att ÄsidosÀttas. Ett bÀttre sÀtt att göra detta skulle vara att avregistrera skriptet och omregistrera det frÄn temas funktioner.php-fil. Se denna handledning.

Förutom att flytta skript till sidfot, bör du ocksÄ övervÀga att anvÀnda ett snabbare plugin för sociala medier och lazy load-bilder. Utöver det bör 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Àlpte dig att flytta JavaScripts till botten i WordPress och förbÀttra din sidhastighet. För frÄgor och feedback vÀnligen lÀmna en kommentar nedan.