Har du kört din WordPress-webbplats genom ett prestandatestverktyg bara för att mötas av en instruktion att skjuta upp parsning av JavaScript i WordPress?
Tillämpandet av detta kan ha en positiv inverkan på webbplatsens laddningstider, särskilt för mobila besökare. Men varningen kan vara lite svår att förstå, varför vi kommer att förklara exakt vad det innebär att skjuta upp parsning av JavaScript och hur du kan implementera denna förändring på din WordPress-webbplats.
Detta kommer du lära dig i den här artikeln:
Om du bara vill hoppa direkt till handledningen kan du klicka på den sista länken i listan ovan.
Vad betyder det att skjuta upp parsning av JavaScript i WordPress?
Om du någonsin har kört din WordPress-webbplats genom Google PageSpeed Insights, GTmetrix eller andra verktyg för sidhastighetstestning, har du förmodligen stött på förslaget att skjuta upp parsning av JavaScript.
Men… vad betyder det egentligen? Och varför är det ett viktigt prestanda-övervägande?
I grund och botten, när någon besöker din WordPress-webbplats, levererar webbplatsens server HTML-innehållet på din webbplats till besökarens webbläsare.
Besökarens webbläsare börjar sedan längst upp och går igenom koden för att rendera din webbplats. Om den, när den går från topp till botten, hittar JavaScript, kommer den att vänta med att rendera resten av sidan tills den kan hämta och parsa JavaScript-filen.
Den kommer att göra detta för varje skript som den hittar, vilket kan ha en negativ effekt på webbplatsens sidladdningstider eftersom besökaren behöver stirra på en tom skärm medan deras webbläsare hämtar och parsar alla JavaScript.
Om ett visst skript inte är nödvändigt för kärnfunktionen på din webbplats (åtminstone vid den ursprungliga sidladdningen) vill du inte att det ska komma i vägen för att ladda andra, viktigare, delar av din webbplats, vilket är anledningen till att sidhastighetsverktygen alltid säger att du ska skjuta upp parsning av JavaScript.
Så vad betyder det att skjuta upp parsning av JavaScript?
I huvudsak kommer din webbplats att berätta för besökarnas webbläsare att vänta med att ladda ner och/eller parsa JavaScript tills efter att webbplatsens huvudinnehåll redan har laddats klart. Vid den tidpunkten kan besökare redan se och interagera med din sida, så väntetiderna för att ladda ner och parsa JavaScript har inte längre en sådan negativ effekt.
Genom att skynda på innehållets laddningstider gör du Google glad och skapar en bättre och snabbare upplevelse för dina besökare.
Så här vet du om du behöver skjuta upp parsning av JavaScript
För att testa om din WordPress-webbplats behöver skjuta upp parsning av JavaScript, kan du köra din webbplats via GTmetrix.
GTmetrix kommer att ge dig ett betyg och även lista specifika skript som måste skjutas upp:
De olika metoderna för att skjuta upp parsning av JavaScript
Det finns några olika sätt att skjuta upp parsning av JavaScript. För det första finns det två attribut som du kan lägga till i dina skript:
- Async
- Defer
Båda attributen låter besökarnas webbläsare ladda ner JavaScript utan att pausa HTML-parsning. Skillnaden är dock att medan async inte pausar HTML-parsning för att hämta skriptet (som standardbeteendet skulle), pausar den HTML-parsaren för att exekvera skriptet när det har hämtats.
Med defer kommer besökarnas webbläsare fortfarande ladda ner skript medan de parsar HTML, men de kommer att vänta med att parsa skriptet tills efter HTML-parsningen har slutförts.
Denna grafik från Growing with the Web gör ett bra jobb med att förklara skillnaden:
Ett annat alternativ, som rekommenderas av Patrick Sexton från Varvy, använder ett skript för att anropa en extern JavaScript-fil först efter att den ursprungliga sidladdningen är klar. Detta innebär att besökarnas webbläsare inte kommer att ladda ner eller exekvera någon JavaScript tills den ursprungliga sidladdningen är klar.
Slutligen är ett annat tillvägagångssätt som du kommer se att helt enkelt flytta JavaScript till längst ner på sidan. Denna metod är dock inte en bra lösning eftersom även om din sida kommer att synas tidigare, kommer besökarnas webbläsare fortfarande att visa sidan som att den laddar tills alla skript är klara. Detta kan hindra vissa besökare från att interagera med din sida eftersom de tror att innehållet inte är fullt laddat.
Hur du skjuter upp parsning av JavaScript i WordPress (4 Metoder)
För att skjuta upp parsning av JavaScript i WordPress finns det tre huvudvägar du kan ta:
- Plugin – Det finns några bra gratis och premiumplugins för WordPress för att skjuta upp JavaScript-parsning. Vi visar dig hur du gör det med två populära plugins.
- Varvy-metoden – om du är tekniskt kunnig kan du redigera webbplatsens kod direkt och använda kodavsnittet från Varvy.
- php-filen – du kan lägga till ett kodavsnitt till ditt barntemas functions.php-fil för att automatiskt skjuta upp skript.
Du kan klicka ovan för att hoppa direkt till din föredragna metod eller läsa igenom alla tekniker för att hitta den som är bäst för dig.
1. Gratispluginet Async JavaScript
Async JavaScript är ett gratis WordPressplugin från Frank Goossens, samma kille som ligger bakom det populära pluginet Autoptimize.
Det ger dig ett enkelt sätt att skjuta upp parsning av JavaScript med antingen async eller defer.
För att komma igång, kan du installera och aktivera gratispluginet från WordPress.org. Gå sedan till Inställningar → Async JavaScript för att konfigurera pluginet.
Överst kan du aktivera pluginets funktionalitet och välja mellan async och defer. Kom ihåg:
- Async hämtar JavaScript medan du fortfarande parsar HTML men pausar sedan HTML-parsningen för att exekvera JavaScript.
- Defer hämtar JavaScript medan du fortfarande parsar HTML och väntar med att exekvera det tills efter HTML-parsningen är klar.
Längre ner kan du också välja hur det ska hantera jQuery. Många teman och plugins är starkt beroende av jQuery, så om du försöker skjuta upp parsning av jQuery-skript kan du bryta någon av webbplatsens kärnfunktionaliteter. Det säkraste sättet är att utesluta jQuery, men du kan experimentera med att skjuta upp det. Se bara till att testa din webbplats noggrant.
Längre ner kan du också manuellt inkludera eller utesluta specifika skript från att skjutas upp, inklusive en trevlig användarvänlig funktion för att låta dig rikta in dig på specifika teman eller plugins som är aktiva på din webbplats:
2. Använd pluginet WP Rocket
Även om vi inte tillåter de flesta cachningsplugins på Kinsta, tillåter vi WP Rocket-pluginet eftersom det innehåller en inbyggd integration för att leka snällt med Kinstas cachningslösning på servernivå.
Förutom en massa andra prestandaoptimeringstekniker kan WP Rocket hjälpa dig att skjuta upp parsningen av JavaScript på fliken Filoptimering i WP Rocket-panelen. Leta efter alternativet Ladda JavaScript uppskjuten i avsnittet JavaScript-filer.
Liksom Async JavaScript-pluginet, låter WP Rocket dig också utesluta jQuery för att undvika problem med webbplatsens innehåll:
3. Använd Varvys rekommenderade metod (kod)
Tidigare nämnde vi att Patrick Sexton av Varvy rekommenderar att du använder ett kodavsnitt som väntar på att både ladda ner och exekvera JavaScript tills efter att din webbplats fullbordat sin första sidladdning.
Du kan implementera den här metoden genom att justera kodavsnittet som Varvy tillhandahåller och sedan lägga till skriptet i ditt tema omedelbart innan den avslutande </body>-taggen.
Här är koden från Varvy:
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
Se till att ersätta ”defer.js ” med det faktiska filnamnet/sökvägen till JavaScript-filen som du vill skjuta upp. Sedan kan du använda wp_footer-kroken för att injicera koden via ditt barntemas functions.php-fil.
Med detta tillvägagångssätt skulle du slå in Varvys kod i något som detta:
function defer_parsing_of_js( $url ) {
if ( is_user_logged_in() ) return $url; //don't break WP Admin
if ( FALSE === strpos( $url, '.js' ) ) return $url;
if ( strpos( $url, 'jquery.js' ) ) return $url;
return str_replace( ' src', ' defer src', $url );
}
add_filter( 'script_loader_tag', 'defer_parsing_of_js', 10 );I huvudsak talar detta kodavsnitt om för WordPress att lägga till attributet defer till alla dina JavaScript-filer utom jQuery.
Det är snabbt och enkelt, men det ger dig inte den granulära kontrollnivån som något som Async JavaScript-pluginet erbjuder.
Sammanvattning
Att skjuta upp parsning av JavaScript på din WordPress-webbplats är en viktig prestandaåtgärd.
När du har använt en av metoderna ovan för att skjuta upp parsning av JavaScript i WordPress, rekommenderar vi att du gör två saker:
- Testa din webbplats för att se till att uppskjutande av vissa skript inte har brutit viktigt innehåll längst upp på sidan. Återigen kan detta vanligtvis hända med jQuery, varför många verktyg låter dig utesluta jQuery.js. Det kan dock hända med andra skript också.
- Kör din webbplats via GTmetrix igen för att se till att din webbplats skjuter upp så många skript som möjligt (Du kanske inte får en perfekt poäng om du utesluter jQuery – men din poäng borde vara bättre).
Har du några frågor om hur man skjuter upp parsning av JavaScript i WordPress? Fråga i kommentarerna!
Brian har stor passion för WordPress och har använt det i över ett årtionde, han har till och med utvecklat ett par premium-plugins. Brian gillar att blogga, kolla filmer och hiking. Ta kontakt med Brian via Twitter.
Lämna ett svar