Hur man förminskar CSS / JavaScript-filer i WordPress (3 sätt)

Ingen vill ha en långsam website. Långsamma hämtar frustrerar besökarna och försämrar rankingen i search.

Som specialister på WordPress-prestandaoptimering har vi upptäckt att minifiering av CSS- och JavaScript-filer kan bidra till att skapa en snabbare och effektivare website.

I den här guiden visar vi dig hur du enkelt kan minifiera CSS- och JavaScript-filer i WordPress för att förbättra prestanda och hastighet, vilket ökar användarupplevelsen och synligheten för search engine.

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

Termen ”minify” används för att beskriva en metod som gör filstorleken på din WordPress website 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 ha minifierat koden 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 minifiera PHP-filer också, men det kommer ej att förbättra sidans laddningshastighet för dina användare. Det beror på att PHP är ett programmeringsspråk på serversidan, vilket innebär att det körs på servrar innan något skickas till besökarens web browser.

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

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

Om you försöker uppnå 100/100 poäng på Google PageSpeed Insights eller GTMetrix tool, så kommer minifying av CSS och JavaScript att förbättra your score avsevärt.

Med detta sagt, låt oss ta en titt på hur du enkelt kan minifiera CSS/JavaScript på din WordPress site. Vi kommer att gå igenom 3 olika alternativ som du kan välja mellan:

Är du redo? Låt oss komma igång med vår högst upp 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 vilket WordPress webbhotell du använder.

Först måste du installera och aktivera WP Rocket plugin. För mer detaljer, se vår Step-by-Step guide om hur du installerar ett plugin för WordPress.

WP Rocket är det bästa tillägget för caching i WordPress på marknaden. It allows you to easily add caching to WordPress and significantly improve website speed and page load times.

Mer detaljer hittar du i vår tutorial om hur du installerar och konfigurerar WP Rocket i WordPress.

När du är aktiverad måste du gå till Settings ” WP Rocket page och byta till tabben ”File Optimization”.

Härifrån måste du kontrollera alternativet Minifiera CSS-filer.

WP Rocket kommer då att visa dig en varning om att detta kan bryta saker på din webbplats. Gå vidare och klicka på knappen ”Activate Minify CSS”. Du kan alltid deactivate det här alternativet om det orsakar några issues med din website.

Därefter måste du rulla ner till JavaScript Files section under.

Här kontrollerar du bara boxen bredvid alternativet ”Minify JavaScript files”.

Återigen kommer du att se en varning om att detta kan bryta saker på din webbplats. Gå vidare och klicka på knappen ”Activate Minify JavaScript”.

Glöm sedan inte att klicka på knappen ”Save Changes” för att spara dina inställningar.

WP Rocket kommer nu att börja minifiera dina CSS- och JavaScript-filer. You can clear your cache in the plugin settings to make sure that it starts using the minified CSS and JavaScript for the next website visitor.

Metod 2. Minifiera CSS/JavaScript i WordPress med SiteGround

Om du använder SiteGround som din WordPress hosting provider, då 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 sites hämtar tider.

Installera och aktivera bara SiteGround Optimizer plugin på din WordPress site. För mer detaljer, se vår Step-by-Step guide om hur du installerar ett WordPress plugin.

Efter det måste du klicka på SG Optimizer-menyn i din WordPress admin sidebar.

Detta tar dig till SG Optimizer settings.

Härifrån måste du klicka på knappen ”Go To Front-end” under ”Other Optimizations”.

På nästa vy kommer du att kunna hantera CSS front-end.

Du måste slå på toggle bredvid alternativet ”Minifiera CSS-filer”.

Därefter måste du växla till tabben JavaScript och slå på toggle bredvid alternativet ’Minify JavaScript Files’.

Nu är allt klart! Du kan nu tömma din WordPress-cache och besöka din website för att hämta minifierade versioner av CSS- och JS-filer.

Metod 3. Minifiera CSS/JavaScript med hjälp av Autoptimize

Den här metoden rekommenderas för användare som inte är på SiteGround och ej använder WP Rocket.

Först måste du installera och aktivera pluginet Autoptimize. För mer detaljer, se vår Step-by-Step guide om hur du installerar ett WordPress plugin.

Efter aktivering måste du besöka Settings ” Autoptimize page för att konfigurera plugin-inställningarna.

Härifrån måste du först kontrollera alternativet ”Optimera JavaScript-kod” under JavaScript Options.

Därefter måste du rulla ner till CSS-alternativen.

När du väl är där ska du kontrollera boxen bredvid alternativet ”Optimera CSS-kod”.

Glöm inte att klicka på knappen ”Save Changes” för att lagra dina inställningar.

Sedan kan du clicka på knappen Empty Cache för att börja använda dina minifierade filer. Pluginet kan också användas för att fixa renderingsblockerande JavaScript och CSS i WordPress.

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 optimering av Core Web Vitals i WordPress och vårt expertval av de bästa drag and drop page builders i WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.