Wroom!
Skal din hjemmeside eller webshop give værdi, så skal der fart på. Indlæsningshastighed er ubetinget et af de vigtigste parametre, du skal have styr på, hvis du gerne vil:
- Undgå at de besøgende forsvinder
- Skabe gode brugeroplevelser
- Hæve konverteringsraten
Der er mange ting du kan gøre for at forbedre hastigheden af din WordPress hjemmeside. Men der en ret enkel teknik, som ofte bliver overset – selvom den er pokkers effektiv (det tager kort tid og effekten stor). Teknikken hedder minification. Eller på lidt gebrokkent dansk: minificering.
Den korte forklaring er, at du tager din kode og krymper den, så den bliver hurtigere at hente ned, når de besøgende lander på din hjemmeside. Det ændrer intet på, hvordan din hjemmeside ser ud eller fungerer – den bliver bare indlæst hurtigere. Det’ kanon.
Her får du en introduktion til minification, og hvordan du nemt gør det på din egen WordPress hjemmeside.
Hvad er minification (og hvordan virker det)?
Okay. Det meste kode bliver skrevet, så det er let at læse for mennesker. Det giver god mening, for det er mennesker, der skal arbejde i den kode.
Derfor kan en lille stump af CSS eksempelvis se sådan her ud:
h1 {
background-color: black;
color: white;
}
h2 {
background-color: yellow;
color: black;
}
p {
background-color: white;
color: black;
}Her fortæller vi eksempelvis browseren, at alle H1-overskrifter skal have baggrundsfarven sort og tekstfarven hvid. Ganske simpelt. Og let at læse sig frem til.
Vi bruger indryk og mellemrum i stor stil. Det hjælper med at skabe overblik og gør det let at arbejde med koden. Men det er kun os mennesker, der bekymrer os om den slags. Computeren er fuldstændig ligeglad. For den er meget af eksemplet her overflødigt.
Så ved at minificere vores kode får vi det her resultat:
h1{background-color:#000;color:#fff}h2{background-color:#ff0;color:#000}p{background-color:light-gray;color:#000}Har det nogen effekt?
I dén grad. For nu er vores meget enkle strimmel af CSS pludselig 60 % mindre.
Det er altså 60 % mindre, der skal hentes ned af din besøgende. Uden at nogen kan se det på din hjemmeside. Og for lige at perspektivere det, så kan CSS filer snildt bestå af flere tusinde linjer. Og typisk har udvikleren skrevet kommentarer og brugt masser af mellemrum, så koden er let at arbejde i.
Potentialet er enormt.
For det er ikke bare din CSS, du kan minificere. Du kan gøre det samme med din HTML og JavaScript.
Lovely.
Men hvordan gør du det?
Først kigger vi på den manuelle metode. Det er måske ikke den optimale, men den giver et virkelig fint indblik i, hvordan den her metode fungerer.
Bagefter får du 3 anbefalinger til WordPress-plugins, der kan minificere din kode automatisk.
Manuel minificering af din kode
Du kunne selvfølgelig sidde og fjerne mellemrum og kommentarer – linje for linje. Det kræver en sikker hånd (og god tid i kalenderen).
Heldigvis findes der værktøjer, der kan kværne din kode for dig.
Minify (minifier.org) kan klare opgaven med både CSS og JavaScript. Her kan du smide din kode ind og lynhurtigt få den krympet. Bagefter kan du kopiere koden over din filnavn.min.css eller filnavn.min.js – og du får vist, hvor mange KB, du har sparet.
CSS Compressor er et lidt mere avanceret værktøj, der kun fokuserer på CSS. Her kan du vælge, hvor hårdt du vil have skrumpet din fil. Koden bliver spyttet ud i et nyt tekstfelt, du kan kopiere den fra. Og så får du selvfølgelig data på, hvor meget du sparer.
JavaScript Compressor fokuserer udelukkende på JavaScript. Her kan du også vælge, hvor meget din JavaScript skal komprimeres.
Browsere kan helt uden problemer indlæse minificerede filer, men det er vigtigt, at du fortæller maskinen, at det er en minificeret fil. Det gør du ved at skyde et lille ekstra led ind i filformatet.
Det ser eksempelvis sådan her ud:
- styles.css bliver til styles.min.css
- app.js bliver til app.min.js
Sværere er det egentlig ikke.
Men når du skal bruge din hjemmeside, og den løbende udvikler sig, så er det selvfølgelig møgbesværligt at sidde og minificere alle filer hver manuelt. Også selvom du har et lækkert værktøj til at hjælpe dig.
Heldigivs findes der plugins, der hjælper dig med at få minificeret dine filer i WordPress. Uden at du skal rode med alt det tekniske.
3 plugins til WordPress, der kan minificere din kode – uden at du skal røre en finger
Et godt plugin er – uden tvivl – den bedste måde at håndtere minificering på i WordPress. Det er selvfølgelig lækkert, hvis udvikleren af dit theme eller det enkelte plugin allerede har styr på det. Men der er bare ingen garanti.
Her er 3 plugins til WordPress, der gør din side hurtigere, fordi de automatisk sørger for at krympe dine filer.
1. WP Rocket
Her får du (mod betaling) en fuld løsning, der kan håndtere alt, når det kommer til hastighedsoptimering af WordPress. Det er let at sætte op, effekten er enorm og WP Rocket håndterer selvfølgelig også minificering af HTML, CSS og JavaScript (altså al din frontend kode).
Det er WP Rocket, jeg selv bruger, når jeg hastighedsoptimerer WordPress.
2. Autoptimize
En ret nem løsning. Der er gratis. Den skal bare sættes op en gang, så kører det. Har du behovet eller den tekniske snilde til det, så kan du også fintune de mere avancerede indstillinger. Det fede er bare, at det ikke er nødvendigt.
Men vær opmærksom på, at det kun er minificeringen, du får her. Du skal altså kombinere med en masse andre plugins, hvis du skal have den fulde hastighedsoptimering.
3. Merge + Minify + Refresh
Igen. Det virker ud af boksen. Du kan minificere CSS og JavaScript. Og det er nemt at sætte op. Du kan ikke optimere HTML, og du skal selvfølgelig huske at kombinere med andre aspekter af hastighedsoptimering.
Resume
Minificering krymper koden i dine filer, så den fylder mindre. Det gør den svær at læse for mennesker, men computeren er ligeglad. Resultatet er, at filerne bliver indlæst hurtigere ude hos dine besøgende. Og hurtige hjemmesider og webshops performer bedre. Basta.
Du kan gå to veje, når du minificerer filer på din WordPress hjemmeside. Du kan bruge en komplet hastighedsoptimeringssuite som WP Rocket (det koster). Eller du kan bruge et gratis plugin som Autoptimize, der så kun fokuserer på minification af CSS og JS.
I min optik kan WP Rocket virkelig fint betale sig. Men nu kender du begge muligheder.