Leht on aeglane ja PageSpeed Insights osutab vaikimisi failile dashicons.min.css, 30 KB ikoone, mida ei kuvata üheski nähtavas elemendis. Sa ei paigaldanud seda faili ega lisanud seda oma teemas järjekorda, ometi laaditakse see truult iga külastaja jaoks. Kust see tuleb ja kuidas sellest lahti saada?

WordPress saadab dashiconsid esiküljele vaikimisi ühelainsal kitsal eesmärgil: sisselogitud kasutajate haldusriba jaoks. Tavaline külaline ei näe kunagi haldusriba, kuid brauser laadib kuulekalt CSS-i alla, parsimib selle, ehitab CSSOM-i ja alles siis mõistab, et ühtegi klassi ei läinud vaja. Aeglase mobiilse ühenduse korral tähendab see 30 KB täiendavat 300-400 ms renderdamist blokeerivat laadimisaega, mis on piisav, et kahjustada sinu Core Web Vitalse.

Allpool on kolm viisi dashiconside keelamiseks: alates käsitsi lisatavast koodijupist kuni ühe märkeruuduni optimeerimispluginis. Kõik meetodid on ohutud, tagasipööratavad ja testitud päris WordPressi paigaldustel.

💡 Kiire ülevaade:

• Ava DevTools või PageSpeed Insights ja veendu, et dashicons.min.css sinu saidil tegelikult laaditakse
• Vali oma töövooga sobiv lähenemine: kood failis functions.php või valmis optimeerimisplugin
• Testi jõudlust uuesti ja veendu, et fail on raportist kadunud
• Veendu, et haldusriba töötab administraatoritel endiselt vigadeta

Mis on dashicons ja miks need esiküljel laadivad

Dashicons on WordPressi sisseehitatud ikoonifont, mis võeti kasutusele versioonis 3.8. Halduspaneeli sees on neid kõikjal: menüüjaotiste ikoonid, postitüüpide ikoonid, tööriistariba nupud. Ilma dashiconsita muutub haldusala paljaks tekstiks ja WordPress ei saa neist loobuda.

Probleem peitub registreerimismehhanismis. WordPressi tuum registreerib dashicons stiilid globaalselt ja lisab need järjekorda mitte ainult haldusliidese, vaid ka esikülje jaoks, kõik üheainsa stsenaariumi jaoks: sisselogitud kasutaja külastab saiti ja näeb musta haldusriba riba koos ikoonidega. Külalised ei saa haldusriba, kuid nad saavad CSS-faili. Brauser parsimib selle, avastab, et ükski selektor ei sobinud, ja viskab tulemuse minema, kuid aeg on juba kulutatud.

PageSpeed Insights ja GTmetrix märgivad dashicons.min.css soovituses „Eemalda kasutamata CSS" ja karistavad punkte. Üks selline fail tundub tühine. Aga kui sellele kuhjuvad otsa WordPressi emotikonide stiilid, kasutamata pluginatest pärit CSS ja surnud teemaplokid, ulatub kombineeritud kokkuhoid 150-300 KB-ni. Mobiilse jõudluse jaoks on see oluline.

Kuidas kontrollida, kas dashicons sinu saidil laadivad

Enne millegi keelamist veendu, et probleem on olemas. Kolm meetodit, igaüks alla minuti.

Chrome DevTools. Ava sait inkognito režiimis (et haldusriba testi ei mõjutaks), vajuta F12, mine vahekaardile Network ja trüki filtri väljale dashicons. Kui näed faili staatusega 200 ja suurusega umbes 30 KB, laaditakse see iga külastaja jaoks.

PageSpeed Insights. Kleebi URL aadressile pagespeed.web.dev ja käivita test. Laienda soovitust „Eemalda kasutamata CSS"; dashicons.min.css on loetletud koos oma suuruse ja võimaliku säästuga kilobaitides.

GTmetrix. Mine vahekaardile Waterfall ja filtreeri dashicons järgi. Isegi kui fail on laadimisahelas märgitud kui „Low" või „Lowest", blokeerib see ikkagi renderdamist ja kisub sinu skoori alla.

Ükski neist meetoditest ei näidanud faili? Sinu teema või mõni optimeerimisplugin on dashiconsid juba keelanud ja sa võid selle artikli sulgeda. Leidsid selle? Liigume edasi.

Meetod 1: keelamine koodi abil failis functions.php

