Du kjenner følelsen: WordPress-nettstedet ditt er klart, stylet, alle utvidelser er på plass. Du kjører PageSpeed Insights, og der er det, oransje. Eller rødt. Synderen er nesten alltid den samme: CSS. Dusinvis av stilfiler fra utvidelser og temaet står i kø og blokkerer rendringen. Siden er treg, ikke fordi den er tung, men fordi nettleseren venter.

Problemet stikker dypere enn det ser ut til. En utvidelse laster sin style.css på hver eneste side av nettstedet, selv der funksjonaliteten ikke brukes. Et kontaktskjema vises bare på kontaktsiden, men stilene lastes overalt. En slider ligger på forsiden, men dens fire CSS-filer henger på hver eneste URL uten unntak. Det blir dusinvis av unødvendige kilobyte og forespørsler ved hvert sideoppslag.

Du kan deaktivere unødvendige stiler uten å installere ekstra utvidelser, via functions.php. Dette er ikke et hack; det er en innebygd WordPress-mekanisme som har fungert siden versjon 2.6. Nedenfor finner du den komplette guiden: fra å finne identifikatoren til å laste en kombinert fil asynkront.

💡 Rask oversikt:

• Hvordan finne identifikatoren (handle) til en hvilken som helst utvidelses CSS-fil via id-attributtet i sidens kildekode
• Hvordan deaktivere stiler ved hjelp av kombinasjonen wp_dequeue_style + wp_deregister_style med riktig prioritet
• Hvordan kombinere deaktiverte stiler til én enkelt fil og laste den asynkront via media print, uten å miste styling og uten å blokkere rendring

Hvordan finne CSS-filidentifikatoren til en utvidelse

WordPress tildeler en unik identifikator, en handle, til hver stilfil som er satt i kø. Denne handle-en er det funksjonene wp_dequeue_style (dokumentasjon) og wp_deregister_style (codex) krever. Uten riktig handle blir ingenting deaktivert.

Den mest pålitelige metoden er å se på sidens HTML-kildekode. Å gjette basert på utvidelsesnavnet fungerer ikke; utvikleren av utvidelsen navngir handle-en akkurat som de vil, og logikken kan være lite intuitiv.

Åpne sidekilden (Ctrl+U eller view-source: foran URL-en) og finn <link>-taggen som laster CSS-en til utvidelsen du trenger. For Elementor ser det for eksempel slik ut:

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">

Se på id-attributtet. WordPress konstruerer det ved hjelp av mønsteret: **utvidelsens handle + suffikset **-css. I eksemplet over, id="elementor-animations-css", betyr det at handle-en er elementor-animations. Fjern -css fra slutten av id-verdien, så får du den nøyaktige handle-en for deaktivering. Dette fungerer for enhver utvidelse eller ethvert tema.

Det finnes tilfeller der utvikleren ikke inkluderer en id på <link>-taggen i det hele tatt. I så fall, finn naboelementer med en id eller sjekk <script>-taggene til den samme utvidelsen: skript bruker suffikset -js, og handle-en samsvarer ofte med stil-handle-en. Hvis du fortsatt ikke finner den, åpne utvidelsens kildekode i /wp-content/plugins/... og finn kallet til wp_enqueue_style(): det første argumentet er handle-en.

Deaktivere stiler: wp_dequeue_style og wp_deregister_style

WordPress tilbyr to funksjoner for å administrere stiler. Forskjellen er fundamental:

I praksis brukes begge funksjonene sammen: wp_dequeue_style fjerner den fra køen, og deretter sikrer wp_deregister_style i codex at ingen annen kode setter den handle-en i kø igjen gjennom avhengighetskjeden.

Grunnleggende kode for functions.php

Koden nedenfor deaktiverer stiler fra to utvidelser: full-screen-search og prettyPhoto. Den høye prioriteten 9999 sikrer at deaktiveringen kjøres ETTER at utvidelsen har registrert og satt stilene sine i kø. Uten den forhøyede prioriteten kan funksjonen bli utført før utvidelsen, og da er det ingenting å deaktivere.

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 );

Det som betyr noe her: kroken wp_enqueue_scripts er riktig sted for denne operasjonen. Ikke wp_head, ikke init, ikke wp_loaded. Det er på wp_enqueue_scripts at WordPress setter sammen stil-køen, og det er her du bør deaktivere dem, bare senere enn pluginene gjør.

