Udskyd parsing af Javascript - 5 måder at løse det på og øge hastigheden (2024)

Som nogen, der prøver at forstå, hvordan man udsætter parsing af Javascript, mener vi, at du har et problem. Du ejer eller har besøgt et websted for nogen, du kender (måske en klient?), Og det tager evigt at indlæse. Og da du kørte det gennem webstedshastighedstestværktøjer, fik du en anbefaling, som du ikke er sikker på, hvordan du implementerer.

I denne artikel vil vi dele flere måder, hvordan man udsætter Javascript og retter denne advarsel og i sidste ende får webstedet til at indlæse hurtigere uden at kaste denne fejl!

Hvis du har kort tid, er der nogle hurtige handlinger, du kan gøre:

Instruktioner til, hvordan man udsætter parsing af JavaScript

1. Download Async-pluginet link..
2. Klik på Plugins> Tilføj nyt> upload-plugin og vælg den fil, du lige har downloadet.
3. Klik på Aktivere af det installerede plugin.
4. Gå til Plugins og klik på Indstillinger til Async-pluginet, du lige har installeret.
5. Hvis du klikker på Aktivér Async Javascript eller  Anvend Async som to af de mest almindelige måder at anvende rettelsen på.
6. Test dit websted for at se, at alt stadig fungerer godt.

Hvorfor er proceduren til implementering af udsættelse af parsing af Javascript vigtig? Hvis du ikke udsætter parsing af Javascript, ser dit websted ud som om det indlæses langsomt. Javascript er i det væsentlige en vigtig byggesten på Internetsproget, det giver webudviklere mulighed for at skabe "dynamisk" funktionalitet.

I de fleste tilfælde har Javascript-filer imidlertid tendens til at blive ret store. De trækker muligvis også ind fra tredjepartsservere. Dette gør download langsom. Men dette er kun halvdelen af ​​problemet.

Det største problem er, at hvis der ikke udsættes parsing af Javascript, blokeres browseren fra at vise indhold. Hjemmesiden GIVER IKKE. Og hvordan ser dette ud for en bruger? Det ser ud til, at webstedet enten er langsomt, ødelagt eller helt dødt. 

Problemet er sammensat på mobile enheder, hvor den tilgængelige processorkraft sammen med den tilgængelige båndbredde gør oplevelsen endnu værre.

Og hvad vil de brugere, der får en sådan oplevelse, gøre? De hopper væk fra dit websted og vender aldrig tilbage!

Hvis du har været rundt i webbranchen i et stykke tid, og du prøver at forbedre dit websteds SEO, ved du allerede, at webstedsydelsen er afgørende for at forbedre din søgemaskins synlighed.

Og hvis du har brugt Google PageSpeed ​​Insights til at kontrollere dit websted, udover "udsætte parsing af Javascript" er der endnu mere kryptiske advarsler, såsom den der siger "Eliminer render-blokerende ressourcer".

Denne tekniske ting ser ud til at have den største indvirkning på din lasthastighed! 

Fjern ?! Men hvordan skal jeg fjerne disse vigtige filer fra mit websted?

Bare rolig, vi er her for at hjælpe dig med at løse disse advarsler, løse disse problemer og i sidste ende få dine sider til at indlæses hurtigere!

Fordi du behøver ikke at fjerne dem. Alt hvad du skal gøre er at udskyde parsing af JavaScript.

Se på denne korte video nedenfor for at se, hvor enkelt det er at udsætte parsing af Javascript ved hjælp af en af ​​nedenstående metoder:

I ikke-geekspeak betyder dette, at du skal tilpasse et par ting i din WordPress for at tillade siden at lade dit indhold indlæses først, før du indlæser eller parser dine JavaScript-filer. 

Dette skyldes, at hvis du ikke udsætter parsing af Javascript, bliver gengivelse af webstedet en meget tung operation, og som vi sagde ovenfor, vil webstedet se ud som om det er brudt.

