Defer Parsing of Javascript - 5 Ways To Fix It & Boost Speed ​​(2023)

Som någon som försöker förstå hur man ska skjuta upp analys av Javascript tror vi att du har ett problem. Du äger eller har besökt en webbplats för någon du känner (kanske en klient?) Och det tar evigt att ladda. Och när du körde det via webbplatsens hastighetstestverktyg fick du en rekommendation som du inte är säker på hur du ska implementera.

I den här artikeln kommer vi att dela flera sätt på hur man skjuter upp Javascript och fixar den här varningen och i slutändan får webbplatsen att laddas snabbare utan att kasta det här felet!

Om du har kort tid, här är några snabba åtgärder du kan göra:

Instruktioner för hur man skjuter upp analysering av JavaScript

1. Ladda ner Async-plugin här..
2. Klicka på Plugins> Lägg till nytt> Ladda upp plugin och välj filen du just har laddat ner.
3. Klicka på Aktivera av det installerade pluginet.
4. Gå till Plugins och klicka på Inställningar för Async-plugin du just har installerat.
5. Genom att klicka på Aktivera Async Javascript, eller Applicera Async som två av de vanligaste sätten att tillämpa åtgärden.
6. Testa din webbplats för att se att allt fortfarande fungerar bra.

Varför är proceduren för att genomföra uppskjutning av Javascript viktigt? Om du inte skjuter upp analysen av Javascript, kommer din webbplats att se ut som om den laddas långsamt. Javascript är i huvudsak en viktig byggsten på webbspråket, det gör att webbutvecklare kan skapa "dynamisk" funktionalitet.

Men i de flesta fall tenderar Javascript-filer att bli ganska stora. De kan också komma in från tredjepartsservrar. Detta gör nedladdningen långsam. Men det här är bara hälften av problemet.

Det största problemet är att om det inte sker någon parsning av Javascript, blockeras webbläsaren från att visa innehåll. Webbplatsen GÖR INTE. Och hur ser detta ut för en användare? Det ser ut som att webbplatsen antingen är långsam, trasig eller helt död. 

Problemet förvärras på mobila enheter, där den tillgängliga processorkraften tillsammans med tillgänglig bandbredd gör att upplevelsen känns ännu värre.

Och vad kommer användarna som får en sådan upplevelse att göra? De kommer att studsa bort från din webbplats, för att aldrig återvända!

Om du har varit runt webbbranschen ett tag och du försöker förbättra din webbplats SEO, vet du redan att webbplatsens prestanda är avgörande för att förbättra din sökmotors synlighet.

Och om du har använt Google PageSpeed ​​Insights för att kontrollera din webbplats, förutom "skjuta upp analys av Javascript" finns det ännu mer kryptiska varningar, som den som säger "Eliminera renderingsblockerande resurser".

Denna tekniska grejer verkar ha störst inverkan på din lasthastighet! 

Eliminera?! Men hur ska jag eliminera dessa viktiga filer från min webbplats?

Oroa dig inte, vi är här för att hjälpa dig att åtgärda dessa varningar, lösa dessa problem och i slutändan få dina sidor att laddas snabbare!

För att du behöver inte ta bort dem. Allt du behöver göra är att skjuta upp analys av JavaScript.

Ta en titt på den här korta videon nedan för att se hur enkelt det är att skjuta upp analys av Javascript med hjälp av någon av metoderna nedan:

I icke-geekspeak betyder detta att du måste justera några saker i din WordPress för att låta sidan ladda ditt innehåll först innan du läser in eller analyserar dina JavaScript-filer. 

Detta beror på att om du inte skjuter upp analysering av Javascript blir det mycket svårt att göra webbplatsen, och som vi sa ovan kommer webbplatsen att se ut som den är trasig.

För att säkerställa att användaren stannar kvar på webbplatsen vill vi låta dem veta att något faktiskt händer och visa innehåll för användaren istället för att vänta på att webbläsaren gör allt tungt innan det faktiskt visas något för användaren . 

Förresten, om du vill göra din WordPress snabb, finns det några plugins som denna som kan göra en verklig skillnad i prestanda på några minuter (med liten eller ingen ansträngning).

Om du är intresserad, WP Rocket kan ställa in skjuta upp analys av Javascript och många andra justeringar för att göra din webbplats snabbare, klicka bara på bannern nedan för att kolla in den. 

