Teate seda tunnet: sinu WordPressi sait on valmis, kujundatud, kõik pluginad paigas. Käivitad PageSpeed Insightsi ja seal see on, oranž. Või punane. Süüdlane on peaaegu alati sama: CSS. Kümned pluginatest ja teemast pärit stiilifailid seisavad järjekorras ja blokeerivad renderdamise. Leht on aeglane mitte sellepärast, et ta oleks raske, vaid sellepärast, et brauser ootab.

Probleem on sügavam, kui esmapilgul paistab. Plugin laeb oma style.css faili saidi igal lehel, isegi seal, kus selle funktsionaalsust ei kasutata. Kontaktivorm ilmub ainult kontaktide lehel, ometi laaditakse selle stiilid igal pool. Slaider asub avalehel, kuid selle neli CSS-faili ripuvad eranditult igal URL-il. See teeb igal lehevaatamisel kümneid tarbetuid kilobaitte ja päringuid.

Saad ebavajalikud stiilid keelata ilma täiendavaid pluginaid paigaldamata, functions.php faili kaudu. See ei ole häkk; see on WordPressi sisseehitatud mehhanism, mis on toiminud alates versioonist 2.6. Allpool on täielik juhend: alates identifikaatori leidmisest kuni kombineeritud faili asünkroonse laadimiseni.

💡 Kiirülevaade:

• Kuidas leida mis tahes plugina CSS-faili identifikaatorit (handle) lehe lähtekoodis oleva id atribuudi kaudu
• Kuidas keelata stiile, kasutades kombinatsiooni wp_dequeue_style + wp_deregister_style koos õige prioriteediga
• Kuidas kombineerida keelatud stiilid ühte faili ja laadida see asünkroonselt media print kaudu, kaotamata stiile ja blokeerimata renderdamist

Kuidas leida plugina CSS-faili identifikaatorit

WordPress määrab igale järjekorda pandud stiilifailile unikaalse identifikaatori, handle'i. Seda handle'it nõuavad funktsioonid wp_dequeue_style (dokumentatsioon) ja wp_deregister_style (codex). Ilma õige handle'ita ei keelata midagi.

Kõige usaldusväärsem meetod on vaadata lehe HTML-i lähtekoodi. Plugina nime põhjal oletamine ei tööta; plugina arendaja nimetab handle'i nii, nagu ise soovib, ja loogika võib olla ebaselge.

Ava lehe lähtekood (Ctrl+U või view-source: URL-i ees) ja otsi üles <link> silt, mis laeb vajaliku plugina CSS-i. Näiteks Elementori puhul näeb see välja nii:

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

Vaata id atribuuti. WordPress konstrueerib selle mustri järgi: **plugina handle + sufiks **-css. Ülaltoodud näites id="elementor-animations-css", mis tähendab, et handle on elementor-animations. Eemalda id väärtuse lõpust -css ja saad täpse handle'i keelamiseks. See toimib iga plugina või teema puhul.

On juhtumeid, kus arendaja ei lisa <link> elemendile üldse id atribuuti. Sel juhul otsi naaberelemente, millel on id, või kontrolli sama plugina <script> silte: skriptid kasutavad -js sufikst ja handle kattub sageli stiili omaga. Kui sa seda ikka ei leia, ava plugina lähtekood kaustas /wp-content/plugins/... ja leia wp_enqueue_style() väljakutse: esimene argument on handle.

Stiilide keelamine: wp_dequeue_style ja wp_deregister_style

WordPress pakub stiilide haldamiseks kahte funktsiooni. Erinevus on põhimõtteline:

Praktikas kasutatakse mõlemat funktsiooni koos: wp_dequeue_style eemaldab selle järjekorrast ja seejärel wp_deregister_style codex'is tagab, et ükski teine kood ei lisa seda handle'it sõltuvusahela kaudu uuesti järjekorda.

Põhikood faili functions.php jaoks

Allolev kood keelab kahe plugina stiilid: full-screen-search ja prettyPhoto. Kõrge prioriteet 9999 tagab, et keelamine käivitatakse PÄRAST seda, kui plugin on oma stiilid registreerinud ja järjekorda pannud. Ilma kõrgendatud prioriteedita võib funktsioon käivituda enne pluginat, mistõttu pole midagi keelata.

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

Oluline on siin: konks wp_enqueue_scripts on selle toimingu jaoks õige koht. Mitte wp_head, mitte init, mitte wp_loaded. Just wp_enqueue_scripts konksul paneb WordPress stiilijärjekorda kokku ja just seal tuleks need keelata, lihtsalt pisut hiljem kui pluginad seda teevad.

