Kriitiline, oluline, valikuline – raamistik iga välise skripti jaoks. reCAPTCHA, YouTube embed, chat widget koodinäidetega.

Sisukord

Google Analytics, Facebook Pixel, cookie banner, chat widget, YouTube embed, reCAPTCHA – tüüpiline WordPress leht kogub aja jooksul kümmekond välist skripti. Igaüks eraldi lisatud, igaüks omal ajal näinud õigustatud vajadust. Kokku moodustavad need sageli suurema osa lehe koormusest kui kogu ülejäänud sisu kokku.

Oleme eelnevates artiklites vaadanud konkreetseid lahendusi – Google Analytics 4 paigaldust, Facebook Pixelit ja cookie bannerit – kõiki delayed load põhimõttel. See artikkel on raamistik, mis seob need lahendused ühtseks loogikaks ja laiendab seda teistele levinud skriptidele.

Kolm kategooriat – kriitiline, oluline, valikuline

Iga kolmanda osapoole skript kuulub ühte kolmest kategooriast. Kategooria määrab, millal skript peab laadima.

Kriitilised skriptid – laadi kohe

Skriptid, ilma milleta leht ei toimi õigesti. Kui need puuduvad, on funktsionaalsus katki, mitte ainult viivitatud.

Näited: WooCommerce checkout skriptid kassal, maksete töötlemise skriptid, teema enda funktsionaalsuse jaoks vajalikud skriptid.

Neid ei lükata edasi – need laadivad tavapärasel viisil, aga ainult lehtedel, kus neid vajatakse (mitte kõikjal).

Olulised skriptid – laadi mõne sekundi pärast

Analüütika ja jälgimisskriptid, mis on ärile olulised, aga mille mõne sekundiline viivitus ei mõjuta kasutajakogemust ega andmete kvaliteeti.

Näited: Google Analytics 4, Facebook Pixel, Google Ads konversioonide jälgimine.

Loogika: kasutaja ei märka, kas GA4 käivitub 0.1 sekundil või 3. sekundil pärast lehe laadimist. Andmed salvestuvad korrektselt mõlemal juhul. Aga see 3 sekundit annab lehele aega renderdada ilma väliste päringute koormuseta.

// Üldine muster – laadi pärast interaktsiooni VÕI ajalõppu
function hnd_delayed_script_loader() { ?>
<script>
(function() {
    var loaded = false;
    function loadScripts() {
        if (loaded) return;
        loaded = true;
        // Siia tuleb konkreetne skripti laadimiskood
    }
    ['mousedown', 'keydown', 'touchstart', 'scroll'].forEach(function(e) {
        document.addEventListener(e, loadScripts, { once: true });
    });
    setTimeout(loadScripts, 3000);
})();
</script>
<?php }
add_action('wp_footer', 'hnd_delayed_script_loader');

Valikulised skriptid – laadi ainult vajaduse hetkel

Skriptid, mis on seotud konkreetse elemendiga, mida kasutaja pole veel näinud ega kasutanud. Need ei peaks laadima enne, kui element ise on relevantne.

Näited: chat widget (laadi kui kasutaja kerib alla või klõpsab chat nupule), YouTube embed (laadi kui kasutaja klõpsab video pisipildile, mitte automaatselt), social share nupud (laadi kui kasutaja jõuab artikli lõppu), reCAPTCHA (laadi ainult lehtedel, kus vorm on olemas).

reCAPTCHA – valikuline, aga tihti valesti laaditud

reCAPTCHA on hea näide skriptist, mida laaditakse tihti kõikjal, kuigi see on vajalik ainult vormidega lehtedel.

add_action('wp_enqueue_scripts', 'hnd_recaptcha_conditional', 20);
 
function hnd_recaptcha_conditional() {
    // Laadi reCAPTCHA ainult lehtedel, kus on kontaktvorm
    $recaptcha_pages = array('kontakt', 'pakkumine', 'registreeru');
    
    if ( is_page($recaptcha_pages) ) {
        return; // Lase pluginal/koodil reCAPTCHA laadida normaalselt
    }
    
    // Kõikjal mujal – eemalda
    wp_dequeue_script('google-recaptcha');
    wp_dequeue_script('gravity_forms_recaptcha');
}

Gravity Forms, Contact Form 7 ja teised vormipluginad laadivad reCAPTCHA sageli globaalselt, “igaks juhuks”. Kontrolli Perfmatters Script Manager’iga (või lihtsalt GTmetrix Waterfall’iga), kas reCAPTCHA laadib lehtedel, kus vormi ei olegi – see on levinum kui arvata võiks.

