Hur man tar bort oanvänd CSS i WordPress (på rätt sätt)

En långsam webbplats är frustrerande för besökare och dåligt för din verksamhet. När sidor tar för lång tid att ladda, lämnar användare webbplatsen och dina sökrankningar sjunker.

Ofta är det dolda problemet oanvänd CSS-kod som skräpar ner ditt tema och dina plugins. Denna extra kod lägger vikt vid dina sidor utan att göra något användbart.

Vi har optimerat hundratals WordPress-webbplatser för hastighet och funnit att rensning av denna kod gör en enorm skillnad. Det hjälper din webbplats att klara Core Web Vitals-tester och förbättrar användarupplevelsen.

I den här guiden visar vi dig hur du tar bort oanvänd CSS i WordPress för att göra din webbplats snabbare.

Vad är oanvänd CSS i WordPress?

Oanvänd CSS i WordPress hänvisar till CSS-kod som laddas på dina webbsidor men som faktiskt inte används för att styla något synligt på dessa specifika sidor.

Den här extra koden tvingar besökarnas webbläsare att ladda ner och bearbeta onödiga filer, vilket saktar ner laddningstiderna för dina sidor. Även några extra sekunder kan skada din användarupplevelse och sökmotorrankningar, vilket potentiellt kostar dig besökare och konverteringar.

Du kan enkelt kontrollera om oanvänd CSS påverkar din webbplats genom att köra den genom Google Pagespeed Insights. Leta efter varningen 'Remove unused CSS' i dina resultat. Den visar exakt vilka filer som saktar ner webbplatsen.

Varför laddar WordPress oanvänd CSS?

Saken är den: WordPress designades inte för att vara kräset med vilken CSS den laddar. Ditt WordPress-tema kommer med ett huvudblad (vanligtvis kallat style.css) som innehåller stilregler för varje möjligt element, även de du kanske aldrig använder.

Men ditt tema är bara början. Varje plugin du installerar lägger till sina egna CSS-filer i mixen. WooCommerce laddar butiksstilar på varje sida (även dina blogginlägg), sidbyggare laddar sin CSS globalt, och kontaktformulärsplugins laddar formulärstilar på sidor utan formulär.

Lägg till anpassade teckensnitt, ikonbibliotek och andra designelement, och du får en massa CSS-bloat. Även om varje enskild fil kan vara liten, ackumuleras de snabbt och påverkar din webbplats hastighet.

Hur man tar bort oanvänd CSS i WordPress

Nu till de goda nyheterna: det finns flera effektiva sätt att rensa oanvänd CSS på din WordPress-webbplats. Vi har testat flera metoder och hittat metoder som fungerar tillförlitligt utan att bryta din webbplats.

Här är vad du behöver veta från början: att helt eliminera 100% av oanvänd CSS är nästan omöjligt på grund av hur WordPress dynamiskt laddar innehåll. Viss CSS måste finnas redo för interaktiva element, villkorligt innehåll och olika sidtyper.

Men oroa dig inte, du behöver inte perfektion för att se stora förbättringar. Även att ta bort 50-70% av oanvänd CSS kan dramatiskt snabba upp din webbplats.

Vi kommer att visa dig två beprövade metoder som ger rätt balans mellan prestandavinster och webbplatsstabilitet, så att du kan välja det tillvägagångssätt som passar din komfortnivå.

1. Ta bort oanvänd CSS i WordPress med WP Rocket
2. Ta bort oanvänd CSS i WordPress med Asset CleanUp
3. Vanliga frågor om oanvänd CSS
4. Ytterligare resurser för att förbättra WordPress-prestanda

Metod 1: Ta bort oanvänd CSS i WordPress med WP Rocket

Den här metoden är enklare och rekommenderas för nybörjare. Den förbättrar avsevärt den övergripande leveransen av CSS-filer på din WordPress-webbplats, inklusive att ta bort det mesta av den oanvända CSS:en.

Vi anser att det är den bästa lösningen för nybörjare eftersom den är enklare och uppnår huvudmålet att ge en bättre upplevelse för dina användare. Detta innebär att din webbplats laddas snabbt på hastighetstestverktyg och också känns snabb för dina användare.

Först måste du installera och aktivera pluginet WP Rocket. Det är ett premiumplugin, men det är det enklaste sättet att få jobbet gjort utan teknisk kunskap. 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 » WP Rocket och växla till fliken 'Filoptimering'.

