Du känner igen känslan: din WordPress-sajt är klar, stylad, alla tillägg är på plats. Du kör PageSpeed Insights, och där är det, orange. Eller rött. Boven är nästan alltid densamma: CSS. Dussintals stilfiler från tillägg och temat ställer sig i kö och blockerar renderingen. Sidan är långsam inte för att den är tung, utan för att webbläsaren måste vänta.

Problemet är djupare än det verkar. Ett tillägg laddar sin style.css på varje sida av sajten, även där dess funktionalitet inte används. Ett kontaktformulär visas bara på kontaktsidan, men dess stilar laddas överallt. En slider ligger på startsidan, men dess fyra CSS-filer hänger med på varje URL utan undantag. Det blir dussintals onödiga kilobyte och anrop vid varje sidvisning.

Du kan inaktivera onödiga stilar utan att installera ytterligare tillägg, via functions.php. Detta är inget hack, det är en inbyggd WordPress-mekanism som har fungerat sedan version 2.6. Nedan följer den kompletta guiden: från att hitta identifieraren till att asynkront ladda en sammanslagen fil.

💡 Snabb översikt:

• Hur du hittar identifieraren (handle) för ett tilläggs CSS-fil via id-attributet i sidans källkod
• Hur du inaktiverar stilar med kombinationen wp_dequeue_style + wp_deregister_style med rätt prioritet
• Hur du slår ihop inaktiverade stilar till en enda fil och laddar den asynkront via media print, utan att förlora stilsättningen och utan att blockera renderingen

Hur du hittar ett tilläggs CSS-filidentifierare

WordPress tilldelar en unik identifierare, en handle, till varje köad stilfil. Det är denna handle som funktionerna wp_dequeue_style (dokumentation) och wp_deregister_style (codex) kräver. Utan rätt handle inaktiveras ingenting.

Den mest tillförlitliga metoden är att titta på sidans HTML-källkod. Att gissa utifrån tilläggets namn fungerar inte; tilläggsutvecklaren namnger handlen hur de vill, och logiken kan vara otydlig.

Öppna sidkällan (Ctrl+U eller view-source: före URL:en) och hitta <link>-taggen som laddar CSS:en för det tillägg du behöver. För Elementor ser det till exempel ut så här:

1
<link href="/wp-content/plugins/elementor/assets/lib/animations/animations.min.css"
2
      id="elementor-animations-css" media="all" rel="stylesheet" type="text/css">

Titta på id-attributet. WordPress konstruerar det enligt mönstret: **tilläggets handle + suffixet **-css. I exemplet ovan, id="elementor-animations-css", vilket betyder att handlen är elementor-animations. Ta bort -css från slutet av id-värdet, så får du den exakta handlen för inaktivering. Detta fungerar för alla tillägg eller teman.

Det finns fall där utvecklaren inte inkluderar något id på <link>-taggen alls. I så fall, leta efter närliggande element med ett id eller kontrollera <script>-taggarna för samma tillägg: skript använder suffixet -js, och handlen matchar ofta stilens. Om du fortfarande inte hittar den, öppna tilläggets källkod i /wp-content/plugins/... och hitta anropet till wp_enqueue_style(): det första argumentet är handlen.

Inaktivera stilar: wp_dequeue_style och wp_deregister_style

WordPress tillhandahåller två funktioner för att hantera stilar. Skillnaden är fundamental:

I praktiken används båda funktionerna tillsammans: wp_dequeue_style tar bort den från kön, och sedan säkerställer wp_deregister_style i codex att ingen annan kod återköar den handlen via beroendekedjan.

Grundläggande kod för functions.php

Koden nedan inaktiverar stilar från två tillägg: full-screen-search och prettyPhoto. Den höga prioriteten 9999 säkerställer att inaktiveringen körs EFTER att tillägget har registrerat och köat sina stilar. Utan den förhöjda prioriteten kan funktionen köras innan tillägget, och då finns det inget att inaktivera.

1
/**
2
 * Disable CSS files of specific plugins.
3
 * Priority 9999 — runs last in the wp_enqueue_scripts chain.
4
 */
5
function sdstudio_dequeue_plugin_styles() {
6
    // Dequeue
7
    wp_dequeue_style( 'full-screen-search' );
8
    wp_dequeue_style( 'prettyPhoto' );
9
 
10
    // Deregister — so no one can re-enqueue
11
    wp_deregister_style( 'full-screen-search' );
12
    wp_deregister_style( 'prettyPhoto' );
13
}
14
add_action( 'wp_enqueue_scripts', 'sdstudio_dequeue_plugin_styles', 9999 );

Vad som är viktigt här: hooken wp_enqueue_scripts är rätt plats för den här operationen. Inte wp_head, inte init, inte wp_loaded. Det är på wp_enqueue_scripts som WordPress bygger upp stil-kön, och det är här du ska inaktivera dem, bara senare än vad pluginsen gör.

Varför prioritet 9999, inte 11 eller 99