Är du inte redo att använda ett plugin för tillfället? Läs vidare... 

Vad är uppskjutning av JavaScript?

Uppskjuta analys av Javascript betyder att använda "defer"Eller"async"för att undvika att en sida blockeras. Detta HTML-kommando instruerar webbläsaren att köra / analysera skript efter (skjuta upp) eller asynkront (parallellt) till sidladdningen. Detta gör att innehållet kan visas utan att vänta på att skripten ska laddas .

Genom att ställa in uppskjutning av JavaScript, kommer du att kunna låta ditt innehåll laddas snabbare och med hög prioritet.

Varför det?

Se nedan den här utmärkta förklararen som visar hur webbsidor laddas och hur JavaScript-filer i hög grad hämmar din webbplats laddningstid.

Fortsätt på videon ovan, låt oss ta en kort titt på vad som händer när någon besöker din webbplats: 

1. När en användare klickar på en länk som pekar till din webbplats kommer användarens webbläsare att begära den från din server, som din server sedan kommer att "visa" till din användares webbläsare.
2. Användarens webbläsare tar sedan emot och ser HTML-innehållet på din webbsida och börjar rendera det. Det börjar bygga din webbsida från topp till botten.
3. Om den hittar JavaScript-filer under vägen, kommer webbläsaren att stanna och hämta den (om det är en extern fil) och sedan analysera den
4. Först efter att ha hämtat och analyserat varje skript kommer det att fortsätta att ladda resten av ditt innehåll.

Du börjar förmodligen redan se var problemet ligger.

När dina sidor har många JavaScript-filer kan det påverka din webbplats enorma laddningstid - negativt.

Din användares webbläsare visar kontinuerligt laddningsikonen eller snurrhjulet medan du analyserar och laddar dina skript innan det visar ditt faktiska innehåll - detta syns särskilt i mobilwebbläsare eller användare med låghastighetsdataförbindelser.

Om det tar mer än några sekunder, särskilt om du serverar dina skript från en extern server (och den servern råkar ha problem just nu) - kommer dina besökare att bli kantiga.

Under den tiden ser din användare inget annat än en vit tom sida. Är det inte en av de mest frustrerande sakerna på internet? Allt ska vara direkt på nätet, varför måste de vänta på att din sida laddas?

Om en användare väntar mer än fyra sekunder, kommer de att bli spetsiga. Mer än 4 sekunder och din webbplats är så bra som död - användaren studsar bort till en annan webbplats.

Du har förlorat en besökare och förmodligen deras verksamhet. 

Den ytterligare komplikationen är att många gånger läggs dessa JS-filer till din webbplats med viktiga plugins och teman som du har installerat, så att du inte kan bli av med dem enkelt.

Så vad gör du?

För att lösa detta måste du skjuta upp analys av JavaScript. Detta fungerar genom att analysera dina skript när huvudinnehållet har laddats. Kolla in bilden nedan för att se exakt inverkan på laddningstiden. Som vi kan se tvingar kommandot för uppskjutning webbläsaren att köra Javascript senare, medan async tillåter att saker händer parallellt med nedladdningen.

Därför, när en användare besöker din webbplats, fortsätter din webbläsare istället att analysera allt från topp till botten men hoppa över dina JavaScript-filer för senare. På det här sättet kommer dina användare att kunna se ditt innehåll omedelbart utan att behöva vänta. 

Om du har tittat på videon ovan har du sett att attributen "async" och "defer" hjälper till.

Men hur skulle du göra det i WordPress? Och när är rätt tid att använda dem? Låt oss se och låt oss komma igång!

Analysera din webbplats

Innan vi börjar måste du veta om du måste implementera uppskjutande Javascript-fix på din webbplats eller inte. För att ta reda på om du behöver kan du använda flera verktyg som är tillgängliga online.

Några exempel är följande:

1. GTMetrix

Den här fungerar genom att kontrollera både PageSpeed- och Yslow-mätvärdena och ger dig en poäng från F till A. De ger dig också rekommendationer samt tips om hur du kan förbättra din webbplats om det finns problem. Det kommer specifikt att berätta om du behöver skjuta upp analys av JavaScript. 

Generellt sett bör poängen vara minst 71.

Bilden nedan visar en webbplats som inte behöver skjutas upp. 

2. PageSpeed-verktyg

