tijdens een website-snelheidstest de waarschuwing "Pasen van JavaScript uitstellen" van PageSpeed Insights tegengekomen
JavaScript uitstellen in WordPress
Er zijn drie belangrijke manieren om het parsen van JavaScript in WordPress uit te stellen. Een WordPress-plugin biedt een uitstekende oplossing. Er zijn zowel gratis als betaalde plugins beschikbaar. Aan de hand van twee populaire plugins laten we je precies zien hoe je dit kunt doen.
De Varvy-methode is een optie als je technisch onderlegd bent en bereid bent de code op je eigen site aan te passen om het codefragment van Varvy te gebruiken.
Het is ook mogelijk om het laden van scripts automatisch uit te stellen in het functions.php-bestand van je child-thema door een klein codefragment aan het bestand toe te voegen. Laten we beginnen met de eerste methode:
1. Gratis asynchrone JavaScript-plugin
Frank Goossens heeft een gratis WordPress-plugin gemaakt genaamd Async JavaScript, ontwikkeld door dezelfde persoon achter de populaire Autoptimize-plugin.
Hiermee kun je het parsen van JavaScript eenvoudig uitstellen door gebruik te maken van async- of defer-methoden.
Je kunt beginnen met het installeren en activeren van de gratis plugin van WordPress.org. Daarna kun je de plugin configureren in het gedeelte 'Async JavaScript' op de pagina 'Instellingen'.
Bovenaan kun je de functionaliteit van de plugin inschakelen en kiezen tussen asynchroon en uitgesteld.
JavaScript wordt gedownload terwijl de HTML nog wordt geparseerd tijdens een asynchrone download, maar het parsen van de HTML wordt gepauzeerd om de JavaScript uit te voeren.
Deze functie maakt het mogelijk om JavaScript te downloaden terwijl de HTML nog wordt verwerkt, en wacht met de uitvoering totdat de HTML is verwerkt.
Je kunt verderop op de pagina kiezen hoe jQuery wordt verwerkt. Het uitstellen van het verwerken van je jQuery-scripts kan de kernfunctionaliteit van je website verstoren. Om zeker te zijn, kun je jQuery beter uitsluiten, maar experimenteren met uitstel is ook prima. Test je website voordat je hem lanceert.
Er is ook een handige, gebruiksvriendelijke functie waarmee je specifieke thema's of plug-ins die actief zijn op je site kunt selecteren door aan te geven of ze al dan niet moeten worden uitgesteld. Daarnaast kun je handmatig specifieke scripts toevoegen aan of uitsluiten van de vertragingslijst.
2. Gebruik de WP Rocket-plugin
De WP Rocket-plugin is een van de weinige caching-plugins die we toestaan, omdat deze een ingebouwde integratie voor caching op serverniveau heeft die naadloos samenwerkt met de WP Rocket-plugin.
Het tabblad 'Bestandsoptimalisatie' in het WP Rocket-dashboard bevat veel andere opties voor prestatieoptimalisatie en de mogelijkheid om het laden van JavaScript uit te stellen. Deze optie vindt u onder het tabblad 'Prestaties'. In het gedeelte 'JavaScript-bestanden' vindt u een optie met de tekst 'JavaScript uitgesteld laden'.
Gebruik de door Varvy aanbevolen methode
Eerder in dit bericht schreven we dat Patrick Sexton van Varvy aanraadde om een codefragment te gebruiken dat wacht totdat de eerste keer dat uw site is geladen, voordat JavaScript wordt gedownload en uitgevoerd.
Door het codefragment dat Varvy levert aan te passen en vervolgens het script direct vóór de afsluitende tag van de body-tag te plaatsen, kunt u deze methode implementeren door het codefragment van Varvy als sjabloon te gebruiken.
Meer artikelen zoals dit vind je op de Seahawk Media Blog .
Wil je je WordPress-site sneller maken? Kies dan voor onze WordPress-snelheidsoptimalisatieservice .
