Minificatie in WordPress: Wat het is en Hoe je het Doet

Naarmate je meer tools en inhoud toevoegt aan je site, zal het aantal bestanden toenemen, wat leidt tot langzamere laadtijden. Snelheid is belangrijk op het internet, dus een traag ladende site kan een groot probleem zijn.

Een manier om dit probleem aan te pakken is door middel van minificatie. Dit is het proces van het comprimeren van bepaalde bestanden (zoals CSS, JavaScript en HTML-bestanden) om hun grootte te verkleinen zonder hun functionaliteit te beïnvloeden. Het beste is dat je hiervoor geen programmeerkennis nodig hebt om deze bestanden te minificeren!

Wat Is Minificatie?

Elke seconde telt op het internet. Nu websites steeds geoptimaliseerder worden, verwachten veel mensen snelle laadtijden. Sterker nog, bijna de helft van alle internetgebruikers verwacht dat sites binnen twee seconden laden of minder.

Wanneer een vertraging van een enkele seconde kan leiden tot een vermindering van zeven procent in conversies, kan vastzitten met een trage site een doodvonnis zijn. Gelukkig zijn er remedies om je site te versnellen, inclusief minificatie.

Dit verwijst naar het proces van het comprimeren van Cascading Style Sheets (CSS), JavaScript en HTML-code zonder de functionaliteit van deze bestanden te beïnvloeden. Je realiseert het je misschien niet, maar veel van de bestanden die je site draaiende houden kunnen deze ook vertragen.

Dit minificatieproces klinkt misschien erg technisch, maar het is heel eenvoudig. Het houdt simpelweg in dat onnodige tekens uit de code worden verwijderd.

Laten we naar een voorbeeld kijken. Hier is hoe een normaal CSS-fragment eruit zou kunnen zien:

#bluetext {
font-size: 2em;
color: blue;
}

#redtext {
font-size: 1em;
color: red;
}

Als je deze code zou minificeren, zou het resultaat er zo uit kunnen zien:

#bluetext{font-size:2em;color:blue;}#redtext{font-size:1em;color:red;}

Alle benodigde informatie is nog steeds aanwezig, maar de regelafbrekingen, spaties en enkele andere tekens zijn verwijderd. Deze elementen zijn niet noodzakelijk voor een computer om de code te begrijpen en bestaan alleen om het voor mensen leesbaarder te maken.

Het lijkt misschien niet dat deze kleine verandering een groot effect zou hebben, maar denk eens aan hoeveel regels code er onder de motorkap van je site draaien. Minificatie kan de grootte van elk bestand aanzienlijk verminderen, wat op zijn beurt je site sneller laat laden. Dit is vooral waar als je site een groot aantal bestanden, scripts en plugins bevat.

We gaan nu kijken naar twee methoden die je kunt gebruiken om code te verkleinen, zowel handmatig als met een specifieke plugin.

Hoe CSS en JavaScript Handmatig te Minimaliseren

Handmatige minificatie stelt je in staat om snel CSS- en JavaScript-code te comprimeren met behulp van een speciale applicatie. Hiermee kun je eerst code schrijven die gemakkelijk te lezen en te interpreteren is, voordat je deze binnen enkele seconden minificeert met een tool.

Om CSS te minimaliseren, raden we aan een tool zoals CSS Minifier, CSS Minify of Clean CSS te gebruiken.  Voor JavaScript kan Minify een goed startpunt zijn. Er zijn echter alternatieven zoals JSCompress en JavaScript Minifier.

Gelukkig werken de tools allemaal op dezelfde manier. Als je bijvoorbeeld Clean CSS gebruikt, hoef je alleen maar je originele code in het relevante veld te plakken en op CSS Minify te klikken. Je ziet de resultaten in het andere veld, die je vervolgens kunt kopiëren en plakken op je site:

We raden aan om beide versies van de code op te slaan. Anders loop je het risico de originele code te verliezen. Het origineel zal makkelijker te troubleshooten en te bewerken zijn dan de geminimaliseerde versie.

Daarnaast raden we je aan om alleen handmatige minificatie te gebruiken als je vertrouwen hebt in je programmeervaardigheden. Als je niet veel ervaring hebt, wil je misschien liever een WordPress minificatieplugin gebruiken.

