Parsing van Javascript uitstellen - 5 manieren om het probleem op te lossen en de snelheid te verhogen (2024)

Als iemand die probeert te begrijpen hoe het ontleden van Javascript kan worden uitgesteld, denken we dat je een probleem hebt. U bezit of heeft een website bezocht van iemand die u kent (misschien een klant?) en het duurt een eeuwigheid om te laden. En toen u het door de tools voor het testen van de websitesnelheid liet lopen, kreeg u een aanbeveling waarvan u niet zeker weet hoe u deze moet implementeren.

In dit artikel gaan we verschillende manieren delen om Javascript uit te stellen en deze waarschuwing op te lossen en uiteindelijk de website sneller te laten laden, zonder deze fout te veroorzaken!

Als je weinig tijd hebt, zijn hier enkele snelle acties die je kunt doen:

Instructies voor het uitstellen van het parseren van JavaScript

1. Download de Async-plug-in hier.
2. Klik op Plug-ins > Nieuw toevoegen > Upload plug-in en selecteer het bestand dat u zojuist hebt gedownload.
3. Klik op Activeren van de geïnstalleerde plug-in.
4. Ga naar Plugins en klik op Instellingen voor de Async-plug-in die u zojuist hebt geïnstalleerd.
5. Door te klikken op Asynchrone Javascript inschakelenof Asynchrone toepassen als twee van de meest voorkomende manieren om de fix toe te passen.
6. Test uw website, om te zien of alles nog goed werkt.

Waarom is de procedure voor het implementeren van defer-parsing van Javascript belangrijk? Als u het ontleden van Javascript niet uitstelt, lijkt het alsof uw website langzaam laadt. Javascript is in wezen een belangrijke bouwsteen in de taal van het web, het stelt webontwikkelaars in staat om "dynamische" functionaliteit te creëren.

In de meeste gevallen worden Javascript-bestanden echter behoorlijk groot. Ze kunnen ook binnenkomen van servers van derden. Dit maakt het downloaden traag. Maar dit is slechts de helft van het probleem.

Het grootste probleem is dat als er geen uitstel van het ontleden van Javascript is, de browser GEBLOKKEERD wordt om inhoud weer te geven. De website WORDT NIET GELDIG. En hoe ziet dit eruit voor een gebruiker? Het lijkt erop dat de site traag, kapot of helemaal dood is. 

Het probleem wordt verergerd op mobiele apparaten, waar de beschikbare verwerkingskracht, samen met de beschikbare bandbreedte, de ervaring nog slechter maakt.

En wat doen de gebruikers die zo'n ervaring krijgen? Ze stuiteren weg van uw website en komen nooit meer terug!

Als u al een tijdje in de webindustrie bent en u probeert de SEO van uw website te verbeteren, weet u al dat de prestaties van uw website cruciaal bij het verbeteren van de zichtbaarheid van uw zoekmachine.

En als u Google PageSpeed ​​Insights heeft gebruikt om uw website te controleren, zijn er naast "ontleding van Javascript uitstellen" nog meer cryptische waarschuwingen, zoals de waarschuwing "Elimineer bronnen voor het blokkeren van renderen".

Deze technische dingen lijken de grootste impact te hebben op je laadsnelheid! 

Verwijderen?! Maar hoe moet ik deze cruciale bestanden van mijn website verwijderen?

Maak je geen zorgen, we zijn er om je te helpen deze waarschuwingen op te lossen, deze problemen op te lossen en uiteindelijk je pagina's sneller te laten laden!

Omdat jij hoef ze niet te verwijderen. Het enige wat u hoeft te doen is het ontleden van JavaScript uit te stellen.

Bekijk deze korte video hieronder om te zien hoe eenvoudig het is om het ontleden van Javascript uit te stellen met een van de onderstaande methoden:

In niet-geekspeak betekent dit dat u een paar dingen in uw WordPress moet aanpassen, zodat de pagina uw inhoud eerst kan laden voordat uw JavaScript-bestanden worden geladen of geparseerd. 

Dit komt omdat, als u het ontleden van Javascript niet uitstelt, het renderen van de website een zeer zware operatie wordt, en zoals we hierboven al zeiden, zal de website eruitzien alsof hij kapot is.