For at sikre, at brugeren forbliver på siden, vil vi gerne lade dem vide, at der faktisk sker noget, og vise indhold til brugeren i stedet for at vente på, at browseren gør alt det tunge løft, før det faktisk viser noget til brugeren . 

I øvrigt, hvis du ønsker at gøre dit WordPress hurtigt, er der et par plugins som f.eks denne der kan gøre en reel forskel i ydeevne om få minutter (med lidt til nul indsats).

Hvis du er interesseret, WP Rocket kan opsætte udsættelse af parsing af Javascript og mange andre tweaks for at gøre dit websted hurtigere, skal du bare klikke på banneret nedenfor for at tjekke det ud. 

Er du ikke klar til at bruge et plugin indtil videre? Læs videre... 

Hvad er udsættelse af JavaScript?

Udskyde parsing af Javascript betyder brug af "defer"Eller"async"for at undgå gengivelse af blokering af en side. Denne HTML-kommando instruerer browseren om at udføre / analysere scripts efter (udsættelse) eller asynkront (parallelt) til sideindlæsningen. Dette gør det muligt for indholdet at blive vist uden at vente på, at scriptsne indlæses .

Ved at konfigurere udsættelse af parsing af JavaScript vil du være i stand til at lade dit indhold indlæse hurtigere og med høj prioritet.

Hvorfor er det?

Se nedenfor denne fremragende forklaring, der viser, hvordan websider indlæses, og hvordan JavaScript-filer i høj grad hæmmer dit websteds indlæsningstid.

Fortsæt med videoen ovenfor, lad os tage et kort kig på, hvad der sker, når nogen besøger dit websted: 

1. Når en bruger klikker på et link, der peger på dit websted, vil brugerens browser anmode om det fra din server, som din server derefter “serverer” til din brugers browser.
2. Brugerens browser modtager og ser derefter HTML-indholdet på din webside og begynder at gengive det. Det begynder at opbygge din webside fra top til bund.
3. Hvis den finder JavaScript-filer undervejs, stopper browseren og henter den (hvis det er en ekstern fil), og analyserer den derefter
4. Først efter fuldstændig hentning og parsing af hvert enkelt script fortsætter det med at indlæse resten af ​​dit indhold.

Du er sandsynligvis allerede begyndt at se, hvor problemet ligger.

Når dine sider har mange JavaScript-filer, kan det påvirke dit websteds indlæsningstid - negativt.

Din brugers browser viser løbende indlæsningsikonet eller spindehjulet, mens du parser og indlæser dine scripts, før det viser dit faktiske indhold - dette er især synligt i mobile browsere eller brugere med lavhastighedsdataforbindelser.

Hvis det tager mere end et par sekunder, især hvis du serverer dine scripts fra en ekstern server (og den server tilfældigvis har problemer i øjeblikket) - begynder dine besøgende at blive kantede.

I løbet af denne tid ser din bruger ikke andet end en hvid blank side. Er det ikke en af ​​de mest frustrerende ting på internettet? Alt skal være øjeblikkeligt på nettet, hvorfor skal de vente på, at din side indlæses?

Hvis en bruger venter mere end 4 sekunder, begynder de at blive kantede. Ud over 8 sekunder, og dit websted er så godt som død - brugeren springer væk til et andet websted.

Du har mistet en besøgende og sandsynligvis deres forretning. 

Den ekstra komplikation er, at disse JS-filer mange gange tilføjes til dit websted af vigtige plugins og temaer, som du har installeret, så du kan ikke nøjagtigt slippe af med dem let.

Så hvad gør du?

For at løse dette skal du udsætte parsning af JavaScript. Dette fungerer ved at analysere dine scripts, når hovedindholdet er indlæst. Tjek det visuelle nedenfor for nøjagtigt at se virkningen af ​​indlæsningstiden. Som vi kan se, udsætter kommandoen udsættelsen browseren til at udføre Javascript senere, mens async tillader ting at ske parallelt med downloadet.

