Blog Jvanderlinde.net
Insights & meer

Waarom minify belangrijk is

Minify, een term om code als het ware te comprimeren, en alle overhead wat erin zit, te strippen om zo tot een absolute minimum te komen. Het klinkt duur, maar het is een bewezen methode van bouwen van websites wat extra snel laadt en vooral enige overhead doet strippen. Wat levert het in de praktijk op en wat kan je zoal verwachten van een grote website? Het standaard minify'en van websites doe ik al ruim 4 jaar. Zelfs deze pagina is al minified om de code zo strak mogelijk te houden. Het heeft voordeel van snelheidswinst, data besparing en zelfs belemmering van kopieren van mijn werk. Layouts die ik in opdracht van klanten heb gedaan zijn herhaaldelijk gejat ja.

 

Het minify'en houdt in dat je html code als het ware wat normaal in een gestructureerde stamboom achtig iets staat, aan elkaar wordt geplakt wat eigenlijk tot 1 regel code gaat vallen. Zie het als 1 regel code dat ruim 30.000 tekens lang kan zijn, in plaats van 500 regels code met daarop ieder een nieuw stukje. Qua performance is het merkbaar qua rendertijd en vooral op mobiele apparaten is de snelheidswinst opmerkelijk. Natuurlijk niet voor een kleine pagina met wat regels code, maar een flinke pagina met wel 20kb aan code kan het schelen. Met een flinke website zoals Deugnietjes Belgie merk ik dat ik veel besparen kon op data met o.a lazy load en minify.

 

Google insights is een tool dat al langer hamert op gebruik van minify in zowel HTML, CSS als zelfs Javascript. Dit patroon volg ik al jaren standaard bij de bouw van websites en heb ik ook in house code draaien om minify te vergemakkelijken. Minify van CSS kan profijt hebben van ruim 40KB op een bestand van ongeveer 800KB aan code. Per hit of bezoeker bespaar je daarop alleen al 40kb. Ook de render tijd die nodig is om een pagina op te bouwen wordt versneld. Een recent opgeleverde website zoals Insights Escort Benelux laat een enorm hoge score (Desktop 99% / mobiel 96%) zien en dat grenst aan bijna een top presterende website.

 

De enige reden waarom het nog niet op de 100% staat is dat google liever ziet dat images oftewel afbeeldingen in een next gen formaat worden gezet. Het is een leuk bedoeld initatief maar niet iedere bezoeker die op een escort service website zit is voorzien van de laatste standaard browser of laat staan een mobiel apparaat met een inhouse browser die next-gen images ondersteunen doet. Ik sluit ze hiermee uit en dat wil ik nog niet. Natuurlijk kan minify overbodig raken wanneer je functies zoals GZIP op je server activeert. GZip 'zipt' de bestanden die opgevraagd worden bij elkaar en daar zit een kleine winstbesparing in. Dit was populair in de dialup tijd nog.

 

Toch wordt GZip bij een moderne webserver nog steeds gebruikt en laat het echt wel prestatieverbeteringen zien. Veel fonts, javascripts en dergelijk, komen met een hoop overhead. Het minify'en van javascript bestanden waag ik me niet (meer) aan. Het is vaak genoeg voorgekomen dat de JS files broken raakte en dingen zoals het menu gewoon niet meer werkte (open wilde). Ik laat dat stukje dus aan Gzip over qua optimalisatie. Als je een serieuze website hebt, en middelen zoekt om de prestaties te verbeteren (geldt ook voor wordpress) dan is het de moeite waard om je te verdiepen in minify van HTML, CSS en zelfs Javascript.

 

Dankzij blijvend vooruit streven in de bouw van websites voor klanten weet ik een bijna perfect product neer te zetten dat toekomstig bestendig is. Het is alleen jammer dat google momenteel nog niet veel waarde hecht aan de werkelijke score en optimalisatie van insights. We zien soms enorm belabberd gebouwde websites met een score onder de 30 nog steeds hoog in de zoekmachines ranken. Als google zo hamert op mobiel vriendelijk dan behoort snelheid en dataverkeer die een pagina vergt ook een belangrijke factor te zijn. In Nederland hebben we dan wel unlimited internet, in andere europese landen vaak nog niet.