[Komplett guide] Slik løser du utsetting av parsing av Javascript på WordPress (5 måter)

[Hvordan] Løs utsettelse av parsing av Javascript-advarsel i WordPress

Som noen som prøver å forstå hvordan man kan utsette analysering av Javascript, tror vi at du har et problem. Du eier eller har besøkt et nettsted til noen du kjenner (kanskje en klient?), Og det tar evig tid å laste det inn. Og da du kjørte det gjennom verktøy for hastighetstesting på nettstedet, fikk du en anbefaling som du ikke er sikker på hvordan du skal implementere.

I denne artikkelen skal vi dele flere måter å utsette Javascript og fikse denne advarselen og til slutt få nettstedet til å lastes raskere uten å kaste denne feilen!

Hvis du har kort tid, er det noen raske handlinger du kan gjøre:

Instruksjoner for hvordan du kan utsette parsing av JavaScript

  1. Last ned Async-plugin her..
  2. Klikk på Plugins> Legg til ny> Last opp plugin og velg filen du nettopp har lastet ned.
  3. Klikk på Aktiver av det installerte pluginet.
  4. Gå til Plugins og klikk på innstillinger for Async-pluginet du nettopp har installert.
  5. Ved å klikke på Aktiver Async Javascripteller Påfør Async som to av de vanligste måtene å bruke løsningen på.
  6. Test nettstedet ditt for å se at alt fortsatt fungerer bra.

 

GTMetrix - Utsett parsing av JavaScript-advarsel

 

Hvorfor er prosedyren for å implementere utsetting av Javascript viktig? Hvis du ikke utsetter analysering av Javascript, vil nettstedet ditt virke som om det lastes sakte. Javascript er egentlig en viktig byggestein på språket på nettet, det lar webutviklere lage "dynamisk" funksjonalitet.

Imidlertid har Javascript-filer i de fleste tilfeller en tendens til å bli ganske store. De kan også trekke inn fra tredjeparts servere. Dette gjør nedlastingen treg. Men dette er bare halvparten av problemet.

Det største problemet er at hvis det ikke er noen utsettelse av Javascript, blokkeres nettleseren fra å vise innhold. Nettstedet GJØR IKKE. Og hvordan ser dette ut for en bruker? Det ser ut til at siden enten er treg, ødelagt eller helt død. 

Problemet er sammensatt på mobile enheter, der den tilgjengelige prosessorkraften, sammen med den tilgjengelige båndbredden, gjør opplevelsen enda verre.

Og hva vil brukerne som får en slik opplevelse gjøre? De vil sprette vekk fra nettstedet ditt og aldri komme tilbake!

Hvis du har vært rundt nettbransjen en stund og prøver å forbedre nettstedets SEO, vet du allerede at nettstedsytelsen er avgjørende for å forbedre synligheten til søkemotoren.

Og hvis du har brukt Google PageSpeed ​​Insights for å sjekke nettstedet ditt, er det i tillegg til "utsette parsing av Javascript" enda flere kryptiske advarsler, for eksempel den som sier "Eliminer render-blokkerende ressurser".

Fjern gjengivelsesblokkerende ressurser

 

Disse tekniske tingene ser ut til å ha størst innvirkning på lasthastigheten din! 

Eliminere?! Men hvordan skal jeg eliminere disse viktige filene fra nettstedet mitt?

Ikke bekymre deg, vi er her for å hjelpe deg med å løse disse advarslene, løse disse problemene og til slutt få sidene dine til å lastes raskere!

Fordi du trenger ikke å fjerne dem. Alt du trenger å gjøre er å utsette parsing av JavaScript.

Ta en titt på denne korte videoen nedenfor for å se hvor enkelt det er å utsette parsing av Javascript ved å bruke en av metodene nedenfor:

mZNfo71y1_8

I ikke-geekspeak, hva dette betyr er at du trenger å tilpasse noen få ting i WordPress, for å la siden la innholdet lastes først før du laster inn eller parser JavaScript-filene dine. 

Dette skyldes at hvis du ikke utsetter analysering av Javascript, blir gjengivelse av nettstedet en veldig tung operasjon, og som vi sa ovenfor, vil nettstedet se ut som det er ødelagt.