ett verktyg som utvecklats av Google, PageSpeed ​​Insights är ett annat omfattande verktyg som ger dig omfattande information om webbplatsens prestandafrågor tillsammans med tips för att fixa dem precis som GTMetrix.

En av de bästa sakerna med det här verktyget är att det innehåller länkar till djupgående guider och resurser som hjälper dig att lösa alla dina prestationsproblem. Bilden nedan visar en webbplats som sårt behöver implementera uppskjutning av JavaScript.

3. Pingdom Tools 

Ett annat populärt verktyg för testning av webbplatser som är fritt tillgängligt för alla.

Även om det inte verkar uttryckligen berätta om du behöver skjuta upp analysering av JavaScript, kan du kontrollera hur lång tid det tog innan dina skript laddades tack vare deras omfattande resultatsida.

Bilden nedan visar en webbplats som har nästan hälften av sin sida som består av JavaScript - en bra indikator på att du kanske vill skjuta upp dina skript. 

4.  Varvy PageSpeed 

Ett annat utmärkt verktyg som kommer att berätta om din webbplats har renderingsblockerande skript.

Det bästa är att det låter dig veta exakt vad de är, precis som i bilden nedan: 

OK, cool!

Nu har du tillgång till verktyg som kan hjälpa dig att avgöra om du behöver implementera uppskjutning av JavaScript-filer.

Men du kanske frågar varför inte bara implementera den och lämna den i fred? Om du skjuter upp analyseringen av JavaScript på fel sätt kan det bryta saker och det kan vara frustrerande att fixa om du inte är tekniskt kunnig.

Att bara sätta på uppskjutningsläge betyder inte att allt är inställt på att glömmas bort och fungerar bra. Du måste kontrollera om du har gjort det rätt och se till att allt fortfarande fungerar som avsett. 

Om du till exempel använder jQuery måste du noggrant välja vilka av dina skript du ska skjuta upp eftersom det verkar finnas en Problemet med uppskjutning och jQuery.

Utöver det kommer du att upptäcka att det finns massor av frågor om Stack Overflow om jQuery, async och defer, vilket ofta handlar om hur du ska implementera defer och async, om du alls borde, till dina skript som är beroende av jQuery. 

Så, vad är resultatet? Behöver du skjuta upp dina skript?

Om så är fallet, låt oss nu ta reda på hur man skjuter upp JavaScript i WordPress!

Hur man skjuter upp analys av JavaScript i WordPress

Att skjuta upp analysen av JavaScript i WordPress kan vara ganska enkelt.

Du kan bara installera ett av tusentals plugins i WordPress-förvaret och du är redo att gå. Men det finns också avancerade sätt att göra det om du behöver mer kontroll, särskilt om du använder komplexa skript för att göra din webbplats mer engagerande och interaktiv. 

I det här avsnittet ska vi kontrollera fem olika sätt att utföra parsning av JavaScript i WordPress: via plugins, via functions.php och redigering av kod manuellt. 

Det finns så många plugins i WordPress-arkivet som kan hjälpa dig att förbättra din webbplats prestanda.

Det finns sådana som är dedikerade till en viss uppgift som att minifiera din HTML-kod och det finns plugins som försöker integrera alla prestationsrelaterade tweaks i ett plugin, till exempel att ha möjlighet att minifiera och skjuta upp CSS- och JavaScript-filer, implementera och utnyttja webbläsarcaching (som vi har behandlat omfattande i den här artikeln) och mer. 

Men inte alla plugins skapas lika. Vissa fungerar bra, andra fungerar ok, och andra fungerar inte alls och kan till och med bryta någon eller hela funktionaliteten på din webbplats. 

(Om du hellre vill att någon har upplevt att hantera detta åt dig kan du göra detta med en billig Fiverr-spelning genom att klicka på knappen nedan.)

1. Uppskjuta analys av Javascript med Async-plugin

Ärligt talat föreslår vi starkt att du väljer ett premium-plugin (som är död-billigt) men du är säker på att du inte bara fixar den här varningen utan också en hel rad problem med laddning av webbplatser.

Vi börjar med en av de mest populära som är avsedda att göra ett enda jobb som definieras av den här artikeln.

Ett av de mest populära valen för att utföra detta jobb är Async Javascript. Detta plugin fokuserar på att förbättra webbplatsens prestanda genom att justera hur dina skript laddas och som WP Rocket nedan, kommer det också med ytterligare avancerade funktioner som gör att du kan utesluta vissa skript från att skjutas upp.