2 Plugins Om Je WordPress Bestanden Te Minimaliseren

Met een WordPress plugin kun je automatisch de CSS- en JavaScript-bestanden verkleinen die je site draaiende houden. Aangezien deze bestanden zo kwetsbaar zijn, wil je er echter zeker van zijn dat je een betrouwbare en veilige plugin gebruikt. Hier zijn twee minificatieplugins die we aanbevelen.

1. Snelheid Minimaliseren

Fast Velocity Minify is een uitstekende keuze voor zowel beginners als ervaren gebruikers. Standaard biedt het automatische minificatie van alle CSS, JavaScript en HTML code op je site zonder enige extra configuratie. Het biedt echter ook een enorme hoeveelheid extra opties als je wilt sleutelen aan de details.

Belangrijke functies:

• Vereist minimale configuratie en werkt automatisch in real-time
• Biedt uitgebreide opties voor gevorderde gebruikers
• Levert geweldige resultaten en betrouwbare ondersteuning

Prijzen: Fast Velocity Minify is open-source en volledig gratis.

2. Autoptimize

Autoptimize is een van de populairste minificatieplugins (en met goede reden). Het zal je bestanden bundelen, optimaliseren en cachen om zo min mogelijk verzoeken aan de site te maken. Hoewel het enkele extra opties biedt, is deze plugin ideaal voor degenen die een ‘instellen en vergeten’ benadering van minificatie willen.

Belangrijkste Functies:

• Makkelijk te begrijpen voor beginners
• Extra opties voor een geoptimaliseerde prestatie
• Geavanceerde aanpassingen met behulp van de specifieke API

Prijzen: De Autoptimize plugin is gratis, hoewel de ontwikkelaars ook premium configuratiediensten aanbieden, inclusief persoonlijke installatie en optimalisatie aangepast aan jouw site.

Hoe WordPress Bestanden Te Minimaliseren Met Een Plugin

Nu je bekend bent met de beschikbare tools, kun je beginnen met het verkleinen van je WordPress-bestanden. Voor deze tutorial gebruiken we de Fast Velocity Minify plugin. Dit is omdat het gemakkelijk te implementeren is voor beginners, terwijl het toch veel optionele configuratie biedt voor gevorderde gebruikers.

Zodra je de plugin hebt geïnstalleerd en geactiveerd, hoef je verder niets meer te doen — je site is nu klaar voor minificatie.

De volgende keer dat iemand je site bezoekt, zal de plugin je bestanden onderscheppen en een kopie ervan maken. Vervolgens zal de plugin de bestanden groeperen en hun codering minimaliseren om het aantal verzoeken te verminderen. Deze geoptimaliseerde bestanden worden opgeslagen in de cache en gebruikt telkens wanneer de site opnieuw wordt bezocht. Dit betekent dat je oorspronkelijke bestanden niet worden beïnvloed.

Als je een meer ervaren gebruiker bent, biedt de plugin enkele geavanceerde instellingen. Je kunt ze openen door naar Instellingen > Fast Velocity Minify binnen WordPress te gaan:

Naast andere opties kun je minificatie voor bepaalde bestanden uitschakelen, specifieke assets uitsluiten van het proces en de locatie van de cache bepalen. Je kunt ook alle geminimaliseerde bestanden wissen en codeverwerking op specifieke querystrings toestaan:

Echter, we raden aan om alle standaardinstellingen te laten zoals ze zijn, tenzij je precies weet wat je doet. De plugin is ingesteld om automatisch alle CSS-, JavaScript- en HTML-code te minimaliseren, wat voldoende zal zijn om een positief effect te hebben op de meeste sites.

Minimaliseer Vandaag Je WordPress Bestanden

Het verkleinen van je WordPress-bestanden is een snelle en eenvoudige manier om de prestaties van je site te verbeteren.

Zo kun je ervoor zorgen dat je geen bezoekers verliest door lange laadtijden.

Het lijkt misschien een technische nachtmerrie om te bereiken, maar je hebt eigenlijk geen technische kennis van CSS of JavaScript nodig om je WordPress-bestanden te verkleinen. Een plugin zoals Fast Velocity Minify kan al het werk voor je doen.