{"id":31612,"date":"2019-10-31T06:17:53","date_gmt":"2019-10-31T13:17:53","guid":{"rendered":"https:\/\/kinsta.com\/?p=54531"},"modified":"2019-12-30T19:20:18","modified_gmt":"2019-12-30T19:20:18","slug":"skjuter-upp-parsning-av-javascript","status":"publish","type":"post","link":"https:\/\/kinsta.com\/se\/blog\/skjuter-upp-parsning-av-javascript\/","title":{"rendered":"Hur du skjuter upp parsning av JavaScript i WordPress (4 Metoder)"},"content":{"rendered":"

Har du k\u00f6rt din WordPress-webbplats genom ett prestandatestverktyg<\/a> bara f\u00f6r att m\u00f6tas av en instruktion att skjuta upp parsning av JavaScript i WordPress?<\/p>\n

Till\u00e4mpandet av detta kan ha en positiv inverkan p\u00e5 webbplatsens laddningstider, s\u00e4rskilt f\u00f6r mobila bes\u00f6kare. Men varningen kan vara lite sv\u00e5r att f\u00f6rst\u00e5, varf\u00f6r vi kommer att f\u00f6rklara exakt vad det inneb\u00e4r att skjuta upp parsning av JavaScript och hur du kan implementera denna f\u00f6r\u00e4ndring p\u00e5 din WordPress-webbplats.<\/p>\n

Detta kommer du l\u00e4ra dig i den h\u00e4r artikeln:<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Om du bara vill hoppa direkt till handledningen kan du klicka p\u00e5 den sista l\u00e4nken i listan ovan.<\/p>\n

<\/a>Vad betyder det att skjuta upp parsning av JavaScript i WordPress?<\/h2>\n

Om du n\u00e5gonsin har k\u00f6rt din WordPress-webbplats genom Google PageSpeed Insights<\/a>, GTmetrix eller andra verktyg f\u00f6r sidhastighetstestning, har du f\u00f6rmodligen st\u00f6tt p\u00e5 f\u00f6rslaget att skjuta upp parsning av JavaScript.<\/p>\n

Men… vad betyder det egentligen? Och varf\u00f6r \u00e4r det ett viktigt prestanda-\u00f6verv\u00e4gande?<\/p>\n

I grund och botten, n\u00e4r n\u00e5gon bes\u00f6ker din WordPress-webbplats<\/a>, levererar webbplatsens server HTML-inneh\u00e5llet p\u00e5 din webbplats till bes\u00f6karens webbl\u00e4sare.<\/p>\n

Bes\u00f6karens webbl\u00e4sare b\u00f6rjar sedan l\u00e4ngst upp och g\u00e5r igenom koden f\u00f6r att rendera din webbplats. Om den, n\u00e4r den g\u00e5r fr\u00e5n topp till botten, hittar JavaScript, kommer den att v\u00e4nta med att rendera resten av sidan tills den kan h\u00e4mta och parsa JavaScript-filen.<\/p>\n

Den kommer att g\u00f6ra detta f\u00f6r varje skript som den hittar, vilket kan ha en negativ effekt p\u00e5 webbplatsens sidladdningstider eftersom bes\u00f6karen beh\u00f6ver stirra p\u00e5 en tom sk\u00e4rm medan deras webbl\u00e4sare h\u00e4mtar och parsar alla JavaScript.<\/p>\n

Om ett visst skript inte \u00e4r n\u00f6dv\u00e4ndigt f\u00f6r k\u00e4rnfunktionen p\u00e5 din webbplats (\u00e5tminstone vid den ursprungliga sidladdningen<\/em>) vill du inte att det ska komma i v\u00e4gen f\u00f6r att ladda andra, viktigare, delar av din webbplats, vilket \u00e4r anledningen till att sidhastighetsverktygen<\/a> alltid s\u00e4ger att du ska skjuta upp parsning av JavaScript.<\/p>\n

S\u00e5 vad betyder det att skjuta upp parsning av JavaScript?<\/p>\n

I huvudsak kommer din webbplats att ber\u00e4tta f\u00f6r bes\u00f6karnas webbl\u00e4sare att v\u00e4nta med att ladda ner och\/eller parsa JavaScript tills efter<\/em> att webbplatsens huvudinneh\u00e5ll redan har laddats klart. Vid den tidpunkten kan bes\u00f6kare redan se och interagera med din sida, s\u00e5 v\u00e4ntetiderna f\u00f6r att ladda ner och parsa JavaScript har inte l\u00e4ngre en s\u00e5dan negativ effekt.<\/p>\n

Genom att skynda p\u00e5 inneh\u00e5llets laddningstider<\/a> g\u00f6r du Google glad och skapar en b\u00e4ttre och snabbare upplevelse f\u00f6r dina bes\u00f6kare.<\/p>\n

S\u00e5 h\u00e4r vet du om du beh\u00f6ver skjuta upp parsning av JavaScript<\/h2>\n

F\u00f6r att testa om din WordPress-webbplats beh\u00f6ver skjuta upp parsning av JavaScript, kan du k\u00f6ra din webbplats via GTmetrix<\/a>.<\/p>\n

GTmetrix kommer att ge dig ett betyg och \u00e4ven lista specifika skript som m\u00e5ste skjutas upp:<\/p>\n

\"Skjut
Skjut upp parsning av JavaScript-test i GTmetrix<\/figcaption><\/figure>\n

<\/a>De olika metoderna f\u00f6r att skjuta upp parsning av JavaScript<\/h2>\n

Det finns n\u00e5gra olika s\u00e4tt att skjuta upp parsning av JavaScript. F\u00f6r det f\u00f6rsta finns det tv\u00e5 attribut<\/a> som du kan l\u00e4gga till i dina skript:<\/p>\n

    \n
  1. Async<\/li>\n
  2. Defer<\/li>\n<\/ol>\n

    B\u00e5da attributen l\u00e5ter bes\u00f6karnas webbl\u00e4sare ladda ner JavaScript utan att pausa HTML-parsning. Skillnaden \u00e4r dock att medan async<\/strong> inte pausar HTML-parsning f\u00f6r att h\u00e4mta skriptet (som standardbeteendet skulle), pausar den HTML-parsaren f\u00f6r att exekvera skriptet n\u00e4r det har h\u00e4mtats.<\/p>\n

    Med defer<\/strong> kommer bes\u00f6karnas webbl\u00e4sare fortfarande ladda ner skript medan de parsar HTML, men de kommer att v\u00e4nta med att parsa skriptet tills efter HTML-parsningen har slutf\u00f6rts.<\/p>\n

    Denna grafik fr\u00e5n Growing with the Web<\/a> g\u00f6r ett bra jobb med att f\u00f6rklara skillnaden:<\/p>\n

    \"Grafik
    Grafik som f\u00f6rklarar async vs defer<\/figcaption><\/figure>\n

    Ett annat alternativ, som rekommenderas av Patrick Sexton fr\u00e5n Varvy, anv\u00e4nder ett skript f\u00f6r att anropa en extern JavaScript-fil f\u00f6rst efter att den ursprungliga sidladdningen \u00e4r klar. Detta inneb\u00e4r att bes\u00f6karnas webbl\u00e4sare inte kommer att ladda ner eller exekvera n\u00e5gon JavaScript tills den ursprungliga sidladdningen \u00e4r klar.<\/p>\n

    Slutligen \u00e4r ett annat tillv\u00e4gag\u00e5ngss\u00e4tt som du kommer se att helt enkelt flytta JavaScript till l\u00e4ngst ner p\u00e5 sidan. Denna metod \u00e4r dock inte en bra l\u00f6sning eftersom \u00e4ven om din sida kommer att synas tidigare, kommer bes\u00f6karnas webbl\u00e4sare fortfarande att visa sidan som att den laddar tills alla skript \u00e4r klara. Detta kan hindra vissa bes\u00f6kare fr\u00e5n att interagera med din sida eftersom de tror att inneh\u00e5llet inte \u00e4r fullt laddat.<\/p>\n

    <\/a>Hur du skjuter upp parsning av JavaScript i WordPress (4 Metoder)<\/h2>\n

    F\u00f6r att skjuta upp parsning av JavaScript i WordPress finns det tre huvudv\u00e4gar du kan ta:<\/p>\n