Om ervoor te zorgen dat de gebruiker op de site blijft, willen we hem laten weten dat er daadwerkelijk iets gebeurt en inhoud aan de gebruiker laten zien, in plaats van te wachten tot de browser al het zware werk doet voordat hij daadwerkelijk iets aan de gebruiker laat zien . 

Overigens, als u uw WordPress snel wilt maken, zijn er een paar plug-ins zoals deze dat kan een echt verschil maken in prestaties in een paar minuten (met weinig tot geen inspanning).

Als je geïnteresseerd bent, WP Rocket kan het ontleden van Javascript en vele andere tweaks instellen om uw site sneller te maken, klik gewoon op de onderstaande banner om het te bekijken. 

Nog niet klaar om een ​​plug-in te gebruiken? Lees verder... 

Wat is Defer Parsing van JavaScript?

Het ontleden van Javascript uitstellen betekent het gebruik van "defer"Of"async" om het blokkeren van de weergave van een pagina te voorkomen. Dit HTML-commando instrueert de browser om de scripts uit te voeren/parseren na (uitstellen) of asynchroon (parallel) aan het laden van de pagina. Hierdoor kan de inhoud worden weergegeven zonder te wachten tot de scripts zijn geladen .

Door defer-parsing van JavaScript in te stellen, kunt u uw inhoud sneller en met hoge prioriteit laten laden.

Hoe komt dat?

Zie hieronder deze uitstekende uitleg die laat zien hoe webpagina's worden geladen en hoe JavaScript-bestanden de laadtijd van uw website enorm belemmeren.

Laten we, als we verder gaan op de video hierboven, eens kijken wat er gebeurt als iemand uw website bezoekt: 

1. Wanneer een gebruiker op een link klikt die naar uw website verwijst, zal de browser van de gebruiker dit opvragen bij uw server, die uw server vervolgens zal "dienen" aan de browser van uw gebruiker.
2. De browser van de gebruiker ontvangt en ziet dan de HTML-inhoud van uw webpagina en begint deze weer te geven. Het zal uw webpagina van boven naar beneden bouwen.
3. Als het onderweg JavaScript-bestanden vindt, stopt de browser en haalt het op (als het een extern bestand is) en parseert het
4. Pas nadat elk script volledig is opgehaald en geparseerd, blijft het de rest van uw inhoud laden.

Je begint waarschijnlijk al te zien waar het probleem ligt.

Wanneer uw pagina's veel JavaScript-bestanden bevatten, kan dit de laadtijd van uw website enorm beïnvloeden - negatief.

De browser van uw gebruiker zal continu het laadpictogram of het draaiende wiel tonen tijdens het parseren en laden van uw scripts voordat uw daadwerkelijke inhoud wordt weergegeven - dit is vooral zichtbaar in mobiele browsers of gebruikers met gegevensverbindingen met lage snelheid.

Als het meer dan een paar seconden duurt, vooral als je je scripts vanaf een externe server serveert (en die server heeft op dit moment problemen), zullen je bezoekers zenuwachtig worden.

Gedurende die tijd ziet uw gebruiker niets anders dan een witte blanco pagina. Is dat niet een van de meest frustrerende dingen op internet? Alles zou direct op internet moeten zijn, waarom moeten ze wachten tot uw pagina is geladen?

Als een gebruiker meer dan 4 seconden wacht, wordt hij zenuwachtig. Na 8 seconden en uw website is zo goed als dood - de gebruiker stuitert weg naar een andere website.

Je bent een bezoeker kwijt, en waarschijnlijk hun bedrijf. 

De extra complicatie is dat deze JS-bestanden vaak aan uw website worden toegevoegd door essentiële plug-ins en thema's die u hebt geïnstalleerd, dus u kunt ze niet gemakkelijk verwijderen.

Dus wat doe je dan?

Om dit op te lossen, moet u het ontleden van JavaScript uitstellen. Dit werkt door uw scripts te ontleden zodra de hoofdinhoud is geladen. Bekijk de visual hieronder om precies de impact in laadtijd te zien. Zoals we kunnen zien, dwingt het defer-commando de browser om het Javascript later uit te voeren, terwijl de async dingen parallel aan de download laat gebeuren.