YouTube embed – automaatne mängimine on jõudluse vaenlane

Tavaline YouTube <iframe> embed laadib YouTube’i enda mängija, mis toob kaasa ligikaudu 500 KB JavaScript’i – isegi kui video pole veel mängitud.

Parem lähenemine: kuva staatiline eelvaatepilt, laadi tegelik YouTube embed alles kliki peale.

function hnd_youtube_lazy_embed($video_id, $title = '') {
    ?>
    <div class="hnd-youtube-lazy" data-video-id="<?php echo esc_attr($video_id); ?>">
        <img src="https://i.ytimg.com/vi/<?php echo esc_attr($video_id); ?>/maxresdefault.jpg" 
             alt="<?php echo esc_attr($title); ?>" loading="lazy">
        <button class="hnd-play-button" aria-label="Mängi video">▶</button>
    </div>
    <script>
    document.querySelectorAll('.hnd-youtube-lazy').forEach(function(el) {
        el.addEventListener('click', function() {
            var videoId = this.dataset.videoId;
            var iframe = document.createElement('iframe');
            iframe.src = 'https://www.youtube.com/embed/' + videoId + '?autoplay=1';
            iframe.setAttribute('allow', 'autoplay; encrypted-media');
            iframe.setAttribute('allowfullscreen', '');
            this.replaceWith(iframe);
        }, { once: true });
    });
    </script>
    <?php
}

Tulemus: 500 KB JavaScript’i asemel laadib ainult üks pisipilt (10-30 KB), kuni kasutaja tegelikult soovib videot vaadata.

Chat widget – laadi interaktsiooni või viivituse peale

HubSpot, Intercom, Tidio ja teised chat lahendused laadivad tavaliselt 100-250 KB JavaScript’i kohe lehe avanedes – ehkki enamik külastajaid ei ava chatti üldse esimese paari sekundi jooksul.

function hnd_chat_widget_delayed() { ?>
<script>
(function() {
    var loaded = false;
    function loadChat() {
        if (loaded) return;
        loaded = true;
        // Chat widget'i enda laadimiskood siia
    }
    
    // Laadi kui kasutaja kerib alla 50% lehest
    window.addEventListener('scroll', function() {
        if ((window.scrollY / document.body.scrollHeight) > 0.5) {
            loadChat();
        }
    });
    
    // Või kui kasutaja jääb lehele 8 sekundiks
    setTimeout(loadChat, 8000);
})();
</script>
<?php }
add_action('wp_footer', 'hnd_chat_widget_delayed');

Kuidas otsustada, mis kategooriasse skript kuulub

Küsi iga skripti kohta:

Kas leht toimib ilma selleta? Kui ei toimi (checkout, maksed) → kriitiline, laadi kohe, aga ainult vajalikel lehtedel.

Kas väike viivitus (2-3 sekundit) mõjutab andmete kvaliteeti või funktsionaalsust? Kui ei mõjuta (analüütika, jälgimine) → oluline, delayed load.

Kas skript on seotud elemendiga, mida kasutaja pole veel näinud/kasutanud? Kui jah (chat, video, share nupud) → valikuline, laadi interaktsioonil.

Kas skript on vajalik ainult teatud lehtedel? Kui jah (reCAPTCHA vormidel, WooCommerce skriptid poe lehtedel) → tingimuslik laadimine is_page(), is_woocommerce() või sarnaste kontrollidega, olenemata kategooriast.

Audit – kuidas leida, mis hetkel laadib

GTmetrix Waterfall näitab täpset järjekorda ja ajastust, millal iga skript laadib. Otsi skripte, mis laadivad esimeste sekundite jooksul, aga ei ole kriitilised.

Chrome DevTools → Network → filtreeri JS järgi, sorteeri suuruse järgi. Suurimad failid on esimesed kandidaadid delayed loadiks.

Perfmatters Script Manager annab visuaalse ülevaate, mis laadib igal lehel, ja lubab ühe klõpsuga tingimuslikult keelata.

Kokkuvõte

Kolmanda osapoole skript ei ole kas “hea” või “halb” – see on kas õigel ajal laaditud või valel ajal laaditud. Sama Google Analytics kood, mis kohe laadituna kahjustab PSI skoori, ei tee seda 3-sekundilise viivitusega.

Raamistik on lihtne: kriitiline → kohe, aga tingimuslikult; oluline → delayed load; valikuline → interaktsioonil. Iga skript, mida sinu saidile lisad, peaks läbima selle kolmeastmelise küsimuse enne kui see läheb wp_head või wp_footer sisse.