Hvorfor prioritet 9999, ikke 11 eller 99

Pluginer registrerer stiler med standardprioriteten 10. Men noen setter 20, 50 eller til og med 100 når de har komplekse avhengighetskjeder. En prioritet på 9999 dekker praktisk talt ethvert scenario i praksis. Den eneste ulempen: hvis to av dine egne kodebiter deler samme prioritet på 9999, er rekkefølgen de kjøres i udefinert. I praksis er dette sjeldent, mens bruk av 11 jevnlig feiler med «sta» pluginer.

I tillegg kan du registrere deaktiveringen på wp_head-kroken med samme prioritet som et sikkerhetsnett for stiler som en plugin legger i kø ved å omgå wp_enqueue_scripts og skrive direkte til <head>:

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

Men dette er en reserveløsning. Normalt er én enkelt wp_enqueue_scripts nok.

Slik deaktiverer du ALLE stiler fra en spesifikk plugin

Mange pluginer har ikke bare én CSS-fil, men flere. Contact Form 7, WooCommerce, Elementor, hver av dem drar med seg 3-5 stilfiler. Å deaktivere dem én etter én er tidkrevende. Skann sidekilden og samle alle håndtak med samme prefiks: de er vanligvis gruppert sammen.

Eksempel for Elementor, et typisk sett med håndtak: elementor-frontend, elementor-animations, elementor-icons og elementor-pro. Alle fire i ett enkelt kall:

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 );

Hva du gjør med deaktiverte stiler

Deaktivering er bare halve jobben. Hvis du bare fjerner en plugins CSS, bryter alt på siden sammen: skjemaer blir feiljustert, slider faller fra hverandre, ikoner forsvinner. Stilene trengs, bare ikke på bekostning av blokkering av rendering.

Riktig tilnærming: kombiner de deaktiverte stilene til ÉN kompakt fil og last den uten å blokkere. Algoritmen:

• Deaktiverte plugin-stiler via wp_dequeue_style + wp_deregister_style.
• Kopierte innholdet i HVER deaktivert CSS-fil. Hent dem fra plugin-mappen, ikke fra nettleserinspektøren, som viser et minifisert bygg som er upraktisk å jobbe med.
• Kombinerte dem til én enkelt fil, for eksempel /wp-content/themes/your-theme/css/dequeued-plugins.css.
• Lastet den med attributtet media="print" og onload="this.media='all'". Nettleseren laster ned filen asynkront uten å blokkere rendering og bruker stilene etter lasting.

Kode for lasting av kombinert 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 på 1 her er bevisst: den kombinerte filen må legges i kø FØR deaktiveringsfunksjonene med prioritet 9999 kjøres. Ellers kan WordPress mislykkes i å gjenkjenne avhengigheten og droppe stilene fra køen helt.

Asynkron lasting uten en plugin

For å hindre at nettleseren venter på CSS-filen før den renderer siden, legg til media="print" og onload-attributter via style_loader_tag-filteret:

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 er enkel: nettleseren ser media="print" og blokkerer ikke rendering, siden print-medie-typen ikke påvirker skjermen. Etter at filen er lastet, utløses onload, bytter media til all, og stilene brukes umiddelbart. Brukeren ser en fullstendig stylet side uten forsinkelse ved første innlasting.

Når du ikke bør deaktivere stiler via functions.php

Metoden wp_dequeue_style er kraftfull, men ikke universell. Her er tre tilfeller der den enten er ubrukelig eller skadelig:

• Stiler er innebygd via wp_add_inline_style. Slike stiler ligger i en <style>-tagg og har ikke noe separat handtak. Du må deaktivere dem via wp_deregister_script for det overordnede skriptet eller finne hooken pluginen bruker for å legge til innebygde stiler.

• Pluginen setter inn CSS direkte i <head> via echo. Dette er en omvei som brukes av enkelte eldre pluginer. Bare det å finne den spesifikke hooken eller, som en siste utvei, output-bufring vil hjelpe her.

• Du jobber med et tredjepartstema som håndterer avhengigheter på egen hånd. Noen temaer, særlig premiumtemaer, bruker sin egen asset-laster som omgår WP_Styles. Før du skriver kode, sjekk temaets header.php: hvis du ser en direkte echo '<link...', vil deregistreringssystemet ikke fungere.