Plugins registrerar stilar med standardprioriteten 10. Men vissa sätter 20, 50 eller till och med 100 när de har komplexa beroendekedjor. En prioritet på 9999 täcker i stort sett alla verkliga scenarier. Den enda nackdelen: om två av dina egna snuttar delar samma prioritet 9999 är deras körordning odefinierad. I praktiken är detta ovanligt, medan 11 regelbundet misslyckas med "envisa" plugins.

Dessutom kan du registrera inaktiveringen på hooken wp_head med samma prioritet som ett skyddsnät för stilar som ett plugin köar genom att kringgå wp_enqueue_scripts och skriva ut direkt i <head>:

1
add_action( 'wp_head', 'sdstudio_dequeue_plugin_styles', 9999 );

Men detta är en fallback. Normalt räcker en enda wp_enqueue_scripts.

Hur man inaktiverar ALLA stilar från ett specifikt plugin

Många plugins har inte bara en CSS-fil, utan flera. Contact Form 7, WooCommerce, Elementor, var och en drar in 3-5 stilfiler. Att inaktivera dem en och en är omständligt. Skanna sidkällan och samla alla handtag med samma prefix: de är vanligtvis grupperade tillsammans.

Exempel för Elementor, en typisk uppsättning handtag: elementor-frontend, elementor-animations, elementor-icons och elementor-pro. Alla fyra i ett enda anrop:

1
function sdstudio_dequeue_elementor_styles() {
2
    $handles = [
3
        'elementor-frontend',
4
        'elementor-animations',
5
        'elementor-icons',
6
        'elementor-pro',
7
    ];
8
    foreach ( $handles as $handle ) {
9
        wp_dequeue_style( $handle );
10
        wp_deregister_style( $handle );
11
    }
12
}
13
add_action( 'wp_enqueue_scripts', 'sdstudio_dequeue_elementor_styles', 9999 );

Vad man gör med inaktiverade stilar

Att inaktivera är bara halva jobbet. Om du helt enkelt tar bort ett plugins CSS går allt på sidan sönder: formulär blir feljusterade, reglage faller isär, ikoner försvinner. Stilarna behövs, bara inte till priset av att blockera renderingen.

Rätt tillvägagångssätt: kombinera de inaktiverade stilarna till EN kompakt fil och ladda den utan att blockera. Algoritmen:

• Inaktiverade plugin-stilar via wp_dequeue_style + wp_deregister_style.
• Kopierade innehållet i VARJE inaktiverad CSS-fil. Ta dem från plugin-mappen, inte från webbläsarens inspector, som visar en minifierad build som är obekväm att arbeta med.
• Kombinerade dem till en enda fil, till exempel /wp-content/themes/your-theme/css/dequeued-plugins.css.
• Laddade den med attributet media="print" och onload="this.media='all'". Webbläsaren laddar ner filen asynkront utan att blockera renderingen och tillämpar stilarna efter laddning.

Laddningskod för kombinerad fil

1
/**
2
 * Load the combined CSS file of disabled styles asynchronously.
3
 */
4
function sdstudio_enqueue_dequeued_styles() {
5
    wp_enqueue_style(
6
        'sdstudio-dequeued',
7
        get_stylesheet_directory_uri() . '/css/dequeued-plugins.css',
8
        [],
9
        filemtime( get_stylesheet_directory() . '/css/dequeued-plugins.css' )
10
    );
11
}
12
add_action( 'wp_enqueue_scripts', 'sdstudio_enqueue_dequeued_styles', 1 );

Prioriteten 1 här är avsiktlig: den kombinerade filen måste köas INNAN inaktiveringsfunktionerna med prioritet 9999 körs. Annars kan WordPress misslyckas med att känna igen beroendet och helt enkelt ta bort stilarna från kön.

Asynkron laddning utan ett plugin

För att förhindra att webbläsaren väntar på CSS-filen innan sidan renderas, lägg till attributen media="print" och onload via filtret style_loader_tag:

1
/**
2
 * Change media="print" to onload-switch for asynchronous CSS loading.
3
 */
4
function sdstudio_async_css( $html, $handle ) {
5
    if ( 'sdstudio-dequeued' !== $handle ) {
6
        return $html;
7
    }
8
    return str_replace(
9
        "media='all'",
10
        "media='print' onload=\"this.media='all'; this.onload=null;\"",
11
        $html
12
    );
13
}
14
add_filter( 'style_loader_tag', 'sdstudio_async_css', 10, 2 );

Mekanismen är okomplicerad: webbläsaren ser media="print" och blockerar inte renderingen, eftersom utskriftsmedietypen inte påverkar skärmen. Efter att filen har laddats aktiveras onload, växlar media till all, och stilarna tillämpas omedelbart. Användaren ser en fullständigt stilad sida utan fördröjning vid första laddning.

När du inte ska inaktivera stilar via functions.php

