Nyligen frågade en av våra läsare oss hur de kan flytta JavaScripts längst ner i WordPress för att öka sidhastigheten på Google. Vi är glada att de frågade, för ärligt talat ville vi skriva om detta. Tidigare har vi pratat om hur man korrekt add to JavaScripts och CSS-stilar i WordPress. I den här artikeln kommer vi att visa dig hur du flyttar JavaScript längst ner i WordPress, så att du kan förbättra din sites laddningstid och din Google page speed score.
Fördelar med att flytta JavaScripts längst ner
JavaScript är ett programmeringsspråk på klientsidan. Det exekveras och körs av användarens web browser eller ej av din web server. När du placerar JavaScript högst upp kan webbläsare köra eller bearbeta JavaScript innan de hämtar resten av din page. När JavaScripts flyttas längst ner, skulle din web server snabbt rendera sidan och sedan skulle användarens web browser köra JavaScripts. Eftersom all rendering på serversidan redan är gjord, kommer JavaScript att hämtas i bakgrunden, vilket gör att den totala laddningen går snabbare.
Detta kommer att förbättra din hastighetspoäng när du testar med Google page speed eller Yslow. Google och andra search engines tar nu hänsyn till page speed som en av prestandamatriserna när de displayed sökresultat. Detta innebär att websites som hämtar snabbare kommer att visas mer framträdande i sökresultaten.
Så här lägger du till skript i WordPress på rätt sätt
WordPress har ett kraftfullt invänta [granskning] / kö-system som allow utvecklare av teman och plugins att add to sina skript i kö och hämta dem efter behov. Om du hämtar skript och pages på rätt sätt kan du förbättra din pages laddningshastighet avsevärt.
För att visa dig ett grundläggande exempel kommer vi att add to lite JavaScript i ett WordPress theme. Save your JavaScript in a .js file and place that .j s file in your theme’s js directory. Om ditt theme inte har en directory för JavaScripts, skapa då en. När du har placerat din skriptfil redigerar du ditt temas functions.php-fil och add to denna kod:
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 wp_register_script()-funktionen. Denna funktion har följande parametrar:
<?php wp_register_script( $handle, $src, $deps, $ver, $in_footer ); ?>
Om du vill add to skriptet i sidfoten eller längst ner på en WordPress page 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 URL:en för templates directory. Denna funktion bör användas för att köa och registrera skript och stilar i WordPress themes. För tillägg kommer vi att använda funktionen plugins_url().
Problemet:
Problemet är att vissa gånger lägger WordPress tillägg till sitt eget JavaScript till pages inuti <head> eller inuti page body. För att flytta dessa skript längst ner måste du editera dina plugin-filer och flytta skripten korrekt till längst ner.
Hitta källan till JavaScript
Öppna din site i web browsern och view page source. You will see the link to the JavaScript file indicating the location and the origin of the file. Till exempel visar screenshoten under att vårt skript tillhör ett plugin som heter ”test-plugin101”. Skriptfilen finns i js directory.
Ibland ser du JavaScript add to direkt på page och ej länkad via en separat .js-fil. I så fall måste du deactivate alla dina tillägg ett efter ett. Uppdatera sidan efter att ha deactivate varje plugin tills du hittar den som lägger till skriptet på dina pages. Om JavaScript inte försvinner även efter att du har deactivate alla plugins, försök då att byta till ett annat theme för att se om JavaScript läggs till av your theme.
Registrera och köa skript
När du har hittat det plugin eller tema som lägger till JavaScript i header-sektionen är nästa steg att ta reda på var pluginet har ett anrop för filen. I en av ditt temas eller plugins PHP-filer kommer du att se ett anrop till den viss .js-filen.
Om pluginet eller temat redan använder enqueuing för att lägga till JavaScript-filen, ä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 $in_footer-parametern. Gilla det 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 headern eller mellan innehållet. Hitta den råa JavaScript-koden i plugin- eller theme-filerna, kopiera JavaScript och save den i en .js-fil. Använd sedan wp_register_script( )-funktionen som visas ovan för att flytta JavaScript längst ner.
Editor’s note: Det är viktigt att förstå att när du gör ändringar i core-filerna och uppdaterar pluginet, så kommer dina ändringar ej att åsidosättas. Ett bättre sätt att göra detta skulle vara att avregistrera skriptet och registrera det igen från ditt temas functions.php-fil. Se denna tutorial.
Notis: Förutom att flytta skripten till footern, bör du också överväga att använda ett snabbare plugin för social media och lazy loaded images. Tillsammans med det bör du också använda W3 Total Caching och MaxCDN för att förbättra hastigheten på din site.
Vi hoppas att den här artikeln hjälpte dig att flytta JavaScript längst ner i WordPress och förbättra hastigheten på din page. För frågor och återkoppling vänligen lämna en comment under.
Ravi
Will my plugins update normally when i move their js to single file? I am a newbie.
WPBeginner Staff
There are multiple ways to do it. One that is most common is to paste JavaScript files loaded by different sources into one single JS file and then enqueue it.
Catharine
Great, thanks!
Catharine
Hi Syed, thanks for the tutorial. However I am a complete noob and have a very basic question. For that piece of code you posted (the entire function etc), do we need to add that in the functions.php file for every single bit of javascript we want to enqueue? I guess what I’m asking is, how would you format that code if you had more than one piece of javascript that was being loaded in the headers of more than one page?
Your help would be greatly appreciated!
Marc Jacobs
hi, great tutorial. I have a question though. I ran my website through Google Page Speed Insights and got the warning that I had to eliminate render blocking Javascript (and css) to boost my page speed. I read the information on this website (great read!), but I cannot seem to find the php-files where the plugin ”calls” for the js-files causing my website to lack speed. I have figured out what plug-in is causing most of the delay (Google-maps-ready), but I have no idea how to precoeed frpm there. I have searched every php-file in the plugin folder, but can’s find a js-file named remotely similar to the files mentioned in the google speed test:
…
How do I figure out what php file to edit? Help wouldbe much appreciated!
greeting,
Marc.
WPBeginner Support
A plugin on your site Google Maps Ready is adding those files.
Administratör
Basavaraj Tonagatti
Hi, I recently moved to Genesis Framework+Eleven 40 Child Theme. I am also facing the same problem while I run the Google page speed test. But as I don’t know the exact way of doing, finding it difficult to make changes. Can anyone guide me what is the exact cause on my site and how to remove this Javascript issue? (I don’t know any styling languages and I am totally unware about these code languages.)
Joseph Stanley-Hunt
Thanks heaps, I have been wondering how to do this and some other tricks (which I have also found answers to on here).
One question tho, I see there is no in-head in the paramaters. is that meaning that if the in_footer is set to false, it is registered in the head automatically?
WPBeginner Support
Yes, the default value for in_footer is false. So you need to explicitly add in_footer to true otherwise it will appear in the head.
Administratör
Mike
The plugin update immediately came to my mind too. Look forward to more advice on this.
Jason
Great article! I have been asking this questions for a long time because so many themes get penalized in Googls speed test due to java scripts loading first. Maybe others have known how to put these scripts in the footer.
Again, thanks and I will try this out and tell you how it works.
Jeremy Myers
Great tutorial.
But once we update the plugin, we will have to do this again, right? And every time the plugin updates?
Is it possible to deregister the js in functions.php and then simply reregister it in the footer somehow?
adam
Hi, thanks for this useful tips. But, how to move .js of W3 Total Cache minify on head?
That’s js location on cache in wp content, not wp plugin.
Lucca
Thx for valueable knowledge – keep up excellent work.
Raj
Nice and Simple guide. Thanks for posting this article to increase the speed of WordPress
Danyel Perales
Nice tip. Thanks for share !