Här är stegen du behöver utföra för att använda detta plugin.

1. Ladda ner Async-plugin här..
2. Klicka på Plugins> Lägg till nytt i WP-backend.
3. Klicka på Ladda upp plugin och välj filen du just har laddat ner.
4. Alternativt kan du söka efter Async Javascript och klicka installera nu.
5. Klicka på Aktivera av det installerade pluginet.
6. Gå till Plugins och klicka på Inställningar för Async-plugin du just har installerat.
7. Vi föreslår att du klickar på Aktivera Async Javascript, eller Applicera Async som två av de vanligaste sätten att tillämpa åtgärden.
8. Om dessa inte fungerar kan du prova några olika kombinationer.
9. Testa din webbplats för att se att allt fortfarande fungerar bra.

Kanske är en av dess styrkor att förutom möjligheten att utesluta vissa skript från att skjutas upp har du också möjlighet att välja vilka skript som ska skjutas upp istället:

Du kanske också märker att du har möjlighet att antingen asynkronisera eller skjuta upp ett skript. För mer information om skillnaden mellan de två kan du läsa detta Artikeln.

En unik egenskap hos detta plugin är att du kan ange att utesluta ett visst tema eller plugin.

Det finns också ett alternativ att integrera GTMetrix på din webbplats så att du alltid kan kontrollera dess prestanda. Observera att varje gång du utför ett test dras dock ett API-kredit från ditt GTMetrix-konto.

Medan vissa människor kommer att rekommendera WP uppskjuten JavaScript, det här pluginet har inte uppdaterats på mer än 3 år och har inte testats med de tre senaste stora versionerna, så vi rekommenderar starkt att du inte använder den här. Det kan fortfarande fungera, men det är inte testat, så det är en risk som du inte bör ta.

Om du har en relativt enkel webbplats och du vill förbättra dina laddningstider ytterligare, kan det här vara precis vad du behöver. Det här pluginet kräver ingen konfiguration alls - bara installera, aktivera och glömma.

Återigen, kom ihåg att den här inte rekommenderas för komplexa webbplatser som e-handel på grund av bristen på avancerade justeringsalternativ och på grund av dess ålder. Att kunna finjustera JavaScript-uppskjutningsalternativ är avgörande för stora och komplexa webbplatser.

2. WP Rocket

För närvarande det ledande WordPress-prestandapluginet där ute, erbjuder WP Rocket inte bara möjligheten att skjuta upp analys av JavaScript-filer utan även dina CSS-filer. Utöver det får du massor av andra prestandaförbättringsalternativ.

Vissa funktioner inkluderar följande: 

• Minifiering - krymper storleken på webbplatsens kod så att den laddas snabbare. Det gör det genom att ta bort vita blanksteg och andra onödiga tecken från koden utan att påverka dess kärnfunktionalitet.
• Sammankoppling - kombinerar flera CSS- och JavaScript-filer till en.
• Lat laddning - detta är uppskjutningsläget för videofiler och annat multimediainnehåll som bilder. Det fördröjer inläsning av dessa resurskrävande filer tills användaren bläddrar ner till dem.

En av de bästa sakerna med WP Rocket är att när du har installerat och aktiverat den kan du bara lämna den ensam så får du automatiskt prestationsvinster.

Du kan dock konfigurera avancerade inställningar för en ännu större prestandahöjning, men tänk på att några av dem kan ha negativa effekter på din webbplats. Och på grund av det är deras uppskjutande alternativ för JavaScript- och CSS -filer inte aktiverade som standard, för om de är försiktigalessde kan bryta saker.

Tack och lov kan du utesluta att vissa skript skjuts upp.

Du kan försöka utesluta alla dina skript först och sedan skjuta upp analysering av Javascript-filer en efter en tills du hittar den problematiska. De har omfattande dokumentation för att hjälpa dig med det. På det här sättet kommer du att kunna maximera prestandaförbättringar utan att bryta eller offra några eller alla dina webbplatsfunktioner.

WP Rocket är ett förstklassigt plugin, men med tanke på priset och funktionaliteten som tillhandahålls (inte bara uppskjutande och asynkronisering av JS-filer utan många andra optimeringar som är garanterat för att göra din webbplats snabbare), anser vi att det är mycket värt priset.