Daarom zal uw browser, wanneer een gebruiker uw site bezoekt, in plaats daarvan doorgaan met het ontleden van alles van boven naar beneden, maar uw JavaScript-bestanden overslaan voor later. Op deze manier kunnen uw gebruikers uw inhoud onmiddellijk zien zonder te hoeven wachten. 

Als je de video hierboven hebt bekeken, heb je gezien dat de kenmerken "async" en "defer" enorm helpen.

Maar hoe zou je dat doen in WordPress? En wanneer is het juiste moment om ze te gebruiken? Laten we eens kijken en laten we beginnen!

Analyseer uw website

Voordat we beginnen, moet u weten of u de uitgestelde Javascript-fix op uw site moet implementeren of niet. Om erachter te komen of dat nodig is, kunt u verschillende tools gebruiken die gemakkelijk online beschikbaar zijn.

Enkele voorbeelden zijn de volgende:

1. GTMetrix

Deze werkt door zowel PageSpeed- als Yslow-statistieken te controleren en geeft u een score van F tot A. Ze geven u ook aanbevelingen en tips over hoe u uw website kunt verbeteren als er problemen worden gevonden. Het zal u specifiek vertellen of u het ontleden van JavaScript moet uitstellen. 

Over het algemeen moet de score minimaal 71 zijn.

De onderstaande afbeelding toont een website die geen uitstel nodig heeft. 

2. Hulpmiddelen voor paginasnelheid Page

PageSpeed ​​Insights, een tool ontwikkeld door Google, is een andere uitgebreide tool die je uitgebreide informatie geeft over de prestatieproblemen van je site, samen met tips om ze op te lossen, net als GTMetrix.

Een van de beste dingen van deze tool is dat het links bevat naar uitgebreide handleidingen en bronnen om je te helpen al je prestatieproblemen op te lossen. De onderstaande afbeelding toont een website die dringend behoefte heeft aan het uitstellen van het ontleden van JavaScript.

3. Pingdom Gereedschap 

Nog een populaire tool voor het testen van websiteprestaties die voor iedereen gratis beschikbaar is.

Hoewel het u niet expliciet lijkt te vertellen of u het ontleden van JavaScript moet uitstellen, kunt u controleren hoe lang het duurde voordat uw scripts werden geladen dankzij hun uitgebreide resultatenpagina.

De afbeelding hieronder toont een website waarvan bijna de helft van de pagina uit JavaScript bestaat - een goede indicatie dat u uw scripts misschien wilt uitstellen. 

4.  Varvy Paginasnelheid 

Nog een uitstekende tool die u zal vertellen of uw site scripts voor het blokkeren van de weergave heeft.

Het beste is dat het je precies laat weten wat ze zijn, net zoals in de onderstaande afbeelding: 

Oké, cool!

U hebt nu toegang tot tools die u kunnen helpen bepalen of u het ontleden van JavaScript-bestanden moet uitstellen.

Maar u vraagt ​​​​zich misschien af ​​waarom u het niet gewoon implementeert en het met rust laat? Als u het ontleden van JavaScript onjuist uitstelt, kan dit dingen kapot maken en het kan frustrerend zijn om het op te lossen als u niet technisch onderlegd bent.

Het simpelweg inschakelen van de uitstelmodus betekent niet dat alles is ingesteld om te worden vergeten en goed zal werken. Je zult moeten controleren of je het goed hebt gedaan en ervoor zorgen dat alles nog steeds werkt zoals bedoeld. 

Als u bijvoorbeeld jQuery gebruikt, moet u zorgvuldig kiezen welke van uw scripts u moet uitstellen omdat er een probleem met uitstellen en jQuery.

Daarnaast zul je merken dat er op Stack Overflow heel veel vragen zijn over jQuery, async en defer, wat vaak gaat over hoe je defer en async moet implementeren, als dat al zou moeten, voor je scripts die afhankelijk zijn van jQuery. 

Dus, wat zijn de resultaten? Moet je je scripts uitstellen?

Als dat zo is, gaan we nu kijken hoe JavaScript in WordPress kan worden uitgesteld!

Hoe parsering van JavaScript in WordPress uit te stellen

Het uitstellen van het ontleden van JavaScript in WordPress kan vrij eenvoudig zijn.

Je kunt gewoon een van de duizenden plug-ins in de WordPress-repository installeren en je bent klaar om te gaan. Maar er zijn ook geavanceerde manieren om dit te doen als u meer controle nodig heeft, vooral als u complexe scripts gebruikt om uw site aantrekkelijker en interactiever te maken. 