Derfor, når en bruger besøger dit websted, fortsætter din browser i stedet med at analysere alt fra top til bund, men springe dine JavaScript-filer over til senere. På denne måde vil dine brugere kunne se dit indhold med det samme uden at skulle vente. 

Hvis du har set videoen ovenfor, har du set, at attributterne "asynkronisering" og "udsættelse" i høj grad hjælper.

Men hvordan ville du gøre det i WordPress? Hvornår er det rigtige tidspunkt at bruge dem? Lad os se og lad os komme i gang!

Analyser dit websted

Før vi begynder, skal du vide, om du skal implementere udsættelsen af ​​Javascript-rettelsen på dit websted eller ej. For at finde ud af, om du har brug for det, kan du bruge flere værktøjer, der er let tilgængelige online.

Nogle eksempler er følgende:

1. GTMetrix

Denne fungerer ved at kontrollere både PageSpeed ​​og Yslow-metrics og giver dig en score fra F til A. De giver dig også anbefalinger samt tip til, hvordan du forbedrer dit websted, hvis der findes problemer. Det fortæller dig specifikt, om du har brug for at udskyde parsing af JavaScript. 

Generelt skal scoren være mindst 71.

Billedet nedenfor viser et websted, der ikke behøver udsættelse. 

2. PageSpeed-værktøjer

et værktøj udviklet af Google, PageSpeed ​​Insights er et andet omfattende værktøj, der giver dig omfattende oplysninger om dit websteds ydeevneproblemer sammen med tip til at rette dem ligesom GTMetrix.

En af de bedste ting ved dette værktøj er, at det indeholder links til dybdegående guider og ressourcer, der hjælper dig med at løse alle dine præstationsproblemer. Billedet nedenfor viser et websted, der hårdt har brug for at implementere udsættelse af JavaScript.

3. Pingdom Tools 

Et andet populært værktøj til test af websteder, der er frit tilgængeligt for alle.

Selvom det tilsyneladende ikke udtrykkeligt fortæller dig, om du har brug for at udsætte parsing af JavaScript, kan du kontrollere, hvor lang tid det tog for dine scripts at indlæse takket være deres omfattende resultatside.

Billedet nedenfor viser et websted, der har næsten halvdelen af ​​sin side, der består af JavaScript - en god indikator for, at du måske vil udsætte dine scripts. 

4.  Varvy PageSpeed 

Et andet fremragende værktøj, der fortæller dig, om dit websted har render-blokerende scripts.

Det bedste er, at det lader dig vide nøjagtigt, hvad de er, ligesom i billedet nedenfor: 

Okay cool!

Nu har du adgang til værktøjer, der kan hjælpe dig med at afgøre, om du har brug for at implementere udsættelse af parsing af JavaScript-filer.

Men du spørger måske hvorfor ikke bare implementere det og lade det være? Hvis du udsætter parsing af JavaScript forkert, kan det ødelægge ting, og det kan være frustrerende at rette, hvis du ikke er teknologisk kyndig.

Bare at tænde udskydningstilstand betyder ikke, at alt er indstillet til at blive glemt og vil fungere fint. Du bliver nødt til at kontrollere, om du har gjort det rigtigt, og sørg for, at alt stadig fungerer som beregnet. 

For eksempel, hvis du bruger jQuery, skal du nøje vælge, hvilke af dine scripts du skal udsætte, fordi der ser ud til at være en problem med udsættelse og jQuery.

Derudover vil du opdage, at der er masser af spørgsmål om Stack Overflow om jQuery, async og udsættelse, som ofte handler om, hvordan du skal implementere udsættelse og asynkronisering, hvis du overhovedet skulle gøre, til dine scripts, der er afhængige af jQuery. 

Så hvad er resultaterne? Har du brug for at udsætte dine scripts?

Hvis ja, så lad os nu finde ud af, hvordan du udsætter JavaScript i WordPress!

Sådan udsættes parsing af JavaScript i WordPress

At udsætte parsing af JavaScript i WordPress kan være ret ligetil.

