Twee plugins voor ‘deferred asset loading’

Leuk… maar wat is in vredesnaam ‘deferred asset loading’

Wanneer je de snelheid van je website serieus neemt, je wilt immers dat jouw ‘Core Web Vitals‘ goed zijn, zal je af en toe jouw webpagina’s toevertrouwen aan Google PageSpeed Insights, Eén van de mogelijke adviezen die je krijgt is om jouw ‘assets’ ‘deferred’ te laden. Ik kan mij heel goed voorstellen, dat je op dat moment het gevoel hebt, dat je gestrand bent op een andere planeet, waar niemand jouw taal mee spreekt.

Want wat kan hier in vredesnaam mee bedoeld worden?

Laten we beginnen eens te kijken naar het woord ‘assets’ in de context van webdesign. Want dat is eigenlijk heel eenvoudig: De ‘assets’ zijn de bestanden die jou helpen het gewenste resultaat op je webpagina’s te krijgen. Doorgaans worden hiermee de JavaScript, CSS en font bestanden bedoelt.

En ‘deferred’ betekent heel eenvoudig ‘uitgesteld’, dus met ‘deferred asset loading’ bedoelen we eigenlijk niet veel meer over minder dan het uitgesteld laden van CSS, JavaScript en mogelijk ook font bestanden. Maar waarom zou ik dat willen. En nog veel belangrijker: Hoe doe ik dat?

CSS bestanden, wat is dat eigenlijk?

Als eigenaar van een website heb je natuurlijk een webdeveloper in de hand genomen om deze te bouwen, omdat je je eigenlijk helemaal niet bezig wilt houden met de techniek hierachter. Maar wanneer PageSpeed ineens begint te piepen, dat ‘deferred asset loading’ toch echt de oplossing van je snelheidsprobleem is, dan wil je daar toch iets meer van weten.

Dus laten we eens kijken, wat nu al die bestanden zijn die problemen veroorzaken. En om te beginnen, wat zijn nu eigenlijk die ‘CSS’ bestanden.

CSS staat voor ‘Cascading Style Sheets’. En heel simpel gezegd, zijn dat de bestanden die ervoor zorgen, dat jouw site eruit ziet, zoals hij eruit ziet. Ik wil hier niet te diep op ingaan, maar de opmaaktaal voor het web, HTML, vertelt eigenlijk alleen wat de functie van een bepaald element is, niet hoe het er uit moet zien. Bijvoorbeeld

<h2>Dit is een titel</h2>

vertelt door die ‘h2’ code alleen, dat het een titel is. Niet hoe groot het lettertype moet zijn of welk font er gebruikt moet worden. Maken we het nog iets complexer

<h2 class="widget-title">Dit is een titel voor een widget</h2>

vertelt ons opnieuw, dat het een titel is. En dat die titel waarschijnlijk gebruikt gaat worden in een widget, anders zou de naam -die door de ontwerper vrijelijk kan worden bedacht- toch wel heel onlogisch zijn.

Dat is dus hoe onze HTML eruit ziet. Wat we precies in de browser te zien krijgen wordt ook nog bepaald door een ander bestand. Het CSS bestand.

In zo’n bestand zou iets kunnen staan als :

h2 {
   font-family: Verdana;
   font-size: 20px;
   color: #222222;
}

h2.widget-title {
   font-size:15px; 
   color: white;
   background-color: black;
   padding: 10px; 
}

Wat ik hier uit kan halen, is dat alle h2 titels in het lettertype ‘Verdana’ zullen zijn en 20px hoog zullen zijn. De kleur is donkergrijs.

Omdat h2 titels met de ‘class’ ‘widget-title’ apart gedefinieerd zijn, weet ik uit deze definitie, dat voor deze titels het lettertype nog steeds Verdana is, want dat is voor h2 al gedefinieerd, maar alle andere kenmerken zullen anders zijn.

Dat is wat de ‘Cascading’ in CSS betekent. Als een ‘waterval’ zullen latere definities de eerdere overschrijven, maar wat al gedefinieerd is, blijft gehandhaafd.

Stylesheets blokkeren de weergave van de site

In de HTML van een website staat, welke stylesheets een bijdrage zullen leveren aan de vormgeving van de site. Deze bestanden moeten dus na het laden van de HTML eerst worden geladen, zolang deze bestanden er niet zijn, heeft je browser er geen idee van, hoe de pagina ‘getekend’ (‘rendered’) zal moeten worden.

Nu zijn niet alle stylesheets direct voor het deel van de pagina wat direct getoond zal worden noodzakelijk. Enkele stylesheet kunnen later in het proces worden geladen en tijdens het laden worden verwerkt.

