Modulaarne CSS laadimine wp_enqueue_style() tingimusfunktsioonidega vähendab CSS koormust 94-96%. Hundikuu.ee: 500KB-lt 18KB-le. Koodinäited kaasas.

Sisukord

Tüüpiline WordPress leht laeb CSS-i nagu rootsi laud – kõik korraga, olenemata sellest, mida külastaja konkreetsel lehel tegelikult näeb. Kontaktilehe CSS laeb poe lehel. Blogi CSS laeb avaleheküljel. WooCommerce CSS laeb blogipostituses.

See on lehe kiiruse vaenlane number üks, millest vähe räägitakse – sest see on nähtamatu. Külastaja ei tea, et tal laeb 50 KB CSS-i, mida ta ei kasuta. Google teab. Lighthouse teab. TTFB ja LCP mõõdikud teavad.

Hundikuu.ee puhul: vaikimisi oleks CSS koormus 500+ KB (Divi perioodil). Pärast modulaarset CSS arhitektuuri: 18 KB kodulehel, 20-30 KB muudel lehtedel. See on 94-96% vähenemine.

Miks üks suur CSS fail on probleem

Page builderid ja paljud teemad genereerivad ühe suure CSS faili, mis sisaldab kõike. Mõte on lihtne: genereerime kõik stiilid ette, veebilehitseja laeb ühe faili.

Probleem: see üks fail on suur. Väga suur. Elementor laeb 300-400 KB CSS-i. Divi 500+ KB. Isegi mõõdukam teema võib laadida 100-200 KB CSS-i, millest konkreetsel lehel kasutatakse 20%.

Brauser peab kogu faili alla laadima ja parsima enne kui leht renderdatakse. See blokeerib renderdamist – ja see kajastub otseselt FCP (First Contentful Paint) mõõdikus, mida Google hindab.

Modulaarne lähenemine – WordPress enqueue süsteem

WordPress wp_enqueue_style() on sisseehitatud süsteem CSS failide laadimiseks. Enamik arendajaid teab seda, aga kasutab seda ainult “laadi see CSS kõikjal”. Tegelik jõud on tingimuslikus laadimises.

Põhistruktuur

// child theme functions.php

function hnd_enqueue_styles() {

    // 1. Põhi CSS – laadib KÕIKJAL
    // Sisaldab ainult: fondid, värvid, navigatsioon, nupud, grid
    wp_enqueue_style(
        'hnd-core',
        get_stylesheet_directory_uri() . '/css/core.css',
        array(),
        '1.0.0'
    );

    // 2. Blogi CSS – ainult blogipostitustel ja -arhiivil
    if ( is_singular( 'post' ) || is_home() || is_category() || is_tag() ) {
        wp_enqueue_style(
            'hnd-blog',
            get_stylesheet_directory_uri() . '/css/blog.css',
            array( 'hnd-core' ),
            '1.0.0'
        );
    }

    // 3. WooCommerce CSS – ainult poe lehtedel
    if ( function_exists( 'is_woocommerce' ) && 
         ( is_woocommerce() || is_cart() || is_checkout() || is_account_page() ) ) {
        wp_enqueue_style(
            'hnd-shop',
            get_stylesheet_directory_uri() . '/css/shop.css',
            array( 'hnd-core' ),
            '1.0.0'
        );
    }

    // 4. Kontaktileht CSS – ainult kontaktilehel
    if ( is_page( 'kontakt' ) || is_page( 'pakkumine' ) ) {
        wp_enqueue_style(
            'hnd-contact',
            get_stylesheet_directory_uri() . '/css/contact.css',
            array( 'hnd-core' ),
            '1.0.0'
        );
    }

    // 5. Avaleht CSS – ainult avaleheküljel
    if ( is_front_page() ) {
        wp_enqueue_style(
            'hnd-home',
            get_stylesheet_directory_uri() . '/css/home.css',
            array( 'hnd-core' ),
            '1.0.0'
        );
    }

    // 6. Portfoolio CSS – ainult portfoolio lehtedel
    if ( is_post_type_archive( 'portfolio' ) || is_singular( 'portfolio' ) ) {
        wp_enqueue_style(
            'hnd-portfolio',
            get_stylesheet_directory_uri() . '/css/portfolio.css',
            array( 'hnd-core' ),
            '1.0.0'
        );
    }
}
add_action( 'wp_enqueue_scripts', 'hnd_enqueue_styles' );

Tingimusfunktsioonid – tööriistakast

WordPress pakub hulga sisseehitatud tingimusfunktsioone:

// Lehe tüübi järgi
is_front_page()          // avaleht
is_home()                // blogi pealeht
is_single()              // üksik postitus (mis tahes tüüp)
is_singular( 'post' )    // üksik blogipostitus
is_singular( 'page' )    // üksik leht
is_page()                // mis tahes leht
is_page( 'kontakt' )     // konkreetne leht pealkirja järgi
is_page( 42 )            // konkreetne leht ID järgi
is_page( 'kontakt-leht' ) // konkreetne leht slug-i järgi
is_category()            // kategooria arhiiv
is_tag()                 // sildi arhiiv
is_archive()             // mis tahes arhiiv
is_search()              // otsingutulemused
is_404()                 // 404 leht