Du kan bare installere et af de tusindvis af plugins i WordPress-arkivet, og du er klar til at gå. Men der er også avancerede måder at gøre det på, hvis du har brug for mere kontrol, især hvis du bruger komplekse scripts til at gøre dit websted mere engagerende og interaktivt. 

I dette afsnit vil vi kontrollere fem forskellige måder til at udføre udsættelse af JavaScript i WordPress: via plugins, via functions.php og redigering af kode manuelt. 

Der er så mange plugins i WordPress-arkivet, der kan hjælpe dig med at forbedre dit websteds ydeevne.

Der er dem, der er dedikeret til en bestemt opgave som at minimere din HTML-kode, og der er plugins, der forsøger at inkorporere alle præstationsrelaterede tweaks i et plugin, såsom at have mulighed for at minimere og udskyde CSS- og JavaScript-filer, implementere og udnytte browserens caching (som vi har uddybet i denne artikel) Og meget mere. 

Imidlertid er ikke alle plugins oprettet ens. Nogle fungerer godt, andre fungerer ok, og nogle fungerer slet ikke og kan endda bryde noget eller hele funktionaliteten på dit websted. 

(Hvis du hellere vil have nogen, der har oplevet at håndtere dette for dig, kan du få dette gjort ved hjælp af en billig Fiverr-koncert ved at klikke på knappen nedenfor.)

1. Udsæt parsing af Javascript ved hjælp af Async Plugin

Ærligt talt vil vi stærkt foreslå at vælge et premium-plugin (som er død billigt), men du er sikker på at rette ikke kun denne advarsel, men en hel række webstedsindlæsningshastighedsproblemer.

Vi starter med en af ​​de mest populære, der er beregnet til at udføre et enkelt job defineret af denne artikel.

Et af de mest populære valg for at udføre dette job er Async Javascript. Dette plugin fokuserer på at forbedre dit websteds ydeevne ved at finjustere, hvordan dine scripts indlæses og som WP Rocket nedenfor, kommer det også med yderligere avancerede funktioner, der giver dig mulighed for at udelukke visse scripts fra at blive udsat.

Her er de trin, du skal udføre for at bruge dette plugin.

1. Download Async-pluginet link..
2. Klik på Plugins> Tilføj nyt i WP-backend.
3. Klik på upload-plugin og vælg den fil, du lige har downloadet.
4. Alternativt kan du søge efter Async Javascript og klikke Installer nu.
5. Klik på Aktivere af det installerede plugin.
6. Gå til Plugins og klik på Indstillinger til Async-pluginet, du lige har installeret.
7. Vi foreslår at klikke på Aktivér Async Javascript eller Anvend Async som to af de mest almindelige måder at anvende rettelsen på.
8. Hvis disse ikke virker, kan du prøve et par forskellige kombinationer.
9. Test dit websted for at se, at alt stadig fungerer godt.

Måske er en af ​​dens styrker, at bortset fra evnen til at udelukke visse scripts fra at blive udsat, har du også mulighed for at vælge, hvilke scripts der skal udskydes i stedet:

Du bemærker muligvis også, at du har mulighed for enten at synkronisere eller udsætte et script. For mere information om forskellen mellem de to, kan du læse dette artikel.

Et unikt træk ved dette plugin er, at du kan angive at ekskludere et bestemt tema eller plugin.

Der er også en mulighed for at integrere GTMetrix på dit websted, så du altid kan kontrollere dens ydeevne. Vær opmærksom på, at hver gang du udfører en test, trækkes der imidlertid en API-kredit fra din GTMetrix-konto.

Mens nogle mennesker vil anbefale WP udsat JavaScript, dette plugin er ikke blevet opdateret i mere end 3 år og er ikke blevet testet med de sidste 3 store versioner, så vi anbefaler stærkt, at du ikke bruger denne. Det fungerer muligvis stadig, men det er uprøvet, så det er en risiko, som du ikke bør tage.

