Tiedät tunteen: WordPress-sivustosi on valmis, tyylitelty ja lisäosat paikoillaan. Ajat PageSpeed Insightsin, ja siinä se on, oranssina. Tai punaisena. Syyllinen on melkein aina sama: CSS. Kymmenet tyylitiedostot lisäosista ja teemasta jonottavat ja estävät renderöinnin. Sivu on hidas, ei siksi että se olisi raskas, vaan koska selain joutuu odottamaan.

Ongelma on syvempi kuin miltä näyttää. Lisäosa lataa style.css-tiedostonsa sivuston jokaisella sivulla, myös siellä missä sen toiminnallisuutta ei käytetä. Yhteydenottolomake näkyy vain yhteystietosivulla, mutta sen tyylit latautuvat kaikkialla. Slideri on etusivulla, mutta sen neljä CSS-tiedostoa roikkuvat poikkeuksetta jokaisella URL-osoitteella. Se tarkoittaa kymmeniä tarpeettomia kilotavuja ja pyyntöjä jokaisella sivulatauksella.

Voit poistaa tarpeettomat tyylit käytöstä ilman lisäosia functions.php-tiedoston kautta. Tämä ei ole viritys, vaan WordPressin sisäänrakennettu mekanismi, joka on toiminut versiosta 2.6 lähtien. Alla on täydellinen opas: tunnisteen löytämisestä yhdistetyn tiedoston asynkroniseen lataamiseen.

💡 Pikaopas:

• Miten löydät minkä tahansa lisäosan CSS-tiedoston tunnisteen (handle) id-attribuutin avulla sivun lähdekoodista
• Miten poistat tyylit käytöstä wp_dequeue_style + wp_deregister_style -yhdistelmällä oikealla prioriteetilla
• Miten yhdistät käytöstä poistetut tyylit yhdeksi tiedostoksi ja lataat sen asynkronisesti media print -määreen avulla menettämättä tyylitystä ja estämättä renderöintiä

Miten löydät lisäosan CSS-tiedoston tunnisteen

WordPress antaa jokaiselle jonoon asetetulle tyylitiedostolle yksilöllisen tunnisteen eli handlen. Tätä handlea funktiot wp_dequeue_style (dokumentaatio) ja wp_deregister_style (codex) tarvitsevat. Ilman oikeaa handlea mikään ei poistu käytöstä.

Luotettavin tapa on katsoa sivun HTML-lähdekoodia. Lisäosan nimeen perustuva arvaus ei toimi; lisäosan kehittäjä nimeää handlen miten haluaa, ja logiikka voi olla epäilmeinen.

Avaa sivun lähdekoodi (Ctrl+U tai view-source: ennen URL-osoitetta) ja etsi <link>-tagi, joka lataa tarvitsemasi lisäosan CSS:n. Esimerkiksi Elementorilla se näyttää tältä:

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

Katso id-attribuuttia. WordPress muodostaa sen kaavalla: **lisäosan handle + pääte **-css. Yllä olevassa esimerkissä id="elementor-animations-css", mikä tarkoittaa, että handle on elementor-animations. Poista -css id-arvon lopusta, niin saat tarkan handlen käytöstä poistamista varten. Tämä toimii mille tahansa lisäosalle tai teemalle.

On tapauksia, joissa kehittäjä ei lisää id-attribuuttia <link>-tagiin lainkaan. Siinä tapauksessa etsi läheisiä elementtejä, joissa on id, tai tarkista saman lisäosan <script>-tagit: skriptit käyttävät -js-päätettä, ja handle vastaa usein tyylin handlea. Jos et vieläkään löydä sitä, avaa lisäosan lähdekoodi hakemistosta /wp-content/plugins/... ja etsi wp_enqueue_style()-kutsu: ensimmäinen argumentti on handle.

Tyylien poistaminen käytöstä: wp_dequeue_style ja wp_deregister_style

