Hur man minifierar CSS / JavaScript-filer i WordPress (3 sätt)

För ett tag sedan upptäckte vi att minifiering av CSS- och JavaScript-filer drastiskt kan minska laddningstiderna. Efter att ha testat det på några WordPress-webbplatser blev vi förvånade över resultaten. Sidor som tog 5-6 sekunder att ladda sjönk plötsligt till 2-3 sekunder.

Sanningen är att varje extra sekund av laddningstid kostar dig besökare och potentiella kunder. När dina CSS- och JavaScript-filer är uppblåsta med onödiga mellanslag, kommentarer och formatering, saktar de bokstavligen ner din verksamhet.

Minifiering tar bort all den extra koden utan att ändra hur din webbplats fungerar.

Därför har vi sammanställt den här guiden som visar dig hur du minifierar dina WordPress-filer. Vi kommer att guida dig genom olika metoder så att du kan välja det som fungerar bäst för din webbplats.

Vad är minifiering och när behöver du det?

Termen 'minifiera' används för att beskriva en metod som gör dina WordPress-webbplatsens filstorlekar mindre. Detta görs genom att ta bort blanksteg, rader och onödiga tecken från källkoden.

Här är ett exempel på normal CSS-kod:

body {
margin:20px;
padding:20px;
color:#333333;
background:#f7f7f7;
}
h1 {
font-size:32px;
color#222222;
margin-bottom:10px;
}

Efter att koden har minifierats kommer den att se ut så här:

body{margin:20px;padding:20px;color:#333;background:#f7f7f7}
h1{font-size:32px;margin-bottom:10px}

Vanligtvis rekommenderas det att endast minifiera filer som skickas till användarens webbläsare. Detta inkluderar HTML, CSS och JavaScript-filer.

Du kan även minifiera PHP-filer, men detta kommer inte att förbättra sidladdningshastigheten för dina användare. Det beror på att PHP är ett server-sidigt programmeringsspråk, vilket innebär att det körs på servrar innan något skickas till besökarens webbläsare.

Fördelen med att minifiera filer är förbättrad WordPress hastighet och prestanda eftersom kompakta filer laddas snabbare.

Vissa experter anser dock att prestandaförbättringen är mycket liten för de flesta webbplatser och inte är besväret värt. Minifiering tar bara bort några få kilobyte data på de flesta WordPress-sajter. Du kan minska sidladdningstiden mer genom att optimera bilder för webben.

Om du försöker uppnå ett resultat på 100/100 på Google PageSpeed Insights eller GTMetrix-verktyget, kommer minifiering av CSS och JavaScript att förbättra ditt resultat avsevärt.

Med det sagt, låt oss titta på hur du enkelt minifierar CSS/JavaScript på din WordPress-webbplats. Vi kommer att gå igenom 3 olika alternativ du kan välja mellan:

1. Minimera CSS/JavaScript i WordPress med WP Rocket
2. Minimera CSS/JavaScript i WordPress med SiteGround
3. Minifiera CSS/JavaScript med Autoptimize
4. Vanliga frågor om minimering

Redo? Låt oss börja med vår topprekommenderade metod.

Metod 1. Minifiera CSS/JavaScript i WordPress med WP Rocket

Den här metoden är enklare och rekommenderas för alla användare. Den fungerar oavsett vilken WordPress-hosting du använder.

Först måste du installera och aktivera WP Rocket-pluginet. För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

WP Rocket är det bästa WordPress-cache-pluginet på marknaden. Det låter dig enkelt lägga till cachning i WordPress och avsevärt förbättra webbplatsens hastighet och sidladdningstider.

För mer information, se vår handledning om hur man installerar och konfigurerar WP Rocket i WordPress.

Efter aktivering måste du besöka sidan Inställningar » WP Rocket och växla till fliken 'Filoptimering'.

Härifrån behöver du välja alternativet Minifiera CSS-filer.

WP Rocket kommer då att visa en varning om att detta kan orsaka problem på din webbplats. Klicka på knappen 'Aktivera minifiering av CSS'. Du kan alltid inaktivera detta alternativ om det orsakar några problem med din webbplats.

Därefter behöver du skrolla ner till sektionen JavaScript-filer nedan.

Här markerar du helt enkelt rutan bredvid alternativet ‘Minifiera JavaScript-filer’.

Återigen ser du en varning om att detta kan orsaka problem på din webbplats. Klicka på knappen 'Aktivera minimering av JavaScript'.

Glöm sedan inte att klicka på knappen 'Spara ändringar' för att lagra dina inställningar.

WP Rocket kommer nu att börja minifiera dina CSS- och JavaScript-filer. Du kan rensa din cache i tilläggets inställningar för att säkerställa att det börjar använda de minifierade CSS- och JavaScript-filerna för nästa besökare på webbplatsen.

Metod 2. Minifiera CSS/JavaScript i WordPress med SiteGround

Om du använder SiteGround som din WordPress-värd, kan du minifiera CSS-filer med SiteGround Optimizer.

SiteGround Optimizer är ett plugin för prestandaoptimering som fungerar på sin egen plattform. Det fungerar bra med deras Ultrafast PHP för att förbättra din webbplats laddningstider.

Installera och aktivera bara pluginet SiteGround Optimizer på din WordPress-webbplats. För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

Därefter måste du klicka på SG Optimizer-menyn i sidofältet för WordPress-administrationen.

Detta tar dig till SG Optimizer-inställningarna.

Härifrån måste du klicka på knappen 'Gå till frontend' under 'Andra optimeringar'.

På nästa skärm kan du hantera CSS-frontend.

Du behöver slå på reglaget bredvid alternativet 'Minifiera CSS-filer'.

Gå sedan till fliken JavaScript och slå på reglaget bredvid alternativet ‘Minify JavaScript Files’.

Det var allt! Du kan nu tömma din WordPress-cache och besöka din webbplats för att ladda minifierade versioner av CSS- och JS-filer.

Metod 3. Minifiera CSS/JavaScript med Autoptimize

Denna metod rekommenderas för användare som inte använder SiteGround och inte använder WP Rocket.

Först måste du installera och aktivera pluginet Autoptimize. För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

Efter aktivering måste du besöka sidan Inställningar » Autoptimize för att konfigurera plugin-inställningarna.

Härifrån behöver du först markera alternativet 'Optimera JavaScript-kod' under JavaScript-alternativ.

Därefter behöver du skrolla ner till CSS-alternativen.

När du är där bör du kryssa i rutan bredvid alternativet ‘Optimera CSS-kod’.

Glöm inte att klicka på knappen 'Spara ändringar' för att spara dina inställningar.

Sedan kan du klicka på knappen Rensa cache för att börja använda dina minifierade filer. Pluginet kan också användas för att fixa renderblockerande JavaScript och CSS i WordPress.

Vanliga frågor om minimering

Här är svar på några av de vanligaste frågorna som folk också ställer om minifiering av filer i WordPress. Dessa kan hjälpa dig att bättre förstå processen och dess fördelar för din webbplats.

1. Vad exakt är minifiering?

Minifiering är en process som gör din webbplats kodfiler mindre genom att ta bort alla onödiga tecken utan att ändra hur koden fungerar. Detta inkluderar att ta bort blanksteg, kommentarer och radbrytningar från HTML-, CSS- och JavaScript-filer. Eftersom de resulterande filerna är mindre och mer kompakta, är de snabbare för en besökares webbläsare att ladda ner och bearbeta, vilket kan bidra till att förbättra din webbplats totala hastighet.

2. Kommer minifiering av CSS- och JavaScript-filer att förstöra min webbplats?

Även om det inte är vanligt med moderna plugins, kan minifiering ibland orsaka visuella eller funktionella problem på din webbplats. Det är därför prestanda-plugins ofta visar en varning innan du aktiverar funktionen. Det är alltid en bra idé att skapa en säkerhetskopia först och sedan testa din webbplats noggrant i ett inkognitofönster efter att du har aktiverat minifiering. Om du märker några problem kan du helt enkelt inaktivera inställningen eller använda pluginets funktioner för att utesluta specifika filer som kan orsaka konflikten.

3. Gör minifiering verkligen stor skillnad?

Effekten av minifiering kan variera beroende på din webbplats. För många webbplatser tar det bara bort några kilobyte data, och du kan se en mer betydande hastighetsförbättring genom att optimera dina bilder. Men om ditt primära mål är att uppnå ett perfekt 100/100-resultat på hastighetstestverktyg som Google PageSpeed Insights eller GTMetrix, då är minifiering av dina CSS- och JavaScript-filer ett viktigt steg som avsevärt kommer att förbättra ditt resultat.

4. Behöver jag ett plugin för att minifiera filer i WordPress?

För nästan alla WordPress-användare är det enklaste och mest rekommenderade sättet att minifiera filer att använda ett cache- eller prestandatillägg som WP Rocket eller Autoptimize. Dessa verktyg låter dig aktivera minifiering med bara några få klick. Vissa hostingleverantörer, som SiteGround, erbjuder också sina egna optimeringstillägg med dessa funktioner inbyggda. Att manuellt minifiera filer är en komplex och riskfylld process som inte rekommenderas för nybörjare.

Vi hoppas att den här artikeln hjälpte dig att minifiera CSS och JavaScript på din WordPress-webbplats. Du kanske också vill se vår guide om att optimera Core Web Vitals i WordPress och vårt expertval av bästa WordPress-cache-plugins för att snabba upp din webbplats.

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.