En dat verlate laden, dat wordt ‘deferred asset loading’ genoemd. Met andere worden is het dus eigenlijk ‘laad die bestanden pas op het moment waarop ze noodzakelijk zijn’.

En JavaScript bestanden… hoe zit het daarmee?

JavaScript is de programmeertaal waarmee in de browser zelf dingen gedaan kunnen worden. Alles wat jouw webpagina interactief maakt is hoogstwaarschijnlijk JavaScript tegenwoordig.

Sommig JavaScript kan heel goed later in het proces pas worden geladen, omdat in de instructies van het script zelf al staat, dat dit pas kan worden geladen, wanneer de complete HTML pagina is geladen, terwijl ander JavaScript in het begin al noodzakelijk is.

Stel je bijvoorbeeld voor, dat ik wil meten hoe snel het duurt voor een pagina is geladen. Eén van de eerste instructies zal moeten zijn, dat een timer gestart zal worden. Als ik dit pas aan het einde doe, dan is het ‘meten’ van de laadtijd tamelijk nutteloos.

Het probleem is echter, dat in WordPress vrijwel alle JavaScript en letterlijk alle CSS aan het begin al wordt geladen. En omdat de browser er geen weet van heeft welk JavaScript en CSS essentieel is om direct beschikbaar te zijn, en welk JavaScript niet, zal het laden van al die scripts het ’tekenen’ van de pagina blokkeren.

‘Deferred asset loading zorgt ervoor, dat het juiste script op het juiste moment wordt geladen.

De plugins

Helaas heeft WordPress geen ingebouwde functies om zelf te bepalen wanneer welke scripts moeten worden geladen. We hebben hier dus plugins bij nodig. En gelukkig zijn er verschillende plugins die ons hierbij kunnen helpen.

Samen met jou kijk ik naar twee plugins die ik aanbeveel. Ik wil deze twee niet met elkaar vergelijken in de zin van ‘de één is beter dan de ander’, omdat het beide goede plugins zijn. Beide plugins zijn echter bedoeld voor verschillende doelgroepen. De éne plugin is vooral bedoeld voor iemand die niet teveel ‘gezeur aan zijn kop’ wil hebben. die met een paar muisklikken die ‘deferred asset loading’ in orde wil krijgen. De andere is bedoeld voor die personen, die graag tot in detail willen regelen welke scripts wanneer geladen zullen worden.

Laten we met de eenvoudigste beginnen. Maar voor we beginnen, wil ik nog even stil staan bij een ander punt.

Async asset loading

Behalve ‘deferred asset loading’ is er ook zoiets als async asset loading. Hoewel er verschillen tussen beide methoden zijn, gooi ik het voor het gemak van dit blogartikel allemaal op één grote hoop.

Werk altijd op een staging site!

Het ‘experimenteren’ met deferred asset loading kan leiden tot behoorlijke veranderingen in de presentatie en het functioneren van je website. Experimenteer hier dus altijd mee op een staging site.

Async JavaScript

Zoals de naam al doet vermoeden, is Async JavaScript een plugin die zich alleen bezig houdt met het laden van JavaScript bestanden, niet met CSS. De plugin is heel eenvoudig in het gebruikt. Je kan kiezen welke methode(n) je wilt gebruiken voor het uitgestelde laden van je website, Async of Defer, en bij die methode kan je een verschil maken tussen ‘gewoon’ JavaScript en ‘jQuery’, een JavaScript bibliotheek die heel populair is. Daarnaast kan je specifieke scripts uitsluiten van het deferred asset loading, of hele plugins uitsluiten van het verlate laden van hun assets.

Het is een kwestie van wat experimenteren (op een staging omgeving natuurlijk!) en vooral ook nauwkeurig kijken of er geen grote dingen op je pagina zijn veranderd.

Zelf merkte ik dat de ‘deferred asset loading’ methode voor mij beter werkte dan de Async methode en dat de enige plugin die ik uit moest sluiten van dit deferred loading Elementor was. Wanneer ik deze plugin niet direct laadde, dan gebeurden er rare dingen met mijn pagina’s. De Elementor Pro plugin kon ik wel pas aan het einde laden.

Het is een makkelijk in te stellen plugin met een behoorlijk positieve impact op de tijd die de pagina nodig heeft om binnen de browser de eerste resultaten te laten zien.

Asset Cleanup

Van de Asset Cleanup plugin is er een ‘light’ en een ‘pro’ versie. En ik moet zeggen, dat ik zo zeer over de ‘Lite’ versie te spreken ben, dat ik de pro ga overwegen, maar mijn test (een daadwerkelijke ‘field test’ van ruim een maand op twee druk bezochte sites van mij) heeft zich tot nu toe tot de ‘lite’ versie van de plugin beperkt.