Ladda ner WP Rocket

3. Speed ​​Booster Pack

Ett annat bra allt-i-ett-prestanda-plugin som låter dig skjuta upp analys av Javascript-filer är Speed ​​Booster Pack. Det liknar WP Rocket när det gäller funktioner, men det är gratis. Den har de flesta av de grundläggande funktionerna i WP Rocket som minifiering, uppskjutande, borttagande av onödiga filer etc.

Nedan kan du se några av de funktioner som finns i plugin: 

Under fliken Avancerat kan du välja att utesluta vissa skript antingen från att flyttas till sidfoten eller från att skjutas upp eller båda. Du kan dock bara lägga till upp till 4 uteslutna skript, vilket verkligen är en begränsning för komplexa och stora webbplatser. 

Sammantaget är det ett bra gratis alternativ till WP Rocket, lämpligt för små webbplatser.

4. Använda funktioner.php tweaks

Vad händer om du inte vill använda plugins?

Det finns ett annat knep som du kan göra för att skjuta upp analys av Javascript i WordPress och det är genom att redigera tematets funktioner.php-fil.

Kopiera bara koden nedan och klistra in den längst ner i ditt temas function.php-fil: 

function defer_parsing_of_javascript ( $url ) {
  if ( FALSE === strpos( $url, '.js' ) ) return $url;
  if ( strpos( $url, 'jquery.js' ) ) return $url;
    return "$url' defer ";
}
add_filter( 'clean_url', 'defer_parsing_of_javascript', 11, 1 ); 

Tänk på att du kan förstöra din webbplats om du gör det fel, så var noga med att se till att du redigerar rätt fil i rätt tema och att du klistrar in kodavsnittet på rätt plats. Var noga med att inte radera / ändra något annat.

Tack och lov kan du skapa ett underordnat tema för att göra säkra redigeringar av din functions.php-fil. Dessutom kan du enkelt behålla alla dina anpassade ändringar i filen om du någonsin byter ut eller uppdaterar ditt tema. Här är en bra artikel som förklarar hur man skapar ett barns tema. När du väl har skapat ett underordnat tema klistrar du bara in kodavsnittet i barnets function.php-fil, sparar det och det är klart.

Läs mer: Meddelandeblockering är aktiv

5. Justera din kod manuellt

Detta kan låta skrämmande, speciellt om du inte gillar kodning men för avancerade användare är att justera koden manuellt ett utmärkt sätt att skjuta upp analys av JavaScript-filer i WordPress. 

Varvy har ett bra kodavsnitt som gör att din webbsides ursprungliga innehåll kan laddas helt innan du läser in andra externa skript. Kodavsnittet är nedan:

  funktion nedladdningJSAtOnload () {
    var element = document.createElement ("skript");
    element.src = "//www.din domän.com/defer.js";
    document.body.appendChild (element);
  }
  if (window.addEventListener)
    window.addEventListener ("load", downloadJSAtOnload, false);
  annars om (window.attachEvent)
    window.attachEvent ("onload", downloadJSAtOnload);
  annars window.onload = ladda ner JSAtOnload;

Ersätt defer.js med din egen skriptfil. När du har redigerat det för att återspegla ditt eget skript klistrar du in det precis före dina HTML-filer märka. I WordPress kan du göra det genom att redigera ditt temas footer.php-fil.

Återigen rekommenderas att du använder ett underordnat tema om du skulle skapa ändringar i dina temafiler. En liten anmärkning: redigering av sidfot.php genom barntema skiljer sig från funktioner.php: du måste kopiera hela sidfoten.php för ditt huvudtema tillsammans med dess innehåll till ditt barns tema och sedan göra / lägga till redigeringarna. 

Om du inte vill bry dig om att redigera din footer.php kan du använda ett plugin som heter Sidhuvuden och sidfötter Infoga. 

Klistra bara in kodavsnittet i rutan "Skript i sidfot", tryck på spara så får du skriptet till i det nedre området av webbplatsens kod, ovanför märka. 

Och det är alla sätt du kan skjuta upp analys av JavaScript på WordPress! Men fungerar de? Förbättrade de din webbplats prestanda? Låt oss kolla resultaten!

Testa resultaten

För att testa resultaten, gå till GTMetrix.com, PageSpeed ​​Insights och Pingdom Tools för att se om din prestationsgrad och laddningstid har förbättrats.