In deze sectie gaan we vijf verschillende manieren bekijken om uitstel-parsing van JavaScript in WordPress uit te voeren: via plug-ins, via functies.php en het handmatig bewerken van code. 

Er zijn zoveel plug-ins in de WordPress-repository die u kunnen helpen de prestaties van uw website te verbeteren.

Er zijn er die zijn toegewijd aan een bepaalde taak, zoals het verkleinen van uw HTML-code en er zijn plug-ins die proberen alle prestatiegerelateerde tweaks in één plug-in op te nemen, zoals de mogelijkheid om CSS- en JavaScript-bestanden te verkleinen en uit te stellen, browsercaching te implementeren en te benutten (die we in dit artikel uitgebreid hebben behandeld) En nog veel meer. 

Niet alle plug-ins zijn echter gelijk gemaakt. Sommige werken geweldig, andere werken goed en sommige werken helemaal niet en kunnen zelfs sommige of alle functionaliteit van uw site verbreken. 

(Als je liever hebt dat iemand met ervaring dit voor je afhandelt, kun je dit voor elkaar krijgen met een goedkoop Fiverr-optreden door op de onderstaande knop te klikken.)

1. Stel het parseren van Javascript uit met de Async-plug-in

Eerlijk gezegd raden we je ten zeerste aan om te kiezen voor een premium plug-in (die doodgoedkoop is), maar je bent er zeker van dat je niet alleen deze waarschuwing oplost, maar ook een hele reeks problemen met de laadsnelheid van websites.

We beginnen met een van de meest populaire die bedoeld zijn om een ​​enkele taak uit te voeren die in dit artikel wordt gedefinieerd.

Een van de meest populaire keuzes om deze taak uit te voeren is Async Javascript. Deze plug-in is gericht op het verbeteren van de prestaties van uw site door aan te passen hoe uw scripts worden geladen en zoals WP Rocket hieronder, wordt het ook geleverd met extra geavanceerde functies waarmee u kunt uitsluiten dat bepaalde scripts worden uitgesteld.

Dit zijn de stappen die u moet uitvoeren om deze plug-in te gebruiken.

1. Download de Async-plug-in hier.
2. Klik op Plug-ins> Nieuw toevoegen in de WP-backend.
3. Klik op Upload plug-in en selecteer het bestand dat u zojuist hebt gedownload.
4. U kunt ook zoeken naar Async Javascript en klikken op Installeer nu.
5. Klik op Activeren van de geïnstalleerde plug-in.
6. Ga naar Plugins en klik op Instellingen voor de Async-plug-in die u zojuist hebt geïnstalleerd.
7. We raden u aan te klikken op Asynchrone Javascript inschakelenof Asynchrone toepassen als twee van de meest voorkomende manieren om de fix toe te passen.
8. Als deze niet werken, kunt u een paar verschillende combinaties proberen.
9. Test uw website, om te zien of alles nog goed werkt.

Misschien is een van de sterke punten dat je naast de mogelijkheid om bepaalde scripts uit te stellen, ook de mogelijkheid hebt om te kiezen welke scripts in plaats daarvan moeten worden uitgesteld:

Mogelijk merkt u ook dat u de mogelijkheid heeft om een ​​script te asynchroniseren of uit te stellen. Voor meer informatie over het verschil tussen de twee kun je dit lezen read dit artikel.

Een uniek kenmerk van deze plug-in is dat je kunt opgeven om een ​​bepaald thema of een bepaalde plug-in uit te sluiten.

Er is ook een optie om GTMetrix op uw site te integreren, zodat u altijd de prestaties kunt controleren. Houd er rekening mee dat elke keer dat u een test uitvoert, er echter een API-tegoed wordt afgeschreven van uw GTMetrix-account.

Terwijl sommige mensen zullen aanbevelen WP Uitgestelde JavaScript, deze plug-in is al meer dan 3 jaar niet bijgewerkt en is niet getest met de laatste 3 grote versies, dus we raden u ten zeerste aan deze niet te gebruiken. Het kan nog steeds werken, maar het is niet getest, dus het is een risico dat u niet moet nemen.