Eén van de mooie zaken van deze plugin is dat je een ’test mode’ aan kan zetten. Je hoeft dus geen staging kopie van je site te maken. Maar in ’test mode’ zie je de resultaten van je aanpassingen alleen wanneer je als admin bent ingelogd. Omdat in de praktijk de resultaten voor ingelogde en niet ingelogde gebruikers enigszins anders kunnen zijn, adviseer ik dus om gewoon op een staging site te werken en in een ‘Incognito’ venster van je browser regelmatig te checken hoe de site eruit ziet, wanneer je niet bent ingelogd.

De plugin komt met een aantal geïntegreerde video’s die je verder helpen bij hoe je de plugin optimaal kan gebruiken.

Laten we WordPress bevrijden van… WordPress!

Behalve deferred asset loading kan je je WordPress website op een aantal andere manieren veel sneller maken. WordPress heeft zo bijvoorbeeld allerlei ‘overhead’. Oorspronkelijk is WordPress als een blogging programma bedoeld, en WordPress heeft allerlei ingebouwde functies om de blog in allerlei formaten -zoals bijvoorbeeld RSS- als feed up te kunnen halen.

Heb je geen blog op je site, dan kan je heel wat code uit de headers van je website verwijderen.

En gebruik je geen commentaren? Dan kan je ook voorkomen dat het hele systeem voor het bijhouden van commentaren niet wordt geladen.

Kortom, je kan een groot aantal functies van WordPress die je toch niet wilt gebruiken uitschakelen, waardoor je een ‘slanker’ WordPress krijgt.

Samenvoegen van bestanden

Een tweede krachtige functie van deze plugin is, dat je CSS en JavaScript bestanden samen kan voegen. Omdat voor ieder script wat wordt geladen altijd enige ‘onderhandeltijd’ tussen de browser en de server nodig is, kan je aardig wat tijd besparen, wanneer meerdere CSS bestanden tot één bestand worden samengevoegd. Een heel handige functie.

Uitzonderingen per pagina

Daarnaast kan je in iedere pagina aangeven of er voor die specifieke pagina bepaalde uitzonderingen gemaakt moeten worden. Blijkt bijvoorbeeld, dat het ‘deferred asset loading’ van bepaalde scripts op iedere pagina goed werkt, behalve één, dan zorg je er gewoon voor ,dat op die ene pagina een uitzondering wordt gemaakt.

De Pro versie

Zoals aangegeven, overweeg ik de Pro versie van deze plugin aan te schaffen. Eén van de belangrijkste redenen is wel, dat ik met de pro versie het laden van complete plugins kan tunen. Eén van de functies die mij zelf het meest nuttig lijkt is plugins compleet niet te laden, wanneer de admin niet is ingelogd.

Ik heb een aantal plugins die ik gebruik om mijn eigen werk makkelijker te maken. Bij het laden van iedere pagina zal WordPress echter deze plugin laden. Als de programmeurs het goed hebben gedaan, zal de plugin vervolgens aan WordPress vertellen, dat de plugin niet moet worden geladen, wanneer het geen ‘admin’ pagina is, of de gebruiker geen ‘admin rol’ heeft, maar dit moet toch iedere keer weer gebeuren. En hoewel het niet veel tijd kost, levert het een kleine vertraging op. En vele kleine vertragingen maken één grote.

Mocht ik inderdaad tot aanschaf van deze plugin overgaan en er is ooit nog een reden om hierover te schrijven, kan je dus vervolg posts over dit onderwerp verwachten.

Geen vergelijk

Zoals ik al had aangegeven, is het absoluut de bedoeling van dit artikel niet om deze plugins met elkaar te vergelijken. De ene plugin is niet beter dan de ander, alleen duidelijk voor een ander publiek bestemd. Het is zeer aan te bevelen om in ieder geval één van deze twee plugins te gebruiken, om de ‘deferred asset loading’ in je pagina’s mogelijk te maken.

Ook jouw site kan sneller!

Snelheid wordt een steeds meer belangrijke ranking factor voor jouw pagina’s in Google. Om te zien wat Google van jouw pagina’s vindt, is het goed om eens te kijken naar de resultaten in Google’s Search Console. In het verleden heb ik heel wat geschreven over het versnellen van je website en in de toekomst zal ik dat zeker blijven doen.

Heb jij problemen met de snelheid van je website en wil je eens met mij brainstormen over de mogelijkheden jouw site sneller te maken, maak dan eens een afspraak voor een Online Video Consult.