Render-Blocking JavaScript en CSS in WordPress: 5 plug-ins om het te repareren

Het is nog niet zo lang geleden dat Google aankondigde dat websites die meer dan drie seconden nodig hebben om te laden niet SEO-vriendelijk zijn.

In dit tijdperk van internet en digitale marketing moet je de snelste website hebben als je effectief wilt concurreren met duizenden rivalen over de hele wereld. Het lijdt geen twijfel dat een snellere website betere kansen heeft om bezoekers aan te trekken en hun betrokkenheid bij hun inhoud te vergroten.

Het runnen van een WordPress-website betekent een aanzienlijk aantal scripts die tegelijkertijd worden uitgevoerd om uw site toegankelijk te maken.

Niet al deze items zijn echter altijd essentieel om te laden. Als u ooit de prestaties van uw website heeft gecontroleerd met Google Page Speed ​​Insights, bent u waarschijnlijk de render-blokkerende JavaScript- en CSS-optie tegengekomen die van invloed is op de snelheid.

Vandaag gaan we het hebben over deze externe bestanden en u informeren over de manieren waarop u ze kunt verwijderen om uw site te verbeteren.

 

Wat blokkeert JavaScript en CSS?

Kortom, JavaScript en CSS die het renderen blokkeren, zijn een reeks stylesheets en scripts die nodig zijn om volledig te worden uitgevoerd voordat een site wordt geladen en zichtbaar wordt.

De thema's en plug-ins die u op uw WordPress-website installeert, voegen veel van deze bestanden toe aan het front-end gedeelte van uw website. En zoals je misschien al geraden hebt, vertragen sommige de laadtijd van de pagina en voorkomen ze dat je pagina's worden weergegeven.

Wanneer een websitebezoeker uw website opent, laadt de internetbrowser eerst de benodigde JavaScript- en CSS-bestanden voor de HTML.

Dit is een gewone procedure aangezien een pagina zonder deze essentiële elementen onbruikbaar zal zijn. Het probleem is dat de webbrowser de pagina niet kan weergeven voordat deze bestanden volledig zijn geladen.

De truc hier is dat je het laden van sommige scripts kunt uitstellen zonder problemen te veroorzaken voor wat de bezoekers zien bij het openen van een pagina van je.

Website-eigenaren kunnen wijzigingen aanbrengen in hun site om te voorkomen dat de webbrowser codes laadt buiten wat nodig is voor het bovenste gedeelte van de pagina dat een gebruiker onmiddellijk ziet.

Met andere woorden, de browsers laden alleen de essentiële bestanden voor die sectie voordat een gebruiker naar beneden scrolt. Dit gedeelte van webpagina's wordt ATF genoemd, wat staat voor Above the Fold. Andere delen waarvoor gebruikers naar beneden moeten scrollen om te kunnen zien, zijn de niet-ATF-sectie.

Als uw website de JavaScript- en CSS-codes laadt die betrekking hebben op de niet-ATF-secties, duurt het daarom langer voordat de pagina's zijn geladen. En daarom probeert Google u te vertellen dat u moet stoppen met het uitvoeren van onnodige bronnen in de codes van uw website.

 

Vind Render-blokkerende JavaScript en CSS

De eenvoudigste manier om dit probleem te achterhalen, is door een snelheidstest uit te voeren met Google PageSpeed ​​Insights. Zodra u de pagina bezoekt, hoeft u alleen maar uw URL-adres in het vereiste veld in te voeren en vervolgens op de knop 'Analyseren' te klikken.

Als dit probleem zich voordoet op de pagina, ziet u een suggestie die aangeeft dat u JavaScript en CSS die de weergave blokkeren, moet verwijderen in inhoud boven de vouw.

Het zou het beste zijn als je dat niet de meeste vergeet websites scoren ergens tussen de 70 en 90, en zelfs de best presterende bereiken zelden een getal in de buurt van 100. Forceer uw site dus nooit om 100 te bereiken. Doe zoveel als u kunt om de hoogste score te behalen zonder de gebruikerservaring te beïnvloeden negatief.

Afhankelijk van het thema en de tools die u op uw site gebruikt, zijn sommige scripts: essentieel voor de perfecte UX je zou moeten aanbieden aan je publiek. Het is daarom totaal onverstandig om ze te verwijderen in een poging om een ​​iets hogere score te behalen op de resultatenpagina van deze Google-tool.

 

Render-blokkerende JavaScript en CSS repareren

Er zijn tal van strategieën om JavaScript-weergave te elimineren. De belangrijkste methoden zijn Async en Defer. Met de eerste methode kan de browser van de gebruiker het JavaScript downloaden terwijl andere HTML-onderdelen worden geparseerd.