Hvis du har et relativt simpelt websted, og du ønsker at forbedre dine indlæsningstider yderligere, kan det være lige hvad du har brug for. Dette plugin kræver slet ingen konfiguration - bare installer, aktiver og glem.

Igen skal du huske på, at denne ikke anbefales til komplekse websteder som e-handel på grund af manglen på avancerede justeringsmuligheder og på grund af dens alder. At være i stand til at finjustere JavaScript-udsættelsesindstillinger er afgørende for store og komplekse websteder.

2. WP raket

I øjeblikket er det førende WordPress-ydeevne-plugin derude, WP Rocket tilbyder ikke kun muligheden for at udsætte parsing af JavaScript-filer, men også dine CSS-filer. Derudover får du masser af andre muligheder for forbedring af ydeevnen.

Nogle funktioner inkluderer følgende: 

• Minificering - formindsker størrelsen på dit websteds kode, så den indlæses hurtigere. Det gør det ved at fjerne hvide mellemrum og andre unødvendige tegn fra koden uden at påvirke dens kernefunktionalitet.
• Sammenkædning - kombinerer flere CSS- og JavaScript-filer til en.
• Lazy loading - dette er udskydelsestilstanden for videofiler og andet multimedieindhold som billeder. Det forsinker indlæsningen af ​​disse ressourceintensive filer, indtil efter at brugeren ruller ned til dem.

En af de bedste ting ved WP Rocket er, at når du først har installeret og aktiveret det, kan du bare lade det være, og du får automatisk præstationsgevinster.

Du kan dog konfigurere avancerede indstillinger for et endnu større ydelsesboost, men husk på, at nogle af dem kan have negative virkninger på dit websted. Og på grund af det er deres udsættelsesmulighed for JavaScript og CSS-filer ikke aktiveret som standard, fordi hvis de gøres skødesløst, kan de bryde ting.

Heldigvis kan du udelukke visse scripts fra at blive udsat.

Du kan prøve at ekskludere alle dine scripts først og derefter udsætte parsing af Javascript-filer en efter en, indtil du finder den problematiske. De har omfattende dokumentation for at hjælpe dig med det. På denne måde vil du være i stand til at maksimere ydelsesforbedringer uden at bryde eller ofre nogle eller alle dine websides funktioner.

WP Rocket er et premium plugin, men i betragtning af den leverede pris og funktionalitet (ikke kun udsættelse og asynkronisering af JS-filer, men masser af andre optimeringer, der er garanteret for at gøre dit websted hurtigere), mener vi, det er meget værd at prisen.

Hent WP Rocket

3. Speed ​​Booster Pack

Et andet godt, alt-i-en-ydeevne-plugin, der giver dig mulighed for at udsætte parsing af Javascript-filer er Speed ​​Booster Pack. Det ligner WP Rocket med hensyn til funktioner, men det er gratis. Det har de fleste af de grundlæggende funktioner i WP Rocket såsom minifikation, udsættelse, fjernelse af unødvendige filer osv.

Nedenfor kan du se nogle af de funktioner, der er tilgængelige i pluginet: 

Under fanen Avanceret kan du vælge at ekskludere nogle scripts fra at blive flyttet til sidefoden eller fra at blive udsat eller begge dele. Du kan dog kun tilføje op til 4 ekskluderede scripts, hvilket bestemt er en begrænsning for komplekse og store websteder. 

Samlet set er det et godt gratis alternativ til WP Rocket, der passer til små websteder.

4. Brug af features.php tweaks

Hvad hvis du ikke vil bruge plugins?

Der er et andet trick, du kan gøre for at udskyde parsing af Javascript i WordPress, og det er ved at redigere dit temas funktioner.php-fil.

Kopier bare koden nedenfor og indsæt den nederst i dit temas funktion.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 ); 

Husk, at du måske ødelægger dit websted, hvis du gør det forkert, så vær opmærksom og sørg for at redigere den korrekte fil i det rigtige tema, og at du indsætter kodestykket på det rigtige sted. Sørg for ikke at slette / ændre noget andet.

