Sivu on hidas, ja PageSpeed Insights osoittaa hiljaisesti tiedostoon dashicons.min.css, 30 kilotavua kuvakkeita, jotka eivät näy missään näkyvässä elementissä. Et asentanut tätä tiedostoa etkä lisännyt sitä jonoon teemassasi, mutta se latautuu uskollisesti jokaiselle kävijälle. Mistä se tulee ja miten pääset siitä eroon?

WordPress toimittaa dashiconsit julkiselle puolelle oletuksena yhtä kapeaa tarkoitusta varten: kirjautuneiden käyttäjien hallintapalkkia varten. Tavallinen vieras ei koskaan näe hallintapalkkia, mutta selain lataa CSS:n tunnollisesti, jäsentää sen, rakentaa CSSOM:n ja vasta sitten huomaa, ettei yhtäkään luokkaa tarvittu. Hitaalla mobiiliyhteydellä nuo 30 kilotavua tarkoittavat 300-400 millisekunnin ylimääräistä renderöinnin estävää latausaikaa, joka riittää heikentämään Core Web Vitals -lukemiasi.

Alla on kolme tapaa poistaa dashiconsit käytöstä: manuaalisesta koodinpätkästä optimointilisäosan yhteen valintaruutuun. Kaikki menetelmät ovat turvallisia, peruutettavissa ja testattu oikeissa WordPress-asennuksissa.

💡 Pikaopas:

• Avaa DevTools tai PageSpeed Insights ja varmista, että dashicons.min.css todella latautuu sivustollasi
• Valitse työnkulkuusi sopiva lähestymistapa: koodia functions.php-tiedostoon tai valmis optimointilisäosa
• Testaa suorituskyky uudelleen ja varmista, että tiedosto on poistunut raportista
• Varmista, että hallintapalkki toimii yhä virheittä ylläpitäjille

Mitä dashiconsit ovat ja miksi ne latautuvat julkisella puolella

Dashiconsit ovat WordPressin sisäänrakennettu kuvakefontti, joka esiteltiin versiossa 3.8. Hallintapaneelin sisällä niitä näkyy kaikkialla: valikko-osion kuvakkeissa, artikkelityyppien kuvakkeissa, työkalupalkin painikkeissa. Ilman dashiconseja hallinta-alue muuttuu pelkäksi tekstiksi, eikä WordPress voi jättää niitä pois.

Ongelma on rekisteröintimekanismissa. Ydin rekisteröi dashicons-tyylit globaalisti ja lisää ne jonoon paitsi hallintaa myös julkista puolta varten, kaikki yhden skenaarion takia: kirjautunut käyttäjä vierailee sivustolla ja näkee mustan hallintapalkin kuvakkeineen. Vieraat eivät saa hallintapalkkia, mutta he saavat CSS-tiedoston. Selain jäsentää sen, havaitsee, ettei mikään valitsin täsmännyt, ja heittää tuloksen pois, mutta aika on jo kulunut.

PageSpeed Insights ja GTmetrix merkitsevät dashicons.min.css-tiedoston "Poista käyttämätön CSS" -suosituksessa ja vähentävät pisteitä. Yksi tällainen tiedosto vaikuttaa vähäpätöiseltä. Mutta kun WordPressin emoji-tyylit, käyttämättömien lisäosien CSS ja kuolleet teemalohkot kasautuvat sen päälle, yhteissäästöt nousevat 150-300 kilotavuun. Mobiilin suorituskyvyn kannalta sillä on merkitystä.

Kuinka tarkistaa, latautuvatko dashiconsit sivustollasi

Ennen kuin poistat mitään käytöstä, varmista ongelman olemassaolo. Kolme menetelmää, jokainen alle minuutin.

Chrome DevTools. Avaa sivusto incognito-tilassa (jotta hallintapalkki ei vaikuta testiin), paina F12, siirry Network-välilehdelle ja kirjoita suodatinkenttään dashicons. Jos näet tiedoston, jonka status on 200 ja koko noin 30 kt, se latautuu jokaiselle kävijälle.

PageSpeed Insights. Liitä URL-osoite pagespeed.web.dev-sivustolle ja suorita testi. Laajenna "Poista käyttämätön CSS" -suositus; dashicons.min.css listataan kokonsa ja mahdollisten kilotavusäästöjen kera.

GTmetrix. Siirry Waterfall-välilehdelle ja suodata dashicons-sanalla. Vaikka tiedosto latausketjussa olisi merkitty "Low" tai "Lowest", se silti estää renderöintiä ja laskee pistemäärääsi.

Eikö mikään näistä menetelmistä näyttänyt tiedostoa? Teemasi tai optimointilisäosasi on jo poistanut dashiconsit käytöstä, ja voit sulkea tämän artikkelin. Löytyikö se? Jatketaan.

Tapa 1: poista käytöstä koodilla functions.php-tiedostossa

