Verwijder bronnen die de weergave blokkeren

Verwijder bronnen die de weergave blokkeren op je website. Dit is een bekende aanbeveling van de Google page speed test. Met de bronnen worden voornamelijk files genoemd die in het begin geladen worden als een bezoeker de website bekijkt.

Als files geladen moeten worden, wordt dit apart geladen en deze bestanden worden pas geactiveerd als het gehele bestand is geladen. Dit kan zorgen voor vertraging van het laden van de website en blokkeren de weergave. Zoals bekend zal zijn is het erg belangrijk dat pagespeed en Web Vitals steeds belangrijker worden voor SEO. Dus is het tijd dat we gaan kijken hoe we deze melding kunnen voorkomen.

Ten eerste is belangrijk te meten want meten is weten. In “hoe page speed testen” kan je lezen wat de beste manier is. Gebruik altijd meerdere tests en neem bijvoorbeeld enkele van de 5 beste page speed tests. Deze testen geven ook aan wat er verbeterd kan worden en hoe de zaken geladen worden in een waterfall.

Verwijder bronnen die de weergave blokkeren

Het gaat hier vooral om js en css-files die geladen worden inhet begin van de html van de website. Belangrijk is om te kijken wat het belangrijkst is en wat je echt nodig hebt. Beste is altijd alleen te laden wat je nodig hebt en meer niet. Alles dat je kan verwijderen is winst voor je page speed en Web Vitals.

Van alle nodige files moet gekeken of deze ingeladen moeten worden of niet. Wie jQuery gebruik zal dit altijd als eerst moeten laden. Dit is lastig om deze later te laden maar alle overige js-files zouden het best in de footer geladen kunnen worden. Deze zijn namelijk meestal niet nodig voor de weergave. Als dat wel zo is kan je deze inlaten, maar maak duidelijk onderscheid.

Inline CSS en JavaScript

Voor belangrijke css kan je deze het best inline plaatsen inen dus niet apart de file laden. Dit zorgt voor een enorme verbetering van het laden. Doordat het direct al inline staat hoeft de file namelijk niet apart geladen te worden en is dit direct beschikbaar tijdens het laden.

Dit kan je ook doen met JavaScript files als deze niet van een andere server geladen hoeven te worden. Voor files die afhankelijk zijn van jQuery kan deze beter laden met defer of in de footer plaatsen. Als deze niet direct geladen hoeven te worden kan je ze ook als inline in de footer plaatsen. Ben je niet zeker kies er dan voor om het javascript in de footer te laden.

Async, defer en andere tags

Ook kan je de benodigde files anders coderen zodat de browser het beter kan begrijpen wanneer wel of niet laden. Voor js-files zijn er de async en defer tags. “Async” geeft aan of de file asynchroon geladen moet worden en “defer” dat het als laatst geladen moet worden. Als je niet zeker bent gebruik dan “async”.

Dit kan er als volgt uitzien:

<script async="" src="https://code.jquery.com/jquery-latest.min.js"></script>

Het beste is om je jQuery wel als eerste te laden want deze moet geladen zijn voordat andere js-file moeten gaan werken.

Voor CSS-files kan je ook enkele tags gebruiken. Als het niet nodig is en niet geladen hoeft te worden kan je gebruik maken van “disabled”. Op deze manier wordt de file niet geladen. Met Javascript zou je dit later kunnen verwijderen maar dat zal niet veel helpen voor je uiteindelijke page speed.

Andere mogelijk tag is media en deze heeft 4 belangrijke optie: all, print, screen en speech. Speech is voor screenreaders en print voor een printvoorbeeld te tonen en screen is voor alle schermen zoals desktop, tablet en telefoon. All is natuurlijk voor alles. Over het algemeen wordt meestal “all”.
Er zijn meerdere opties mogelijk maar die zijn hier nu niet belangrijk.

Met de laatste optie moet de file toch nog geladen worden en is het dus beter om de css inline te plaatsen.

Verwijder bronnen die de weergave blokkeren of niet?

Het zal niet iedereen makkelijk zijn te beslissen wat wel of niet verwijderd kan worden. Voor wie WordPress kan dit makkelijker beoordelen door te bepalen welke plugins eigenlijk niet nodig zijn en welke veel of weinig files laden. Op deze manier is het makkelijker te bepalen wat verwijderd kan worden.

Vergeet vooral niet dat een mooie website leuk is maar het is belangrijker om gevonden te worden. Hiervoor moet je page speed en Web Vitals goed zijn om een betere SEO score te hebben. Neem dit als een geheugensteuntje om zaken te verwijderen.