Om je WordPress website goed te laten werken wordt er gebruik gemaakt van een aantal ‘talen’. Hierbij bedoel ik niet de talen zoals Nederlands en Engels maar de talen om een website te maken. In het geval van minify hebben we het dan over HTML, CSS en JavaScript. HTML (HyperText Markup Language) is een opmaaktaal voor je website. CSS (Cascading Style Sheets) bepaalt de stijl van de elementen op je website. JavaScript, of JS, is tot slot een scripttaal om bepaalde functies uit te kunnen voeren.
Met minify maak je HTML, CSS en JavaScript compacter en je website sneller.
Wat is HTML, CSS en JavaScript minify?
Minify kan je vertalen met verkleinen of compact maken, je gebruikt het om de HTML, CSS en JavaScript voor je website compacter te maken. Hierdoor zal je website minder code ophalen en dus sneller laden. Dit doe je o.a. door overbodige elementen weg te halen. Maar ook door alles achter elkaar te zetten in plaats van op nieuwe regels. Hier vind je een voorbeeld:
/* Typography */
html {
font-size: 62.5%
/* standaard grootte */
}
body {
font-family: system-ui;
/*font-family: sans-serif;*/
font-size: 1.6rem;
font-weight: 400;
line-height: 1.5;
color: #333
}Hierboven zie je een klein stukje CSS. Netjes met tabs en commentaar zodat het makkelijk aan te passen is. Je kan alles zo snel vinden in je stylesheet. Alleen als je dit stukje op je website laadt wordt alles meegenomen: regeleindes, spaties, commentaren en tabs. En die zijn niet nodig om de code goed te laten werken. Met CSS (maar ook HTML en JavaScript) minify wordt alles wat niet nodig is verwijderd. En dan komt het er ineens zo uit te zien:
html{font-size:62.5%}body{font-family:system-ui;font-size:1.6rem;font-weight:400;line-height:1.5;color:#333}In dit voorbeeld zie je twee zg. ‘rules’ om de html- en body-tags te definiëren. Maar een CSS-bestand bestaat vaak uit honderden en soms wel duizenden regels. Dan kan CSS minify heel wat uitmaken, en dat geldt precies zo voor je HTML en JavaScript.
Nadelen van minify
Het gebruik van HTML, CSS en JavaScript-minify is aan te raden bij elke website. WordPress en niet-WordPress. Hoe minder code hoeft te worden geladen, hoe sneller je website is. Het nadeel hiervan is echter dat de code onleesbaar wordt. Ook kan het in een aantal gevallen voor problemen zorgen bij de werking van je website. Bijvoorbeeld met JavaScript.
Daarom is het belangrijk dat je altijd de originele bestanden bewaart. Je kan dan een compacte versie hiervan opslaan en laden. Wil je dingen wijzigen? Dan verwerk je dit in het originele bestand waarna je een nieuwe compacte versie maakt. Vaak gebruik je daarvoor de volgende notatie: stijl.css en stijl.min.css. Of script.js en script.min.js.
Online HTML, CSS en JavaScript-minify tools
Wil je ook een snellere website met minify? Dan kan je o.a. gebruik maken van een aantal online tools. Daar kan je de code invoeren en meestal kiezen voor een aantal opties. De code wordt online verwerkt. Deze kan je kopiëren en in een nieuw bestand plakken. Ik zal een aantal van deze tools op een rijtje zetten.
Online minify tools:
- HTML Compressor: hiermee maak je zowel HTML, CSS als JavaScript compacter.
- JSCompress: zoals de naam al doet vermoeden is deze tool geschikt voor JavaScript.
- CSS Compressor: bij deze tool kan je jouw CSS in vier verschillende niveaus compact maken.
Minify voor je WordPress site
De online minify tools hierboven kunnen handig zijn voor een gewone website. Maar een WordPress website bied je de mogelijkheid om dit automatisch te doen. Daarvoor kan je gebruik maken van een plug-in. Je hebt hiervoor speciale minify plug-ins, die niets anders doen dan het compact maken van CSS en JavaScript.
Enkele goede plug-ins zijn:
W3 Total Cache
Nog beter is het om voor een plug-in te kiezen die meteen meerdere optimalisaties voor je WordPress website regelt. Dus die niet alleen de minify voor CSS en JavaScript doet maar die ook de HTML compact maakt. Vaak kan zo’n plug-in ook zorgen voor caching, datacompressie en andere verbeteringen.
Ik gebruik hiervoor W3 Total Cache, een erg uitgebreide plug-in waarbij je echt van alles in kan stellen. Van het compact maken van code tot het instellen van caching, en nog véél meer. Het instellen van deze plug-in is vaak één van de eerste dingen die Pixeltree voorstelt voor de WordPress optimalisatie voor je website.
Naast W3 Total Cache zijn er nog diverse andere WordPress plug-ins die je niet mag missen. Wil je hier meer informatie over of meer weten over de optimalisatie van je website? Neem dan gerust contact met me op.