Heldigvis kan du oprette et underordnet tema for at foretage sikre redigeringer af din functions.php-fil. Derudover, hvis du nogensinde udskifter eller opdaterer dit tema, kan du nemt gemme alle dine tilpassede redigeringer i filen. Her er en god artikel, der forklarer, hvordan man opretter et børnetema. Når du har oprettet et underordnet tema, skal du bare indsætte kodestykket i barnets function.php-fil, gemme det, og det er klar.

Læs mere: Meddelelsesblokering er aktiv

5. Tilpas din kode manuelt

Dette lyder måske skræmmende, især hvis du ikke er glad for kodning, men for avancerede brugere er tilpasning af koden manuelt en fantastisk måde at udskyde parsing af JavaScript-filer på WordPress. 

Varvy har et godt kodestykke, der gør det muligt at indlæse din websides oprindelige indhold, inden der indlæses andre eksterne scripts. Kodestykket er nedenfor:

  funktion downloadJSAtOnload () {
    var element = document.createElement ("script");
    element.src = "//www.yourdomain.com/defer.js";
    document.body.appendChild (element);
  }
  hvis (window.addEventListener)
    window.addEventListener ("load", downloadJSAtOnload, false);
  ellers hvis (window.attachEvent)
    window.attachEvent ("onload", downloadJSAtOnload);
  ellers window.onload = downloadJSAtOnload;

Udskift defer.js med din egen scriptfil. Når du har redigeret det for at afspejle dit eget script, skal du indsætte det lige før dine HTML'er tag. I WordPress kan du gøre det ved at redigere dit temas footer.php-fil.

Igen anbefales det at bruge et underordnet tema, hvis du skulle oprette redigeringer i dine temafiler. En lille note: redigering af footer.php gennem børnetema er forskellig fra features.php: du skal kopiere hele footer.php af dit hovedtema sammen med dets indhold til dit barn-tema og derefter foretage / tilføje redigeringerne. 

Hvis du ikke vil gå besværet med at redigere din footer.php, kan du bruge et plugin kaldet Indsæt overskrifter og fodfødder. 

Indsæt bare kodestykke i boksen "Scripts in Footer", tryk på Save, så får du scriptet tilføjet til det nederste område af dit websteds kode over tag. 

Og det er alle de måder, du kan udskyde parsing af JavaScript på WordPress! Men fungerer de? Forbedrede de dit websteds ydeevne? Lad os kontrollere resultaterne!

Test af resultaterne

For at teste resultaterne skal du gå til GTMetrix.com, PageSpeed ​​Insights og Pingdom Tools for at se, om din præstationsklasse og indlæsningstid er forbedret.

I GTMetrix skal din score være mindst 71. Jo mere jo bedre! En perfekt score vil gerne have dette :-) 

I PageSpeed ​​Insights skal du kigge efter “første maling”:

Generelt, når du tester, om din implementering af udsættelse af parsing af JavaScript har resulteret i, at manuskripterne udsættes, skal du sigte mod grønne resultater i Første tilfredsstillende maling og Først meningsfuld maling.

Sammenlign før og efter udsættelse, og kontroller, om de forbedres.

For Pingdom-værktøjer skal du kigge i sektionen for belastningsrækkefølge og se, om de fleste, hvis ikke alle, dine scriptfiler er lastet sidst. Sammenlign før og efter udskydelse, og se om scriptfiler ændrede position i indlæser rækkefølge (dvs. indlæste de tidligere eller senere). 

Tilfredsstillede resultaterne dig? I så fald godt stykke arbejde! Hvis ikke, så prøv at eksperimentere mere. Hvis du brugte andre metoder på vores liste, så prøv at bruge avancerede plugins, der giver dig mulighed for yderligere at tilpasse dine udsættelses- og ydeevneindstillinger. Tjek desuden nogle anbefalinger fra Google i det næste afsnit. De kan måske hjælpe dig.

Sådan udsættes parsing af JavaScript ved hjælp af et script

