Varje tecken kod som en webbläsare laddar ner ökar sidans storlek, och att minifiera CSS och JavaScript är ett av de enklaste sätten att minska den. Minifiering tar bort allt som kodfiler innehåller men som en webbläsare inte behöver för att köra dem. Mellanslag, radbrytningar, kommentarer och långa variabelnamn som gör koden läsbar för utvecklare tas alla bort, vilket minskar filstorleken utan att koden fungerar annorlunda. Den här artikeln förklarar vad minifiering gör, hur det fungerar för CSS och JavaScript, hur mycket filstorleken vanligtvis minskar och hur du aktiverar det på din sajt.
Kodfiler skrivs för att underhållas av utvecklare. Det betyder att de formateras med indrag, delas upp i läsbara rader, förses med kommentarer och struktureras med beskrivande namn. Allt det är användbart när en utvecklare läser eller redigerar koden. Inget av det är användbart när en webbläsare tolkar och kör den. Minifiering tar bort de extra delarna som är till för människor och ger en mindre fil som webbläsaren bearbetar på exakt samma sätt. Sammanhanget om hur filstorlek bidrar till laddhastigheten finns i artikeln om vad sidladdningstid är och hur den mäts.
Vad tar minifiering egentligen bort från kodfiler?
När du minifierar CSS och JavaScript ser resultatet oläsligt ut för en människa men fungerar identiskt med originalet. Så här ser det ut när något tas bort.
Tomrum och radbrytningar
- Utvecklare använder mellanslag och radbrytningar för att göra koden visuellt ordnad och lätt att skumma
- Webbläsare ser tomrum som irrelevant och hoppar över det helt när de tolkar koden
- Om du tar bort tomrum från en typisk CSS-fil minskar den med 15 till 25 procent enbart av det
Kommentarer
- Kommentarer är anteckningar i koden som förklarar vad delar gör, vem som skrev dem eller när de senast uppdaterades
- Webbläsaren ignorerar dem helt
- I en välkommenterad kodbas kan en stor del av varje fil bestå av kommentarer, som alla är onödiga i den version som levereras
Långa variabel- och funktionsnamn
- I JavaScript ger utvecklare variabler och funktioner beskrivande namn så att koden förklarar sig själv. Namn som
calculateTotalOrderPriceelleruserSessionDurationförmedlar tydligt vad de betyder - Minifierare ersätter dem med korta alternativ som
aellerbutan att ändra vad koden gör - Det kallas namnförvrängning och ger den största ytterligare minskningen av filstorleken utöver borttagning av tomrum
Överflödiga kodmönster
- Vissa minifierare förenklar också kodens struktur och ersätter längre logiska uttryck med kortare motsvarigheter som ger samma resultat
- Det går längre än att ta bort tecken och innebär att delar av koden skrivs om för att bli kortare, vilket ibland kallas kodoptimering eller uglification utöver minifiering
Hur fungerar det att minifiera CSS?
CSS-filer definierar det visuella utseendet på varje element på en sida. En typisk CSS-fil för en sajt har hundratals eller tusentals regler som var och en anger färger, storlekar, avstånd, typsnitt och layoutbeteende.
Vad en CSS-minifierare gör
- Tar bort allt tomrum mellan selektorer, egenskaper och värden
- Tar bort kommentarer
- Slår ihop kortformsegenskaper där det går
- Tar bort onödiga semikolon i slutet av regelblock
- Byter färgvärden mot kortare motsvarigheter där sådana finns
Hur minifierad CSS ser ut
- Original: snyggt formaterad över flera rader med mellanrum och kommentarer mellan avsnitten
- Minifierad: alla regler hoptryckta på en eller några få rader utan mellanslag mellan egenskaper, värden eller selektorer
- Det visuella resultatet i webbläsaren är identiskt. Det är bara filen som levereras till webbläsaren som skiljer sig
Typisk minskning av CSS-filens storlek
- Minifiering minskar vanligtvis CSS-filens storlek med 20 till 30 procent
- CSS-filer med många kommentarer eller slarvig formatering kan få större minskningar
Hur fungerar det att minifiera JavaScript?
JavaScript-filer styr interaktivt beteende på en sida. De tenderar att vara större än CSS-filer och har mer nytta av minifiering på grund av de extra vinsterna med namnförvrängning.
Vad en JavaScript-minifierare gör
- Tar bort allt tomrum, alla radbrytningar och kommentarer
- Byter namn på variabler och funktioner till kortare alternativ
- Förenklar kodens logik där det går utan att ändra resultatet
- Tar bort död kod, alltså delar av koden som aldrig kan nås eller köras
Typisk minskning av JavaScript-filens storlek
- Minifiering minskar vanligtvis JavaScript-filens storlek med 30 till 50 procent
- Stora JavaScript-filer med många kommentarer, beskrivande variabelnamn och mångordig logik kan få minskningar på 60 procent eller mer
- JavaScript-filer bidrar till Total Blocking Time när de fördröjer huvudtråden. Mindre JavaScript-filer tolkas och körs snabbare, vilket minskar blockeringen
Kan HTML också minifieras?
Ja, HTML kan också minifieras, men vinsterna är vanligtvis mindre än för CSS och JavaScript.
Vad HTML-minifiering tar bort
- Tomrum mellan HTML-taggar
- HTML-kommentarer
- Valfria sluttaggar och citattecken där webbläsare kan räkna ut dem
Ska du minifiera HTML?
- För sidor som renderas på servern och genererar stora HTML-dokument kan minifiering ge en märkbar minskning av varje svars storlek
- För sidor med kort HTML är minskningen liten och ofta inte värd den extra komplexiteten i bearbetningen
- HTML-minifiering aktiveras mer sällan än minifiering av CSS eller JavaScript och görs oftast på servernivå i stället för som ett steg i bygget
Påverkar minifiering hur en sajt ser ut eller fungerar?
Korrekt minifierad kod ger exakt samma resultat i webbläsaren som originalet. Webbläsaren bryr sig inte om formatering, kommentarer eller variabelnamn. Den bearbetar logiken och tillämpar stilarna oavsett hur källkoden är skriven.
När minifiering kan orsaka problem
- Dåligt skrivna minifierare kan ibland skapa syntaxfel som förstör kodens beteende
- JavaScript som är beroende av att variabelnamn bevaras på ett visst sätt kan sluta fungera när namnförvrängning byter namn på dem
- Att minifiera kod från tredje part som inte var utformad för att minifieras kan ibland ge oväntat beteende
Så undviker du problem med minifiering
- Använd etablerade, välskötta minifieringsverktyg i stället för att skriva egna lösningar
- Testa sajten efter att du har aktiverat minifiering för att bekräfta att allt ser ut och fungerar som förväntat
- Behåll de ursprungliga, ominifierade versionerna av filerna för utveckling och redigering. Leverera bara de minifierade versionerna till besökare
Hur minifierar du sajtens filer?
Via din sajtplattform
- Många sajtbyggare och innehållshanteringssystem har minifiering som en inbyggd inställning eller prestandaoption
- Att aktivera det är oftast ett enda reglage utan någon manuell filbearbetning
- Det är det enklaste sättet och den rekommenderade startpunkten för den som inte är teknisk
Via ett tillägg
- Innehållshanteringssystem som stöder tillägg har ofta mycket använda prestandatillägg som innehåller minifiering vid sidan av andra hastighetsförbättringar
- Tilläggen sköter minifieringen automatiskt vid varje sidbegäran eller som en schemalagd process
Som en del av en byggprocess
- Utvecklingsteam som arbetar med sajter som byggts på beställning lägger oftast in minifiering som ett automatiserat steg i byggkedjan
- Verktyg för att bygga och paketera kod minifierar JavaScript under byggprocessen. CSS-minifierare kan läggas till i samma arbetsflöde
- Det här tillvägagångssättet ser till att den minifierade versionen alltid är den som publiceras, utan någon bearbetning under körning
Minifiering är en del av en bredare uppsättning hastighetsförbättringar. En fullständig guide till att minska sajtens laddtid inom alla huvudområden finns i artikeln om hur du minskar sajtens laddtid. Hur minifiering bidrar till poängen för Core Web Vitals, särskilt Total Blocking Time, kan du läsa om i artikeln om vad Core Web Vitals är. För att kontrollera resultatet efter att du har aktiverat minifiering, se artikeln om hur du testar din sajts hastighet.
Så hanterar WEMASY minifiering
WEMASY:s webbplatsbyggare minifierar automatiskt CSS- och JavaScript-filer som levereras till besökare. Det sker på plattformsnivå utan att du behöver konfigurera något. De ursprungliga källfilerna hålls separat för plattformens egen utveckling, och bara de minifierade versionerna levereras när besökare laddar sidor.
Minifiering ingår vid sidan av andra automatiska hastighetsförbättringar: bildkomprimering, cacherubriker för webbläsaren och CDN-leverans. De körs tillsammans som en del av standardupplägget för hosting i varje WEMASY-plan.
Se vad som ingår på WEMASY:s webbplatsbyggare, eller titta på planerna på prissidan.
Vanliga frågor
Vad är minifiering inom webbutveckling?
Minifiering är processen att ta bort onödiga tecken från kodfiler, bland annat mellanslag, radbrytningar, kommentarer och långa variabelnamn, för att minska filstorleken utan att koden fungerar annorlunda. Minifierade CSS- och JavaScript-filer är mindre och laddas ner snabbare än originalversionerna, vilket bidrar till kortare sidladdningstider. Webbläsaren bearbetar minifierad kod på exakt samma sätt som originalet. Med WEMASY:s webbplatsbyggare kan du sätta upp det direkt på din sajt.
Hur mycket minskar minifiering filstorleken?
Minifiering av CSS minskar vanligtvis filstorleken med 20 till 30 procent. Minifiering av JavaScript minskar vanligtvis filstorleken med 30 till 50 procent, med större minskningar möjliga för filer med många kommentarer eller mångordig kod. Hur mycket det minskar beror på hur originalkoden skrevs: välformaterade filer med många anteckningar får de största vinsterna, medan kod som redan är kompakt får mindre förbättringar.
Ändrar minifiering hur en sajt ser ut eller fungerar?
Nej. Korrekt minifierad kod ger samma visuella resultat och beteende i webbläsaren som den ursprungliga ominifierade versionen. Webbläsaren är inte beroende av formatering, kommentarer eller variabelnamn för att köra koden. Den bearbetar logiken och tillämpar stilarna oavsett. Det enda tillfälle då minifiering kan orsaka problem är när den skapar ett syntaxfel eller när JavaScript är beroende av bevarade variabelnamn på ett sätt som inte går ihop med namnförvrängning.
Ska man minifiera CSS och JavaScript på alla sajter?
Ja, för varje sajt där prestanda spelar roll. Minifiering är en förbättring med låg risk, utan någon synlig nackdel och med jämna vinster. Det är särskilt enkelt att införa när sajtplattformen sköter det automatiskt. Det viktigaste att tänka på är att se till att de ominifierade källfilerna bevaras separat så att koden fortfarande går att läsa och redigera under utvecklingen.
Vad är skillnaden mellan minifiering och komprimering?
Minifiering tar permanent bort onödiga tecken från kodfiler innan de levereras. Komprimering, till exempel Gzip eller Brotli, tillämpas av servern vid leveransen och minskar filernas storlek under överföringen. Båda minskar mängden data som överförs till webbläsaren, men de fungerar på olika sätt och kan användas tillsammans. En minifierad fil som också komprimeras under överföringen är mindre än en fil som bara använder en av de två metoderna.
Kan minifiering förstöra en sajt?
I sällsynta fall, ja. Dåligt genomförda minifieringsverktyg kan skapa syntaxfel, och JavaScript som är beroende av att specifika variabelnamn bevaras kan bete sig oväntat efter namnförvrängning. Om du använder etablerade, välskötta verktyg minskar du risken rejält. Testa alltid sajten efter att du har aktiverat minifiering och behåll de ursprungliga ominifierade källfilerna tillgängliga för felsökning eller framtida ändringar.