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:
Hulp nodig?
Kom je er met bovenstaande handleiding niet uit?
Geen nood! Wij staan je graag bij met raad en daad.
Meer handleidingen
Hoe kom ik op de eerste pagina van Google?
Vraag: “Waar moet je iets begraven als je wilt dat niemand het ooit terugvindt? Antwoord: Op de tweede pagina van...
Lees verderWebpagina optimalisatie: “Leverage browser caching” oplossen
Wanneer je bezig bent met het optimaliseren van je webpagina, dan kom je vaak deze melding tegen. Wat betekent dit?...
Lees verderWebpagina optimalisatie: “Serve scaled images” oplossen
Wanneer je probeert een webpagina te optimaliseren dan verschijnt vaak de melding “serve scaled images”. Wat betekent dit? Het klinkt...
Lees verder10 noodzakelijke onderdelen voor je webshop
Winkelen is iets voor vrouwen, toch? Nou, echt niet. Er zijn online talloze webshops te vinden met een breed scala...
Lees verder