I disse tilfellene er det bedre å bruke spesialiserte pluginer som Asset CleanUp eller Perfmatters, som jobber på URL-nivå og deaktiverer assets per side uten å måtte grave i hooker.

Se videoguiden om å deaktivere stiler: hele prosessen fra å finne handtaket til å verifisere resultatet på 8 minutter.

⁉️🤔 Ofte stilte spørsmål

Må jeg deaktivere CSS-stiler i adminpanelet (*/wp-admin/*)?

Nei. Stiler som lastes via hooken admin_enqueue_scripts påvirker ikke frontenden og trenger ikke å deaktiveres. Å prøve å deregistrere adminstiler gjennom wp_enqueue_scripts vil dessuten ikke gjøre noe, ettersom de registreres separat. Hvis adminpanelet er tregt, ligger problemet vanligvis et annet sted: tunge analyseskript i dashbordet, eksterne Google Fonts eller Heartbeat API-et.

Er det trygt* å fjerne -css fra id-attributtet for å få handtaket? Fungerer denne regelen alltid?*

Ja, endelsen -css legges til av WordPress-kjernen i metoden WP_Dependencies::enqueue() siden versjon 2.6; dette er en uforanderlig mekanisme. Men det finnes en nyanse: hvis pluginutvikleren manuelt tildelte en egendefinert id til <link>-taggen, kan det hende endelsen ikke er til stede. I så fall er handtaket det andre argumentet i kallet wp_enqueue_style() i pluginens kildekode. Regelen med -css dekker de aller fleste tilfeller.

Kan jeg deaktivere stiler bare på bestemte sider?

Ja, og dette er den riktige tilnærmingen for produksjon. Pakk kallet wp_dequeue_style inn i en betinget tagg fra WordPress: is_front_page() for forsiden, is_single() for innlegg, is_page() for sider, is_archive() for arkiver. For å ekskludere etter innleggs-ID, bruk ! is_single(123). Betinget deaktivering på bestemte URL-er reduserer belastningen på hele nettstedet, ikke bare der pluginen ikke trengs.

Hva skjer hvis jeg kaller wp_dequeue_style for et handtak som ikke er registrert?

Ingenting. Funksjonen fullfører lydløst uten feil, PHP-notiser eller advarsler. Dette er trygt. Men ikke stol på det som en strategi: samle handtak bare fra reelle sider, ellers samler koden din opp "døde" linjer som ikke gjør noe og bare roter til functions.php.

Hvordan verifiserer jeg at en stil faktisk ble deaktivert, og ikke bare sluttet å gjelde på grunn av cache?

Åpne sidekilden (Ctrl+U), ikke utviklerpanelet. Se etter en <link> med pluginens handtak eller dens id. Hvis taggen er borte, er stilen deaktivert. Nettlesercache påvirker ikke kildekoden, i motsetning til Nettverk-fanen i DevTools. I tillegg kan du tømme WordPress-cachen: hvilken som helst cacheplugin, deretter Purge All.

Hovedpunkter om å deaktivere CSS i WordPress

Tre hovedkonklusjoner fra hele denne guiden:

• Handtaket er nøkkelen til alt. Uten riktig identifikator vil ingen funksjon fungere. Finn alltid handtaket gjennom id-attributtet i sidens kildekode. Regelen om å fjerne -css fungerer nesten alltid; for unntak, sjekk pluginens kildekode.

• Dequeue + Deregister er standardkombinasjonen. Den første funksjonen fjerner stilen fra køen, den andre sørger for at den ikke dukker opp igjen gjennom avhengighetskjeden. Prioritet 9999 dekker eventuelle "sta" pluginer, og hooken wp_enqueue_scripts er det eneste riktige stedet for denne operasjonen.

• Deaktiverte stiler bør ikke forsvinne. Kombiner dem til én enkelt fil og last den asynkront via media="print" + onload. Brukeren får en fullstendig stilsett side, og nettleseren venter ikke på CSS før rendering.

Prøv det på én eller to pluginer i dag. Et par minutter i functions.php, og resultatet er umiddelbart synlig i PageSpeed Insights. Start med den "tyngste" pluginen, den med flest CSS-filer: deaktiver, kombiner, mål hastighet. Mest sannsynlig vil det alene være nok til å bevege seg fra den oransje sonen til den grønne.