Hoewel het parseren niet volledig stopt tijdens het downloaden van het bestand, wordt het HTML-parser pauzeert om het script uit te voeren wanneer het wordt gedownload. Aan de andere kant laat de Defer-benadering de browser het JavaScript downloaden terwijl andere HTML-onderdelen worden geparseerd en wordt het script pas uitgevoerd als het parseren van HTML is voltooid.

Het elimineren van de render-blokkerende CSS is een grotere uitdaging, omdat u de benodigde codes voor het laden van de ATF-inhoud kunt vertragen. De procedure is een beetje ingewikkeld en vereist een goed begrip van webontwikkeling.

Desalniettemin richten we ons tot de gemiddelde gebruikers die hun website alleen beheren.

We weten allemaal dat WordPress een modulair systeem is waarmee gemiddelde gebruikers alles kunnen aanpassen zonder een enkele regel code te schrijven. Het oplossen van dit probleem is ook hetzelfde en u kunt het probleem snel oplossen door de juiste plug-in te installeren.

 

Beste WordPress-plug-ins om Render-blokkerende JavaScript en CSS te repareren

In de volgende paragrafen introduceren we vijf best presterende WordPress-plug-ins die u helpen dit probleem het meest diepgaand op te lossen.

Voorzichtigheid: Voordat u een van de volgende hulpprogramma's gebruikt, moet u een back-up van uw website maken om mogelijk verlies van gegevens te voorkomen.

 

Autoptimize

De Autoptimize plug-in is expliciet gemaakt om de problemen aan te pakken die worden gesuggereerd door de website-analysetools zoals Google PageSpeed ​​Insights. Het verbetert de levering van JavaScript- en CSS-bestanden zonder veel aandacht voor andere aspecten van websiteprestaties.

Als u op zoek bent naar basisoptimalisatiefuncties, biedt deze plug-in u wat u nodig hebt. Een goed deel van deze tool is dat het de afbeeldingen van uw website converteert naar het geoptimaliseerde WebP-formaat.

Nadat u Autoptimize hebt geïnstalleerd en geactiveerd, moet u de selectievakjes 'Optimaliseer JavaScript-code' en 'Optimaliseer CSS-code' in de instellingen van de plug-in aanvinken. Zorg ervoor dat u de vakjes onder deze twee opties die de CSS- en scriptbestanden samenvoegt, niet aanvinkt.

Hoewel deze plug-in gratis beschikbaar is, kunt u ook premiumpakketten kopen die u helpen bij het configureren van de website.

 

WP Rocket

WP Rocket is een bekende naam onder de WordPress-optimalisatietools die u helpt bij verschillende aspecten, zoals JavaScript- en CSS-modificatie, instellingen voor lui laden. Het installatieproces van WP Rocket is vrij eenvoudig, maar het kan in de eerste plaats moeilijk zijn om te begrijpen hoe dingen op de interface worden gedaan.

Het is direct uit de doos klaar en past direct na installatie de optimale instellingen toe op uw website. Gezien de onvermijdelijkheid van website-storingen als gevolg van scriptwijzigingen, activeert de plug-in niet standaard de JavaScript- en CSS-instellingen voor het blokkeren van de weergave.

Maar u kunt deze functie eenvoudig inschakelen door naar de instellingen van de plug-in te gaan en de gerelateerde opties te zoeken in de secties 'CSS-bestanden' en 'JavaScript-bestanden'.

De hoofdplug-in kost $ 49 per jaar, inclusief een jaar ondersteuning. Bovendien vindt u meerdere gratis extra's ook voor de kernplug-in op WordPress.

 

Konijnenlader

Konijnenlader is een geavanceerde WordPress-plug-in voor prestatie-optimalisatie, ontworpen om een ​​website sneller, soepeler en efficiënter te laten werken.

Net als het alom geprezen WP Rocket tilt RabbitLoader niet alleen de prestaties van uw site naar nieuwere hoogten, maar introduceert het ook enkele innovatieve functies die uw site onderscheiden van andere spelers in het spel.

Magie in cache plaatsen: RabbitLoader gaat nog een stap verder door een dynamisch cachingsysteem aan te bieden dat zich in realtime aanpast aan veranderingen op uw site, zodat uw bezoekers altijd de nieuwste inhoud zien zonder dat dit ten koste gaat van de snelheid.

Beeldoptimalisatie: Afbeeldingen kunnen een website aanzienlijk vertragen, maar de functie voor beeldoptimalisatie van RabbitLoader is een game-changer. Het comprimeert en verkleint afbeeldingen automatisch naar een optimaal formaat zonder dat dit ten koste gaat van de kwaliteit, zodat uw site snel wordt geladen zonder dat dit ten koste gaat van de visuele aantrekkingskracht.

