Een preloader toevoegen aan je WordPress Pagina

Wachen wordt leuker als er iets te zien is.

Mocht je niet weten wat een preloader is, dan is het eigenlijk al heel snel uit te leggen. Wanneer je namelijk in WordPress een ‘preview’ van je pagina opvraagt in WordPress 5.0 en hoger, dan krijg je de preloader binnen het dashboard te zien. Het WordPress logo wat geanimeerd getekend wordt.

Zo’n preloader geeft je het idee dat ‘er iets gebeurd’ en vult de tijd waarin de bezoeker moet wachten op de volgende pagina.

Natuurlijk heb je liever dat de pagina’s zo snel geladen worden, dat het een preloader toevoegen helemaal niet nodig is, maar als dat niet mogelijk is, is zo’n ‘preloader’ toch wel het op een na beste om de bezoekerservaring positief te houden.

Preloaders houden je voor de gek!

Zo’n draaiende cirkel of een wat meer geavanceerde animatie maakt je duidelijk dat er in de tussentijd iets geladen wordt. Tenminste… dat denk je. In werkelijkheid wordt je flink voor de gek gehouden. Deze animatie wordt namelijk geladen voordat de rest van de pagina wordt geladen. Mocht er iets fout gaan met het laden van de pagina, zal de preloader animatie ad infinitum doorgaan. Maar omdat in de meeste gevallen dat niet zal gebeuren, wordt zo’n preloader animatie toch als positief gezien. We krijgen in ieder geval de illusie, dat er iets gebeurd.

Geen alternatief voor slechte performance!

Wanneer je een site hebt met een slechte performance, is het niet de bedoeling, dat je dit ‘oplost’ door een preloader toe te voegen. Zelfs als je gebruikers het zouden accepteren, een slechte performance zorgt ook voor een slechte waardering door Google. Zorg er in eerste instantie dus voor, dat je site goed performt. Door bijvoorbeeld de performance te tunen en je pagina’s te cachen.

Maar sommige pagina’s zijn gewoon ‘van nature’ langzaam. Heb je bijvoorbeeld een site met veel afbeeldingen en is het voor de aard van je site belangrijk, dat de resolutie goed is, kan je iets aan snelheid winnen door WebP afbeeldingen te gebruiken, maar uiteindelijk zal een preloader toevoegen tijdens het laden toevoegen aan de positieve gebruikerservaring van je bezoeker.

Ingebakken in thema’s of via een plugin

De meeste preloaders maken deel uit van een thema. Maar wanneer je thema zonder deze functie hebt, kan je nog steeds een preloader toevoegen door dit via een plugin toe te voegen. En in dit blogartikel gaan we een aantal van dit soort plugins bekijken.

Eigenlijk kan je een eenvoudige preloader makkelijk zelf toevoegen in de ‘functions.php’ wanneer je wat handigheid met JavaScript en PHP code hebt. Zoveel stelt het niet voor. Maar omdat je waarschijnlijk jouw laad-animatie instelbaar wilt hebben, kijken we naar enkele plugins die dit wel heel makkelijk voor je maken.

In grote mate is de keuze van een preloader ook het visuele effect wat je wilt bereiken. Ik zal het in dit artikel dus niet hebben over welke plugin nu het ‘beste’ is. De besproken plugins zijn allemaal goed. En de beste voor jou is de plugin die jou het best past.

WP Smart Preloader

WP Smart Preloader is denk ik wel de makkelijkste in gebruik. Het aardige is dat de preloader geen afbeeldingen gebruikt, alleen maar CSS, waardoor hij ook zeer snel is.

Je kan uit een aantal uiterlijken voor de preloader kiezen en wanneer je deze verder aan wilt passen (bijvoorbeeld qua kleur), zal je zelf met de CSS moeten gaan spelen.

Preloader

Preloader is eigenlijk precies het omgekeerde van de ‘Smart Preloader’. Deze plugin werkt namelijk alleen met afbeeldingen die geanimeerd worden. Je kan nog een achtergrondkleur ingeven, maar dat is dan ook alles.

De afbeelding moet 128×128 pixels zijn en voor het fraaie een transparante PNG. Anders gaat het er wel heel rommelig uitzien.

Wat hier ook wat uitdagender is, is dat je zelf een stukje code via je functions.php bestand toe moet voegen. Waarom is mij een raadsel, omdat de makers dit makkelijk in de plugin zelf op hadden kunnen nemen. Maar dat hebben ze helaas niet gedaan, dus je zal zelf wat met code moeten knutselen.

In het verleden heb ik al eens beschreven, hoe je zelf zo’n ‘functions.php’ aan kan passen. Let wel op, dat je dit in een child theme doet. Heb je nog geen child theme van je thema, kan je er met deze plugin voor zorgen

Heb je de plugin geïnstalleerd dan moet je nog onderstaand codefragment toevoegen aan je functions.php

function wxp_add_preloader() {
echo '<div id="wptime-plugin-preloader"></div>';
}
add_action( 'wp_body_open', 'wxp_add_preloader' );

In plaats van de ‘prefix’ wxp is het natuurlijk verstandig om een eigen prefix te gebruiken.

Preloader Plus

Van de verschillende preloader plugins is Preloader Plus wel de meest uitgebreide. In de voorbeeldpagina kan je een viertal demo’s zien van wat er zoal mogelijk is met deze plugin. Ook deze is supermakkelijk te installeren. Een eenvoudige preloader toevoegen met Preloader Plus is dus ook een fluitje van een cent.

Maar je kan ook behoorlijk complexe preloaders maken met deze plugin. Het aanpassen van je preloader animatie doe je via het ‘Customize’ panel van WordPress.

Ultimate WordPress Preloader

De ‘Ultimate WordPress Preloader‘ is de enige plugin in dit rijtje waar je voor moet betalen. Maar daar krijg je dan ook wel wat voor!

De plugin maakt het mogelijk om 99 verschillende animatieeffecten in iedere denkbare kleur te laten zien. Heel leuk, maar persoonlijk vind ik 24 dollar voor een dansend figuurtje toch wel heel erg duur betaald. Want dat is natuurlijk het uiteindelijke effect van de plugin.

Gelukkig kan het ook voordeliger. Want bij een abonnement op Envato Elements kan je deze plugin -en nog ruim 600 andere– downloaden.