// Custom post type
is_singular( 'portfolio' )           // üksik portfolio kirje
is_post_type_archive( 'portfolio' )   // portfolio arhiiv

// WooCommerce
is_woocommerce()   // mis tahes WooCommerce leht
is_shop()          // poe pealeht
is_product()       // tootelehekülg
is_product_category()  // toote kategooria
is_cart()          // ostukorv
is_checkout()      // kassa
is_account_page()  // konto leht

Inline CSS – millal mõistlik

Väikesed CSS failid (alla 5-10 KB) on mõistlikum laadida inline – otse HTML <head> sektsiooni. See eemaldab eraldi HTTP päringu, mis on kiirem.

function hnd_inline_critical_css() {
    // Loe CSS fail ja laadi inline
    $css_file = get_stylesheet_directory() . '/css/critical.css';

    if ( file_exists( $css_file ) ) {
        $css = file_get_contents( $css_file );
        echo '<style id="hnd-critical-css">' . $css . '</style>';
    }
}
add_action( 'wp_head', 'hnd_inline_critical_css', 1 );

Millal inline on mõistlik:

Fail on alla 10 KB
Sisu on kriitiline above-fold renderdamiseks (fondid, navigatsioon, hero elemendi baasstiilid)
Fail laeb igal lehel nagunii

Millal inline EI sobi:

Fail on suur (üle 15 KB) – paisutab HTML faili
Fail laeb ainult mõnel lehel – tingimuslik enqueue on parem

CSS failide struktuur praktikas

Hundikuu kasutab järgmist struktuuri:

child-theme/
  css/
    core.css          (18 KB) – fondid, värvid, nav, nupud, grid
    home.css          (8 KB)  – avalehekülje spetsiifilised stiilid
    blog.css          (6 KB)  – blogipostitus, arhiiv, kategoriad
    shop.css          (12 KB) – WooCommerce toodete lehed
    checkout.css      (5 KB)  – kassa ja ostukorv
    contact.css       (4 KB)  – kontakt ja Gravity Forms
    portfolio.css     (7 KB)  – portfoolio grid ja üksikleht
    critical.css      (3 KB)  – inline, renderdamiskriitiline

Kodulehel laadib: critical.css (inline) + core.css + home.css = kokku ~29 KB.
Poe tootelehel laadib: core.css + shop.css = kokku ~30 KB.
Blogipostituses laadib: core.css + blog.css = kokku ~24 KB.

Võrreldes Divi 500 KB-ga on see 94-96% vähenemine – iga lehekülje kohta.

WooCommerce vaikimisi CSS deaktiveerimine

WooCommerce laeb oma CSS faili (~50 KB) kõikjal vaikimisi. Kui kasutad custom shop CSS-i, saad selle deaktiveerida:

// Deaktiveeri WooCommerce vaikimisi CSS
add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );

Hoiatus: see eemaldab KÕIK WooCommerce stiilid. Kasuta ainult siis, kui oled kirjutanud täieliku custom shop CSS-i. Alternatiiv – deaktiveeri ainult kindlad WooCommerce CSS failid:

add_filter( 'woocommerce_enqueue_styles', function( $styles ) {
    unset( $styles['woocommerce-general'] ); // deaktiveeri üldine
    // jäta alles teised
    return $styles;
});

SEO seos – miks CSS koormus rankingut mõjutab

CSS koormus ei ole ainult kiiruse küsimus – see on otseselt SEO küsimus.

Google Core Web Vitals mõõdikud, mis mõjutavad rankingut:

FCP (First Contentful Paint) – kui kiiresti esimene sisu ilmub. Suur blokaarne CSS fail lükkab FCP edasi – brauser ei saa renderdada enne kui CSS on parsitud.

LCP (Largest Contentful Paint) – suurima sisuelemendi laadimisaeg. Google hindab alla 2.5 sekundi hea. Iga 100ms CSS parsimine on 100ms LCP viivitus.

TBT (Total Blocking Time) – aeg, mil põhithread on blokeeritud. Suur CSS fail blokeerib – suurem TBT = halvem interaktiivsus = halvem Core Web Vitals skoor.

Lighthouse Performance skoor on otseselt seotud nende mõõdikutega. Ja Lighthouse skoor mõjutab rankingut.

Lihtne seos: väiksem CSS → kiirem parsimine → parem FCP/LCP → parem Lighthouse → parem Google positsioon.

Kokkuvõte

Modulaarne CSS arhitektuur ei ole keeruline – see nõuab distsipliini. Üks CSS fail per funktsionaalsus, tingimuslik laadimine wp_enqueue_style() abil, kriitilised stiilid inline.

Tulemus on dramaatiline: 94-96% väiksem CSS koormus igal lehel, märgatavalt parem Lighthouse skoor, parem Core Web Vitals – ja otsene positiivne mõju Google rankingule.

See on töö, mida page builderid sinu eest ei tee – aga mis eristab professionaalselt ehitatud saiti genereeritud saidi-st.

Soovid, et ka sinu ettevõtte veebileht oleks kiirem ja kasutajasõbralikum. Võta Hundikuu meeskonnaga ühendust ning leiame lahenduse.