Der er forskellige teknikker, du kan bruge til at udskyde parsing af JavaScript. Det næste afsnit diskuterer hvad du skal gøre. 

Sammenfattende skal du udføre følgende:

1. Kopier koden nedenfor og tilføj den lige før tag i din HTML.
2. Udskift eksempel.js i koden nedenfor med den fil, der indeholder det script, der skal udsættes.
3. Gem ændringerne.
4. Test dit websted for at se effekten.

Lad os se på disse trin mere detaljeret:

• Brug et script til at ringe til en ekstern JS-fil, når den første side er indlæst. På varvy.com foreslår Patrick Sexton en metode, der gør det muligt at indlæse webstedsindholdet, inden der indlæses en JS (for at sikre, at brugeren først kan se indholdet). Dette sikrer, at den kritiske belastningssti ikke påvirkes af scripts, der forårsager gengivelsesblokering. Metoden involverer oprettelse af en ekstern fil, der ikke er nødvendig for at få vist indholdet oprindeligt. Ved derefter at tilføje følgende script lige før i HTML. Det følgende eksempel bruger et fileksempel.js, som skal opdateres i overensstemmelse hermed. 

  <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 websiden er indlæst, begynder scriptet at blive downloadet og udført eksempel.js - problemet er, at du bliver nødt til at oprette filen manuelt.

• Brug af attributterne asynkronisering eller udsættelse. JS-mærket async or udsætte attributter fungerer på samme måde - den måde, de fungerer på, er sådan, at de minimerer den tid, hvor HTML-parsing stopper for at vente på download og udførelse af scripts. asynkron gør det muligt for download af JS-filer at forekomme asynkront snarere end synkront, dvs. en ny tråd åbnes til download, mens HTML fortsætter med at parse. Udskyder instruerer browseren om at udføre scriptet, EFTER at siden er indlæst. Dette er en anden måde at tillade sideparsering at fuldføre og således ikke have indflydelse på indlæsningstiden. Begge disse tags minimerer gengivelsesblokering af JS. I brugen af ​​begge disse behøver JS ikke at vente på, at HTML er færdig med parsing, før de begynder at downloade eller udføre - hvilket sikrer, at siden stadig indlæses hurtigt. Se hvordan udførelsen sker for henholdsvis asynkronisering og udsættelse i nedenstående billeder.
  
  

• Flyt JavaScript til bunden af ​​din side. Det tredje og sidste forslag er at flytte et hvilket som helst <script> tags nederst på siderne (især hvis de ikke er kritiske, f.eks. annoncer). Denne metode er ikke ideel, fordi browseren stadig vil være optaget, indtil det sidste script er helt downloadet og blevet parset. I betragtning af at browseren virker travl, kan nogle besøgende muligvis ikke engagere sig i siden, før den er fuldt indlæst, hvilket resulterer i en potentielt negativ brugeroplevelse.

Forslag fra Google

Google har masser af ressourcer til at forbedre dit websteds ydeevne. De har endda en side dedikeret til at forbedre dit websteds scriptindlæsningstid, som du kan kontrollere link..

I menuen til venstre kan du også finde andre ressourcer, der hjælper dig med at forbedre dit websteds ydeevne. Sørg for også at tjekke dem ud, hvis din PageSpeed ​​Insights rapporterer rapporterede problemer relateret til dem.

For en oversigt foreslår Google, at du i stedet skal integrere kritiske scripts og enten asynkronisere eller udsætte ikke-kritiske scripts. Det betyder, at scripts, der kræves af dit websted, skal indlejres i HTML i stedet. Det er imidlertid jobbet med WordPress-tema- og pluginudviklere - men hvis du skulle oprette dit tema eller plugin, skal du huske dette.

Læs mere:  Sådan ansættes (STOR) Javascript-udviklere

Derudover skitserede Google også en måde, hvorpå du manuelt kan identificere, hvilke af dine scripts, der blokerer gengivelsen af ​​din webside ved at have en meget lang indlæsningstid. Du kan gøre det ved at bruge Chrome's Dev Tools ' dækning fane.