Als je een relatief eenvoudige site hebt en je wilt je laadtijden verder verbeteren, dan is dit misschien precies wat je nodig hebt. Deze plug-in vereist helemaal geen configuratie - gewoon installeren, activeren en vergeten.

Houd er nogmaals rekening mee dat deze niet wordt aanbevolen voor complexe sites zoals e-commerce vanwege het gebrek aan geavanceerde aanpassingsopties en vanwege de leeftijd. Het kunnen finetunen van JavaScript-uitstelopties is cruciaal voor grote en complexe sites.

2. WP Rocket

Momenteel is WP Rocket de toonaangevende plug-in voor WordPress-prestaties en biedt niet alleen de mogelijkheid om het ontleden van JavaScript-bestanden uit te stellen, maar ook uw CSS-bestanden. Daarnaast krijg je tal van andere prestatieverbeteringsopties.

Sommige functies omvatten het volgende: 

• Verkleining - verkleint de code van uw site zodat deze sneller laadt. Het doet dit door spaties en andere onnodige tekens uit de code te verwijderen zonder de kernfunctionaliteit aan te tasten.
• Concatenatie - combineert meerdere CSS- en JavaScript-bestanden in één.
• Lazy loading - dit is de uitstelmodus voor videobestanden en andere multimedia-inhoud zoals afbeeldingen. Het vertraagt ​​het laden van deze resource-intensieve bestanden totdat de gebruiker er naar toe scrolt.

Een van de beste dingen van WP Rocket is dat als je het eenmaal hebt geïnstalleerd en geactiveerd, je het gewoon met rust kunt laten en je automatisch prestatieverbeteringen krijgt.

U kunt echter geavanceerde instellingen configureren voor een nog grotere prestatieverbetering, maar houd er rekening mee dat sommige hiervan nadelige gevolgen kunnen hebben voor uw site. En daarom is hun uitsteloptie voor JavaScript- en CSS-bestanden niet standaard ingeschakeld, want als het goed is gedaan,lessZe kunnen namelijk dingen kapot maken.

Gelukkig kun je bepaalde scripts uitstellen van uitstel.

U kunt eerst proberen al uw scripts uit te sluiten en vervolgens het ontleden van Javascript-bestanden een voor een uitstellen totdat u de problematische vindt. Zij hebben uitgebreide documentatie om je daarbij te helpen. Op deze manier kunt u prestatieverbeteringen maximaliseren zonder enkele of alle functionaliteiten van uw website te verbreken of op te offeren.

WP Rocket is een premium plug-in, maar gezien de prijs en de geboden functionaliteit (niet alleen het uitstellen en asynchroon van JS-bestanden, maar ook tal van andere optimalisaties die gegarandeerde om uw website sneller te maken), zijn wij van mening dat het de prijs zeer waard is.

WP Rocket downloaden

3. Speed ​​Booster-pakket

Een andere geweldige, alles-in-één prestatie-plug-in waarmee u het ontleden van Javascript-bestanden kunt uitstellen is: Speed ​​Booster-pakket. Het is vergelijkbaar met WP Rocket in termen van functies, maar het is gratis. Het heeft de meeste basisfuncties van WP Rocket, zoals minificatie, uitstellen, het verwijderen van onnodige bestanden, enz.

Hieronder ziet u enkele van de functies die beschikbaar zijn in de plug-in: 

Op het tabblad Geavanceerd kunt u ervoor kiezen om sommige scripts uit te sluiten van verplaatsing naar de voettekst, uitstel of beide. U kunt echter maximaal 4 uitgesloten scripts toevoegen, wat zeker een beperking is voor complexe en grote sites. 

Over het algemeen is het een goed gratis alternatief voor WP Rocket, geschikt voor kleine sites.

4. Functies.php tweaks gebruiken

Wat als u geen plug-ins wilt gebruiken?

Er is nog een truc die je kunt doen om het ontleden van Javascript in WordPress uit te stellen en dat is door het functions.php-bestand van je thema te bewerken.

Kopieer eenvoudig de onderstaande code en plak deze onderaan het function.php-bestand van uw thema: 

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 ); 

Houd er rekening mee dat je je site zou kunnen verknoeien als je het verkeerd doet, dus let goed op en zorg ervoor dat je het juiste bestand in het juiste thema bewerkt en dat je het codefragment op de juiste locatie plakt. Zorg ervoor dat u niets anders verwijdert/wijzigt.

