Webpagina aan het optimaliseren? Wat betekent de melding “Minify CSS, HTML of JavaScript” en hoe los je dit op?
Om te begrijpen wat minification is kunnen we het beste even een klein stukje code als voorbeeld nemen. Wij programmeurs proberen code te schrijven die ook leesbaar is voor andere programmeurs. Dit is wel zo handig als je met meerdere mensen werkt aan een stuk software, of als je wilt dat iemand in de toekomst veranderingen kan aanbrengen aan jouw stuk code.
Neem onderstaand stukje Javascript als voorbeeld.
var array = [];
for (var i = 0; i < 20; i++) {
array[i] = i;
}
Hier staat precies hetzelfde als onderstaand stukje code, maar dit is “minified” code.
for(var a=[i=0];++i<20;a[i]=i);
Je ziet dat dit een stuk korter is. In de praktijk betekent minification dat overbodige tekens als enters en spaties, die het voor ons mensen een stuk leesbaarder maken, worden weggelaten. Een computer ziet namelijk geen verschil.
Elke KB telt
Voor een klein stukje code als hierboven maakt dit weinig verschil, maar wanneer je dezelfde techniek toepast op duizenden regels code, dan scheelt dit al gauw weer enkele KBs (Kilobytes), tot MBs (Megabytes) aan data. Data die vervolgens niet over het internet gestuurd hoeven worden van de webserver naar de browser van de gebruiker. Elke KB telt en scheelt download tijd.
Er bestaan verschillende tools op het internet om eenvoudig stukken CSS, HTML of Javascript te “minifyen”. Je kunt hier bijvoorbeeld de volgende tool voor gebruiken: https://www.minifier.org/
Nadat je de betreffende file hebt geminified, kun je deze weer uploaden naar je server.
LET OP! Aanpassingen doen aan HTML, CSS of Javascript bestanden is voor gevorderden gebruikers. Bij fouten loop je het risico de website onbereikbaar te maken. Zorg dus dat je weet wat je doet, of schakel een professional in.
Zelf bezig met optimalisatie? Gebruik dan deze tools:
