Kako uporabiti odloženo razčlenjevanje JavaScripta, da izboljšate svoje spletno mesto

Muneeb WordPress Tutorials Mar 4, 2022

Hitrost strani je eden najpomembnejših vidikov vašega spletnega mesta. Ne glede na to, koliko ponuja vaše spletno mesto, nihče ne mara čakati nekaj minut, preden se vaše spletno mesto naloži. Hkrati je večja verjetnost, da bo obdržala obiskovalce, če se vaše spletno mesto nalaga hitreje.

Poleg tega hitrost strani upošteva tudi uvrstitev vašega spletnega mesta v iskalnikih. Pajkom pomaga razumeti, kako učinkovito in vzdrževano je vaše spletno mesto. V tej vadnici bomo videli, kako odložiti razčlenjevanje JavaScripta v WordPressu.

Zakaj je pomembno odložiti razčlenjevanje JavaScripta?

Če želite v celoti razumeti koncept odloži razčlenjevanje JavaScripta, boste morali razumeti, kako brskalnik upodablja spletno stran. Ko vaš brskalnik zahteva stran, jo vaš spletni strežnik pošlje nazaj, ki se prenese v obliki dokumenta HTML.

Dokument HTML vsebuje več elementov in virov, ki jih brskalnik prebere elemente, medtem ko se dodatni viri prenesejo. In končno, stran je upodobljena šele, ko so vsi viri preneseni.

Ustvarite neverjetna spletna mesta

Z najboljšim brezplačnim graditeljem strani Elementor

Začni zdaj

Viri, ki so večji, potrebujejo veliko več časa za prenos. Večino teh virov predstavljajo slike, zato je pomembno, da svoje slike optimizirate. Poleg tega lahko odložite prenos nepotrebnih skriptov, tako da jih prepoznate in pospešite svojo spletno stran.

Kako ugotoviti, katere skripte je treba odložiti?

Za minimalno spletno mesto, ki ne uporablja veliko JavaScripta, morda ni skriptov, ki bi bili pomembni za nalaganje strani. Nasprotno, za precej zapleteno spletno mesto je pomembno, da ima podrobno analizo vseh skriptov, da razumemo, kateri so bistveni za nalaganje strani.

Prvi način za odpravo nepotrebnih skriptov je odstranjevanje skriptov enega za drugim in istočasno preverjanje morebitnih napak v konzoli JavaScript. Hkrati ta metoda zahteva precej truda in znanja o JavaScriptu.

Druga metoda je uporaba orodja za testiranje hitrosti za oceno, kateri skripti so bistveni za nalaganje strani. Eno od teh orodij vključuje GTmetrix , kjer morate samo vnesti URL svojega spletnega mesta in prikazati rezultate. Na zavihku Hitrost strani boste našli razdelek Odloži razčlenjevanje za JavaScript, ki bo po razširitvi prikazal seznam nepotrebnih skriptov, naloženih med upodabljanjem vaše strani.

S pomočjo informacij lahko odstranite skripte, ki ne upoštevajo upodabljanja vaše strani.

Odloži ali Asinhronizirani atributi

Obstajata dva načina za odpravo prenosa skriptov, ko se strani upodabljajo.

Prvič, z dodajanjem atributa Defer oznaki skripta lahko zagotovite, da brskalnik ne prenese virov, razen če je razčlenitev strani opravljena. Ko sta upodabljanje in razčlenitev strani končana, lahko brskalnik prenese vse odložene skripte. Spodaj je vzorčna oznaka skripta, ki prikazuje, kako dodati atribut odlaganja strani HTML.

<script src="path/to/script" defer></script>

Po drugi strani pa lahko oznaki skripta dodate async atribut. To bo vodilo brskalnika, da naloži skript ločeno. To pomeni, da bo brskalnik začel prenašati vire, ko naleti na kodo, hkrati pa ločeno razčlenjuje HTML. Spodaj vzorčni skript prikazuje, kako dodati asinhronizirani atribut.

<script src="path/to/script" async></script>

Oba atributa se razlikujeta po načinu nalaganja virov. Za minimalno spletno mesto ni lahko opaziti razlik med atributi async in defer. Hkrati je za bolj zapleteno spletno aplikacijo priporočljiva uporaba tehnike odlaganja.

Odložite razčlenjevanje JavaScripta

Tu sta dve metodi, ki ju lahko uporabite za odloži razčlenjevanje JavaScripta.

1. Prilagodite datoteko functions.php

Če ste vajeni razvoja WordPress-a, morate vedeti, da ni dobra ideja, da skripte dd neposredno dodajate oznaki HTML. Lahko pa uporabite vgrajene funkcije WordPress, da zahtevate vire.

Če želite svojim skriptom dodati atribut async ali defer, morate v datoteko functions.php teme WordPress dodati naslednjo funkcijo.

add_filter('script_loader_tag', 'add_defer_tags_to_scripts');
function add_defer_tags_to_scripts($tag){
    # List scripts to add attributes to
    $scripts_to_defer = array('script_a', 'script_b');
    $scripts_to_async = array('script_c', 'script_d');
 
    # add the defer tags to scripts_to_defer array
    foreach($scripts_to_defer as $current_script){
        if(true == strpos($tag, $current_script))
             return str_replace(' src', ' defer="defer" src', $tag);
    }
 
    # add the async tags to scripts_to_async array
    foreach($scripts_to_async as $current_script){
        if(true == strpos($tag, $current_script))
             return str_replace(' src', ' async="async" src', $tag);
    }
     
    return $tag;
 }

Poskrbite, da ste postavili vsak skript v čakalno vrsto, preden oznakam skripta dodate atributa defer in async.

add_action('wp_enqueue_scripts', 'enqueue_custom_js');
function enqueue_custom_js() {
    wp_enqueue_script('script_a', get_stylesheet_directory_uri().'/script_a.js');
    wp_enqueue_script('script_b', get_stylesheet_directory_uri().'/script_b.js');
    wp_enqueue_script('script_c', get_stylesheet_directory_uri().'/script_c.js');
    wp_enqueue_script('script_d', get_stylesheet_directory_uri().'/script_d.js');
}

2. Vtičniki za odloženo razčlenjevanje JavaScripta

Razumljivo je, da vsi nimajo dovolj znanja in spretnosti, da bi sledili zgornji metodi. Zato je za začetnike mogoče uporabiti nekatere vtičnike za odlaganje razčlenjevanja JavaScripta.

Asinhroniziran JavaScript

Async JavaScript je brezplačen vtičnik WordPress za uporabo, ki ga lahko namestite na svoj WordPress za izvedbo naloge.

Ko namestite in aktivirate vtičnik, pojdite na nastavitve vtičnika in potrdite možnost Omogoči async JavaScript .

Pomaknite se navzdol, da izberete med asinhronizirano ali odloženo metodo.

Pomaknite se navzdol za naprednejše možnosti, kjer lahko ločeno dodate ali odstranite skripte za asinhronizacijo in odložitev. Poleg tega lahko odstranite vtičnike in teme iz sprememb, ki jih bo ta vtičnik naredil.

Samodejno optimiziraj

Autoptimize je še en vtičnik, ki omogoča odloži razčlenjevanje JavaScriptov.

Po namestitvi in ​​aktivaciji vtičnika preverite možnost Optimize JavaScript Code na strani z nastavitvami . To bo odložilo vse nepotrebne skripte in jih premaknilo v nogo.

Dodate lahko tudi skripte za atribut async na zavihku Dodatno .

Lahko uredite datoteko functions.php ali uporabite vtičnike, kot sta Autoptimize in Async JavaScript . To sta dve zanesljivi metodi za dodajanje atributa async in defer v oznake skripta.

Upamo, da vam bodo te tehnike pomagale pospešiti vaše spletno mesto. Pridružite se nam na Facebooku in Twitterju , da boste obveščeni o naših objavah.