Kergeim ja läbipaistvaim lähenemine: üks koodijupp aktiivse teema failis functions.php. Kood eemaldab dashicons registreeringu kõigilt külastajatelt, kellel pole administraatori õigusi. Neile, kes saiti haldavad, jätame need alles ja haldusriba armatuurlaual jääb puutumata.

Lisa see kood alamteema faili functions.php või Code Snippets plugina kaudu (turvalisem, sest see säilib teemavahetuste korral):

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

Konks wp_enqueue_scripts käivitub, kui stiilide järjekord esiküljel kokku pannakse. current_user_can('update_core') kontrollib tuuma uuendamise õigust, mis vaikimisi kuulub ainult administraatoritele. Tavakülastajate puhul kontroll ebaõnnestub ja wp_deregister_style('dashicons') eemaldab faili järjekorrast täielikult.

Miks deregister, mitte dequeue? wp_dequeue_style eemaldab stiili järjekorrast, kuid jätab selle registreerituks; mõni teine plugin võiks dashiconsid uuesti väljundisse lisada. wp_deregister_style eemaldab registreeringu täielikult ja ainus viis faili tagasi tuua on selgesõnaline wp_register_style väljakutse. Dashiconside puhul on see õige valik: sa ei taha, et mõni sotsiaalmeedia jagamise või galerii plugin need kogemata esiküljel taastaks.

Ettevaatusabinõud. Viga failis functions.php võib saidi valgeks ekraaniks muuta. Enne redigeerimist kopeeri fail nimega functions.php.bak kiireks tagasipööramiseks. Kasuta alamteemat või Code Snippetsit. Kontrolli süntaksit üle: iga sulg ja semikoolon omal kohal.

Meetod 2: optimeerimispluginid (üks märkeruut koodi asemel)

Kui sa eelistad PHP-d mitte puutuda, lahendavad jõudluspluginid sama probleemi.

Perfmatters. Jaotises General → Options leiad lüliti „Disable Dashicons". Üks klikk ja fail kaob esiküljelt. Perfmatters välistab dashiconsid ka kasutatud CSS-ist, kui Remove Unused CSS on aktiivne, nii et probleem on kaetud topelt. Plugin on tasuline, kuid see tegeleb kümnete muude jõudluse pudelikaeltega, alates emotikonide stiilide keelamisest kuni heartbeat API juhtimiseni.

WP Rocket. Jaotises File Optimization → Optimize CSS Delivery luba „Remove Unused CSS". WP Rocket analüüsib sinu lehti ja eemaldab kasutamata stiilid, sealhulgas dashicons.min.css. See töötab automaatselt kogu saidi ulatuses. Kui Remove Unused CSS läheb mõne teise optimeeringuga vastuollu, lisa dashicons.min.css välistuste nimekirja; WP Rocket lükkab selle laadimise edasi, selle asemel et see täielikult eemaldada.

Asset CleanUp (tasuta). Plugin Asset CleanUp võimaldab CSS-i ja JS-i valikuliselt keelata üksikute lehtede ja sisutüüpide tasemel. Mine CSS/JS Manageri, leia dashicons.min.css ja laadi see üle kogu saidi maha. Tasuta versioon haldab põhilist puhastust.

Millise meetodi peaksid valima? Kui sa juba kasutad Perfmattersit või WP Rocketit, kasuta sisseehitatud funktsiooni; ära lisa lisakoodi faili functions.php. Kui sinu sait töötab minimaalse pluginakomplektiga ja sa oled PHP-ga sina peal, on meetodi 1 koodijupp kergem ega lisa sõltuvusi.

Kontrolli tulemust

Pärast dashiconside keelamist ava sait inkognito režiimis ja korda kontrolli teisest jaotisest. Fail dashicons.min.css peaks olema DevToolsis laaditud ressursside nimekirjast kadunud. Käivita uus PageSpeed Insights test; mõõdik „Eemalda kasutamata CSS" langeb ja võimalik andmesääst suureneb nende 30 KB võrra.

Tegelik punktivõit sõltub sinu tehnoloogiavirnast. Kergetel saitidel, kus on vaid üks või kaks CSS-i probleemi, lisab dashiconside keelamine mobiilse PageSpeed skoorile 1-3 punkti. Ülepaisutatud saitidel, kus on kümneid kasutamata stiile, on see piisk meres, kuid õige piisk: iga kilobait loeb ja sellised „piisad" annavad kokku märgatava tulemuse.

Kontrolli kindlasti haldusriba: logi sisse administraatorina ja veendu, et ülaosas olev must riba kuvatakse normaalselt ja selle ikoonid on omal kohal. Meetodi 1 kood ja Perfmattersi lüliti jätavad dashiconsid administraatorite jaoks puutumata, nii et sa ei märka mingit erinevust.