For å sikre at brukeren forblir på nettstedet, vil vi gi dem beskjed om at noe faktisk skjer, og vise innhold til brukeren, i stedet for å vente på at nettleseren skal gjøre alt tungt løftet før det faktisk vises noe til brukeren . 

Forresten, hvis du ønsker å gjøre WordPress raskt, er det noen få plugins som dette som kan utgjøre en reell forskjell i ytelse på få minutter (med liten eller ingen innsats).

Hvis du er interessert, WP Rocket kan sette opp utsetting av parsing av Javascript og mange andre justeringer for å gjøre nettstedet ditt raskere, bare klikk på banneret nedenfor for å sjekke det ut. 

Gjør nettstedet ditt raskereEr du ikke klar til å bruke et plugin for nå? Les videre... 

Hva er utsettelse av JavaScript?

utsette parsing av javascript visual

Utsette parsing av Javascript betyr å bruke "defer"Eller"async"for å unngå gjengivelse av en side. Denne HTML-kommandoen instruerer nettleseren om å utføre / analysere skriptene etter (utsette) eller asynkront (parallelt) til sideinnlasting. Dette gjør at innholdet kan vises uten å vente på at skriptet skal lastes inn .

Ved å sette opp utsetting av JavaScript, vil du kunne la innholdet lastes raskere og med høy prioritet.

Hvorfor er det?

Se nedenfor denne utmerkede forklareren som viser hvordan websider lastes inn og hvordan JavaScript-filer i stor grad hindrer nettstedets lastetid.

BmuFBYw91UQ

Fortsett på videoen ovenfor, la oss ta en kort titt på hva som skjer når noen besøker nettstedet ditt: 

  1. Når en bruker klikker på en lenke som peker til nettstedet ditt, vil brukerens nettleser be om det fra serveren din, som serveren din vil “servere” til brukerens nettleser.
  2. Brukerens nettleser mottar og ser deretter HTML-innholdet på websiden din og begynner å gjengi den. Det begynner å bygge websiden din fra topp til bunn.
  3. Hvis den finner JavaScript-filer underveis, vil nettleseren stoppe og hente den (hvis det er en ekstern fil), og deretter analysere den
  4. Først etter fullstendig henting og parsering av hvert eneste skript, vil det fortsette å laste inn resten av innholdet ditt.

Du begynner sannsynligvis allerede å se hvor problemet ligger.

Når sidene dine har mange JavaScript-filer, kan det påvirke lastetiden til nettstedet ditt - negativt.

Brukerens nettleser vil kontinuerlig vise lasteikonet eller spinnehjulet mens du analyserer og laster skriptene dine før den viser ditt faktiske innhold - dette er spesielt synlig i mobile nettlesere eller brukere med lavhastighets datatilkoblinger.

Hvis det tar mer enn noen få sekunder, spesielt hvis du serverer skriptene dine fra en ekstern server (og den serveren tilfeldigvis har problemer for øyeblikket) - vil de besøkende begynne å bli edgy.

I løpet av den tiden ser brukeren bare annet enn en hvit blank side. Er det ikke noe av det mest frustrerende på internett? Alt skal være øyeblikkelig på nettet, hvorfor må de vente på at siden din skal lastes inn?

Hvis en bruker venter mer enn 4 sekunder, vil de begynne å bli edgy. Utover 8 sekunder, og nettstedet ditt er så godt som død - brukeren spretter bort til et annet nettsted.

Du har mistet en besøkende, og sannsynligvis deres virksomhet. 

Den ekstra komplikasjonen er at mange av disse JS-filene blir lagt til på nettstedet ditt med viktige plugins og temaer som du har installert, slik at du ikke akkurat kan bli kvitt dem lett.

Så hva gjør du?

For å løse dette må du utsette parsing av JavaScript. Dette fungerer ved å analysere skriptene dine når hovedinnholdet er lastet inn. Sjekk ut det visuelle under for å se nøyaktig innvirkningen på lastetiden. Som vi kan se, tvinger kommandoen med utsettelse nettleseren til å utføre Javascript senere, mens asynkroniseringen lar ting skje parallelt med nedlastingen.