Trage voortgang: Zowel WP Rocket als RabbitLoader bieden lazyloading voor afbeeldingen en iframes, maar RabbitLoader gaat nog verder door uitgesteld JavaScript-laden aan te bieden.

Toepasbaar op: RabbitLoader is ontworpen om feilloos te werken met een breed scala aan WordPress-thema's en plug-ins, net als WP Rocket. Of u nu een eenvoudige blog of een complexe e-commercewebsite heeft, RabbitLoader is ontworpen om de prestaties van uw site zonder conflicten te verbeteren.

 

W3 Total Cache

W3 Total Cache is een robuuste prestatieverbeteraar die niet alleen cachingproblemen behandelt, maar ook de problemen veroorzaakt door scripts en stylesheets.

U kunt het renderblokkerende JavaScript en CSS eenvoudig verwijderen door eerst de optie Verkleinen in de instellingen van de plug-in in te schakelen en deze in de handmatige modus in te stellen.

Klik vervolgens op het tabblad 'Render-blocking resources elimineren' en kopieer het volledige linkadres van de benodigde bestanden voor het blokkeren van scripts en stylesheets. Nu kunt u deze links gebruiken en ze invoeren in de 'JS-sectie' van de Prestaties>Verkleinen Tab.

W3 Total Cache heeft meer dan een miljoen actieve installaties en u kunt het gratis downloaden naar uw site vanaf de WordPress.org-website.

 

Speed ​​Booster-pakket

Speed ​​Booster-pakket is een betrouwbare tool om stylesheets, JavaScripts, lui laden en het verwijderen van rommel te optimaliseren. Het ontwikkelaarsteam werkt deze plug-in voortdurend bij om deze up-to-date te houden met de nieuwste updates en beveiligingsmaatregelen.

Als u online producten en diensten verkoopt, WooCommerce-specifieke optimalisatie kenmerken van Speed ​​Booster Pack zullen u veel helpen bij het vergroten van de zichtbaarheid van uw winkel op internet.

U kunt JavaScript en CSS op uw WordPress-website snel oplossen door op het tabblad 'Geavanceerd' te klikken in het Speed ​​Booster Pack-menu van uw beheerdersdashboard.

Activeer voor JavaScript de opties 'Scripts naar de voettekst verplaatsen' en 'Ontleding van JavaScript-bestanden uitstellen'. Ga vervolgens naar het menu 'CSS-optimalisatie' en kies uit de beschikbare opties om de prestaties van uw site te verbeteren.

Speed ​​Booster Pack is een gratis oplossing die beschikbaar is op de WordPress.org-website.

 

JCH optimaliseren

JCH optimaliseren is het laatste item in deze lijst met voorgestelde plug-ins dat is uitgerust met handige tools om het laden van pagina's versnellen. Het helpt u bijvoorbeeld het aantal HTTP-verzoeken dat nodig is om uw pagina's te laden te verminderen en tegelijkertijd de grootte van die pagina's te verkleinen.

Sprite-generator is een andere opwindende functie die beschikbaar is in deze plug-in die het aantal HTTP-verzoeken vermindert om de achtergrondafbeeldingen te laden.

Met JCH Optimize kunt u het renderblokkerende JavaScript en CSS verwijderen als u upgradet naar een premium abonnement. Het enige dat u hoeft te doen, is de opties 'Premium' of 'Optimum' te activeren in het gedeelte 'Automatische instellingen'. CSS-bezorgingsinstellingen zijn eveneens alleen beschikbaar in de Pro-versie.

Je kunt deze plug-in gratis installeren vanaf WordPress.org, maar je moet een premium abonnement kopen om het volledige potentieel te benutten. De tariefplannen beginnen vanaf $ 29 voor zes maanden en bereiken $ 99 voor levenslange toegang.

 

Samengevat

De laadsnelheid van de website is een van de meest kritische elementen om doelgroepen aan te trekken, te binden en vast te houden. Geef het een hoge prioriteit bij het optimaliseren van uw website voor zoekmachines en gebruik de Google PageSpeed ​​Insights-tool om te meten hoe goed u presteert op dit gebied.

Het JavaScript- en CSS-item dat de weergave blokkeert, is een van de meest voorkomende suggesties die u mogelijk tegenkomt bij het gebruik van de krachtige tool van Google. U kunt dit probleem eenvoudig oplossen door een van de vijf plug-ins te installeren die we in dit artikel hebben geïntroduceerd en versnel de laadsnelheid van uw pagina's grotendeels.

We hopen dat je deze tutorial nuttig vindt en geniet van een snel ladende website voor de best mogelijke resultaten.