Därefter måste du skrolla ner till avsnittet CSS Files och sedan markera rutan bredvid alternativet ‘Remove Unused CSS’.

När du har markerat rutan kan du se ett bekräftelsemeddelande. Du kan fortsätta och klicka på knappen ‘Activate Remove Unused CSS’.

När alternativet är aktivt ser du en ruta för ‘CSS safelist’. Detta gör att du kan ange CSS-filnamn, ID:n eller klasser som inte ska tas bort. Du behöver bara använda detta om du märker att vissa delar av din webbplats ser trasiga ut efter att ha aktiverat inställningen.

Ange dem helt enkelt i rutan.

Därefter måste du spara dina ändringar genom att skrolla ner och klicka på knappen 'Spara ändringar'.

När du gör det kommer WP Rocket att börja bearbeta dina CSS-filer och visa en förloppsindikator.

Det kommer att ta några minuter för pluginet att bearbeta och ta bort oanvända CSS-filer från din webbplats.

Du kommer att se meddelandet 'Borttagning av oanvänd CSS är slutförd!' när pluginet har slutfört processen.

Besök nu verktyget Google Pagespeed Insights och testa din webbplats prestanda.

Alternativ: Optimera CSS-leverans (felsökningsmetod)

Om metoden ‘Ta bort oanvänd CSS’ ovan fungerar för din webbplats, behöver du inte göra detta steg. Den hanterar redan renderblockerande CSS åt dig.

Men om den tidigare metoden bröt din webbplatslayout och du var tvungen att inaktivera den, kan du använda alternativet ‘Optimera CSS-leverans’ som ett alternativ.

För att göra detta, markera helt enkelt rutan bredvid alternativet ‘Optimera CSS-leverans’ i avsnittet CSS-filer.

Detta alternativ genererar en CSS-fil som endast innehåller den CSS-kod som behövs för att visa den synliga delen av din webbplats. Den laddar den filen först, visar sidan för dina besökare och laddar sedan andra CSS-filer med en teknik som kallas uppskjuten laddning.

Genom att ta bort denna render-blockerande CSS blir din webbplats synlig för användarna mycket snabbare än om du var tvungen att ladda alla CSS-filer innan sidan visas.

Efter att ha aktiverat alternativet 'Optimera CSS-leverans', klicka på knappen 'Spara ändringar' och vänta tills WP Rocket genererar den nödvändiga CSS-filen för alla dina inlägg och sidor. Det kommer också automatiskt att rensa cachen för din webbplats.

När du är klar kan du fortsätta och testa din webbplatsprestanda igen med Google Pagespeed Insights.

Ytterligare justeringar av filleverans för att öka prestandan

WP Rocket låter dig också ta bort frågesträngar från statiska filer, kombinera Google Fonts-filer och minifiera HTML.

Alla dessa justeringar ger små förbättringar av din totala hastighet, vilket tillsammans ger en snabbare laddningsupplevelse för dina besökare.

Du kommer också att se alternativ för att minimera och kombinera CSS-filer. Dessa alternativ minskar HTTP-förfrågningar och ger dig en extra hastighetsökning.

Du måste dock noggrant kontrollera din webbplats för att se till att inget är trasigt efter att ha aktiverat dessa inställningar.

Dessutom kan du tillämpa samma optimering för JavaScript-filer på din webbplats.

Du kan minifiera och kombinera dem för att fungera som en enda fil och skjuta upp laddningen för JavaScript-filer för att förbättra prestandan.

För mer information, se vår steg-för-steg-handledning om hur man korrekt konfigurerar WP Rocket i WordPress.

Metod 2: Ta bort oanvänd CSS i WordPress med Asset CleanUp

Denna metod använder gratispluginet Asset CleanUp. Det är lite mer manuellt men ger dig full kontroll att ta bort specifik oanvänd CSS från vilken sida som helst på din WordPress-webbplats.

Vi rekommenderar denna metod om du är bekväm med att felsöka din webbplats, eftersom du kommer att behöva testa din webbplats noggrant för att säkerställa att inget är trasigt.

Först måste du installera och aktivera pluginet Asset Cleanup. 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 Asset CleanUp » Inställningar och växla till fliken Testläge. Härifrån måste du aktivera alternativet 'Aktivera testläge'.

Detta gör att du kan prova olika inställningar och testa dem som administratör utan att påverka webbplatsbesökare.

Därefter måste du besöka sidan Asset CleanUp » CSS/JS Manager. Härifrån kan du avlasta oönskade CSS- och JavaScript-filer på en sida-för-sida-basis.