WordPress tarjoaa kaksi funktiota tyylien hallintaan. Ero on perustavanlaatuinen:

Käytännössä molempia funktioita käytetään yhdessä: wp_dequeue_style poistaa sen jonosta, ja sitten wp_deregister_style codexissa varmistaa, ettei mikään muu koodi aseta handlea uudelleen jonoon riippuvuusketjun kautta.

Peruskoodi functions.php-tiedostoon

Alla oleva koodi poistaa käytöstä kahden lisäosan tyylit: full-screen-search ja prettyPhoto. Korkea prioriteetti 9999 varmistaa, että käytöstä poisto suoritetaan SEN JÄLKEEN, kun lisäosa on rekisteröinyt ja asettanut tyylinsä jonoon. Ilman korotettua prioriteettia funktio saattaa suorittua ennen lisäosaa, jolloin mitään poistettavaa ei ole.

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

Tässä ratkaisevaa on, että koukku wp_enqueue_scripts on oikea paikka tälle toimenpiteelle. Ei wp_head, ei init, ei wp_loaded. WordPress kokoaa tyylijonon wp_enqueue_scripts-kohdassa, ja siellä sinun tulee poistaa ne käytöstä, juuri lisäosia myöhemmin.

Miksi prioriteetti 9999, ei 11 tai 99

Lisäosat rekisteröivät tyylejä oletusprioriteetilla 10. Mutta jotkin asettavat 20, 50 tai jopa 100, kun niillä on monimutkaisia riippuvuusketjuja. Prioriteetti 9999 kattaa käytännössä minkä tahansa todellisen skenaarion. Ainoa haittapuoli: jos kaksi omaa koodinpätkääsi jakaa saman 9999-prioriteetin, niiden suoritusjärjestys on määrittelemätön. Käytännössä tämä on harvinaista, kun taas 11 pettää säännöllisesti "itsepintaisten" lisäosien kanssa.

Lisäksi voit rekisteröidä poiston wp_head-koukkuun samalla prioriteetilla varotoimena tyyleille, jotka lisäosa laittaa jonoon ohittamalla wp_enqueue_scripts-kohdan ja tulostamalla suoraan <head>-osioon:

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

Mutta tämä on varasuunnitelma. Normaalisti yksi wp_enqueue_scripts riittää.

Kuinka poistaa käytöstä KAIKKI tietyn lisäosan tyylit

Monilla lisäosilla ei ole yhtä CSS-tiedostoa, vaan useita. Contact Form 7, WooCommerce, Elementor, jokainen raahaa mukanaan 3-5 tyylitiedostoa. Niiden poistaminen yksi kerrallaan on työlästä. Skannaa sivun lähdekoodi ja kerää kaikki kahvat, joilla on sama etuliite: ne ovat yleensä ryhmitelty yhteen.

Esimerkki Elementorille, tyypillinen kahvojen joukko: elementor-frontend, elementor-animations, elementor-icons ja elementor-pro. Kaikki neljä yhdellä kutsulla:

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

Mitä tehdä käytöstä poistetuille tyyleille

Käytöstä poistaminen on vain puolet työstä. Jos yksinkertaisesti poistat lisäosan CSS:n, kaikki sivulla hajoaa: lomakkeet menevät vinoon, liukusäätimet hajoavat, kuvakkeet katoavat. Tyylejä tarvitaan, niitä ei vain saa ladata renderöinnin estävällä tavalla.

Oikea lähestymistapa: yhdistä käytöstä poistetut tyylit YHDEKSI kompaktiksi tiedostoksi ja lataa se estämättä renderöintiä. Algoritmi:

• Poista lisäosien tyylit käytöstä wp_dequeue_style + wp_deregister_style -funktioilla.
• Kopioi JOKAISEN käytöstä poistetun CSS-tiedoston sisältö. Ota ne lisäosan kansiosta, älä selaimen tarkastustyökalusta, joka näyttää minimoidun buildin, jonka kanssa on hankala työskennellä.
• Yhdistä ne yhteen tiedostoon, esimerkiksi /wp-content/themes/your-theme/css/dequeued-plugins.css.
• Lataa se media="print"-attribuutilla ja onload="this.media='all'"-tapahtumalla. Selain lataa tiedoston asynkronisesti estämättä renderöintiä ja ottaa tyylit käyttöön latauksen jälkeen.

Yhdistetyn tiedoston latauskoodi

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

Prioriteetti 1 on tässä tarkoituksellinen: yhdistetty tiedosto on asetettava jonoon ENNEN kuin poistofunktiot prioriteetilla 9999 suoritetaan. Muuten WordPress ei välttämättä tunnista riippuvuutta ja pudottaa tyylit kokonaan jonosta.

Asynkroninen lataus ilman lisäosaa

Jotta selain ei odottaisi CSS-tiedostoa ennen sivun renderöintiä, lisää media="print" ja onload-attribuutit style_loader_tag-suodattimen kautta:

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

Mekanismi on suoraviivainen: selain näkee media="print" eikä estä renderöintiä, koska tulostusmediatyyppi ei vaikuta näyttöön. Kun tiedosto on latautunut, onload laukeaa, vaihtaa media-arvoksi all, ja tyylit otetaan käyttöön välittömästi. Käyttäjä näkee täysin tyylitellyn sivun ilman viivettä ensimmäisellä latauksella.

Milloin tyylejä ei kannata poistaa functions.php:n kautta

wp_dequeue_style-metodi on tehokas, mutta ei yleispätevä. Tässä kolme tapausta, joissa se on joko hyödytön tai haitallinen:

• Tyylit on upotettu sisäisesti wp_add_inline_style-funktiolla. Tällaiset tyylit sijaitsevat <style>-tagin sisällä, eikä niillä ole erillistä kahvaa. Ne täytyy poistaa käytöstä pääskriptin wp_deregister_script-kutsulla tai etsimällä se koukku, jolla lisäosa lisää sisäiset tyylit.

• Lisäosa syöttää CSS:ää suoraan <head>-osioon echo-komennolla. Tämä on joidenkin vanhempien lisäosien käyttämä kiertotapa. Tässä auttaa vain tietyn koukun löytäminen tai viimeisenä keinona tulostuksen puskurointi.

• Työskentelet kolmannen osapuolen teeman kanssa, joka hallinnoi riippuvuuksia itse. Jotkin teemat, erityisesti premium-teemat, käyttävät omaa resurssienlataajaansa, joka ohittaa WP_Styles-järjestelmän. Ennen koodin kirjoittamista tarkista teeman header.php: jos näet suoran echo '<link...'-kutsun, deregister-järjestelmä ei toimi.

Näissä tapauksissa on parempi käyttää erikoistuneita lisäosia, kuten Asset CleanUp tai Perfmatters, jotka toimivat URL-tasolla ja poistavat resursseja käytöstä sivu kerrallaan ilman koukkuihin kaivautumista.

Katso video-opas tyylien poistamisesta käytöstä: koko prosessi kahvan löytämisestä tuloksen varmentamiseen 8 minuutissa.

⁉️🤔 Usein kysytyt kysymykset