Metoden wp_dequeue_style är kraftfull, men inte universell. Här är tre fall där den antingen är verkningslös eller skadlig:

• Stilar är inbäddade inline via wp_add_inline_style. Sådana stilar ligger inuti en <style>-tagg och har inget separat handle. Du måste inaktivera dem via wp_deregister_script på det överordnade skriptet eller hitta den hook som tillägget använder för att lägga till inline-stilar.

• Tillägget skjuter in CSS direkt i <head> via echo. Detta är en workaround som används av vissa äldre tillägg. Bara att hitta den specifika hooken eller, som en sista utväg, output buffering hjälper här.

• Du arbetar med ett tredjepartstema som hanterar beroenden på egen hand. Vissa teman, särskilt premiumteman, använder sin egen asset loader som går förbi WP_Styles. Innan du skriver kod, kontrollera temats header.php: om du ser ett direkt echo '<link...' kommer deregistreringssystemet inte att fungera.

I dessa fall är det bättre att använda specialiserade tillägg som Asset CleanUp eller Perfmatters, som arbetar på URL-nivå och inaktiverar assets per sida utan att du behöver gräva i hooks.

Se videoguiden om att inaktivera stilar: hela processen från att hitta handlet till att verifiera resultatet på 8 minuter.

⁉️🤔 Vanliga frågor

Behöver jag inaktivera CSS-stilar i adminpanelen (*/wp-admin/*)?

Nej. Stilar som laddas via hooken admin_enqueue_scripts påverkar inte frontend och behöver inte inaktiveras. Att försöka deregistrera adminstilar via wp_enqueue_scripts gör dessutom ingenting, eftersom de registreras separat. Om adminpanelen är långsam ligger problemet oftast någon annanstans: tunga analysskript i dashboarden, externa Google Fonts eller Heartbeat API.

Är det säkert* att ta bort -css från id-attributet för att få handlet? Fungerar den regeln alltid?*

Ja, suffixet -css läggs till av WordPress kärna i metoden WP_Dependencies::enqueue() sedan version 2.6; detta är en oföränderlig mekanism. Men det finns en nyans: om tilläggsutvecklaren manuellt tilldelade ett anpassat id till <link>-taggen kan suffixet saknas. I så fall är handlet det andra argumentet i anropet wp_enqueue_style() i tilläggets källkod. -css-regeln täcker de allra flesta fall.

Kan jag inaktivera stilar bara på specifika sidor?

Ja, och det är det korrekta produktionssättet. Slå in wp_dequeue_style-anropet i en WordPress conditional tag: is_front_page() för startsidan, is_single() för inlägg, is_page() för sidor, is_archive() för arkiv. För att exkludera efter inläggs-ID, använd ! is_single(123). Villkorlig dequeuing på specifika URL:er minskar belastningen över hela webbplatsen, inte bara där tillägget inte behövs.

Vad händer om jag anropar wp_dequeue_style för ett handle som inte är registrerat?

Ingenting. Funktionen slutförs tyst utan fel, PHP-notiser eller varningar. Detta är ofarligt. Men förlita dig inte på det som en strategi: samla handlen endast från riktiga sidor, annars samlar din kod på sig "döda" rader som inte gör något och bara skräpar ner functions.php.

Hur verifierar jag att en stil faktiskt inaktiverades, och inte bara slutade tillämpas på grund av cache?

Öppna sidkällan (Ctrl+U), inte utvecklarpanelen. Leta efter en <link> med tilläggets handle eller dess id. Om taggen är borta är stilen inaktiverad. Webbläsarens cache påverkar inte källkoden, till skillnad från Nätverk-fliken i DevTools. Dessutom kan du rensa WordPress-cachen: vilket cachingtillägg som helst, sedan Purge All.

Huvudpunkter om att inaktivera CSS i WordPress

Tre huvudsakliga slutsatser från hela denna guide:

• Handlet är nyckeln till allt. Utan rätt identifierare fungerar ingen funktion. Hitta alltid handlet via id-attributet i sidans källkod. Regeln att ta bort -css fungerar nästan jämt; för undantag, kontrollera tilläggets källkod.

• Dequeue + Deregister är standardkombinationen. Den första funktionen tar bort stilen från kön, den andra säkerställer att den inte dyker upp igen via beroendekedjan. Prioritet 9999 täcker alla "envisa" tillägg, och hooken wp_enqueue_scripts är den enda korrekta platsen för denna operation.

• Inaktiverade stilar ska inte försvinna. Kombinera dem till en enda fil och ladda den asynkront via media="print" + onload. Användaren får en fullt stylad sida, och webbläsaren väntar inte på CSS innan rendering.

Testa det på ett eller två tillägg idag. Ett par minuter i functions.php, och resultatet syns direkt i PageSpeed Insights. Börja med det "tyngsta" tillägget, det med flest CSS-filer: inaktivera, kombinera, mät hastighet. Troligtvis räcker det ensamt för att flytta från den orangea zonen till den gröna.