Derfor, når en bruker besøker nettstedet ditt, vil nettleseren din i stedet fortsette å analysere alt fra topp til bunn, men hoppe over JavaScript-filene dine til senere. På denne måten vil brukerne dine kunne se innholdet ditt umiddelbart uten å måtte vente. 

Hvis du har sett på videoen ovenfor, har du sett at attributtene "asynkronisering" og "utsettelse" hjelper sterkt.

Men hvordan ville du gjort det i WordPress? Når er det rette tidspunktet å bruke dem? La oss se og la oss komme i gang!

Analyser nettstedet ditt

Før vi begynner, må du vite om du må implementere utsett Javascript-reparasjonen på nettstedet ditt eller ikke. For å finne ut om du trenger det, kan du bruke flere verktøy som er lett tilgjengelige online.

Noen eksempler er følgende:

1. GTMetrix

Denne fungerer ved å sjekke både PageSpeed- og Yslow-beregningene og gi deg en poengsum fra F til A. De gir deg også anbefalinger samt tips om hvordan du kan forbedre nettstedet ditt hvis problemer blir funnet. Det vil spesifikt fortelle deg om du trenger å utsette parsing av JavaScript. 

Generelt sett skal poengsummen være minst 71.

Bildet nedenfor viser et nettsted som ikke trenger utsettelse. 

God utsettelsespoeng på GTMetrix

2. PageSpeed-verktøy

et verktøy utviklet av Google, PageSpeed ​​Insights er et annet omfattende verktøy som gir deg omfattende informasjon om nettstedets ytelsesproblemer sammen med tips for å fikse dem akkurat som GTMetrix.

En av de beste tingene med dette verktøyet er at det inneholder lenker til grundige guider og ressurser for å hjelpe deg med å løse alle ytelsesproblemene dine. Bildet nedenfor viser et nettsted som sårt trenger å implementere utsetting av JavaScript.

Gagespeed-innsikt - betydelig innvirkning på lastetiden

3. Pingdom Tools 

Et annet populært ytelsesprøveverktøy på nettstedet som er fritt tilgjengelig for alle.

Selv om det ikke ser ut til å fortelle deg eksplisitt om du trenger å utsette parsing av JavaScript, kan du sjekke hvor lang tid det tok før skriptene dine ble lastet inn, takket være deres omfattende resultatside.

Bildet nedenfor viser et nettsted som har nesten halvparten av siden som består av JavaScript - en flott indikator på at du kanskje vil utsette skriptene dine. 

Pingdom verktøy js score

4.  Varvy PageHastighet 

Et annet utmerket verktøy som vil fortelle deg om nettstedet ditt har render-blokkerende skript.

Det beste er at den lar deg vite nøyaktig hva de er, akkurat som på bildet nedenfor: 

Renderblokkerende skript som påvirker ytelsen

Ok kult!

Nå har du tilgang til verktøy som kan hjelpe deg med å avgjøre om du trenger å implementere utsetting av parsing av JavaScript-filer.

Men du spør kanskje hvorfor ikke bare implementere den og la den være i fred? Hvis du utsetter analysering av JavaScript feil, kan det ødelegge ting, og det kan være frustrerende å fikse hvis du ikke er teknisk kunnskapsrik.

Bare å slå på utsettelsesmodus betyr ikke at alt er satt til å bli glemt og vil fungere bra. Du må sjekke om du har gjort det riktig og sørge for at alt fremdeles fungerer som forutsatt. 

Hvis du for eksempel bruker jQuery, må du nøye velge hvilke av skriptene du skal utsette fordi det ser ut til å være en problem med utsettelse og jQuery.

I tillegg til det, vil du oppdage at det er mange spørsmål om Stack Overflow om jQuery, async og utsettelse, som ofte handler om hvordan du skal implementere utsettelse og asynkronisering, hvis du i det hele tatt skulle, til skriptene dine som er avhengige av jQuery. 

Så, hva er resultatene? Trenger du å utsette manusene dine?

La oss i så fall finne ut hvordan du kan utsette JavaScript i WordPress!

Hvordan utsette parsing av JavaScript i WordPress

Det kan være ganske greit å utsette analyseringen av JavaScript på WordPress.