Kevyin ja läpinäkyvin lähestymistapa: yksi koodinpätkä aktiivisen teemasi functions.php-tiedostossa. Koodi poistaa dashicons-rekisteröinnin kaikilta kävijöiltä, joilla ei ole ylläpitäjän oikeuksia. Niille, jotka hallinnoivat sivustoa, jätämme ne rauhaan, ja hallintapalkki pysyy ehjänä hallintanäkymässä.

Lisää tämä koodi lapsiteeman functions.php-tiedostoon tai Code Snippets -lisäosan kautta (turvallisempi, koska se säilyy teemanvaihdoksissa):

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

wp_enqueue_scripts-koukku laukeaa, kun tyylijono kootaan julkisella puolella. current_user_can('update_core') tarkistaa oikeuden päivittää ydintä, joka oletuksena kuuluu vain ylläpitäjille. Tavallisilla kävijöillä tarkistus epäonnistuu, ja wp_deregister_style('dashicons') poistaa tiedoston jonosta kokonaan.

Miksi deregister eikä dequeue? wp_dequeue_style poistaa tyylin jonosta mutta jättää sen rekisteröidyksi; toinen lisäosa voisi lisätä dashiconsit takaisin tulosteeseen. wp_deregister_style poistaa rekisteröinnin kokonaan, ja ainoa tapa tuoda tiedosto takaisin on nimenomainen wp_register_style-kutsu. Dashiconseille tämä on oikea valinta: et halua jonkin sosiaalisen jaon tai gallerialisäosan vahingossa palauttavan niitä julkiselle puolelle.

Varotoimet. Virhe functions.php-tiedostossa voi aiheuttaa valkoisen ruudun. Ennen muokkaamista kopioi tiedosto nimelle functions.php.bak nopeaa palautusta varten. Käytä lapsiteemaa tai Code Snippets -lisäosaa. Tarkista syntaksi: jokainen sulku ja puolipiste paikallaan.

Tapa 2: optimointilisäosat (yksi valintaruutu koodin sijaan)

Jos et halua koskea PHP:hen, suorituskykylisäosat ratkaisevat saman ongelman.

Perfmatters. Kohdasta General → Options löydät "Disable Dashicons" -valinnan. Yksi napsautus ja tiedosto katoaa julkiselta puolelta. Perfmatters sulkee dashiconsit myös Used CSS:n ulkopuolelle, kun Remove Unused CSS on aktiivinen, joten ongelma on katettu kahdesti. Lisäosa on maksullinen, mutta se ratkaisee kymmeniä muita suorituskyvyn pullonkauloja emoji-tyylien poistamisesta heartbeat API:n hallintaan.

WP Rocket. Kohdasta File Optimization → Optimize CSS Delivery ota käyttöön "Remove Unused CSS". WP Rocket analysoi sivusi ja poistaa käyttämättömät tyylit, mukaan lukien dashicons.min.css. Se toimii automaattisesti koko sivustolla. Jos Remove Unused CSS on ristiriidassa toisen optimoinnin kanssa, lisää dashicons.min.css poissulkulistalle; WP Rocket lykkää sen lataamista sen kokonaan poistamisen sijaan.

Asset CleanUp (ilmainen). Asset CleanUp -lisäosalla voit poistaa CSS:n ja JS:n käytöstä valikoivasti yksittäisten sivujen ja sisältötyyppien tasolla. Siirry CSS/JS Manageriin, etsi dashicons.min.css ja poista sen lataus koko sivuston laajuisesti. Ilmainen versio hoitaa perussiivouksen.

Mikä menetelmä kannattaa valita? Jos käytät jo Perfmattersia tai WP Rocketia, käytä sisäänrakennettua ominaisuutta; älä kasaa ylimääräistä koodia functions.php-tiedostoon. Jos sivustosi toimii minimaalisella lisäosajoukolla ja PHP:n käsittely on sinulle tuttua, tavan 1 koodinpätkä on kevyempi eikä tuo riippuvuuksia.

Varmista tulos

Kun olet poistanut dashiconsit käytöstä, avaa sivusto incognito-tilassa ja toista tarkistus osiosta kaksi. Tiedoston dashicons.min.css pitäisi olla poissa ladattujen resurssien listalta DevToolsissa. Suorita uusi PageSpeed Insights -testi; "Poista käyttämätön CSS" -mittari laskee, ja potentiaaliset liikennesäästöt kasvavat noilla 30 kilotavulla.

Todellinen pistevoitto riippuu kokoonpanostasi. Kevyillä sivustoilla, joissa on vain yksi tai kaksi CSS-ongelmaa, dashiconsien poistaminen tuo 1-3 pistettä mobiilin PageSpeed-pistemäärään. Raskailla sivustoilla, joissa on kymmeniä käyttämättömiä tyylejä, se on pisara meressä, mutta oikea pisara: jokainen kilotavu merkitsee, ja tällaiset "pisarat" kasautuvat huomattavaksi tulokseksi.