Beroende på dina inställningar kan den automatiskt hämta och analysera din startsida. Du kommer att se en lista över alla CSS- och JavaScript-filer som laddas på den sidan.

Du behöver scrolla ner och granska de laddade filerna. Om du ser en fil som du inte behöver kan du avaktivera den för den specifika sidan, inläggstypen eller hela webbplatsen.

Pluginet låter dig också välja specifika inlägg eller sidor härifrån, eller så kan du komma åt samma alternativ genom att redigera inlägget eller sidan som du normalt skulle göra.

På skärmen för inläggsredigering hittar du rutan Asset CleanUp precis under inläggsredigeraren.

Pluginet hämtar och listar automatiskt alla filer och tillgångar som laddas när en besökare tittar på den här sidan på din webbplats.

Du kan sedan helt enkelt avlasta oanvända CSS- eller JavaScript-filer som du inte behöver på den sidan.

Viktigt: Glöm inte att testa din webbplats efter att ha tagit bort oanvänd CSS eller JavaScript för att säkerställa att allt fungerar som det ska.

När du är klar med att ladda av och ta bort oanvänd CSS och JavaScript-filer kan du gå tillbaka till pluginets inställningssida och stänga av 'Testläge'.

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

Du kan nu testa din webbplats med Google Pagespeed Insights för att se ändringen i meddelandet om oanvänd CSS.

Vanliga frågor om oanvänd CSS

Många läsare frågar oss om säkerheten och effekten av att rensa upp sina stilmallar. Här är svaren på några av de vanligaste frågorna om att ta bort oanvänd CSS i WordPress.

1. Är det säkert att ta bort oanvänd CSS i WordPress?

Att ta bort oanvänd CSS är generellt sett säkert om du använder ett pålitligt plugin som WP Rocket eller Asset CleanUp. Dessa verktyg försöker behålla den nödvändiga koden som din webbplats behöver för att se korrekt ut. Men eftersom styling kan vara komplext finns det alltid en liten risk att bryta en layout.

Vi rekommenderar starkt att använda ett backup-plugin som Duplicator för att spara din webbplats innan du gör dessa ändringar.

2. Varför kan jag inte ta bort 100% av den oanvända CSS:en?

Det är nästan omöjligt att ta bort varje enskild rad med oanvänd CSS eftersom WordPress skapar sidor dynamiskt.

Vissa stilar är dolda tills en specifik åtgärd inträffar, som att en mobilmeny glider ut eller en popup visas. Om du tar bort denna ‘oanvända’ kod kommer dessa interaktiva funktioner att sluta fungera.

Om ett plugin tog bort all CSS som inte var omedelbart synlig, kan interaktiva funktioner på din WordPress-webbplats sluta fungera korrekt.

3. Hjälper borttagning av oanvänd CSS med SEO-rankning?

Ja, att ta bort oanvänd CSS kan hjälpa till att förbättra din WordPress SEO-rankning. Sökmotorer som Google anser sidhastighet vara en rankningsfaktor. När du minskar storleken på dina CSS-filer laddas dina webbsidor snabbare, vilket signalerar till Google att din webbplats erbjuder en bra användarupplevelse.

4. Kan jag manuellt ta bort oanvänd CSS utan ett plugin?

Vi rekommenderar inte att du försöker ta bort oanvänd CSS manuellt om du inte är en erfaren utvecklare. Du skulle behöva identifiera och ta bort specifika kodrader från dina tema- och pluginfiler.

Om du gör ett misstag när du redigerar dessa filer manuellt kan du förstöra designen på hela din WordPress-webbplats.

Ytterligare resurser för att förbättra WordPress-prestanda

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du enkelt tar bort oanvänd CSS i WordPress. Du kanske också vill se några andra guider relaterade till att förbättra WordPress-prestanda:

• Den ultimata guiden för att öka WordPress-hastighet & prestanda
• Hur man snabbar upp WooCommerce-prestanda
• Hur du korrekt kör ett webbplatshastighetstest (bästa verktygen)
• Viktiga mätvärden att mäta på din WordPress-webbplats
• Hur man optimerar Core Web Vitals för WordPress (Ultimat guide)
• Hur du använder GTmetrix-plugin för att förbättra WordPress-webbplatsens prestanda
• Hur man enkelt optimerar leveransen av WordPress CSS
• Snabbaste WordPress-hosting (prestandatester)
• Hur man optimerar bilder för webbprestanda utan att förlora kvalitet
• 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.