Du kan bare installere en av de tusenvis av plugins i WordPress-depotet, og du er klar. Men det er også avanserte måter å gjøre det på hvis du trenger mer kontroll, spesielt hvis du bruker komplekse skript for å gjøre nettstedet ditt mer engasjerende og interaktivt. 

I denne delen skal vi sjekke fem forskjellige måter å utføre utsetting av JavaScript på WordPress: via plugins, via functions.php, og redigere kode manuelt. 

Det er så mange plugins i WordPress-depotet som kan hjelpe deg med å forbedre nettstedets ytelse.

Det er de som er dedikert til en bestemt oppgave, som å minifisere HTML-koden din, og det er plugins som prøver å innlemme alle ytelsesrelaterte tweaks i ett plugin, for eksempel å ha muligheten til å minifisere og utsette CSS- og JavaScript-filer, implementere og utnytte nettleserbufring (som vi har omtalt grundig i denne artikkelen) og mer. 

Imidlertid er ikke alle plugins opprettet like. Noen fungerer bra, noen fungerer ok, og noen fungerer ikke i det hele tatt, og kan til og med ødelegge noen eller all funksjonalitet på nettstedet ditt. 

(Hvis du helst vil at noen har opplevd å håndtere dette for deg, kan du få dette gjort med en billig Fiverr-konsert ved å klikke på knappen nedenfor.)

Fiverr

Klikk her for å finne billige Fiverr-konserter som hjelper deg med å løse dette

1. Utsett parsing av Javascript ved hjelp av Async Plugin

Ærlig talt vil vi sterkt anbefale å velge et premium-plugin (som er død billig), men du er sikker på at du ikke bare løser denne advarselen, men en hel rekke problemer med lasting av nettsteder.

Vi starter med en av de mest populære som er ment å gjøre en enkelt jobb definert av denne artikkelen.

Et av de mest populære valgene for å utføre denne jobben er Async Javascript. Dette pluginet fokuserer på å forbedre nettstedets ytelse ved å tilpasse hvordan skriptene dine lastes inn, og som WP Rocket nedenfor, kommer det også med flere avanserte funksjoner som lar deg utelukke visse skript fra å bli utsatt.

Her er trinnene du trenger å utføre for å bruke dette pluginet.

  1. Last ned Async-plugin her..
  2. Klikk på Plugins> Legg til nytt i WP-backend.
  3. Klikk på Last opp plugin og velg filen du nettopp har lastet ned.
  4. Alternativt, søk etter Async Javascript og klikk Installer nå.
  5. Klikk på Aktiver av det installerte pluginet.
  6. Gå til Plugins og klikk på innstillinger for Async-pluginet du nettopp har installert.
  7. Vi foreslår at du klikker på Aktiver Async Javascripteller Påfør Async som to av de vanligste måtene å bruke løsningen på.
  8. Hvis disse ikke fungerer, kan du prøve noen forskjellige kombinasjoner.
  9. Test nettstedet ditt for å se at alt fortsatt fungerer bra.

async javascript plugin-innstillinger

Kanskje en av styrkene er at bortsett fra muligheten til å ekskludere visse skript fra å bli utsatt, har du også muligheten til å velge hvilke skript som skal utsettes i stedet:

Asynkroniser javascript ekskluderer

Du kan også legge merke til at du har muligheten til å enten synkronisere eller utsette et skript. For mer informasjon om forskjellen mellom de to, kan du lese dette Artikkel.

En unik funksjon i dette pluginet er at du kan spesifisere for å ekskludere et bestemt tema eller plugin.

Det er også et alternativ å integrere GTMetrix på nettstedet ditt, slik at du alltid kan sjekke ytelsen. Vær oppmerksom på at hver gang du utfører en test, vil det imidlertid bli trukket en API-kreditt fra GTMetrix-kontoen din.

gtmetrix test

Mens noen mennesker vil anbefale WP utsatt JavaScript, dette pluginet har ikke blitt oppdatert på mer enn 3 år og har ikke blitt testet med de tre siste store versjonene, så vi anbefaler på det sterkeste at du ikke bruker denne. Det kan fortsatt fungere, men det er uprøvd, så det er en risiko du ikke bør ta.

Hvis du har et relativt enkelt nettsted og ønsker å forbedre lastetiden din ytterligere, kan dette være akkurat det du trenger. Dette pluginet krever ingen konfigurasjon i det hele tatt - bare installer, aktiver og glem.

WP-utsatt javascript-plugin

Igjen, husk at denne ikke anbefales for komplekse nettsteder som e-handel på grunn av mangelen på avanserte justeringsalternativer og på grunn av alderen. Å kunne finjustere JavaScript-utsettelsesalternativer er avgjørende for store og komplekse nettsteder.

2. WP rakett

For tiden er det ledende WordPress-ytelsesprogrammet der, WP Rocket tilbyr ikke bare muligheten til å utsette parsing av JavaScript-filer, men også CSS-filene dine. I tillegg til det får du mange andre muligheter for ytelsesforbedring.

Noen funksjoner inkluderer følgende: 

  • Minifisering - krymper størrelsen på nettstedets kode slik at den lastes raskere. Det gjør det ved å fjerne hvite mellomrom og andre unødvendige tegn fra koden uten å påvirke kjernefunksjonaliteten.
  • Sammenkobling - kombinerer flere CSS- og JavaScript-filer til en.
  • Lazy loading - dette er utsettelsesmodus for videofiler og annet multimediainnhold som bilder. Det forsinker innlastingen av disse ressurskrevende filene til etter at brukeren ruller ned til dem.

En av de beste tingene med WP Rocket er at når du har installert og aktivert den, kan du bare la den være i fred, så får du automatisk ytelsesgevinster.

Du kan imidlertid konfigurere avanserte innstillinger for et enda større ytelsesøkning, men husk at noen av dem kan ha negative effekter på nettstedet ditt. Og på grunn av det er deres utsettelsesalternativ for JavaScript- og CSS -filer ikke aktivert som standard, fordi hvis det er gjort forsiktiglessde kan ødelegge ting.

WP-rakett gjengir blokkerende css js

Heldigvis kan du ekskludere visse skript fra å bli utsatt.

Du kan prøve å ekskludere alle skriptene dine først og deretter utsette parsing av Javascript-filer en etter en til du finner den problematiske. De har omfattende dokumentasjon for å hjelpe deg med det. På denne måten vil du kunne maksimere ytelsesforbedringene uten å ødelegge eller ofre noen eller alle funksjonene til nettstedet ditt.

WP Rocket er et førsteklasses plugin, men gitt prisen og funksjonaliteten som tilbys (ikke bare utsettelse og asynkronisering av JS-filer, men mange andre optimaliseringer som er garantert for å gjøre nettstedet ditt raskere), mener vi det er veldig verdt prisen.

Last ned WP Rocket

3. Speed ​​Booster Pack

En annen flott alt-i-ett ytelsesplugg som lar deg utsette parsing av Javascript-filer er Speed ​​Booster Pack. Det ligner på WP Rocket når det gjelder funksjoner, men det er gratis. Den har de fleste grunnleggende funksjonene i WP Rocket som minifisering, utsettelse, fjerning av unødvendige filer, etc.

Nedenfor kan du se noen av funksjonene som er tilgjengelige i pluginet: 

Speed ​​booster-pakke 

Under fanen Avansert kan du velge å ekskludere noen skript enten fra å bli flyttet til bunnteksten eller fra å bli utsatt eller begge deler. Du kan imidlertid bare legge til opptil 4 ekskluderte skript, noe som absolutt er en begrensning for komplekse og store nettsteder. 

Speed ​​booster pack limit

Samlet sett er det et godt gratis alternativ til WP Rocket, egnet for små nettsteder.

4. Bruke funksjoner.php tweaks

Hva om du ikke vil bruke plugins?

Det er et annet triks du kan gjøre for å utsette parsing av Javascript i WordPress, og det er ved å redigere temaets functions.php-fil.

Bare kopier koden nedenfor og lim den inn nederst i temaets 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 ); 

functions.php redigere

Husk at du kan ødelegge nettstedet ditt hvis du gjør det galt, så vær nøye og sørg for at du redigerer riktig fil i riktig tema, og at du limer inn kodebiten på riktig sted. Pass på at du ikke sletter / endrer noe annet.