Muista tarkistaa hallintapalkki: kirjaudu sisään ylläpitäjänä ja varmista, että musta palkki sivun yläreunassa näkyy normaalisti ja sen kuvakkeet ovat paikoillaan. Tavan 1 koodi ja Perfmattersin valinta jättävät dashiconsit koskematta ylläpitäjille, joten et huomaa mitään eroa.

⁉️🤔 Usein kysytyt kysymykset

Vaikuttaako dashiconsien poistaminen sivuston ulkoasuun?

Jos teemasi käyttää dashiconseja julkisen puolen kuvakkeisiin (liukusäätimen nuolet, sulkupainikkeet, hampurilaisvalikko), niiden poistaminen rikkoo nuo elementit. Testaus on yksinkertaista: poista tiedosto käytöstä ja kävele sivut läpi. Jos kuvakkeet katoavat, teema nojaa dashiconseihin. Siinä tapauksessa käytä aggressiivista välimuistitusta Cloudflaren tai välimuistilisäosan kautta: selaimen välimuistista tarjoiltu 30 kt ei ole kriittinen.

Toimiiko tämä menetelmä lohkoteemojen (FSE) kanssa?

Lohkoteemoissa, kuten Twenty Twenty-Four, Ollie ja vastaavat, dashiconsit eivät yleensä lataudu julkisella puolella. Lohkoeditori käyttää omia SVG-kuvakkeitaan, eikä ydin lisää kuvakefonttia jonoon kävijöille. Tarkista DevToolsin kautta: todennäköisesti tiedostoa ei ole siellä. Jos kuitenkin löydät sen, tavan 1 koodi toimii samalla tavalla sekä klassisille että lohkoteemoille.

Voinko poistaa dashiconsit käytöstä vain tietyillä sivuilla?

Kyllä, käyttämällä WordPressin ehdollisia tageja. Esimerkiksi pitääksesi dashiconsit vain kotisivulla:

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

Kaikki saatavilla olevat ehdolliset tagit on kuvattu WordPressin dokumentaatiossa. Niihin kuuluvat is_single yksittäisille artikkeleille, is_page sivuille, is_archive arkistoille ja is_home blogi-indeksille.

Minulla on jo välimuistilisäosa nopeuttamassa sivustoa. Pitäisikö dashiconsit silti poistaa käytöstä?

Välimuistilisäosa nopeuttaa toistuvia käyntejä, mutta ensimmäinen kylmä käynti hakee silti dashicons.min.css-tiedoston. PageSpeed Insights emuloi puhdasta välimuistia jokaisella testillä, joten tiedosto näkyy raportissa palvelinpuolen välimuistituksesta huolimatta. Dashiconsien poistaminen vähentää siirrettävää dataa lähdetasolla; sekä mittarit että todelliset kävijät ensimmäisellä käynnillään hyötyvät.

Riittääkö dashiconsien poistaminen hyvään PageSpeed-pistemäärään?

Ei, se on vain yksi askel kymmenien joukossa. Suurimmat voitot tulevat yleensä kuvien optimoinnista (pakkaus, modernit formaatit, laiska lataus), JavaScriptin lykätystä lataamisesta ja palvelinpuolen välimuistituksesta. Ajattele dashiconsien poistamista perushygieniana: nopea, turvallinen, mitattavissa oleva vaikutus. Se on kätevä lähtökohta julkisen puolen siivoamiselle.

Mikä menetelmä valita tilanteeseesi

Nopea yhteenveto kolmesta menetelmästä ja erityisistä skenaarioista.

Jos työskentelet koodin parissa ja sivustosi toimii kevyellä kokoonpanolla, nappaa koodinpätkä tavasta 1. Kaksi minuuttia sen liittämiseen functions.php-tiedostoon tai Code Snippetsiin, ja ongelma on lopullisesti ratkaistu. Ei ylimääräisiä lisäosia, ei lisäkuormaa hallintaan.

Jos maksat jo Perfmattersista tai WP Rocketista, ota sisäänrakennettu ominaisuus käyttöön äläkä luo ylimääräisiä entiteettejä. Nämä lisäosat ratkaisevat samalla tusinan muita suorituskykyongelmia, ja ylimääräinen koodi teemassa vain monimutkaistaa ylläpitoa.

Jos tarvitset ilmaisen työkalun ilman PHP:n muokkaamista, Asset CleanUp hoitaa tehtävän kahdella napsautuksella. Se sopii aloittelijoille ja niille, jotka eivät halua riskeerata functions.php-tiedoston rikkomista.

Yleinen periaate: dashiconsit eivät yksin tee sivustosta hidasta. Mutta ne ovat osa taustakohinaa, joka yhdistettynä käyttämättömien lisäosien tyyleihin, raskaisiin fontteihin ja optimoimattomiin kuviin tukkii kanavan ja hidastaa renderöintiä. Dashiconsien poistaminen on nopea voitto ja kätevä lähtökohta järjestelmälliselle optimoinnille.

Poistitko ne? Jätä kommentti ja kerro, kuinka monta PageSpeed-pistettä voitit. Jos tiedät toisen menetelmän, jota ei käsitelty tässä artikkelissa, jaa sekin.