Wil jij bestanden verkleinen op jouw WordPress website? Door jouw WordPress CSS- en Javascript-bestanden te verkleinen, kunnen ze sneller worden geladen en jouw WordPress site sneller worden. In deze tutorial laten we jou zien hoe je CSS/Javascript-bestanden verkleint in WordPress om de prestaties en snelheid te verbeteren.
Wat is minify’en en wanneer heb je het nodig?
De term ‘minify’ wordt gebruikt om een methode te beschrijven die de bestandsgrootte van jouw website kleiner maakt. Het bereikt dit doel door witte spaties, lijnen en onnodige tekens uit de broncode te verwijderen.
Meestal wordt het aanbevolen om alleen te worden gebruikt voor bestanden die naar de browsers van gebruikers worden verzonden. Dit omvat HTML-, CSS- en JavaScript-bestanden. Je kunt PHP-bestanden ook verkleinen, maar PHP is een programmeertaal aan de serverzijde en het verkleinen ervan zal de laadsnelheid van de pagina voor jouw gebruikers niet verbeteren.
Het overduidelijke voordeel van het verkleinen van bestanden is een verbeterde WordPress snelheid en -prestaties. Compacte bestanden worden sneller geladen en verbeteren de snelheid van jouw site.
Sommige experts zijn echter van mening dat de prestatieverbetering voor de meeste websites erg klein is en niet de moeite waard. Het minificeren verlaagt slechts enkele kilobytes aan gegevens op de meeste WordPress sites. Je kan meer pageloadtijd winnen door eenvoudig je afbeeldingen te optimaliseren.
Hier is een voorbeeld van normale CSS-code:
body {
margin:20px;
padding:20px;
color:#333333;
background:#f7f7f7;
}
h1 {
font-size:32px;
color#222222;
margin-bottom:10px;
}
Na het verkleinen van de code ziet het er als volgt uit:
body{margin:20px;padding:20px;color:#333;background:#f7f7f7}h1{font-size:32px;margin-bottom:10px}
Als je een 100/100 score probeert te behalen met de Google Pagespeed- of GTMetrix-tool, dan zal het verkleinen van CSS en JavaScript je score aanzienlijk verbeteren.
Dat gezegd hebbende, laten we eens kijken hoe je CSS/JavaScript gemakkelijk kunt verkleinen op jouw WordPress site.
Minify CSS/JavaScript-bestanden in WordPress
Het eerste wat je moet doen is de Better WordPress Minify plugin installeren en activeren.
Na activering zal de plugin een nieuw menu-item met de naam ‘BWP Minify’ toevoegen aan uw WordPress adminbalk. Als jeu hierop klikt, ga je naar de instellingen pagina van de plugin.
Op de instellingen pagina moet je de eerste twee opties aanvinken om JavaScript- en CSS-bestanden op jouw WordPress-site automatisch te verkleinen.
Je kunt nu op de knop Wijzigingen opslaan klikken om jouw instellingen op te slaan.
Er zijn veel andere geavanceerde opties op deze pagina. De standaardinstellingen werken voor de meeste websites, maar je kunt deze opties bekijken en wijzigen.
Vervolgens moet je naar je website gaan. Klik met de rechtermuisknop ergens en selecteer vervolgens ‘Paginabron weergeven’ in het browser-menu.
Je ziet nu de HTML-broncode gegenereerd door jouw WordPress website. Als je goed kijkt, zul je merken dat deze plugin CSS/JavaScript-bestanden laadt uit de eigen map van de plugin in plaats van je WordPress thema’s en -plugins.
Dit zijn de verkleinde versies van jouw originele CSS- en JavaScript-bestanden. De Better WordPress Minify plugin zorgt ervoor dat ze in de cache worden opgeslagen en dat de verkleinde versies worden weergegeven in browsers.
Heb je nog vragen over dit artikel, laat hieronder een reactie achter en we zullen je vraag zo snel mogelijk beantwoorden.
Vond je dit artikel waardevol? Deel het op social media zodat wij meer mensen met hun WordPress website kunnen helpen.
