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

Som ägare av WordPress-webbplatser strävar vi alla efter att leverera en snabb och optimal användarupplevelse. Detta håller inte bara besökare engagerade utan hjälper också våra webbplatser att rankas högre i sökresultaten.

Du kanske inte inser att dina teman och plugins ofta laddar mycket mer CSS-kod än vad dina sidor behöver. Denna oanvända CSS kan i hemlighet sakta ner din webbplats.

Varje extra kodrad dina besökare måste ladda ner lägger till värdefulla sekunder till laddningstiden. Och i dagens värld kan även en sekunds fördröjning kosta dig besökare och försäljning.

Därför har vi satt ihop den här kompletta guiden för att ta bort oanvänd CSS från WordPress på rätt sätt. Vi visar dig exakt hur vi städar upp överflödiga stilmallar och snabbar upp webbplatser utan att förstöra något.

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. Remove Unused CSS in WordPress Using Asset CleanUp

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. 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 behöver du scrolla ner till avsnittet CSS-filer och sedan markera rutan bredvid alternativet 'Ta bort oanvänd CSS (Beta)'.

Eftersom denna funktion från WP Rocket är i betaversion kommer den att fråga igen om du vill aktivera inställningen. Du kan fortsätta och klicka på knappen 'Aktivera Ta bort oanvänd CSS'.

När alternativet ‘Ta bort oanvänd CSS’ är aktivt kan du sedan ange CSS-filnamn, ID:n eller klasser som inte bör tas bort under rutan ‘CSS-safelist’.

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.

Ta bort renderblockerande CSS för WordPress

WP Rocket låter dig optimera dina CSS-filer och ta bort render-blockerande CSS från din webbplats.

För att komma igång kan du navigera till fliken ‘Filoptimering’ i WP Rocket. Härifrån, scrolla ner till sektionen CSS-filer och markera sedan rutan bredvid alternativet ‘Optimera CSS-leverans’.

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

Den här metoden är lite avancerad men otroligt kraftfull och låter dig enkelt ta bort oanvänd CSS från vilken sida som helst på din WordPress-webbplats.

Det är dock lite komplicerat, och du måste testa din webbplats funktionalitet och utseende 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.

Den kommer först att hämta din startsida och visa dig 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.

Experthandledningar 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.