Pitääkö CSS-tyylejä poistaa käytöstä hallintapaneelissa (*/wp-admin/*)?

Ei. admin_enqueue_scripts-koukun kautta ladatut tyylit eivät vaikuta julkiseen sivustoon, eikä niitä tarvitse poistaa käytöstä. Lisäksi hallintatyylien deregisteröinnin yrittäminen wp_enqueue_scripts-koukun kautta ei tee mitään, koska ne rekisteröidään erikseen. Jos hallintapaneeli on hidas, ongelma on yleensä muualla: raskaat analytiikkaskriptit kojelaudalla, ulkoiset Google Fontsit tai Heartbeat API.

Onko turvallista* poistaa -css id-attribuutista kahvan saamiseksi? Toimiiko tämä sääntö aina?*

Kyllä, -css-pääte on WordPress-ytimen WP_Dependencies::enqueue()-metodin lisäämä versiosta 2.6 lähtien; tämä on muuttumaton mekanismi. Mutta asiassa on vivahde: jos lisäosan kehittäjä on määrittänyt <link>-tagille manuaalisesti mukautetun id-attribuutin, pääte voi puuttua. Siinä tapauksessa kahva on wp_enqueue_style()-kutsun toinen argumentti lisäosan lähdekoodissa. -css-sääntö kattaa valtaosan tapauksista.

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

Kyllä, ja tämä on oikea tuotantotason lähestymistapa. Kääri wp_dequeue_style-kutsu WordPressin ehdolliseen tagiin: is_front_page() etusivulle, is_single() artikkeleille, is_page() sivuille, is_archive() arkistoille. Jos haluat rajata pois artikkelin ID:n perusteella, käytä ! is_single(123). Ehdollinen poistaminen tietyillä URL-osoitteilla vähentää kuormaa koko sivustolla, ei vain siellä, missä lisäosaa ei tarvita.

Mitä tapahtuu, jos kutsun wp_dequeue_style-funktiota kahvalla, jota ei ole rekisteröity?

Ei mitään. Funktio suoritetaan äänettömästi loppuun ilman virheitä, PHP-noticeita tai varoituksia. Tämä on turvallista. Mutta älä luota tähän strategiana: kerää kahvoja vain todellisilta sivuilta, muuten koodiisi kertyy "kuolleita" rivejä, jotka eivät tee mitään ja ainoastaan sotkevat functions.php-tiedostoa.

Miten varmistan, että tyyli todella poistettiin käytöstä, eikä sen soveltaminen vain lakannut välimuistin takia?

Avaa sivun lähdekoodi (Ctrl+U), älä kehittäjäpaneelia. Etsi <link>-tagia, jossa on lisäosan kahva tai sen id. Jos tagi on poissa, tyyli on poistettu käytöstä. Selainvälimuisti ei vaikuta lähdekoodiin, toisin kuin DevTools-työkalujen Network-välilehti. Lisäksi voit tyhjentää WordPress-välimuistin: mikä tahansa välimuistilisäosa, sitten Purge All.

Tärkeimmät opit CSS:n poistamisesta käytöstä WordPressissä

Kolme pääjohtopäätöstä tästä koko oppaasta:

• Kahva on avain kaikkeen. Ilman oikeaa tunnistetta mikään funktio ei toimi. Etsi kahva aina id-attribuutin kautta sivun lähdekoodista. -css-päätteen poistamisen sääntö toimii lähes aina; poikkeustapauksissa tarkista lisäosan lähdekoodi.

• Dequeue + Deregister on vakiokombinaatio. Ensimmäinen funktio poistaa tyylin jonosta, toinen varmistaa, ettei se ilmesty uudelleen riippuvuusketjun kautta. Prioriteetti 9999 kattaa kaikki "itsepäiset" lisäosat, ja wp_enqueue_scripts-koukku on ainoa oikea paikka tälle toimenpiteelle.

• Käytöstä poistettujen tyylien ei pidä kadota. Yhdistä ne yhteen tiedostoon ja lataa se asynkronisesti media="print" + onload-yhdistelmällä. Käyttäjä saa täysin tyylitellyn sivun, eikä selain odota CSS:ää ennen renderöintiä.

Kokeile tätä tänään yhdellä tai kahdella lisäosalla. Pari minuuttia functions.php-tiedostossa, ja tulos näkyy välittömästi PageSpeed Insightsissa. Aloita "painavimmasta" lisäosasta, siitä jossa on eniten CSS-tiedostoja: poista käytöstä, yhdistä, mittaa nopeus. Todennäköisesti pelkästään tämä riittää siirtämään sivuston oranssilta vyöhykkeeltä vihreälle.