Minificatie van CSS en JavaScript
Wat is minificatie?
Minify css javascript betekent dat je de code van stijlbestanden en scripts kleiner maakt zonder dat het resultaat verandert. Er worden dan dingen verwijderd die de browser niet nodig heeft, zoals witregels, commentaar en lange variabelenamen.
Voor de bezoeker maakt dat geen verschil. De browser ziet dezelfde stijlen en dezelfde functies, alleen in een compactere vorm. Een ontwikkelaar bewaart de leesbare versie meestal apart, zodat hij later nog kan aanpassen.
Bij CSS gaat het vooral om witruimte en commentaar. Bij JavaScript kunnen ook variabelen en functienamen worden ingekort. Daardoor is de geminificeerde code voor mensen moeilijk te lezen, en heb je de bron nodig om wijzigingen te maken.
Hoeveel scheelt minificatie?
Dat hangt af van de bestanden. Code met veel commentaar en witruimte wordt flink kleiner. Bestanden die al compact zijn, leveren weinig extra winst op. Bij een site met veel scripts telt de besparing per bestand wel op.
Minificatie maakt een bestand kleiner, en dus sneller te downloaden en te verwerken. Of je pagina daardoor merkbaar sneller wordt, hangt af van de totale omvang en van waar de tijd verloren gaat. Kijk daarom ook naar het paginagewicht en het aantal verzoeken. Let er bij het meten op dat je de bestanden voor en na minificatie vergelijkt, zodat je de winst zelf ziet.
Minificatie en compressie: hoe ze samenwerken
Minificatie en compressie zijn twee verschillende stappen. Minificatie verandert de code zelf. Compressie, zoals gzip, verpakt het bestand daarna als geheel voordat de server het verstuurt. Beide stappen versterken elkaar.
Omdat compressie al veel herhaling wegwerkt, levert minificatie na compressie vaak minder extra winst op dan je zou verwachten. Het blijft nuttig, omdat de browser minder code hoeft te verwerken. Het samenvoegen van veel kleine bestanden speelt sinds HTTP/2 ook minder een rol, omdat die versie veel verzoeken tegelijk kan afhandelen.
Test de pagina na het minificeren altijd, want een fout in de bron kan pas dan zichtbaar worden.
Veelgestelde vragen
Moet ik zelf CSS en JavaScript minificeren?
Dat hoeft vaak niet met de hand. Veel bouwprogramma's en CMS-plugins minificeren automatisch bij het publiceren. Vraag bij je hoster of in je CMS of het gebeurt. Schrijf je zelf code, dan kun je een bouwstap toevoegen en de leesbare bron bewaren.
Maakt minificatie ook HTML kleiner?
Ja, HTML kan ook worden geminificeerd, door witruimte en commentaar te verwijderen. De winst is meestal klein, omdat HTML vaak al goed te comprimeren is. Het is een nuttige stap, maar kijk eerst naar grotere bestanden zoals afbeeldingen en scripts voordat je er veel tijd in steekt.