Heldigvis kan du opprette et barnetema for å gjøre trygge redigeringer av funksjonene.php-filen din. I tillegg til det, hvis du noen gang erstatter eller oppdaterer temaet ditt, kan du enkelt beholde alle dine tilpassede endringer i filen. Her er en flott artikkel som forklarer hvordan du lager et barnetema. Når du har opprettet et barnetema, er det bare å lime inn kodebiten i barnets function.php-fil, lagre den og alt er klart.

5. Juster koden din manuelt

Dette kan høres skummelt ut, spesielt hvis du ikke er glad i koding, men for avanserte brukere er å finjustere koden manuelt en fin måte å utsette parsing av JavaScript-filer på WordPress. 

Varvy har et flott kodebit som gjør at nettsidens opprinnelige innhold kan lastes helt inn før du laster inn andre eksterne skript. Kodebiten er under:


  funksjon nedlastningJSAtOnload () {
    var element = document.createElement ("skript");
    element.src = "//www.yourdomain.com/defer.js";
    document.body.appendChild (element);
  }
  if (window.addEventListener)
    window.addEventListener ("load", downloadJSAtOnload, false);
  annet hvis (window.attachEvent)
    window.attachEvent ("onload", downloadJSAtOnload);
  annet window.onload = last nedJSAtOnload;

Erstatt defer.js med din egen skriptfil. Når du har redigert det for å gjenspeile ditt eget skript, limer du det rett før HTML-ene stikkord. I WordPress kan du gjøre det ved å redigere temaets footer.php-fil.

Igjen anbefales det å bruke et barnetema hvis du skulle lage redigeringer i temafilene dine. Et lite notat: redigering av footer.php gjennom barnetema er forskjellig fra functions.php: du må kopiere hele footer.php av hovedtemaet sammen med innholdet til barnetemaet ditt og deretter gjøre / legge til redigeringene. 

Hvis du ikke vil bry deg med å redigere footer.php, kan du bruke et plugin som heter Topp- og bunntekst Sett

Sett inn topptekst og bunntekst

Bare lim inn kodebiten i "Skript i bunntekst" -boksen, trykk på lagre, så får du skriptet lagt til nederst i koden til nettstedet ditt, over stikkord. 

Og det er alle måtene du kan utsette parsing av JavaScript på WordPress! Men fungerer de? Forbedret de ytelsen til nettstedet ditt? La oss sjekke resultatene!

Testing av resultatene

For å teste resultatene, gå til GTMetrix.com, PageSpeed ​​Insights og Pingdom Tools for å se om ytelsesgraden og lastetiden ble bedre.

I GTMetrix skal poengsummen din være minst 71. Jo mer jo bedre! En perfekt poengsum vil like dette :-) 

perfekt utsettingspoeng 

I PageSpeed ​​Insights, se etter "første maling":

Pagespeed innsikt god poengsum

Generelt, når du tester om implementeringen av utsetting av parsing av JavaScript har resultert i at manusene blir utsatt, må du sikte på grønne resultater i First Contentful Paint og First Meaningful Paint.

Sammenlign før og etter utsettelse og sjekk om de forbedres.

For Pingdom Tools, ta en titt i lastrekkefølgen og se om de fleste, om ikke alle, skriptfilene dine er lastet inn sist. Sammenlign før og etter utsettelse, og se om skriptfiler endret plassering i lastrekkefølgen (dvs. lastet de inn tidligere eller senere). 

Tilfredsstilte resultatene deg? I så fall god jobb! Hvis ikke, prøv å eksperimentere mer. Hvis du brukte andre metoder på listen vår, kan du prøve å bruke avanserte plugins som lar deg tilpasse utsettelses- og ytelsesalternativene dine ytterligere. Videre, sjekk ut noen anbefalinger fra Google i neste avsnitt. De kan hjelpe deg.

 

Hvordan utsette analysering av JavaScript ved hjelp av et skript

Det er forskjellige teknikker du kan bruke for å utsette parsing av JavaScript. Den neste delen diskuterer hva du trenger å gjøre. 

