Sidan är långsam, och PageSpeed Insights pekar tyst på dashicons.min.css, 30 KB ikoner som inte renderas i något synligt element. Du har varken installerat den här filen eller köat in den i ditt tema, men den laddas troget för varje besökare. Var kommer den ifrån, och hur blir du av med den?

WordPress skickar med dashicons till frontend som standard för ett enda smalt syfte: adminfältet för inloggade användare. En vanlig gäst ser aldrig adminfältet, men webbläsaren laddar plikttroget ner CSS:en, tolkar den, bygger CSSOM och inser först därefter att inte en enda klass behövdes. På en långsam mobiluppkoppling motsvarar de där 30 KB en extra renderingsblockerande laddtid på 300-400 ms, tillräckligt för att skada dina Core Web Vitals.

Här är tre sätt att inaktivera dashicons: från ett manuellt kodstycke till en enda kryssruta i ett optimeringsplugin. Alla metoder är säkra, reversibla och testade på riktiga WordPress-installationer.

💡 Snabb översikt:

• Öppna DevTools eller PageSpeed Insights och bekräfta att dashicons.min.css faktiskt laddas på din webbplats
• Välj det tillvägagångssätt som passar ditt arbetsflöde: kod i functions.php eller ett färdigt optimeringsplugin
• Testa prestandan igen och kontrollera att filen är borta från rapporten
• Säkerställ att adminfältet fortfarande fungerar felfritt för administratörer

Vad är dashicons och varför laddas de på frontend

Dashicons är WordPress inbyggda ikonteckensnitt, introducerat i version 3.8. Inne i adminpanelen dyker de upp överallt: menysektionsikoner, inläggstypikoner, verktygsfältsknappar. Utan dashicons förvandlas adminområdet till ren text, och WordPress kan inte ta bort dem.

Problemet ligger i registreringsmekanismen. Kärnan registrerar stilarna för dashicons globalt och lägger till dem i kön inte bara för admin utan även för frontend, allt för ett enda scenario: en inloggad användare besöker webbplatsen och ser den svarta adminfältsraden med ikoner. Gäster får inte adminfältet, men de får ändå CSS-filen. Webbläsaren tolkar den, upptäcker att ingen selektor matchade och kastar resultatet, men tiden är redan förbrukad.

PageSpeed Insights och GTmetrix flaggar dashicons.min.css i rekommendationen "Ta bort oanvänd CSS" och drar av poäng. En enskild fil som denna verkar obetydlig. Men när emoji-stilar från WordPress, CSS från oanvända plugins och döda temablock staplas ovanpå den når de sammanlagda besparingarna 150-300 KB. För mobil prestanda spelar det roll.

Så kontrollerar du om dashicons laddas på din webbplats

Innan du inaktiverar något, bekräfta att problemet finns. Tre metoder, var och en under en minut.

Chrome DevTools. Öppna webbplatsen i inkognitoläge (så att adminfältet inte påverkar testet), tryck F12, gå till fliken Nätverk och skriv dashicons i filterfältet. Om du ser en fil med status 200 och en storlek runt 30 KB laddas den för varje besökare.

PageSpeed Insights. Klistra in URL:en på pagespeed.web.dev och kör testet. Expandera rekommendationen "Ta bort oanvänd CSS"; dashicons.min.css kommer att listas med sin storlek och potentiella besparingar i kilobyte.

GTmetrix. Gå till fliken Waterfall och filtrera på dashicons. Även om filen i laddningskedjan är märkt "Låg" eller "Lägst" blockerar den fortfarande renderingen och drar ner ditt betyg.

Visade ingen av dessa metoder filen? Ditt tema eller ett optimeringsplugin har redan inaktiverat dashicons, och du kan stänga den här artikeln. Hittade du den? Då går vi vidare.

Metod 1: inaktivera via kod i functions.php

Det lättaste och mest transparenta tillvägagångssättet: ett enda kodstycke i functions.php för ditt aktiva tema. Koden avregistrerar dashicons för alla besökare utan administratörsbehörighet. För dem som administrerar webbplatsen lämnar vi dem ifred, och adminfältet inne i dashboarden förblir intakt.

Lägg till den här koden i functions.php i ett barntema eller via tillägget Code Snippets (säkrare eftersom det överlever temabyten):

1
/**
2
 * Disable dashicons.min.css on the frontend for everyone,
3
 * except users with administrator rights.
4
 */
5
function sdstudio_disable_dashicons_frontend() {
6
    if ( current_user_can( 'update_core' ) ) {
7
        return;
8
    }
9
    wp_deregister_style( 'dashicons' );
10
}
11
add_action( 'wp_enqueue_scripts', 'sdstudio_disable_dashicons_frontend' );

Hooken wp_enqueue_scripts körs när stilkön sätts ihop på frontend. current_user_can('update_core') kontrollerar behörigheten att uppdatera kärnan, vilket som standard endast tillhör administratörer. För vanliga besökare misslyckas kontrollen, och wp_deregister_style('dashicons') tar bort filen helt från kön.

Varför deregister istället för dequeue? wp_dequeue_style tar bort stilen från kön men lämnar den registrerad; ett annat plugin skulle kunna lägga tillbaka dashicons i utdatan. wp_deregister_style tar bort registreringen helt, och det enda sättet att få tillbaka filen är ett explicit wp_register_style-anrop. För dashicons är detta rätt val: du vill inte att ett plugin för social delning eller galleri av misstag ska återställa dem på frontend.

Försiktighetsåtgärder. Ett fel i functions.php kan ge en vit skärm på webbplatsen. Innan du redigerar, kopiera filen till functions.php.bak för en snabb återställning. Använd ett barntema eller Code Snippets. Dubbelkolla syntaxen: varje parentes och semikolon på plats.

Metod 2: optimeringsplugins (en kryssruta istället för kod)

Om du föredrar att inte röra PHP löser prestandaplugins samma problem.

Perfmatters. Under Allmänt → Alternativ hittar du en "Inaktivera Dashicons"-växel. Ett klick och filen försvinner från frontend. Perfmatters exkluderar också dashicons från Used CSS när Ta bort oanvänd CSS är aktivt, så problemet täcks två gånger. Pluginet är betalt, men det hanterar dussintals andra prestandaflaskhalsar, från att inaktivera emoji-stilar till att styra heartbeat-API:et.

WP Rocket. Under Filoptimering → Optimera CSS-leverans, aktivera "Ta bort oanvänd CSS". WP Rocket analyserar dina sidor och tar bort oanvända stilar, inklusive dashicons.min.css. Det fungerar automatiskt över hela webbplatsen. Om Ta bort oanvänd CSS hamnar i konflikt med en annan optimering, lägg till dashicons.min.css i exkluderingslistan; WP Rocket kommer att skjuta upp dess laddning istället för att ta bort den helt.

Asset CleanUp (gratis). Pluginet Asset CleanUp låter dig selektivt inaktivera CSS och JS på nivån för enskilda sidor och innehållstyper. Gå till CSS/JS-hanteraren, hitta dashicons.min.css och avlasta den för hela webbplatsen. Gratisversionen hanterar grundläggande rensning.

Vilken metod ska du välja? Om du redan använder Perfmatters eller WP Rocket, använd den inbyggda funktionen; stapla inte extra kod i functions.php. Om din webbplats körs på en minimal uppsättning plugins och du är bekväm med PHP är kodstycket från metod 1 lättare och lägger inte till några beroenden.

Verifiera resultatet

Efter att ha inaktiverat dashicons, öppna webbplatsen i inkognitoläge och upprepa kontrollen från avsnitt två. Filen dashicons.min.css ska vara borta från listan över laddade resurser i DevTools. Kör ett nytt PageSpeed Insights-test; mätvärdet "Ta bort oanvänd CSS" kommer att sjunka, och de potentiella trafikbesparingarna ökar med de där 30 KB.

Den verkliga poängvinsten beror på din stack. På lätta webbplatser med bara ett eller två CSS-problem ger inaktivering av dashicons 1-3 poäng till det mobila PageSpeed-resultatet. På uppsvällda webbplatser med dussintals oanvända stilar är det en droppe i havet, men en korrekt droppe: varje kilobyte räknas, och sådana "droppar" summeras till ett märkbart resultat.

Se till att kontrollera adminfältet: logga in som administratör och bekräfta att den svarta raden högst upp visas normalt och att dess ikoner är på plats. Koden från metod 1 och växeln i Perfmatters lämnar dashicons orörda för administratörer, så du kommer inte att märka någon skillnad.