I GTMetrix bör din poäng vara minst 71. Ju mer desto bättre! En perfekt poäng skulle vilja ha det här :-) 

Leta efter "första färger" i PageSpeed ​​Insights:

I allmänhet, när du testar om din implementering av uppskjutning av JavaScript har resulterat i att manusen har skjutits upp, ska du sikta på gröna resultat i First Contentful Paint och First Meaningful Paint.

Jämför före och efter uppskjutning och kontrollera om de förbättras.

För Pingdom-verktyg, ta en titt i avsnittet om laddningsordning och se om de flesta, om inte alla, dina skriptfiler har laddats senast. Jämför före och efter uppskjutning och se om skriptfiler ändrade position i lastordningen (dvs. laddade de tidigare eller senare). 

Tillfredsställde resultaten dig? Om så är fallet, bra jobbat! Om inte, försök experimentera mer. Om du använde andra metoder på vår lista kan du prova att använda avancerade plugins som låter dig ytterligare anpassa dina alternativ för uppskjutning och prestanda. Dessutom kolla in några rekommendationer från Google i nästa avsnitt. De kan hjälpa dig.

Hur man skjuter upp analysering av JavaScript med hjälp av ett skript

Det finns olika tekniker som du kan använda för att skjuta upp analys av JavaScript. Nästa avsnitt diskuterar vad du behöver göra. 

Sammanfattningsvis måste du utföra följande:

1. Kopiera koden nedan och lägg till den precis före tagg i din HTML.
2. Ersätt exempel.js i koden nedan med filen som innehåller skriptet som ska skjutas upp.
3. Spara ändringarna.
4. Testa din webbplats för att se effekten.

Låt oss titta på dessa steg mer detaljerat:

