Hoe u defer-parsing van JavaScript kunt gebruiken om uw website een boost te geven?

Paginasnelheid is een van de belangrijkste aspecten van uw website. Hoeveel je website ook te bieden heeft, niemand wacht graag minuten voordat je website laadt. Tegelijkertijd, als uw website sneller laadt, is de kans groter dat bezoekers worden vastgehouden.

Trouwens, paginasnelheid is ook verantwoordelijk voor de positie van uw website in zoekmachines. Het helpt de crawlers te begrijpen hoe effectief en onderhouden uw website is. In deze zelfstudie zullen we zien Hoe u het parseren van JavaScript in WordPress kunt uitstellen.

Waarom is het belangrijk om het ontleden van JavaScript uit te stellen?

Om het concept van Defer Parsing van JavaScript volledig te begrijpen, moet u begrijpen hoe een browser een webpagina weergeeft. Wanneer uw browser een pagina opvraagt, stuurt uw webserver deze terug, die wordt gedownload in de vorm van een HTML-document.

Het HTML-document bevat verschillende elementen en bronnen waarvan de browser elementen leest terwijl de aanvullende bronnen worden gedownload. En ten slotte wordt de pagina alleen weergegeven als alle bronnen zijn gedownload.

Maak geweldige websites

Met de beste gratis paginabuilder Elementor

Begin nu

Bronnen die groter zijn, hebben veel meer tijd nodig om te worden gedownload. Afbeeldingen zijn goed voor de meeste van deze bronnen, daarom is het belangrijk om uw afbeeldingen te optimaliseren. Bovendien kunt u het downloaden van onnodige scripts uitstellen door ze te identificeren en uw webpagina te versnellen.

Hoe te identificeren welke scripts moeten worden uitgesteld?

Voor een minimale website die niet veel JavaScript gebruikt, zijn er mogelijk geen scripts die essentieel zijn om de pagina te laden. Integendeel, het is belangrijk voor een vrij complexe website om een gedetailleerde analyse van alle scripts te hebben om te begrijpen welke essentieel zijn voor het laden van de pagina.

De eerste methode om onnodige scripts te verwijderen, is door de scripts één voor één te verwijderen en tegelijkertijd eventuele fouten in de JavaScript-console te controleren. Tegelijkertijd vereist deze methode veel inspanning en kennis over JavaScript.

De andere methode is om de snelheidstesttool te gebruiken om te beoordelen welke scripts essentieel zijn voor het laden van de pagina. Een van deze tools bevat GTmetrix , waar u alleen de URL van uw website hoeft in te voeren en de resultaten te tonen. Op het tabblad Paginasnelheid vindt u Defer Parsing For JavaScript-sectie, die de lijst met onnodige scripts toont die zijn geladen tijdens het renderen van uw pagina bij het uitvouwen.

Met behulp van de informatie kunt u de scripts verwijderen die niet verantwoordelijk zijn voor de weergave van uw pagina.

Kenmerken uitstellen of asynchroon

Er zijn twee manieren om het downloaden van scripts te elimineren wanneer pagina's worden weergegeven.

Ten eerste, door het kenmerk Defer toe te voegen aan de scripttag, kunt u ervoor zorgen dat de browser geen bronnen downloadt tenzij de pagina is geparseerd. Zodra het renderen en parseren van de pagina is voltooid, kan de browser alle uitgestelde scripts downloaden. Hieronder vindt u een voorbeeldscripttag die laat zien hoe u defer-attributen aan een HTML-pagina kunt toevoegen.

>script src="path/to/script" defer/script

Aan de andere kant kunt u een async-kenmerk toevoegen aan de scripttag. Dit zal de browser begeleiden om het script afzonderlijk te laden. Dit betekent dat de browser de bronnen begint te downloaden wanneer deze de code tegenkomt, terwijl de HTML tegelijkertijd afzonderlijk wordt geparseerd. Het onderstaande voorbeeldscript laat zien hoe u een async-kenmerk kunt toevoegen.

>script src="path/to/script" async/script