Gelukkig kun je een child-thema maken om je functies.php-bestand veilig te bewerken. Als u uw thema ooit vervangt of bijwerkt, kunt u bovendien eenvoudig al uw aangepaste bewerkingen in het bestand behouden. Hier is een geweldig artikel waarin wordt uitgelegd hoe u een child-thema maakt. Zodra je een child-thema hebt gemaakt, plak je het codefragment in het function.php-bestand van het kind, sla je het op en is alles klaar.

Lees verder: Berichtenblokkering is actief

5. Pas uw code handmatig aan Manual

Dit klinkt misschien eng, vooral als je niet van coderen houdt, maar voor gevorderde gebruikers is het handmatig aanpassen van de code een geweldige manier om het ontleden van JavaScript-bestanden in WordPress uit te stellen. 

Varvy heeft een geweldig codefragment waarmee de oorspronkelijke inhoud van uw webpagina volledig kan worden geladen voordat andere externe scripts worden geladen. Het codefragment staat hieronder:

  functie downloadJSAtOnload() {
    var element = document.createElement("script");
    element.src = "//www.uwdomein.com/defer.js";
    document.body.appendChild(element);
  }
  als (venster.addEventListener)
    window.addEventListener("load", downloadJSAtOnload, false);
  anders als (window.attachEvent)
    window.attachEvent("onload", downloadJSAtOnload);
  anders window.onload = downloadJSAtOnload;

Vervang defer.js door uw eigen scriptbestand. Als je het eenmaal hebt bewerkt om je eigen script weer te geven, plak je het net voor je HTML's label. In WordPress kun je dat doen door het footer.php-bestand van je thema te bewerken.

Nogmaals, het wordt aanbevolen om een ​​child-thema te gebruiken als u bewerkingen in uw themabestanden zou maken. Een kleine opmerking: het bewerken van footer.php via het child-thema is anders dan functions.php: je moet de volledige footer.php van je hoofdthema samen met de inhoud ervan kopiëren naar je child-thema en vervolgens de bewerkingen aanbrengen/toevoegen. 

Als je geen zin hebt om je footer.php te bewerken, kun je een plug-in gebruiken met de naam Insert Headers en Footers. 

Plak het codefragment in het vak "Scripts in voettekst", klik op opslaan en u zult het script toevoegen aan het onderste gedeelte van de code van uw site, boven de label. 

En dat zijn alle manieren waarop u het ontleden van JavaScript in WordPress kunt uitstellen! Maar werken ze? Hebben ze de prestaties van uw site verbeterd? Laten we de resultaten controleren!

De resultaten testen

Om de resultaten te testen, gaat u naar GTMetrix.com, PageSpeed ​​Insights en Pingdom Tools om te zien of uw prestatieniveau en laadtijd zijn verbeterd.

In GTMetrix moet je score minimaal 71 zijn. Hoe meer hoe beter! Een perfecte score zou dit leuk vinden :-) 

Zoek in PageSpeed ​​Insights naar 'first paints':

Wanneer u test of uw implementatie van defer-parsing van JavaScript ertoe heeft geleid dat de scripts zijn uitgesteld, streef dan naar groene resultaten in First Contentful Paint en First Meaningful Paint.

Vergelijk voor en na uitstel en controleer of ze verbeteren.

Kijk voor Pingdom Tools in de sectie laadvolgorde en kijk of de meeste, zo niet alle, scriptbestanden als laatste zijn geladen. Vergelijk voor en na het uitstellen en kijk of scriptbestanden van positie zijn veranderd in de laadvolgorde (dwz zijn ze eerder of later geladen). 

Vond je de resultaten bevredigend? Als dat zo is, geweldig werk! Zo niet, probeer dan meer te experimenteren. Als je andere methoden op onze lijst hebt gebruikt, probeer dan geavanceerde plug-ins te gebruiken waarmee je je uitstel- en prestatie-opties verder kunt aanpassen. Bekijk bovendien enkele aanbevelingen van Google in de volgende sectie. Ze kunnen je misschien helpen.

Het parseren van JavaScript uitstellen met een script Using

Er zijn verschillende technieken die u kunt gebruiken om het ontleden van JavaScript uit te stellen. In het volgende gedeelte wordt besproken wat u moet doen. 

