Checklistan: Minifiera frontend-kod

Del 10 av 13 för att argumentera för checklistan som fokuserar på webbprestanda och användbarhet.

Läser du koden bakom webbsidor? Det vill säga HTML, CSS och Javascript? De flesta gör det inte och det är ju förstås inte därför man har en webbsida. Därför kan man fråga sig varför det är så vanligt att webbutvecklare prioriterar sin egen yrkesgrupps intresse av läsbar kod framför besökarnas behov av en snabb upplevelse.

För en webbutvecklare är det jättesmidigt med läsvänlig kod när något behöver kollas på en webbplats som ligger ute skarpt på webben. Webbutvecklare hänger sig mer än gärna åt nästintill religiöst fundamentalistiska ställningstagande kring hur man bör använda mellanslag istället för tabbar, eller tvärt om, när man ska radbryta etcetera.

Däremot du som försöker betala räkningarna på internetbanken skiter ju fullständigt i hur lättläst koden är för den extremt lilla grupp som producerar webbplatser, det enda du bryr dig om är att det fungerar bra och snabbt.

Minifiering i praktiken

All gränssnittskod (också kallad frontend-kod på svengelska) bör minifieras om det kan minska filstorleken nämnvärt. Det gör filen mindre tung att ladda ner, och gäller förstås bara textfiler men med tanke på hur mycket Javascript och CSS många webbplatser använder idag kan det göra rätt stor skillnad. Jag har sett allt mellan 5 och 90 % mindre storlek på filer som minifierats, det påverkar som du förstår hastigheten en del.

Hur man börjar minifiera (som utvecklare eller på WordPress)

Det finns flera sätt att införa minifiering på en webbplats. När jag byggt på Microsofts ASP.NET-plattform har jag valt att köra med byggskript (så kallade MSBuild) vilket gör att när kod paketeras för publicering tvättas allt från att göra utvecklaren glad till att istället möta användarnas behov. I mitt fall körde jag med Yahoos YUI Compressor. Många som kör med utvecklarverktyget Visual Studios projektmallar för ASP.NET MVC väljer att köra med automatisk bundling (sammanslagning av filer) och minifiering. Automatiken är åtminstone bättre än att låta bli.

Byggskript funkar fint för små team men inte klockrent om man jobbar med kontinuerlig integration/uppdatering. Då behöver man bygga in detta i sin byggserver eller var i arbetsflödet det nu kan tänkas passa in.

För den som kör WordPress kan man testa tillägget Autoptimize, det har funkat bra för mig i alla fall.
Vill du minifiera filer manuellt kan du gå till tjänsten Minify Code.

Det enda högst giltiga motargumentet jag hört så här långt är att om ens webbplats skickar alla textfiler komprimerat är just insatsen med minifiering inte lika avgörande. Komprimering går, högst förenklat, ut på att hitta mönster som tekniskt kan beskrivas. Ett sådant mönster är 20 tomma rader i HTML-koden, eller att varje rad inleds med massor med mellanslag för indrag. I de fallen kommer komprimeringen göra en del nytta.

Så ja, om du bara vill välja en insats tycker jag att du prioriterar komprimeringen högre (punkt 11 på checklistan).

Men jag då? Vi webbutvecklare vill ju kunna läsa koden!?

Vet du vad, eftersom utvecklare gärna löser sina egna problem först råkar det finnas tjänster för det du behöver. Kolla bland annat in:

Nu borde alla kunna vara nöjda – samtidigt 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *