Als u uw website via Lighthouse uitvoert, heeft u misschien een suggestie opgemerkt om bronnen die het weergeven blokkeren te verwijderen.
Door JavaScript uit te stellen en belangrijke CSS-stijlen inline te plaatsen, kunt u zich ontdoen van bronnen in WordPress die de weergave vertragen. Dit wordt ondersteund door de meeste cache-plug-ins, Autoptimize en Async JavaScript. Zowel Elementor als Divi hebben ingebouwde manieren om bronnen te verwijderen die ervoor zorgen dat de pagina niet wordt weergegeven, met behulp van uitgestelde en inline CSS. Het verwijderen van onnodige CSS, JavaScript en code van derden kan ook helpen bij de oplossing.
In dit artikel definiëren we bronnen die de weergave blokkeren en bespreken we de voordelen om ze van uw website te verwijderen. Vervolgens laten we vijf alternatieve manieren zien om ze voor u kwijt te raken.
Wat zijn render-blocking resources?
Het begrijpen van het typische laadproces van websites is van cruciaal belang voordat we de weergaveblokkerende bronnen nader bekijken. De volledige inhoud van uw website moet worden weergegeven (of gedownload) door de browser van de bezoeker nadat deze op een koppeling heeft geklikt. Het leest alle HTML, CSS en JavaScript op uw website van boven naar beneden. Uw website is pas zichtbaar voor bezoekers als de browser deze wachtrij met scripts heeft gelezen. Ze moeten mogelijk lang wachten als er bronnen zijn die de weergave blokkeren. Kortom, een CSS- of JavaScript-bestand dat voorkomt dat de browser andere inhoud laadt terwijl het wordt verwerkt, is een bron die de weergave blokkeert. Dit kan het weergaveproces stoppen en ervoor zorgen dat de pagina er onvoltooid of blanco uitziet.
Maak geweldige websites
Met de beste gratis paginabuilder Elementor
Begin nuWanneer er bronnen op uw website staan die de weergave blokkeren, worden er extra bestanden boven aan de code geladen. Alvorens de website te bekijken, moeten gebruikers wachten terwijl deze bestanden worden verwerkt. Bronnen die de weergave blokkeren, kunnen verschillende prestatie-indicatoren van websites beïnvloeden. Zo meet de grootste inhoudsvolle verf hoe lang het duurt voordat de primaire inhoud van een pagina is geladen. De eerste keer dat materiaal van het Document Object Model (DOM) van uw site door de browser wordt weergegeven, staat bekend als de eerste contentful paint. Totale blokkeringstijd is de tijd tussen de eerste contentvolle verf en de tijd tot interactie (hoe lang het duurt voordat een pagina volledig interactief wordt).
Hoewel ze niet nodig zijn voor het laden, kunnen bronnen die de weergave blokkeren de weergave belemmeren. De User Experience van je website kan eronder lijden (UX). Het is dus van cruciaal belang dat u deze verwijdert om te voorkomen dat bezoekers uw pagina's verlaten.
Voordelen van het elimineren van bronnen die de weergave blokkeren
Internetgebruikers houden er over het algemeen niet van om te wachten tot websites zijn geladen. Een snelle website kan gebruikers verleiden om uw materiaal te verkennen en voorkomen dat ze een concurrent bezoeken. Door elementen die de weergave blokkeren te verwijderen, maakt u de code van uw website zo licht mogelijk, wat het geheim kan zijn om de paginasnelheid te verbeteren. Omdat siteprestaties en gebruikersbetrokkenheid twee factoren zijn waarmee zoekmachinegiganten zoals Google rekening houden bij het beoordelen van websites, kan het verwijderen van weergaveblokkerende bestanden helpen om de positie van uw site in zoekmachines te verbeteren.
Hoe render-blocking-bronnen in WordPress te elimineren
U vraagt zich misschien af hoe u elementen die de weergave blokkeren van uw website kunt verwijderen nu u begrijpt hoe u ze in WordPress kunt herkennen. Gelukkig hebben we een lijst samengesteld met de vele benaderingen die u kunt volgen om dit te bereiken, te beginnen met de eenvoudigste.
Optimaliseer het laden van CSS
Het verhogen van de snelheid waarmee CSS op uw website wordt geladen, is een techniek om bronnen die de weergave blokkeren te verwijderen. Een browser laadt je webpagina van boven naar beneden, zoals eerder gezegd. Hierdoor kan het laadproces langer duren wanneer bepaalde bestanden moeten worden verwerkt. Het is cruciaal om te onthouden dat slechts enkele CSS-bestanden moeten worden geladen om de pagina weer te geven. Daarom kunt u de meest cruciale bestanden als eerste weergeven wanneer u het laden van CSS optimaliseert. Render-blocking CSS kan handmatig worden verwijderd, maar u kunt ook een plug-in installeren om het u gemakkelijker te maken. Je kunt je website rechtstreeks vanuit je WordPress-dashboard optimaliseren met Jetpack Boost. Deze plug-in maakt het eenvoudig om lazy loading te implementeren, niet-essentiële JavaScript uit te stellen en het laden van CSS te verbeteren. Een van de eenvoudigste manieren om zich te ontdoen van bronnen die de weergave in WordPress blokkeren, is door dit te doen.
Begin met het zoeken naar Jetpack Boost onder Plugins Add New in je WordPress-dashboard. Installeer en schakel de plug-in op uw website in.
Je kunt naar Jetpack Mijn Jetpack gaan als je Jetpack al hebt geladen. Zoek naar Boost en selecteer Activeren in de lijst met Jetpack-goederen.
Nadat de plug-in is geactiveerd, klikt u op het tabblad Jetpack Boost en kiest u Aan de slag.
Je website krijgt direct een prestatiebeoordeling van Jetpack. Je ziet een lettercijfer samen met informatie over je desktop- en mobiele scores.
Activeer vervolgens deze functie door omlaag te scrollen naar CSS-laden optimaliseren. Indien geactiveerd, verhoogt Jetpack Boost de cruciale CSS voor uw website, zodat deze sneller laadt.
Stel niet-essentiële JavaScript uit
U kunt meer maatregelen nemen om zich te ontdoen van bronnen die de weergave blokkeren in WordPress, buiten alleen het optimaliseren van het laden van CSS. Niet-essentiële JavaScript kan ook worden uitgesteld om het laden van uw website nog verder te versnellen. Niet-essentiële JavaScript kan worden vertraagd om sommige processen te vertragen tot nadat uw inhoud is geladen. U kunt voorkomen dat de browser JavaScript-bestanden uitvoert als deze niet nodig zijn om een pagina te laden. Gelukkig maakt het gebruik van de Jetpack Boost-plug-in dit eenvoudig om te doen. Je kunt niet-essentiële JavaScript eenvoudig uitstellen nadat je het CSS-laadproces hebt geoptimaliseerd. Zet de tuimelschakelaar van het gebied Niet-essentiële JavaScript uitstellen op aan. Deze sectie is te vinden onder de sectie CSS-laden optimaliseren.
De plug-in zal zijn beoordeling van de algehele prestaties van uw pagina bijwerken nadat u deze instelling heeft ingeschakeld. Je score voor en na het gebruik van Jetpack Boost wordt weergegeven.
Bekijk de scores in de schermafbeeldingen die zowel voor als nadat we dit proces hebben voltooid, zijn gemaakt. U zult merken dat het verhogen van de paginasnelheid werd bereikt door niet-essentiële JavaScript uit te stellen en CSS efficiënter te laden. Browsers kunnen uw inhoud sneller laden omdat ze geen grote scripts hoeven uit te voeren.
Stel offscreen-afbeeldingen uit
Hoewel afbeeldingen geen hulpmiddel zijn dat verhindert dat pagina's worden weergegeven, kunt u overwegen om hun laadtijd te versnellen. Websites hebben vaak afbeeldingen buiten het scherm die pas verschijnen als een gebruiker interactie heeft met de pagina, zoals scrollen. Je kunt deze uitstellen met lazy loading omdat ze niet nodig zijn om de webpagina te laden. Alleen de afbeeldingen die bezoekers kunnen zien, worden op een luie manier geladen. Deze foto's worden geladen net voordat ze op de pagina worden weergegeven zodra de gebruiker scrolt. Een browser probeert elke afbeelding op een pagina tegelijk te laden als lazy loading niet is ingeschakeld. Hoe langer het duurt voordat uw materiaal is geladen, hoe groter de kans dat bezoekers uw site verlaten.
Regelmatig laden is misschien geen probleem als een bezoeker een desktopcomputer gebruikt. Smartphones en tablets hebben daarentegen kleinere schermen en minder bandbreedte. Uw website verbruikt mogelijk meer bandbreedte en het laden duurt langer voor gebruikers van mobiele telefoons als alle foto's in één keer volledig worden geladen. Dit probleem is opgelost via lazy loading.
Gebruik Jetpack Boost om lazy loading op je site mogelijk te maken. Zoek gewoon naar de Lazy Image Loading-optie en schakel deze in.
De kijker ziet alleen afbeeldingen op uw website wanneer ze naar beneden scrollen als u dit doet. Hoewel foto's geen bron zijn die blokken weergeeft, kan het inschakelen van lazy loading uw pagina versnellen.
Elimineer bronnen die de weergave blokkeren met Elementor/Divi
Zowel Elementor als Divi bevatten opties voor het verwijderen van bronnen die de weergave belemmeren.
Schakel Verbeterd laden van CSS en Font-Awesome Inline in uw Elementor Experiments-instellingen in om CSS en lettertypen inline te laden, zodat ze niet worden weergegeven. Verbeterde Asset Loading elimineert onnodige CSS/JavaScript, wat de fundamentele webvitaliteit op verschillende manieren verbetert.
Door cruciale CSS toe te passen, CSS/JavaScript uit te stellen en uw lettertypen inline te laden, kunnen de prestatieopties van Divi ook bronnen voor het blokkeren van weergaven verminderen.
JavaScript dat de weergave blokkeert handmatig verwijderen
U kunt bronnen die de weergave blokkeren ook handmatig verwijderen, hoewel het installeren van een optimalisatie-plug-in een veel eenvoudigere optie is. Idealiter zou u alleen over deze keuze moeten nadenken als u een ervaren programmeur bent. Als u het aantal plug-ins op uw website wilt verminderen, kan deze procedure ook nuttig zijn. U kunt uw bestanden een asynchrone of defer-eigenschap geven om JavaScript efficiënter te laten werken. De browser krijgt de instructie om de niet-kritieke scripts apart weer te geven door ze als zodanig te markeren. Beide kenmerken kunnen worden gebruikt om het laden van HTML-informatie te versnellen.
Het HTML-bestand wordt op een gebruikelijke manier ontleed totdat het het scriptbestand tegenkomt. Het parseren stopt dan terwijl het script wordt gevonden. Na het downloaden en uitvoeren gaat het parseren verder.
Terwijl de resterende HTML wordt verwerkt, kan de browser JavaScript downloaden dankzij de asynchrone functie. Na het downloaden kan het de HTML-verwerking stoppen en het script uitvoeren.
Het kenmerk defer werkt op dezelfde manier, waardoor de browser het script kan downloaden terwijl het de HTML parseert. Het verschil is dat het ook het uitvoeren van het script vertraagt tot nadat de HTML-parsering is voltooid.
U moet een stukje code in uw bestand functions.php opnemen om een van deze eigenschappen te implementeren. U moet eerst de script>-tag van de bron die de weergave blokkeert, lokaliseren. het volgende als een asynchroon attribuut:
<script src="resource.js" async></script>Bedenk als alternatief hoe een script eruit kan zien als de eigenschap defer wordt gebruikt:
http://resource.jsHoewel een plug-in deze attributen voor je kan regelen, past het zelf doen beter bij je voorkeuren. Als dat het geval is, is het cruciaal om te begrijpen wanneer elk kenmerk moet worden toegepast. U moet een eigenschap defer gebruiken voor niet-essentiële scripts die afhankelijk zijn van een ander script. De asynchrone optie is geschikt voor alle andere scripts.
Asynchroon toepassen of attributen uitstellen met een plug-in
Gebruik een plug-in zoals Async JavaScript als je problemen hebt met het handmatig bewerken van scripts. Dankzij deze tool heb je volledige controle over welke scripts de async- of defer-eigenschap hebben.
Nadat de plug-in is geïnstalleerd, selecteert u Async JavaScript inschakelen onder Instellingen Async JavaScript.
Ga vervolgens naar het gedeelte met de titel Async JavaScript-methode. U kunt hier kiezen of u asynchrone of uitgestelde kenmerken wilt inschakelen.
Het is een goed idee om deze scripts uit te sluiten, omdat veel plug-ins afhankelijk zijn van jQuery. Het toepassen van asynchrone eigenschappen op jQuery kan ertoe leiden dat uw website kapot gaat.
Bij twijfel kunt u het kenmerk uitstellen gebruiken, maar jQuery volledig uitsluiten is de beste manier van handelen.
U kunt nu aangeven welke scripts u asynchroon of uitgesteld wilt uitvoeren. Je moet voorzichtig zijn om elk script in de juiste sectie te plaatsen.
U kunt alle scripts die u van deze procedure wilt uitsluiten, vermelden in het gedeelte Scriptuitsluiting.
Er zijn ook opties voor het uitsluiten van plug-ins en thema's onderaan de pagina. De scripts voor alle thema's of plug-ins die u hier noemt, zijn niet van toepassing op de asynchrone of uitgestelde kenmerken.
Nadat u de nodige aanpassingen hebt gemaakt, kunt u op Instellingen opslaan klikken. Deze aanpak kan een handig compromis zijn tussen het handmatig wijzigen van scripts en het gebruik van een plug-in om de taak voor u af te handelen. Als alternatief kun je deze extra stappen elimineren door een alles-in-één applicatie zoals Jetpack Boost te gebruiken.
Afsluiten
Door de browsers van bezoekers het weergeven van content boven de vouw te laten uitstellen terwijl ze middelen downloaden die niet direct nodig zijn, verhogen render-blocking-bronnen de waargenomen laadtijden van pagina's van uw WordPress-site. U moet het laden van bronnen die niet direct nodig zijn uitstellen om bezoekers te helpen het zichtbare gedeelte van uw pagina sneller te laden. Gebruik kant-en-klare plug-ins om bronnen die de weergave blokkeren op WordPress te verwijderen. U kunt Autoptimize en Async JavaScript, twee plug-ins die door dezelfde ontwikkelaar zijn gemaakt, combineren voor een gratis oplossing. Je kunt WP Rocket gebruiken, dat een specifieke interactie met Kinsta biedt en kan helpen met veel aanvullende WordPress-prestatieaanpassingen, als je bereid bent ervoor te betalen.