Samengevat moet u het volgende doen:

1. Kopieer de onderstaande code en voeg deze toe net voor de tag in uw HTML.
2. Vervang example.js in de onderstaande code door het bestand met het uit te stellen script.
3. Sla de wijzigingen op.
4. Test je website om het effect te zien.

Laten we deze stappen in meer detail bekijken:

• Gebruik een script om een ​​extern JS-bestand aan te roepen zodra de eerste pagina klaar is met laden. Op varvy.com stelt Patrick Sexton een methode voor waarmee de inhoud van de website kan worden geladen voordat een JS wordt geladen (om ervoor te zorgen dat de gebruiker de inhoud als eerste kan zien). Dit zorgt ervoor dat het kritieke laadpad niet wordt beïnvloed door scripts die renderblokkering veroorzaken. De methode omvat het maken van een extern bestand dat niet nodig is om de inhoud in eerste instantie weer te geven. Door dan het volgende script toe te voegen net voor de in de HTML-code. In het volgende voorbeeld wordt een bestand voorbeeld.js gebruikt, dat dienovereenkomstig moet worden bijgewerkt. 

  <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>

  Zodra de webpagina is geladen, begint het script met downloaden en uitvoeren and voorbeeld.js - het probleem is dat u het bestand handmatig moet aanmaken.

• De attributen async of uitstellen gebruiken. De JS-tag async or uitstellen attributen werken op een vergelijkbare manier - de manier waarop ze werken is zodanig dat ze de hoeveelheid tijd minimaliseren waar HTML-parsing stopt om te wachten op het downloaden en uitvoeren van scripts. asynchrone laat het downloaden van JS-bestanden asynchroon plaatsvinden in plaats van synchroon, dwz er wordt een nieuwe thread geopend om te downloaden terwijl HTML doorgaat met ontleden. Defer instrueert de browser om het script uit te voeren NADAT het laden van de pagina is voltooid. Dit is een andere manier om het parseren van de pagina te voltooien en dus geen impact te hebben op de laadtijd. Beide tags minimaliseren de weergaveblokkering van JS. Bij het gebruik van beide hoeft de JS niet te wachten tot de HTML is geparseerd voordat hij begint met downloaden of uitvoeren - wat ervoor zorgt dat de pagina nog steeds snel wordt geladen. Zie hoe de uitvoering gebeurt voor respectievelijk async en uitstellen in de onderstaande afbeeldingen.
  
  

• Verplaats JavaScript naar de onderkant van uw pagina. De 3e en laatste suggestie is om alles te verplaatsen <script> tags onderaan de pagina's (vooral als ze niet kritisch zijn, zoals advertenties). Deze methode is niet ideaal, omdat de browser nog bezig zal zijn totdat het laatste script volledig is gedownload en geparseerd. Aangezien de browser druk lijkt te zijn, kunnen sommige bezoekers de pagina pas gebruiken als deze volledig is geladen, wat kan leiden tot een mogelijk negatieve gebruikerservaring.

Suggesties van Google

Google heeft talloze bronnen om de prestaties van uw website te verbeteren. Ze hebben zelfs een pagina gewijd aan het verbeteren van de laadtijd van het script van uw site, wat u kunt controleren hier.

In het linkermenu vindt u ook andere bronnen waarmee u de prestaties van uw site kunt verbeteren. Zorg ervoor dat u ze ook bekijkt als uw PageSpeed ​​Insights-rapport problemen met hen meldt.

Voor een overzicht raadt Google aan om in plaats daarvan kritieke scripts in te voeren en niet-kritieke scripts te asynchroniseren of uit te stellen. Dat betekent dat scripts die door uw site worden vereist, in plaats daarvan in de HTML moeten worden ingesloten. Dat is echter de taak van ontwikkelaars van WordPress-thema's en plug-ins - maar als u uw thema of plug-in zou maken, houd hier dan rekening mee.

Lees verder:  Hoe (GEWELDIGE) Javascript-ontwikkelaars inhuren

Daarnaast schetste Google ook een manier waarop u handmatig kunt identificeren welke van uw scripts de weergave van uw webpagina blokkeert vanwege een zeer lange laadtijd. U kunt dat doen door gebruik te maken van Chrome's Dev Tools' dekking Tab.