Miks prioriteet 9999, mitte 11 või 99

Pluginad registreerivad stiile vaikeprioriteediga 10. Kuid mõni määrab prioriteediks 20, 50 või isegi 100, kui neil on keerukad sõltuvusahelad. Prioriteet 9999 katab praktiliselt iga reaalse stsenaariumi. Ainus miinus: kui kaks sinu enda koodijuppi jagavad sama prioriteeti 9999, on nende käivitamise järjekord määramata. Praktikas on see haruldane, samas kui 11 kasutamine ebaõnnestub regulaarselt „jonnakate" pluginatega.

Lisaks saad keelamise registreerida wp_head konksul sama prioriteediga kui turvavõrk stiilide jaoks, mille plugin lisab järjekorda wp_enqueue_scripts-ist mööda minnes ja väljastab otse <head>-i:

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

Kuid see on varuvariant. Tavaliselt piisab ühest wp_enqueue_scripts-ist.

Kuidas keelata KÕIK konkreetse plugina stiilid

Paljudel pluginatel pole mitte üks CSS-fail, vaid mitu. Contact Form 7, WooCommerce, Elementor, igaüks veab kaasa 3-5 stiilifaili. Nende ükshaaval keelamine on tüütu. Skaneeri lehe lähtekoodi ja kogu kokku kõik sama prefiksiga käepidemed: tavaliselt on need koos.

Näide Elementori kohta, tüüpiline käepidemete komplekt: elementor-frontend, elementor-animations, elementor-icons ja elementor-pro. Kõik neli ühe käsuga:

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

Mida keelatud stiilidega teha

Keelamine on vaid pool tööd. Kui sa lihtsalt eemaldad plugina CSS-i, laguneb lehel kõik: vormid nihkuvad paigast, sliderid vajuvad koost, ikoonid kaovad. Stiile on vaja, lihtsalt mitte renderdamist blokeeriva hinnaga.

Õige lähenemine: kombineeri keelatud stiilid ÜHTE kompaktsesse faili ja laadi see blokeerimata. Algoritm:

• Keelatud plugina stiilid wp_dequeue_style + wp_deregister_style abil.
• Kopeeritud IGA keelatud CSS-faili sisu. Võta need plugina kaustast, mitte brauseri inspektorist, mis näitab minifitseeritud versiooni, millega on ebamugav töötada.
• Kombineeritud need ühte faili, näiteks /wp-content/themes/your-theme/css/dequeued-plugins.css.
• Laaditud see atribuutidega media="print" ja onload="this.media='all'". Brauser laeb faili asünkroonselt, renderdamist blokeerimata, ja rakendab stiilid pärast laadimist.

Kombineeritud faili laadimise kood

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

Prioriteet 1 on siin taotluslik: kombineeritud fail tuleb järjekorda panna ENNE, kui prioriteediga 9999 keelamisfunktsioonid käivituvad. Vastasel juhul ei pruugi WordPress sõltuvust ära tunda ja eemaldab stiilid järjekorrast täielikult.

Asünkroonne laadimine ilma pluginata

Et brauser ei ootaks CSS-faili enne lehe renderdamist, lisa media="print" ja onload atribuudid style_loader_tag filtri kaudu:

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

Mehhanism on lihtne: brauser näeb media="print" ega blokeeri renderdamist, kuna prindimeediumi tüüp ei mõjuta ekraani. Pärast faili laadimist käivitub onload, muudab media väärtuseks all ja stiilid rakenduvad koheselt. Kasutaja näeb täielikult kujundatud lehte ilma viivituseta esmasel laadimisel.

Millal ei tohiks stiile functions.php kaudu keelata

wp_dequeue_style meetod on võimas, kuid mitte universaalne. Siin on kolm juhtu, kus see on kasutu või kahjulik:

• Stiilid on manustatud reasiseseks wp_add_inline_style abil. Sellised stiilid asuvad <style> sildi sees ja neil ei ole eraldi identifikaatorit. Peate need keelama läbi vanemskripti wp_deregister_script või leidma konksu, mida plugin kasutab reasiseste stiilide lisamiseks.

• Plugin lisab CSS-i otse <head> sisse echo abil. See on mõnede vanemate pluginatega kasutatav lahendus. Siin aitab ainult konkreetse konksu leidmine või viimase abinõuna väljundpuhverdus.

• Töötate kolmanda osapoole teemaga, mis haldab sõltuvusi ise. Mõned teemad, eriti premium-teemad, kasutavad oma varade laadurit, mis läheb WP_Styles'ist mööda. Enne koodi kirjutamist kontrollige teema header.php faili: kui näete otse echo '<link...', siis deregistreerimissüsteem ei tööta.