Udskyd ubrugt CSS

Et lignende problem, som du måske ser, der opstår i disse dage, også i Pagespeed-indsigtværktøjet, er Udskydelse af ubrugt CSS. Selv om dette er et lignende problem, er dets rødder noget forskellige. I det væsentlige skulle CSS omstruktureres for at løse dette korrekt.

{loadpostion imh-embed}

Ofte stillede spørgsmål

Hvordan retter jeg udskudt parsing af JavaScript i WordPress?

For at rette udsættelsen af ​​Javascript i WordPress skal du foretage nogle mindre ændringer i din kode. Du kan enten finde alle scripts og tilføje udsætte tag til dem, eller du kan installere et plugin, der gør dette automatisk. Du kan også oprette et script, der indlæser filerne asynkront som vist i Sådan udskydes parsing af Javascript ved hjælp af et script-afsnit i denne artikel.

Hvad er defer JavaScript?

Udskydelse af parsing af Javascript er processen med at instruere browseren på dine besøgende på webstedet om at indlæse specifikke filer til EFTER at siden er indlæst. Dette giver brugeren mulighed for at se indholdet på siden meget hurtigere, end hvis du ikke implementerede udsættelse af parsing af Javascript

Hvad er forskellen mellem asynkron og defer Javascript?

Async betyder, at Javascript-indholdet indlæses som sin egen nye forbindelse parallelt med enhver eksisterende anden kode. Med async opretter browseren en ny behandlingstråd, der ikke sænker eksisterende downloads, mens Javascript downloades og udføres. Udsæt på den anden side beder browseren om at analysere scriptet, efter at resten af ​​indholdet er downloadet. Selvom dette normalt er godt for hastighed, kan der være nogle problemer med dit indhold, hvis det refererer til det script, der er blevet udsat (fordi det ikke vil være tilgængeligt).

Hvordan minificerer jeg JavaScript i WordPress?

For at minimere Javascript i WordPress skal du implementere et plugin, der gør dette automatisk. Du kan læse mere om dette link.. 

Indpakning op

Og du var lige vidne til, hvordan man udsætter parsing af JavaScript i WordPress.

Vi har lært, at det kan opnås enten via plugins eller via manuelle tweaks. Det har masser af fordele for dit websted, såsom forbedret SEO, bedre brugeroplevelse og hurtigere indlæsningstider. Det er derfor vigtigt at sikre, at du udsætter så mange scripts som muligt for at opnå maksimal præstationsgevinst.

Men husk, hold altid en sikkerhedskopi og test meget for at sikre, at du udsætter de korrekte scripts! Det kan virke kedeligt, men hvis det gøres rigtigt, er fordelene og gevinsterne enorme.

Hvis du virkelig vil maksimere dit websteds indlæsningshastighed, foreslår vi, at du overlader det til PRO'erne som fyrene fra WP Rocket for at få de maksimale fordele ved dette og hundredvis af andre handlinger for at få dit websted til at blive hurtigere.

Besøg WP Rocket for at gøre dit websted hurtigere i dag  

Om forfatteren

Forfatter: David AttardInternet side: https://www.linkedin.com/in/dattard/E-mail: david@collectiveray.com

David har arbejdet i eller omkring online- og digitalindustrien i de sidste 21 år. Han har stor erfaring i software- og webdesignindustrien ved at bruge WordPress, Joomla og nicher omkring dem. Han har arbejdet med softwareudviklingsbureauer, internationale softwarevirksomheder, lokale marketingbureauer og er nu Head of Marketing Operations hos Aphex Media - et SEO-bureau. Som digital konsulent er hans fokus på at hjælpe virksomheder med at få en konkurrencefordel ved at bruge en kombination af deres hjemmeside og digitale platforme, der er tilgængelige i dag. Hans blanding af teknologisk ekspertise kombineret med et stærkt forretningssans giver hans forfatterskab en konkurrencefordel.