Beide kenmerken verschillen in hun manier van downloaden van bronnen. Voor een minimale website is het niet eenvoudig om verschillen op te merken tussen asynchrone en uitgestelde kenmerken. Tegelijkertijd is het voor een complexere webapplicatie aan te raden om de defer-techniek te gebruiken.

Ontleden van JavaScript uitstellen

Hier zijn de twee methoden die u kunt gebruiken voor het uitstellen van het parseren van JavaScript.

1. Pas het Functions.php-bestand aan

Als u gewend bent aan WordPress-ontwikkeling, moet u weten dat het geen goed idee is om scripts rechtstreeks aan de HTML-opmaak toe te voegen. Maar u kunt ingebouwde WordPress-functies gebruiken om bronnen aan te vragen.

Om een async- of defer-attribuut aan uw scripts toe te voegen, moet u de volgende functie toevoegen aan het functions.php-bestand van uw WordPress-thema.

add_filter('script_loader_tag', 'add_defer_tags_to_scripts');
function add_defer_tags_to_scripts($tag){
    # List scripts to add attributes to
    $scripts_to_defer = array('script_a', 'script_b');
    $scripts_to_async = array('script_c', 'script_d');
 
    # add the defer tags to scripts_to_defer array
    foreach($scripts_to_defer as $current_script){
        if(true == strpos($tag, $current_script))
             return str_replace(' src', ' defer="defer" src', $tag);
    }
 
    # add the async tags to scripts_to_async array
    foreach($scripts_to_async as $current_script){
        if(true == strpos($tag, $current_script))
             return str_replace(' src', ' async="async" src', $tag);
    }
     
    return $tag;
 }

Zorg ervoor dat u elk script in de wachtrij plaatst voordat u de attributen defer en async aan de scripttags toevoegt.

add_action('wp_enqueue_scripts', 'enqueue_custom_js');
function enqueue_custom_js() {
    wp_enqueue_script('script_a', get_stylesheet_directory_uri().'/script_a.js');
    wp_enqueue_script('script_b', get_stylesheet_directory_uri().'/script_b.js');
    wp_enqueue_script('script_c', get_stylesheet_directory_uri().'/script_c.js');
    wp_enqueue_script('script_d', get_stylesheet_directory_uri().'/script_d.js');
}

2. Plug-ins voor het uitstellen van het parseren van JavaScript

Het is begrijpelijk dat niet iedereen veel kennis en vaardigheden heeft om de bovenstaande methode te volgen. Daarom kunnen voor beginners sommige plug-ins worden gebruikt om JavaScript uit te stellen.

Asynchrone JavaScript

Async JavaScript is een gratis te gebruiken WordPress-plug-in die u op uw WordPress kunt installeren om de taak uit te voeren.

Nadat u de plug-in hebt geïnstalleerd en geactiveerd, gaat u naar de plug-in- instellingen en vinkt u de optie Async JavaScript inschakelen aan.

Scroll naar beneden om te kiezen tussen asynchrone of uitgestelde methode.

Scroll naar beneden voor meer geavanceerde opties waar u afzonderlijk scripts kunt toevoegen of verwijderen om te asynchroniseren en uit te stellen. Bovendien kun je plug-ins en thema's verwijderen uit de wijzigingen die deze plug-in gaat aanbrengen.

Automatisch optimaliseren

Autoptimize is een andere plug-in waarmee u het ontleden van JavaScripts kunt uitstellen .

Controleer na het installeren en activeren van de plug-in de optie JavaScript-code optimaliseren op de instellingenpagina . Hierdoor worden alle onnodige scripts uitgesteld en naar de voettekst verplaatst.

U kunt ook de scripts voor het async-kenmerk toevoegen op het tabblad Extra .

U kunt het bestand Functions.php bewerken of plug-ins gebruiken zoals Autoptimize en Async JavaScript . Dit zijn de twee betrouwbare methoden om het kenmerk async en defer toe te voegen aan scripttags.

We hopen dat deze technieken u zullen helpen uw website sneller te maken. Voel je vrij om met ons mee te doen op onze Facebook  en Twitter om op de hoogte te blijven van onze berichten.