Hvert eneste tegn kode, en browser downloader, lægger til sidens størrelse, og minimering af CSS og JavaScript er en af de enkleste måder at gøre den mindre. Minimering fjerner alt det i kodefiler, som en browser ikke behøver for at køre dem. Mellemrum, linjeskift, kommentarer og lange navne på variabler, der gør koden læsbar for udviklere, bliver alle fjernet, så filen bliver mindre uden at ændre, hvordan koden virker. Denne artikel forklarer, hvad minimering gør, hvordan det virker for CSS og JavaScript, hvor meget det typisk mindsker filstørrelsen, og hvordan du slår det til på din hjemmeside.
Kodefiler er skrevet, så udviklere kan vedligeholde dem. Det betyder, at de er formateret med indrykning, delt op i læsbare linjer, forsynet med kommentarer og opbygget med navne, der beskriver, hvad de er. Alt det er nyttigt, når en udvikler læser eller redigerer koden. Intet af det er nyttigt, når en browser læser og kører den. Minimering fjerner det, der kun er for mennesker, og giver en mindre fil, som en browser behandler på præcis samme måde. Du kan læse, hvordan filstørrelse bidrager til hastigheden, i artiklen om hvad indlæsningstid er, og hvordan den måles.
Hvad fjerner minimering egentlig fra kodefiler?
Når du minimerer CSS og JavaScript, ser resultatet ulæseligt ud for et menneske, men det virker præcis som originalen. Her er det, der bliver fjernet.
Mellemrum og linjeskift
- Udviklere bruger mellemrum og linjeskift til at gøre koden overskuelig og let at skimme
- Browsere ser mellemrum som uden betydning og springer dem helt over, når de læser koden
- Når du fjerner mellemrum fra en typisk CSS-fil, bliver den alene 15 til 25 procent mindre
Kommentarer
- Kommentarer er noter i koden, der forklarer, hvad afsnit gør, hvem der har skrevet dem, eller hvornår de sidst er opdateret
- Browseren ignorerer dem helt
- I kode med mange kommentarer kan en stor del af hver fil bestå af kommentarer, som ingen af dem er nødvendige i den version, der leveres
Lange navne på variabler og funktioner
- I JavaScript giver udviklere variabler og funktioner beskrivende navne, så koden forklarer sig selv. Navne som
calculateTotalOrderPriceelleruserSessionDurationviser tydeligt, hvad de betyder - Minimering erstatter dem med korte alternativer som
aellerbuden at ændre, hvad koden gør - Det kaldes name mangling og giver den største ekstra nedgang i filstørrelse ud over at fjerne mellemrum
Overflødige mønstre i koden
- Nogle værktøjer til minimering forenkler også opbygningen af koden og erstatter længere logiske udtryk med kortere, der giver det samme resultat
- Det går længere end at fjerne tegn og indebærer, at afsnit af koden skrives om for at blive kortere, og det kaldes nogle gange optimering af kode eller uglification ud over minimering
Hvordan virker minimering af CSS?
CSS-filer bestemmer, hvordan hvert element på en side ser ud. En typisk CSS-fil til en hjemmeside har hundredvis eller tusindvis af regler, der hver fastsætter farver, størrelser, afstande, skrifttyper og layout.
Hvad et værktøj til minimering af CSS gør
- Fjerner alle mellemrum mellem selectors, egenskaber og værdier
- Fjerner kommentarer
- Slår egenskaber sammen i kortformer, hvor det er muligt
- Fjerner semikolon, der ikke er nødvendige, i slutningen af regler
- Laver farveværdier om til kortere udgaver, hvor de findes
Sådan ser minimeret CSS ud
- Original: pænt formateret over flere linjer med mellemrum og kommentarer mellem afsnit
- Minimeret: alle regler presset sammen på én eller få linjer uden mellemrum mellem egenskaber, værdier eller selectors
- Det visuelle resultat i browseren er det samme. Kun den fil, der leveres til browseren, er anderledes
Typisk nedgang i størrelsen på CSS-filer
- Minimering mindsker typisk størrelsen på CSS-filer med 20 til 30 procent
- CSS-filer med mange kommentarer eller løs formatering kan opleve større nedgang
Hvordan virker minimering af JavaScript?
JavaScript-filer styrer, hvordan en side opfører sig, når man bruger den. De har en tendens til at være større end CSS-filer og får mere ud af minimering på grund af den ekstra gevinst ved name mangling.
Hvad et værktøj til minimering af JavaScript gør
- Fjerner alle mellemrum, linjeskift og kommentarer
- Omdøber variabler og funktioner til kortere alternativer
- Forenkler logikken i koden, hvor det er muligt, uden at ændre resultatet
- Fjerner død kode: afsnit af koden, der aldrig kan nås eller køres
Typisk nedgang i størrelsen på JavaScript-filer
- Minimering mindsker typisk størrelsen på JavaScript-filer med 30 til 50 procent
- Store JavaScript-filer med mange kommentarer, beskrivende navne på variabler og ordrig logik kan opleve nedgang på 60 procent eller mere
- JavaScript-filer bidrager til Total Blocking Time, når de forsinker hovedtråden. Mindre JavaScript-filer læses og køres hurtigere, og det mindsker blokering
Kan HTML også minimeres?
Ja, HTML kan også minimeres, men gevinsten er typisk mindre end for CSS og JavaScript.
Hvad minimering af HTML fjerner
- Mellemrum mellem HTML-tags
- HTML-kommentarer
- Lukketags og citationstegn, der kan udelades, hvor browsere selv kan regne ud, hvad der menes
Bør du minimere HTML?
- For sider, der bygges på serveren og giver store HTML-dokumenter, kan minimering give en meningsfuld nedgang i størrelsen af hvert svar
- For sider med kort HTML er nedgangen lille og ofte ikke besværet værd
- Minimering af HTML bliver sjældnere slået til end minimering af CSS eller JavaScript og sker typisk på serveren og ikke som et trin i bygningen af siden
Ændrer minimering, hvordan en hjemmeside ser ud eller virker?
Kode, der er minimeret rigtigt, giver præcis det samme resultat i browseren som originalen. Browseren er ligeglad med formatering, kommentarer og navne på variabler. Den behandler logikken og bruger stilene, uanset hvordan kildekoden er skrevet.
Hvornår minimering kan give problemer
- Dårligt skrevne værktøjer til minimering kan indimellem give fejl i syntaksen, der ødelægger kodens opførsel
- JavaScript, der er afhængigt af, at navne på variabler bevares på en bestemt måde, kan gå i stykker, når name mangling omdøber dem
- Hvis du minimerer kode fra tredjeparter, der ikke var lavet til at blive minimeret, kan det indimellem give uventet opførsel
Sådan undgår du problemer med minimering
- Brug etablerede værktøjer til minimering, der bliver vedligeholdt godt, i stedet for at skrive dine egne løsninger
- Test siden, når du har slået minimering til, så du ved, at alt ser ud og virker, som det skal
- Gem de oprindelige filer, der ikke er minimeret, til udvikling og redigering. Lever kun de minimerede versioner til besøgende
Hvordan minimerer du filerne på din hjemmeside?
Gennem din platform til hjemmesider
- Mange hjemmesidebyggere og systemer til indhold har minimering med som en indbygget indstilling eller mulighed for ydeevne
- Det er typisk en enkelt kontakt, du slår til, uden at filer skal behandles manuelt
- Det er den enkleste måde og det anbefalede udgangspunkt for brugere uden teknisk baggrund
Gennem et plugin eller en udvidelse
- Systemer til indhold, der understøtter plugins, har ofte udbredte plugins til ydeevne, der har minimering med sammen med andre forbedringer af hastighed
- De plugins klarer minimering automatisk ved hver forespørgsel om en side eller som en planlagt proces
Som en del af bygningen af siden
- Udviklingsteams, der arbejder med hjemmesider, der er bygget specielt, har typisk minimering med som et automatisk trin i processen
- Værktøjer til at bygge sider minimerer JavaScript, mens siden bygges. Værktøjer til at minimere CSS kan føjes til det samme forløb
- Den måde sikrer, at det altid er den minimerede version, der bliver udgivet, uden at der skal behandles noget, mens siden kører
Minimering er én del af en bredere række af forbedringer af hastighed. Du kan læse en komplet vejledning i at mindske indlæsningstiden på en hjemmeside på tværs af alle de vigtigste områder i artiklen om hvordan du mindsker indlæsningstiden på din hjemmeside. Hvordan minimering bidrager til point for Core Web Vitals, især Total Blocking Time, kan du læse i artiklen om hvad Core Web Vitals er. Hvis du vil tjekke resultaterne, når du har slået minimering til, kan du læse artiklen om hvordan du tester hastigheden på din hjemmeside.
Sådan håndterer WEMASY minimering
WEMASY's hjemmesidebygger minimerer automatisk de CSS- og JavaScript-filer, der leveres til besøgende. Det sker på platformens niveau uden opsætning. De oprindelige kildefiler bliver gemt for sig til platformens egen udvikling, og kun de minimerede versioner bliver leveret, når besøgende indlæser siderne.
Minimering er med sammen med andre automatiske forbedringer af hastighed: komprimering af billeder, headers til caching i browseren og levering via CDN. De kører sammen som en del af den standardopsætning af hosting, der er med i alle WEMASY-planer.
Se, hvad der er med, hos WEMASY hjemmesidebygger, eller se planerne på prissiden.
Ofte stillede spørgsmål
Hvad er minimering i webudvikling?
Minimering er at fjerne tegn, der ikke er nødvendige, fra kodefiler, blandt andet mellemrum, linjeskift, kommentarer og lange navne på variabler, så filen bliver mindre uden at ændre, hvordan koden virker. Minimerede CSS- og JavaScript-filer er mindre og downloader hurtigere end de oprindelige versioner, og det bidrager til kortere indlæsningstid. Browseren behandler minimeret kode på præcis samme måde som originalen. Med WEMASY's hjemmesidebygger kan du sætte det op direkte på din hjemmeside.
Hvor meget mindsker minimering filstørrelsen?
Minimering af CSS mindsker typisk filstørrelsen med 20 til 30 procent. Minimering af JavaScript mindsker typisk filstørrelsen med 30 til 50 procent, og større nedgang er mulig for filer med mange kommentarer eller ordrig kode. Den præcise nedgang afhænger af, hvordan den oprindelige kode var skrevet: Filer, der er velformateret og har mange kommentarer, får den største gevinst, mens kode, der allerede er kompakt, får en mindre forbedring.
Ændrer minimering, hvordan en hjemmeside ser ud eller virker?
Nej. Kode, der er minimeret rigtigt, giver det samme visuelle resultat og den samme opførsel i browseren som den oprindelige version, der ikke er minimeret. Browseren er ikke afhængig af formatering, kommentarer eller navne på variabler for at køre kode. Den behandler logikken og bruger stilene alligevel. Den eneste gang, minimering kan give problemer, er, hvis det giver en fejl i syntaksen, eller hvis JavaScript er afhængigt af, at navne på variabler bevares på en måde, der ikke passer sammen med name mangling.
Bør man minimere CSS og JavaScript på alle hjemmesider?
Ja, på alle hjemmesider hvor ydeevne betyder noget. Minimering er en forbedring med lav risiko, uden synlig ulempe og med stabile gevinster. Det er især enkelt at bruge, når platformen til hjemmesiden håndterer det automatisk. Det vigtigste at tænke på er, at de oprindelige kildefiler uden minimering bliver gemt for sig, så koden stadig kan læses og redigeres under udvikling.
Hvad er forskellen på minimering og komprimering?
Minimering fjerner varigt tegn, der ikke er nødvendige, fra kodefiler, før de leveres. Komprimering, for eksempel Gzip eller Brotli, bliver gjort af serveren, når filerne leveres, og mindsker størrelsen på filerne under overførslen. Begge dele mindsker den mængde data, der overføres til browseren, men de virker på hver sin måde og kan bruges sammen. En fil, der er minimeret og også komprimeret under overførslen, er mindre end en fil, der kun bruger én af de to metoder.
Kan minimering ødelægge en hjemmeside?
Det kan det i sjældne tilfælde. Værktøjer til minimering, der er dårligt lavet, kan give fejl i syntaksen, og JavaScript, der er afhængigt af, at bestemte navne på variabler bevares, kan opføre sig uventet efter name mangling. Hvis du bruger etablerede værktøjer, der bliver vedligeholdt godt, mindsker du risikoen markant. Test altid siden, når du har slået minimering til, og sørg for at have de oprindelige filer uden minimering ved hånden til fejlfinding eller senere ændringer.