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

Långa laddningstider frustrerar besökare och skadar dina Google-rankningar. Även en sekunds fördröjning kan kosta dig prenumeranter och försäljning.

Minifiering låter tekniskt, men det är helt enkelt ett sätt att göra din webbplatskod mindre så att den laddas snabbare. Vi använder denna teknik på våra egna webbplatser för att säkerställa bästa prestanda.

I den här guiden visar vi dig hur du enkelt minifierar CSS- och JavaScript-filer i WordPress.

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 behöver inte minifiera PHP-filer. PHP är ett serverbaserat programmeringsspråk, vilket innebär att det körs på servern innan något skickas till besökarens webbläsare, så att minifiera det förbättrar inte användarens laddningstider.

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 förbättra ditt betyg på Google PageSpeed Insights eller GTMetrix-verktyget, då är minifiering av CSS och JavaScript ett viktigt steg.

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:

Låt oss börja med vår mest rekommenderade 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. Använd din webbplats noggrant för att säkerställa att allt fungerar effektivt.

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ärdleverantör, då kan du minifiera CSS-filer med hjälp av Speed Optimizer-plugin (tidigare SiteGround Optimizer).

Speed Optimizer är ett prestandaoptimeringsplugin 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 helt enkelt Speed Optimizer-pluginet 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 behöver du klicka på menyn Speed Optimizer i sidofältet i din WordPress-administration. Detta tar dig till SG Optimizer-inställningarna.

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

På sidan Frontend-inställningar, växla till fliken 'CSS'.

Slå sedan på reglaget bredvid alternativet 'Minify CSS Files'.

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.

Ytterligare resurser

Nu när du vet hur du minifierar din webbplats kod, här är några andra guider som hjälper dig att förbättra din WordPress-prestanda:

• Den ultimata guiden för att öka WordPress-hastighet & prestanda
• Hur man korrekt installerar och konfigurerar WP Rocket i WordPress
• Hur man optimerar Core Web Vitals för WordPress (Ultimat guide)
• Snabba upp din WordPress – Hur du sparar optimerade bilder för webben
• 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.