Hoe CSS / JavaScript-bestanden te verkleinen in WordPress

Wilt u bestanden verkleinen op uw WordPress-site? Door uw WordPress CSS- en Javascript-bestanden te verkleinen, kunnen ze sneller worden geladen en uw WordPress-site sneller worden. In deze gids laten we u zien hoe u CSS / Javascript-bestanden verkleint in WordPress om de prestaties en snelheid te verbeteren.

Wat is verkleinen en wanneer heb je het nodig?

De term 'verkleinen' wordt gebruikt om een ​​methode te beschrijven die de bestandsgrootte van uw website kleiner maakt. Het behaalt 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 zal de laadsnelheid van de pagina voor je gebruikers niet verbeteren.

Het duidelijke voordeel van het verkleinen van bestanden is een verbeterde WordPress-snelheid en -prestaties. Compacte bestanden worden sneller geladen en verbeteren de snelheid van uw site.

Sommige experts zijn echter van mening dat de prestatieverbetering voor de meeste websites erg klein is en niet de moeite waard. Het minificeren vermindert slechts enkele kilobytes aan gegevens op de meeste WordPress-sites. U kunt meer pageloadtijd verminderen door eenvoudig afbeeldingen voor internet te optimaliseren.

Hier is een voorbeeld van normale CSS-code:

lichaam
margin: 20px;
padding: 20px;
color: # 333333;
background: # f7f7f7;

h1
font-size: 32px;
kleur # 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 u probeert een score van 100/100 te behalen op Google Pagespeed of GTMetrix, zal het verkleinen van CSS en JavaScript uw ​​score aanzienlijk verbeteren.

Dit gezegd hebbende, laten we eens kijken hoe je CSS / JavaScript gemakkelijk verkleint op je WordPress-site.

Verklein CSS / Javascript in WordPress

Het eerste wat u hoeft te doen is de Better WordPress Minify-plugin installeren en activeren. Raadpleeg onze stapsgewijze handleiding over het installeren van een WordPress-plug-in voor meer informatie.

Na activering zal de plug-in een nieuw menu-item met de naam 'BWP Minify' toevoegen aan uw WordPress-beheerbalk. Als u erop klikt, gaat u naar de instellingenpagina van de plug-in.

Op de instellingenpagina moet u de eerste twee opties aanvinken om JavaScript- en CSS-bestanden op uw WordPress-site automatisch te verkleinen.

U kunt nu klikken op de knop Wijzigingen opslaan om uw instellingen op te slaan.

Er zijn veel andere geavanceerde opties op deze pagina. De standaardinstellingen werken voor de meeste websites, maar u kunt deze opties van geval tot geval bekijken en wijzigen.

Vervolgens moet je naar je website gaan. Klik met de rechtermuisknop ergens en selecteer vervolgens 'View Page Source' in browser-menu.

U ziet nu de HTML-broncode gegenereerd door uw WordPress-site. Als je goed kijkt, zul je merken dat deze plug-in CSS / JavaScript-bestanden laadt uit de eigen map van de plug-in in plaats van je WordPress-thema's en -plug-ins.

Dit zijn de geminimaliseerde versies van uw originele CSS- en JavaScript-bestanden. Betere WordPress Minify-plugin zorgt ervoor dat ze in de cache worden bewaard en dat de verkleinde versies worden weergegeven in browsers.

Dat is alles, we hopen dat dit artikel u heeft geholpen om uw WordPress-site te verkleinen. Misschien wilt u ook onze ultieme gids bekijken over hoe u WordPress voor beginners sneller kunt maken.

Als je dit artikel leuk vond, meld je dan aan voor onze YouTube-video-tutorials over WordPress. U kunt ons ook vinden op Twitter en Facebook.