Sellistel juhtudel on parem kasutada spetsiaalseid pluginaid nagu Asset CleanUp või Perfmatters, mis töötavad URL-i tasemel ja keelavad varasid lehe kaupa ilma konksudesse süvenemata.

Vaata videojuhendit stiilide keelamise kohta: kogu protsess alates identifikaatori leidmisest kuni tulemuse kontrollimiseni 8 minutiga.

⁉️🤔 Korduma kippuvad küsimused

Kas ma pean CSS-stiile administraatoripaneelis (*/wp-admin/*)? keelama

Ei. admin_enqueue_scripts konksu kaudu laaditud stiilid ei mõjuta esiosa ja neid ei ole vaja keelata. Pealegi, administraatori stiilide deregistreerimine wp_enqueue_scripts kaudu ei tee midagi, sest need registreeritakse eraldi. Kui administraatoripaneel on aeglane, on probleem tavaliselt mujal: rasked analüütilised skriptid armatuurlaual, välised Google Fonts või Heartbeat API.

Kas on ohutu* eemaldada -css id atribuudist, et saada identifikaator? Kas see reegel töötab alati?*

Jah, -css järelliide lisatakse WordPressi tuuma poolt WP_Dependencies::enqueue() meetodis alates versioonist 2.6; see on muutumatu mehhanism. Kuid on nüanss: kui plugina arendaja määras <link> sildile kohandatud id, ei pruugi järelliide olla. Sel juhul on identifikaator plugina lähtekoodis wp_enqueue_style() kutse teine argument. -css reegel katab valdava enamuse juhtudest.

Kas ma saan stiile keelata ainult kindlatel lehtedel?

Jah, ja see on õige tootmisviis. Ümbritsege wp_dequeue_style kutse WordPressi tingimusliku sildiga: is_front_page() avalehe jaoks, is_single() postituste jaoks, is_page() lehtede jaoks, is_archive() arhiivide jaoks. Postituse ID järgi välistamiseks kasutage ! is_single(123). Tingimuslik järjekorrast eemaldamine kindlatel URL-idel vähendab koormust kogu saidil, mitte ainult seal, kus pluginat pole vaja.

Mis juhtub, kui kutsun wp_dequeue_style identifikaatoriga, mis pole registreeritud?

Mitte midagi. Funktsioon lõpetab vaikselt ilma vigade, PHP teadete või hoiatusteta. See on ohutu. Kuid ärge lootke sellele kui strateegiale: koguge identifikaatoreid ainult reaalsetelt lehtedelt, vastasel juhul koguneb teie koodi "surnud" ridu, mis ei tee midagi ja ainult risustavad functions.php faili.

Kuidas kontrollida, et stiil tõesti keelati, mitte ei lakanud lihtsalt rakendumast vahemälu tõttu?

Avage lehe lähtekood (Ctrl+U), mitte arendaja paneel. Otsige <link> silti plugina identifikaatori või selle id-ga. Kui silt on kadunud, on stiil keelatud. Brauseri vahemälu ei mõjuta lähtekoodi, erinevalt DevToolsi võrgu vahekaardist. Lisaks saate tühjendada WordPressi vahemälu: mis tahes vahemälu plugin, seejärel Purge All.

Peamised järeldused CSS-i keelamise kohta WordPressis

Kolm peamist järeldust kogu sellest juhendist:

• Identifikaator on kõige võti. Ilma õige identifikaatorita ei tööta ükski funktsioon. Leidke identifikaator alati lehe lähtekoodis oleva id atribuudi kaudu. -css eemaldamise reegel töötab peaaegu alati; erandite korral kontrollige plugina lähtekoodi.

• Dequeue + Deregister on standardkombinatsioon. Esimene funktsioon eemaldab stiili järjekorrast, teine tagab, et see ei ilmu uuesti sõltuvusahela kaudu. Prioriteet 9999 katab kõik "jonnakad" pluginad ja wp_enqueue_scripts konks on selle toimingu jaoks ainuõige koht.

• Keelatud stiilid ei tohiks kaduda. Ühendage need ühte faili ja laadige asünkroonselt media="print" + onload abil. Kasutaja saab täielikult kujundatud lehe ja brauser ei oota CSS-i enne renderdamist.

Proovige seda juba täna ühe või kahe pluginaga. Paar minutit functions.php failis ja tulemus on kohe nähtav PageSpeed Insights'is. Alustage "kõige raskemast" pluginast, sellest, millel on kõige rohkem CSS-faile: keelake, ühendage, mõõtke kiirust. Tõenäoliselt piisab juba sellest, et liikuda oranžist tsoonist rohelisse.