Oppsummert må du utføre følgende:

  1. Kopier koden nedenfor og legg den til rett før tag i HTML-en.
  2. Erstatt example.js i koden nedenfor med filen som inneholder skriptet som skal utsettes.
  3. Lagre endringene.
  4. Test nettstedet ditt for å se effekten.

La oss se nærmere på disse trinnene:

  • Bruk et skript for å ringe til en ekstern JS-fil når den første siden er lastet inn. På varvy.com foreslår Patrick Sexton en metode som gjør at innholdet på nettstedet kan lastes inn, før det lastes inn en JS (for å sikre at brukeren kan se innholdet først). Dette sikrer at den kritiske lastestien ikke påvirkes av skript som forårsaker gjengivelsesblokkering. Metoden innebærer å lage en ekstern fil som ikke er nødvendig for å vise innholdet i utgangspunktet. Ved å legge til følgende skript rett før i HTML-koden. Følgende eksempel bruker et fileksempel.js, som må oppdateres tilsvarende. 

    <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 nettsiden er lastet inn, begynner skriptet å lastes ned og kjøres eksempel.js - problemet er at du må opprette filen manuelt.

  • Bruke asynkroniserings- eller utsettelsesattributtene. JS-koden async or utsette attributter fungerer på lignende måte - måten de fungerer på, er slik at de minimerer tiden hvor HTML-parsing stopper for å vente på nedlasting og utføring av skript. Asynkronisering tillater nedlasting av JS-filer å forekomme asynkront, i stedet for synkront, dvs. en ny tråd åpnes for nedlasting mens HTML fortsetter å analysere. Defer instruerer nettleseren om å utføre skriptet ETTER at siden er lastet inn. Dette er en annen måte å la sideparseringen fullføre, og dermed ikke påvirke lastetiden. Begge disse kodene minimerer gjengivelsesblokkering av JS. I bruken av begge disse trenger ikke JS å vente på at HTML-en skal være ferdig med å analysere før du begynner å laste ned eller utføre - noe som sikrer at siden fortsatt lastes raskt. Se hvordan utførelsen skjer for henholdsvis asynkronisering og utsettelse i bildene nedenfor.
    asynk. attributt
    utsette attributt

  • Flytt JavaScript til bunnen av siden din. Det tredje og siste forslaget er å flytte noe <script> tagger nederst på sidene (spesielt hvis de ikke er kritiske, for eksempel annonser). Denne metoden er ikke ideell, fordi nettleseren fortsatt vil være opptatt til det siste skriptet har blitt fullstendig lastet ned og blitt analysert. Gitt at nettleseren virker opptatt, kan det hende at noen besøkende ikke engasjerer seg i siden før den er fullstendig lastet, noe som resulterer i en potensielt negativ brukeropplevelse.

 

Forslag fra Google

Google har mange ressurser for å forbedre nettstedets ytelse. De har til og med en side dedikert til å forbedre nettstedets skriptlastingstid, som du kan sjekke her..

På menyen til venstre kan du også finne andre ressurser som hjelper deg med å forbedre nettstedets ytelse. Sørg for at du også sjekker dem hvis PageSpeed ​​Insights rapporterer rapporterte problemer relatert til dem.

google ressurser

For en oversikt, foreslår Google at du i stedet skal legge inn kritiske skript og enten asynkronisere eller utsette ikke-kritiske skript. Det betyr at skript som kreves av nettstedet ditt, bør innebygd i HTML-en i stedet. Det er imidlertid jobben til WordPress-tema- og plugin-utviklere - men hvis du skulle lage temaet eller pluginet ditt, husk dette.

Les mer:  Hvordan ansette (GREAT) Javascript-utviklere

I tillegg til det, skisserte Google også en måte for deg å identifisere hvilke av skriptene dine som blokkerer gjengivelsen av websiden din ved å ha veldig lang lastetid. Du kan gjøre det ved å bruke Chrome Dev Dev ' dekning fanen.

Utsett ubrukt CSS

Et lignende problem som du kan se som oppstår i disse dager, også i Pagespeed-innsiktsverktøyet, er utsettelsen av ubrukt CSS. Selv om dette er et lignende problem, er røttene noe forskjellige. I hovedsak må CSS restruktureres for å fikse dette riktig.