⁉️🤔 Korduma kippuvad küsimused

Kas dashiconside keelamine mõjutab saidi välimust?

Kui sinu teema kasutab dashiconseid esikülje ikoonide jaoks (liuguri nooled, sulgemisnupud, hamburgerimenüü), siis nende keelamine lõhub need elemendid. Testimine on lihtne: keela fail ja jaluta lehed läbi. Kui ikoonid kaovad, sõltub teema dashiconsidest. Sel juhul kasuta agressiivset puhverdamist Cloudflare’i või mõne puhverdamisplugina kaudu: brauseri vahemälust serveeritud 30 KB ei ole kriitiline.

Kas see meetod töötab plokiteemadega (FSE)?

Plokiteemades nagu Twenty Twenty-Four, Ollie ja sarnased, dashiconsid tavaliselt esiküljel ei laadi. Plokiredaktor kasutab oma SVG ikoone ja tuum ei lisa ikoonifonti külastajate jaoks järjekorda. Kontrolli DevToolsi abil: tõenäoliselt pole faili seal. Kui sa selle siiski leiad, töötab meetodi 1 kood samamoodi nii klassikaliste kui ka plokiteemade puhul.

Kas ma saan dashiconsid keelata ainult teatud lehtedel?

Jah, kasutades WordPressi tingimuslikke silte. Näiteks, et hoida dashiconseid ainult avalehel:

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

Kõik saadaolevad tingimuslikud sildid on kirjeldatud WordPressi dokumentatsioonis. Need hõlmavad is_single üksikute postituste jaoks, is_page lehtede jaoks, is_archive arhiivide jaoks ja is_home blogi indeksi jaoks.

Mul on juba puhverdamisplugin, mis kiirendab saiti. Kas ma peaksin dashiconsid ikkagi keelama?

Puhverdamisplugin kiirendab korduvaid külastusi, kuid esimene külm külastus tõmbab ikkagi dashicons.min.css. PageSpeed Insights emuleerib igal testil puhast vahemälu, nii et fail ilmub raportisse sõltumata serveripoolsest puhverdamisest. Dashiconside keelamine vähendab edastatavate andmete mahtu lähtetasandil; sellest võidavad nii mõõdikud kui ka reaalsed külastajad oma esimesel külastusel.

Kas dashiconside keelamisest piisab hea PageSpeed skoori jaoks?

Ei, see on vaid üks samm kümnete seas. Suurimad võidud tulevad tavaliselt piltide optimeerimisest (tihendamine, kaasaegsed formaadid, laisklaadimine), edasilükatud JavaScripti laadimisest ja serveripoolsest puhverdamisest. Mõtle dashiconside keelamisest kui elementaarsest hügieenist: kiire, ohutu, mõõdetava efektiga. See on mugav lähtepunkt esikülje puhastamiseks.

Millist meetodit oma olukorras valida

Kiire kokkuvõte kolmest meetodist ja konkreetsetest stsenaariumidest.

Kui sa töötad koodiga ja sinu sait jookseb saledal tehnoloogiavirnal, haara koodijupp meetodist 1. Kaks minutit, et kleepida see faili functions.php või Code Snippetsisse, ja probleem on lõplikult lahendatud. Ei mingeid lisapluginaid, ei mingit lisakoormust haldusliidesele.

Kui sa juba maksad Perfmattersi või WP Rocketi eest, luba sisseehitatud valik ja ära loo lisaolemeid. Need pluginad lahendavad korraga veel kümmekond jõudlusprobleemi ja lisakood teemas muudab hoolduse ainult keerulisemaks.

Kui vajad tasuta tööriista ilma PHP redigeerimiseta, saab Asset CleanUp ülesandega hakkama kahe klikiga. See sobib algajatele ja neile, kes eelistavad mitte riskida functions.php lõhkumisega.

Üldine põhimõte: dashiconsid ei muuda saiti iseenesest aeglaseks. Kuid need on osa taustamürast, mis kombineerituna kasutamata pluginastiilide, raskete fontide ja optimeerimata piltidega ummistab kanali ja aeglustab renderdamist. Dashiconside eemaldamine on kiire võit ja mugav lähtepunkt süstemaatiliseks optimeerimiseks.

Keelasid need ära? Jäta kommentaar ja jaga, mitu PageSpeed punkti sa võitsid. Kui tead mõnda muud meetodit, mida selles artiklis ei käsitletud, jaga ka seda.