• Använd ett skript för att ringa till en extern JS-fil när den första sidan är laddad. På varvy.com föreslår Patrick Sexton en metod som gör det möjligt att ladda webbplatsinnehållet innan en JS laddas (för att säkerställa att användaren först kan se innehållet). Detta säkerställer att den kritiska laddningsvägen inte påverkas av skript som orsakar renderingsblockering. Metoden innebär att skapa en extern fil som inte krävs för att visa innehållet från början. Genom att sedan lägga till följande skript strax före i HTML. I följande exempel används ett filexempel.js, som måste uppdateras i enlighet med detta. 

  <script type="text/javascript">
      function downloadJSAtOnload() {
          var element = document.createElement("script");
          element.src = "example.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;
  </script>

  När webbsidan har laddats kommer skriptet att ladda ner och köras exempel.js - problemet är att du måste skapa filen manuellt.

• Använda attributen async eller defer. JS-taggen async or uppskjuta attribut fungerar på liknande sätt - sättet de fungerar är så att de minimerar den tid där HTML-analysering slutar vänta på nedladdning och körning av skript. Asynk tillåter nedladdning av JS-filer att ske asynkront, snarare än synkront, dvs en ny tråd öppnas för nedladdning medan HTML fortsätter att analysera. Defer instruerar webbläsaren att köra skriptet EFTER att sidan har laddats. Detta är ett annat sätt att låta sidparsningen slutföras och därmed inte påverka laddningstiden. Båda dessa taggar minimerar renderingsblockering av JS. Vid användningen av båda dessa behöver JS inte vänta på att HTML ska vara klar med att analysera innan du börjar ladda ner eller köra - vilket säkerställer att sidan fortfarande laddas snabbt. Se hur utförandet sker för asynkronisering respektive uppskjutning i bilderna nedan.
  
  

• Flytta JavaScript till botten av din sida. Det tredje och sista förslaget är att flytta något <script> taggar längst ned på sidorna (särskilt om de inte är kritiska, t.ex. annonser). Denna metod är inte idealisk, eftersom webbläsaren fortfarande är upptagen tills det senaste skriptet har laddats ner helt och analyserats. Med tanke på att webbläsaren verkar upptagen kan vissa besökare inte engagera sig på sidan förrän den är helt laddad, vilket resulterar i en potentiellt negativ användarupplevelse.

Förslag från Google

Google har massor av resurser för att förbättra din webbplats prestanda. De har till och med en sida som är avsedd för att förbättra webbplatsens laddningstid för skript, som du kan kontrollera här..

I menyn till vänster kan du också hitta andra resurser som hjälper dig att förbättra webbplatsens prestanda. Se till att du också kolla in dem om din PageSpeed ​​Insights rapporterar rapporterade problem relaterade till dem.

För en översikt föreslår Google att du istället ska infoga kritiska skript och antingen asynkronisera eller skjuta upp icke-kritiska skript. Det betyder att skript som krävs av din webbplats bör inbäddas i HTML istället. Det är dock jobbet för WordPress-temat och plugin-utvecklare - men om du skulle skapa ditt tema eller plugin, kom ihåg detta.

Läs mer:  Hur man anställer (STOR) Javascript-utvecklare

Utöver det skisserade Google också ett sätt för dig att manuellt identifiera vilka av dina skript som blockerar återgivningen av din webbsida genom att ha en mycket lång laddningstid. Du kan göra det genom att använda Chromes Dev Tools ' täckning fliken.

Uppskjuta oanvänd CSS

Ett liknande problem som du kan se inträffar idag, även i Pagespeed-insiktsverktyget, är uppskjutningen av oanvänd CSS. Även om detta är ett liknande problem är dess rötter något annorlunda. I huvudsak skulle CSS behöva omstruktureras för att åtgärda detta korrekt.

{loadpostion imh-embed}

Vanliga frågor

Hur fixar jag uppskjuten analys av JavaScript i WordPress?

För att fixa uppskjutningen av Javascript i WordPress måste du göra några mindre ändringar i din kod. Du kan antingen hitta alla skript och lägga till uppskjuta tagga till dem, eller så kan du installera ett plugin som gör detta automatiskt. Du kan också skapa ett skript som laddar filerna asynkront, vilket visas i avsnittet Hur man skjuter upp analys av Javascript med hjälp av ett skriptavsnitt i den här artikeln.

Vad är defer JavaScript?

Uppskjutning av Javascript är processen att instruera webbläsarens besökare att ladda specifika filer till EFTER att sidan har laddats. Detta gör att användaren kan se innehållet på sidan mycket snabbare än om du inte genomför uppskjutning av Javascript

Vad är skillnaden mellan asynkron och defer Javascript?

Async innebär att Javascript-innehållet laddas som sin egen nya anslutning, parallellt med någon annan existerande kod. Med async skapar webbläsaren en ny bearbetningstråd som inte saktar ner några befintliga nedladdningar medan Javascript laddas ner och körs. Uppskjuta å andra sidan, ber webbläsaren att analysera skriptet efter att resten av innehållet har laddats ner. Även om detta vanligtvis är bra för hastighet, kan det finnas några problem med ditt innehåll om det hänvisar till skriptet som har skjutits upp (eftersom det inte kommer att finnas tillgängligt).

Hur förminskar jag JavaScript i WordPress?

För att minifiera Javascript i WordPress måste du implementera ett plugin som gör detta automatiskt. Du kan läsa mer om detta här.. 

Inslag Up

Och du har precis bevittnat hur man skjuter upp analys av JavaScript i WordPress.

Vi har lärt oss att det kan uppnås antingen via plugins eller via manuella tweaks. Det har massor av fördelar för din webbplats som förbättrad SEO, bättre användarupplevelse och snabbare laddningstider. Det är därför viktigt att se till att du skjuter upp så många skript som möjligt för maximala prestationsvinster.

Men kom ihåg, ha alltid en säkerhetskopia och testa mycket för att se till att du skjuter upp rätt skript! Det kan verka tråkigt men om det görs rätt är fördelarna och vinsterna enorma.

Om du verkligen vill maximera laddningshastigheten på din webbplats, föreslår vi att du lämnar den till proffsen som killarna från WP Rocket för att få maximala fördelar med detta och hundratals andra åtgärder för att få din webbplats att ladda snabbare.

Besök WP Rocket för att göra din webbplats snabbare idag  

Om författaren

Författare: David Attardwebbplats: https://www.linkedin.com/in/dattard/e-post: david@collectiveray.com

David har arbetat i eller runt online / digital industrin under de senaste 18 åren. Han har stor erfarenhet av mjukvaru- och webbdesignindustrin med WordPress, Joomla och nischer som omger dem. Som digital konsult fokuserar han på att hjälpa företag att få en konkurrensfördel med en kombination av deras webbplats och digitala plattformar som finns idag.