Ofte Stilte Spørsmål

1. Hvordan fikser jeg utsetting av JavaScript i WordPress?

For å fikse utsettelsen av Javascript på WordPress, må du gjøre noen mindre endringer i koden din. Du kan enten finne alle skriptene og legge til utsette tag til dem, eller du kan installere et plugin som gjør dette automatisk. Du kan også opprette et skript som laster filene asynkront, som vist i How To Defer Parsing of Javascript ved å bruke en skriptseksjon i denne artikkelen.

2. Hva er utsett JavaScript?

Utsett parsing av Javascript er prosessen med å instruere nettleseren til besøkende på nettstedet ditt om å laste spesifikke filer til ETTER at siden er lastet inn. Dette gjør at brukeren kan se innholdet på siden mye raskere enn hvis du ikke implementerte utsettingsparsering av Javascript

3. Hva er forskjellen mellom asynkronisering og utsettelse av Javascript?

Async betyr at Javascript-innholdet lastes inn som sin egen nye tilkobling, parallelt med eksisterende eksisterende kode. Med async oppretter nettleseren en ny behandlingstråd som ikke vil bremse ned eksisterende nedlastinger mens Javascript lastes ned og kjøres. Utsett derimot, ber nettleseren om å analysere skriptet etter at resten av innholdet er lastet ned. Selv om dette vanligvis er bra for hastighet, kan det være noen problemer med innholdet ditt, hvis det refererer til skriptet som er utsatt (fordi det ikke vil være tilgjengelig).

4. Hvordan minifiserer jeg JavaScript i WordPress?

For å minifisere Javascript i WordPress, må du implementere et plugin som gjør dette automatisk. Du kan lese mer om dette her.

Innpakning Up

Og du har nettopp vært vitne til hvordan du kan utsette parsing av JavaScript i WordPress.

Vi har lært at det kan oppnås enten via plugins eller via manuelle justeringer. Det har mange fordeler for nettstedet ditt, som forbedret SEO, bedre brukeropplevelse og raskere lastetider. Det er derfor viktig å sørge for at du utsetter så mange skript som mulig for maksimal ytelsesgevinst.

Men husk, hold alltid en sikkerhetskopi og test mye for å sikre at du utsetter de riktige skriptene! Det kan virke kjedelig, men hvis det gjøres riktig, er fordelene og gevinstene enorme.

Hvis du virkelig vil maksimere lastehastigheten til nettstedet ditt, foreslår vi at du overlater det til PRO-ene som gutta fra WP Rocket, for å få maksimale fordeler med dette og hundrevis av andre handlinger for å få nettstedet til å lastes raskere.

Besøk WP Rocket for å gjøre nettstedet ditt raskere i dag  

om forfatteren
David Attard
Forfatter: David Attardnettside: https://www.linkedin.com/in/dattard/
David har jobbet i eller rundt den elektroniske / digitale industrien de siste 18 årene. Han har lang erfaring innen programvare- og webdesignindustrien ved å bruke WordPress, Joomla og nisjer rundt dem. Som digital konsulent er hans fokus på å hjelpe bedrifter med å få et konkurransefortrinn ved å bruke en kombinasjon av deres nettside og digitale plattformer som er tilgjengelige i dag.

En ting til... Visste du at folk som deler nyttige ting som dette innlegget også ser FANTASTISK ut? ;-)
Vær så snill forlate en nyttig kommenter med tankene dine, så del dette på Facebook-gruppen din (e) som synes dette er nyttig, og la oss høste fordelene sammen. Takk for at du delte og var hyggelig!

Avsløring: Denne siden kan inneholde lenker til eksterne nettsteder for produkter som vi elsker og anbefaler helhjertet. Hvis du kjøper produkter vi foreslår, kan vi tjene et henvisningsgebyr. Slike avgifter påvirker ikke våre anbefalinger, og vi godtar ikke betaling for positive anmeldelser.

Forfatter (e) Fremvist på:  Inc Magazine-logoen   Sitepoint-logo   CSS Tricks-logo    webdesignerdepot-logo   WPMU DEV-logo   og mange flere ...