Stel ongebruikte CSS uit

Een soortgelijk probleem dat je tegenwoordig zou kunnen zien optreden, ook in de Pagespeed Insights-tool, is het uitstellen van ongebruikte CSS. Hoewel dit een soortgelijk probleem is, zijn de wortels enigszins anders. In wezen zou de CSS moeten worden geherstructureerd om dit correct op te lossen.

{laadpost imh-embed}

Veelgestelde Vragen / FAQ

Hoe los ik het uitstellen van het parseren van JavaScript in WordPress op?

Om de uitgestelde parsering van Javascript in WordPress op te lossen, moet u enkele kleine wijzigingen in uw code aanbrengen. U kunt ofwel alle scripts vinden en de . toevoegen uitstellen tag naar hen toe, of u kunt een plug-in installeren die dit automatisch doet. U kunt ook een script maken dat de bestanden asynchroon laadt, zoals wordt gedemonstreerd in de sectie Hoe u Javascript kunt uitstellen met behulp van een scriptsectie van dit artikel.

Wat is JavaScript uitstellen?

Defer-parsing van Javascript is het proces waarbij de browser van uw websitebezoekers wordt geïnstrueerd om specifieke bestanden te laden NADAT de pagina is geladen. Dit stelt de gebruiker in staat om de inhoud van de pagina veel sneller te zien dan wanneer u defer-parsing van Javascript niet zou implementeren

Wat is het verschil tussen asynchrone en uitgestelde Javascript?

Async betekent dat de Javascript-inhoud wordt geladen als zijn eigen nieuwe verbinding, parallel aan alle bestaande andere code. Met async creëert de browser een nieuwe verwerkingsthread die bestaande downloads niet vertraagt ​​terwijl het Javascript wordt gedownload en uitgevoerd. Defer daarentegen vraagt ​​de browser om het script te ontleden, nadat de rest van de inhoud is gedownload. Hoewel dit meestal goed is voor de snelheid, kunnen er problemen zijn met uw inhoud als deze verwijst naar het script dat is uitgesteld (omdat het niet beschikbaar zal zijn).

Hoe verklein ik JavaScript in WordPress?

Om Javascript in WordPress te verkleinen, moet u een plug-in implementeren die dit automatisch doet. Hierover lees je meer hier. 

Afsluiten

En je hebt zojuist gezien hoe je het ontleden van JavaScript in WordPress kunt uitstellen.

We hebben geleerd dat dit kan worden bereikt via plug-ins of via handmatige aanpassingen. Het heeft tal van voordelen voor uw site, zoals verbeterde SEO, betere gebruikerservaring en snellere laadtijden. Het is daarom belangrijk ervoor te zorgen dat u zoveel mogelijk scripts uitstelt voor maximale prestatiewinst.

Maar onthoud, maak altijd een back-up en test veel om er zeker van te zijn dat je de juiste scripts hebt uitgesteld! Het lijkt misschien vervelend, maar als het goed wordt gedaan, zijn de voordelen en voordelen enorm.

Als je de laadsnelheid van je website echt wilt maximaliseren, raden we je aan dit over te laten aan de PRO's zoals de jongens van WP Rocket, om de maximale voordelen hiervan en honderden andere acties te krijgen om je website sneller te laten laden.

Bezoek WP Rocket om uw website vandaag nog sneller te maken  

Over de auteur

Auteur: David AttardWebsite: https://www.linkedin.com/in/dattard/E-mail: David@collectiveray.com

David heeft de afgelopen 21 jaar in of rond de online en digitale industrie gewerkt. Hij heeft ruime ervaring in de software- en webontwerpindustrie met behulp van WordPress, Joomla en de niches eromheen. Hij heeft gewerkt met softwareontwikkelingsbureaus, internationale softwarebedrijven, lokale marketingbureaus en is nu hoofd Marketing Operations bij Aphex Media - een SEO-bureau. Als digitale consultant ligt zijn focus op het helpen van bedrijven om een ​​concurrentievoordeel te behalen door gebruik te maken van een combinatie van hun website en digitale platforms die vandaag de dag beschikbaar zijn. Zijn mix van technologische expertise gecombineerd met een sterk zakelijk inzicht geeft zijn geschriften een concurrentievoordeel.