⁉️🤔 Vanliga frågor

Kommer inaktivering av dashicons att påverka webbplatsens utseende?

Om ditt tema använder dashicons för frontend-ikoner (skjutreglagepilar, stängningsknappar, hamburgermeny) kommer inaktivering att förstöra dessa element. Testning är enkel: inaktivera filen och gå igenom sidorna. Om ikoner försvinner förlitar sig temat på dashicons. Använd i så fall aggressiv cachning via Cloudflare eller ett cachningsplugin: 30 KB som serveras från webbläsarens cache är inte kritiskt.

Fungerar den här metoden med blockteman (FSE)?

I blockteman som Twenty Twenty-Four, Ollie och liknande laddas dashicons vanligtvis inte på frontend. Blockredigeraren använder sina egna SVG-ikoner, och kärnan köar inte ikonteckensnittet för besökare. Kontrollera via DevTools: chansen är stor att filen inte finns där. Om du ändå hittar den fungerar koden från metod 1 på samma sätt för klassiska teman och blockteman.

Kan jag inaktivera dashicons endast för vissa sidor?

Ja, genom att använda WordPress villkorliga taggar. Till exempel, för att behålla dashicons endast på startsidan:

1
function sdstudio_conditional_dashicons() {
2
    if ( is_front_page() ) {
3
        return;
4
    }
5
    if ( current_user_can( 'update_core' ) ) {
6
        return;
7
    }
8
    wp_deregister_style( 'dashicons' );
9
}
10
add_action( 'wp_enqueue_scripts', 'sdstudio_conditional_dashicons' );

Alla tillgängliga villkorliga taggar beskrivs i WordPress dokumentation. De inkluderar is_single för enskilda inlägg, is_page för sidor, is_archive för arkiv och is_home för bloggindexet.

Jag har redan ett cachningsplugin som snabbar upp webbplatsen. Bör jag ändå inaktivera dashicons?

Ett cachningsplugin snabbar upp återkommande besök, men det första kalla besöket hämtar fortfarande dashicons.min.css. PageSpeed Insights emulerar en ren cache vid varje test, så filen kommer att synas i rapporten oavsett cachning på serversidan. Att inaktivera dashicons minskar data som överförs på källnivå; både mätvärden och verkliga besökare vid deras första besök gynnas.

Räcker det att inaktivera dashicons för ett bra PageSpeed-resultat?

Nej, det är bara ett steg bland dussintals. De största vinsterna kommer vanligtvis från bildoptimering (komprimering, moderna format, lazy loading), uppskjuten JavaScript-laddning och cachning på serversidan. Se på inaktivering av dashicons som grundläggande hygien: snabbt, säkert, med en mätbar effekt. Det är en bekväm startpunkt för att rensa upp frontend.

Vilken metod du ska välja för din situation

En snabb sammanfattning av de tre metoderna och specifika scenarier.

Om du arbetar med kod och din webbplats körs på en slimmad stack, ta kodstycket från metod 1. Två minuter att klistra in det i functions.php eller Code Snippets, och problemet är löst för gott. Inga extra plugins, ingen ytterligare belastning på admin.

Om du redan betalar för Perfmatters eller WP Rocket, aktivera det inbyggda alternativet och skapa inte extra entiteter. Dessa plugins löser ytterligare ett dussin prestandaproblem på en gång, och extra kod i temat komplicerar bara underhållet.

Om du behöver ett gratis verktyg utan att redigera PHP hanterar Asset CleanUp uppgiften med två klick. Det passar nybörjare och de som föredrar att inte riskera att förstöra functions.php.

Den allmänna principen: dashicons gör inte en webbplats långsam i sig. Men de är en del av bakgrundsbruset som, i kombination med oanvända plugin-stilar, tunga typsnitt och ooptimerade bilder, täpper till kanalen och saktar ner renderingen. Att ta bort dashicons är en snabb vinst och en bekväm startpunkt för systematisk optimering.

Har du inaktiverat dem? Lämna en kommentar och berätta hur många PageSpeed-poäng du vann. Om du känner till en annan metod som inte tas upp i den här artikeln, dela med dig av den också.